Twitterのツイートを配信画面に速報表示する

今回はTwitterの特定のハッシュタグでのツイートを
画面に速報表示するギミックをご紹介します。

よくテレビなどで画面に流れているようなアレです。

ツイート数の増加から、放送の視聴数へのリーチが見込まれます。

前提条件

Twitter Developersに登録・審査が通っていてアプリを作成（各種APIキー取得）が完了している状態。
（Twitterにやりたい事を英語で送り審査を受ける必要があります。）

仕組み

OBSやXSplit等の配信ソフトで動かす想定で、全てローカル内のHTMLで動作します。
Node.jsを使わずに完全にフロント側だけで動作できるようになっているのがミソです。
（そもそもクライアント側にAPIキーを保存しないといけないので、あまりこういう使い方をする人はいないようで情報が見つかりませんでした）

最近覚えたて(笑)のclassを使ってみました！使い方が合ってるかはわかりませんw

class Twitter{
    constructor(){
        this.consumerKey = consumerKey,
        this.consumerSecret = consumerSecret,
        this.accessToken = accessToken,
        this.tokenSecret = tokenSecret;
    }
 
    api(url, param){
        let accessor = {consumerSecret: this.consumerSecret, tokenSecret: this.tokenSecret};
        
        let data = {
            method: 'GET', 
            action: url,
            parameters: {
                oauth_version: '1.0',
                oauth_signature_method: 'HMAC-SHA1',
                oauth_consumer_key: this.consumerKey,
                oauth_token: this.accessToken
            }
        };
        
        for(let key in param) data.parameters[key] = param[key];
        
        OAuth.setTimestampAndNonce(data);
        OAuth.SignatureMethod.sign(data, accessor);
        let newUrl = OAuth.addToURL(data.action, data.parameters);
        
        let options = {
            type: data.method,
            url: newUrl,
            dataType: "jsonp",
            jsonp: false,
            cache: true
        };
        
        $.ajax(options);
        return;
    }
}

認証などはライブラリに丸投げですが(oauth.jsとsha1.jsを使用)
あとは↓こうするだけでTwitter APIを使うことができます。

let twitter = new Twitter();
twitter.api('API URL', {パラメーター});

例えば、特定のハッシュタグ（例えば #とかい育ち）を検索したい場合は、

twitter.api('https://api.twitter.com/1.1/search/tweets.json', {
    q: "#とかい育ち -RT", // -RTを入れることでRTを含めない
    result_type: "mixed",
    count: 10, // 新着10件を取得
    since_id: 0, // 続きを取得したい時はこの数字を変える
    callback: "コールバック先関数"
});

こんな感じで取得できます。
取得サンプルや他のAPI URLなどは公式のドキュメントを参照。

あとは画面に表示するための演出を作れば完了です！

GitHubに実際に動くサンプルをアップしたのでよければご利用ください！
注意点としては、API側の制限でこのsearch/tweets.jsonは15分辺り180回しか叩けないので、結構簡単に制限にかかります。
7秒に1回APIを叩く仕様(128回/15分)になっていますが、
OBSやXSplitでプレビューなどを表示している場合、二重に動作してAPIの制限にかかる場合があります。