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

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

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


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

前提条件

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

仕組み

OBSXSplit等の配信ソフトで動かす想定で、全てローカル内の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.jssha1.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.json15分辺り180回しか叩けないので、結構簡単に制限にかかります。
7秒に1回APIを叩く仕様(128回/15分)になっていますが、
OBSXSplitでプレビューなどを表示している場合、二重に動作してAPIの制限にかかる場合があります。

また、7秒間で10個以上ツイートされた場合の処理や、
表示が追い付かないほど大量にツイートがある場合の処理は、必要に応じて導入して下さい。

以上です。
よかったらTwitter / YouTubeなど登録して頂けると嬉しいですー!

投稿者

じん
「とかい育ち」という3人組でゲーム実況やってます!
生放送の画面作りにこだわりだして、そのことをブログに書かせてもらってます。
プログラミングは独学で素人レベルですが、動けばいいの精神で色々作ってます!

コメントを書く

*
*
* (公開されません)