#daiizメモ

Scrapboxに夢中

ChromeアプリからTwitter search APIを呼ぶ方法

Chromeアプリは Content Security Policy(CSP)*1が厳しいので、通常のウェブページと同じような方法でJavaScriptを書いてTwitter APIを呼ぶことができません。

Twitter APIを呼ぶということは、アプリに外部からのリソースを取り込むということになります。これを通常のウェブページで実現するためには、<img><script>などのタグでお馴染みのsrc属性に、リソースのURLを指定してあげるだけでOKです。これと同等のことをChromeアプリで行うための方法をご紹介します。

f:id:daiiz:20141229020445j:plain

ここからは、ウェブページとChromeアプリでのTwitter search APIの呼び出し方を比較してみたいと思います。この記事の最後に、Chromeアプリ用のソースコードのフルバージョンサンプルを添付しましたのでよろしければご利用ください(LICENSE: MIT)。

ウェブページver

Twitter APIkeyqueryなどを指定した後、JavaScriptで動的にscriptタグを生成します。続いてsrc属性にAPIのURLを与えます。最後に、このタグをHTML中に埋め込みます。

https://gist.github.com/69d362d0274297aa3269

Chromeアプリver

scriptタグを動的に生成しても外部のURLに対してsrc属性が使用できないので、この方法は諦めます。代わりにXMLHttpRequest()を用います。

https://gist.github.com/a2533103ff5c2c68aba7

これらをふまえて、、

ChromeアプリでTwitterを検索するためのサンプルコード

以下のサンプルプログラム内では、Twitter APIの認証処理を簡潔にしてくれるライブラリ「oauth.js」と「sha1.js」を使用させていただきました。

https://gist.github.com/daiz713/8e75094f9d5b8bf4d1c8

以上です、ありがとうございました。