JSON形式のWeb APIを利用する
こんにちは、サンプルアプリ開発者の山田健一です。
「Monacaでツイッター検索アプリを作る」
http://docs.monaca.mobi/sampleapp/002twitter/twitter/
ではXML形式の応答を返すWebAPIの利用について解説しましたが、JSON形式で応答を返すWebAPIも多くあります。
JSONについては下記のサイトが分かりやすく解説していますので、参照してください。
http://www.json.org/json-ja.html
今回は、JSON形式で応答を返すWebAPI利用について解説したいと思います。
題材は同じくツイッター検索です。ツイッター検索ではJSON形式で応答を返すWebAPIも用意してありますので、相違を見比べるには都合がよいからです。
機能は同じなので、XML版のツイッター検索を改造して作成します。
ツイッター検索APIの例
JSON形式を返すツイッター検索のAPI例は次のようになります。
http://search.twitter.com/search.json?lang=ja&rpp=20&q=%23AKB
この例は、「#AKB」を含むツイートを検索する例になります。
「rpp=20」は「1ページあたり20件取得する」という指定になります。 「page=1」などと対になるものですが、「page=」を省略したときは「page=1」とみなされます（例では「page=」を省略しています）。
「q=」に続けて検索文字を指定しますが、UTF-8でURLエンコードした文字列である必要があります。「q=#AKB」ではなく、「q=%23AKB」となっているのはそのためです。
「q=xxx」の指定は必須となっています。
ダミー応答ファイル（twitter.json）の作成
XML形式のWEB APIのときと同様、クロスドメイン問題対策としてMonacaデバッガーで動いて いるときにアクセスするダミー応答ファイルを作成します。
http://search.twitter.com/search.json?lang=ja&rpp=20&q=%23AKB
にブラウザでアクセスし、応答のソースをテキストファイルに貼り付け、twitter.jsonとして保存してください。このダミー応答ファイルはwww直下にアップロードしてください。
応答の解析
ダミー応答ファイルを利用して、応答を解析しましょう。応答はJSON形式で返されますので、次のサイトで確認を行います。
上部にあるテキストボックスにダミー応答ファイルの内容を貼り付け、[Read JSON/XML]ボタンをクリックすると、下に解析結果が表示されます。
ダミー応答ファイルの解析結果
この結果を見ると、resultsという配列の中にtextプロパティーとしてツイート内容が入っていることが分かります。
残念ですが、JSON形式の応答には、ツイートへのリンクは含まれていません。
index.html
index.htmlは
http://docs.monaca.mobi/sampleapp/002twitter/twitter/
のものをコピーします。
機能が同じなので、全く手を加える必要はありませんが、文書化の意味で、titleタグのみ変更します。
jQueryでJSON解析
XML形式のときと同様にJSON解析はjQueryで行います。
$.getJSON(
url,
function(json) {
parseJson(json);
}
);
がJSON解析メソッドになります。
コードの全文は次のようにな ります。
main.js全文
jQueryのメソッドがパースを行ってくれるので、パースの必要はありません。
XML応答にはツイートへのリンクが含まれていますので、XML応答のサンプルからツイートのリンクを除いたソースと比較すると次のようになります。
XML応答解析とJSON応答解析の比較
プロパティーを参照する形になりますので、XML応答と見比べると、コードが直感的にに記述できます。機能が同じならJSON形式のAPIを利用することをお勧めします。
ソースファイル、APKファイルは以下からダウンロードしてください。なお、ソースファイルにはダミー応答ファイル（twitter.json）が入っていませんので、別途作成してください。
