Lesson 02 Twitter APIで学ぶ Web API活用術 - Webデザイン表現&技法の新・スタンダード・インタラクション編

Webデザイン 表現&技法の 新・スタンダード

Lesson 3

Twitter APIで学ぶ Web API活用術

	制作・文			河原 覚（株式会社アークフィリア）
＞	To Use			CSS | JavaScript
＞	Browser			IE 6over | Firefox 3over | Safari 5over

魅力的なWebサービスが続々と出現し、そのコンテンツにアクセスするためのAPIも多くが公開されている。その中でも特に需要の多いTwitterを例に、基本的なWeb APIの利用法を紹介しよう。

Twitter のAPI には、認証を行うことでより多くの制御を可能にするREST APIと、認証不要で検索結果を返すのみの Search APIがあるが、ここではより簡単に扱えるSearch APIを見ていこう。ドキュメントはhttp://dev.twitter.com/doc/get/search にある【1-1】。


【1-1】Twitter Serach APIのドキュメント

Web API は用途や言語に応じて複数の フォーマットでデータをやりとりできることが多い。Search APIではATOMもしくはJSONというフォーマットでデータを取得することができる。ATOMはブログのフィード配信などにも使われるXMLのフォーマットだ。JSONはJavaScriptのオブジェクト記法を参考に作られたフォーマットで、特にJavaScriptにおいては構造をそのまま扱うことができるなど有利な点が多い。JavaScriptでの開発の際はJSONを選んでおけばよいだろう【2-1】【2-2】。


【2-1】JSONデータの例。送信時は改行やインデントなどはなく非常にコンパクトなデータとして送信される


【2-2】JSONデータを整理してみるとJavaScriptのオブジェクト記法であることがよくわかる


【2-3】JSON によるTwitter Search API については「Twitter API Wiki」にも載っているので参考にして欲しい。http://apiwiki.twitter.com/w/page/22554756/Twitter-Search-API-Method:-search

Ajax通信の特徴の1つとしてクロスドメイン間での通信ができないという制限がある。しかしJSONを利用したJSONPと いう仕組みによってドメインを超えた通信を行うことができる。JSONPでの通信時には、通信完了後にデータを呼び出すためにコールバック関数名が必要となる【3-1】 【3-2】。


【3-1】JSONPの送信時形式の例


【3-2】JSONデータをコールバック関数で覆ったようなフォーマットであることがわかる

Search API の具体的な使い方だが、http://search.twitter.com/search.format に必要なパラメーターをセットしてGETでリクエストすればよい【4-1】。頻繁に使うのは検索クエリとなるq、言語を指定するlang、そしてJSONP通信時のコールバック関数を指定するcallbackだろう【4-2】。通信の形式をATOMもしくはJSONに設定するには、リクエスト先URLの拡張子、.formatの部分を.atomもしくは.jsonにするだけでよい【4-3】。


【4-1】「MdN」を、言語を「日本語」に設定しコールバック関数として「serachResponse」を指定した場合のURL


【4-2】よく使うパラメーター


【4-3】出力形式の設定

jQueryのgetJSONメソッドで実装していく。jQueryでgetJSONメソッドを用い、JSONP通信を行う場合はリクエスト先URLにcallback=?というプロパティをセットするのが特徴だ【5-1】。このプロパティをセットした上で通信を行うとjQueryが適当な名前のコールバック関数名を自動的に設定し、JSONP通信ができるようにしてくれる【5-2】。


【5-1】このようにGET変数のパラメータとしてcallback=?を設定する


【5-2】jsonp＋数字列の形式のコールバック関数名が振られたJSONP形式のデータとなる

続けてリクエストするクエリなどのパラメータ、データ受信時のコールバック関数を指定する【6-1】 。Search APIで受信したデータは、results 配列に各ツイートがオブジェクトとして格納される構造となるので、返ってきたresultsをfor文で走査して各ツイートデータを使用するだけで利用できる【6-2】【6-3】。

以上がTwitter Search API を例としたWeb APIの利用法だ。その他のサービスを利用する際でもドキュメントを確認し、適切なデータフォーマットを選ぶことで手軽にさまざまなサービスをWebサイトに取り入れることができるだろう。



【6-1】getJSONメソッドで利用できる引数例


【6-2】getJSONでの実装例


【6-3】