アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

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形式で返されますので、次のサイトで確認を行います。

http://jsoneditor.net/

上部にあるテキストボックスにダミー応答ファイルの内容を貼り付け、[Read JSON/XML]ボタンをクリックすると、下に解析結果が表示されます。




ダミー応答ファイルの解析結果
この結果を見ると、resultsという配列の中にtextプロパティーとしてツイート内容が入っていることが分かります。

残念ですが、JSON形式の応答には、ツイートへのリンクは含まれていません。

index.html

index.htmlは

http://docs.monaca.mobi/sampleapp/002twitter/twitter/

のものをコピーします。

機能が同じなので、全く手を加える必要はありませんが、文書化の意味で、titleタグのみ変更します。

jQueryJSON解析

XML形式のときと同様にJSON解析はjQueryで行います。

$.getJSON(
url,
function(json) {
parseJson(json);
}
);
JSON解析メソッドになります。

コードの全文は次のようになります。




main.js全文
jQueryのメソッドがパースを行ってくれるので、パースの必要はありません。

XML応答にはツイートへのリンクが含まれていますので、XML応答のサンプルからツイートのリンクを除いたソースと比較すると次のようになります。


XML応答解析とJSON応答解析の比較
プロパティーを参照する形になりますので、XML応答と見比べると、コードが直感的にに記述できます。機能が同じならJSON形式のAPIを利用することをお勧めします。

ソースファイル、APKファイルは以下からダウンロードしてください。なお、ソースファイルにはダミー応答ファイル(twitter.json)が入っていませんので、別途作成してください。

ソースファイル

apkファイル(デバッグビルド)