jQueryでAJAX入門2回目:JSON形式を扱う
前回はXML形式のRSSをAJAXで取得してリストで表示させました。今回はXMLではなく、JSON(ジェイソン)と呼ばれる形式を扱い、同じようにリストを表示させてみることにします。今回ご紹介するJSON形式も、前回紹介のXML形式同様jQueryで取得・表示をさせることができます
JSON?
JSONはJavaScript Object Notationの略で、JavaScriptで簡単に扱えるテキストベースのデータフォーマットです。たとえば下記のような構造になっています。
- オブジェクトは{}で全体を囲む
- キーと値のペアはコロン(:)で区切る
- 複数指定はカンマ(,)で区切る
- キーには文字列のみ使用可能
JSONの例
JavaScriptのオブジェクトと配列の構造と同じですが、例を見てみましょう。
オブジェクト例
配列の例
それでは早速先ほどのサンプルを表示させる簡単なサンプルを見てみましょう。
JSONをリストで表示させるサンプル
JSONは先ほどJSONサンプルを利用して、その中身をリストに入れて表示してみることにします。
$.getJSON()メソッド
JSON形式を取得する場合は、前回でも利用した$.ajax()メソッド利用でも実現可能なのですが、JSONでは、専用に$.getJSON()メソッドが用意されています。
$.ajax()メソッドを使うよりも手続きが簡単です。
早速サンプルを見てみましょう。
前回のXMLのサンプル時には、コード内でloading中の表示をさせましたが、今回はHTML側にloading中の画像をいれておき、$.getJSON()メソッドの最初で、その画像部分を.remove()メソッドで削除しています。その後、リストを表示させるためのUL要素を追加し、itemsごとにLI要素に入れてUL要素へ追加していくようにしました。
items中の複数の中身を一つのリスト中に入れてしまっているのですが、今回のサンプル用に簡易的に表示させたものです。
スキルだけ「.join(',')」を使っているのですが、これはスキルの項目のみ配列で複数中身があるので、それを一度に表示させるために中身を.join(',')で結合させているためです。
$.getJSON()を使わない場合
JSONデータはJavaScriptで簡単に扱えるようになっているデータでもあるので、$.getJSON()で利用せずとも、データの形によっては、HTMLのSctiptタグで読み込み利用する方法もあります。下記のように、変数として指定しておきます。
上記のデータをScriptで読み込みます
これでデータを扱う準備ができたので、あとは通常通りコードで扱うだけです。
この方法だと、$.getJSON()や$.ajax()を使わずとも表示が可能です。
Twitterの自分の発言をサイトに表示させる
ここまで、JSON形式のデータの利用方法や$.getJSON()メソッドの利用方法を説明してきました。今回の最後にこれらの方法を利用してTwitterの自分の発言をサイトに表示させる方法をご紹介します。
Twitter APIの利用
今では日本でも多くの人が利用するようになったTwitterですが、そのTwitterには様々なAPIが用意されています。自分の発言もJSON形式で利用することができるようになっているので、それを利用したサンプルをご紹介します。
特定ユーザーの発言一覧
特定ユーザーの発言一覧を表示させるには、下記URLを$.getJSON()メソッドで読み込むことで利用できます。
上記のURL中のh2hamとなっているところにユーザー名やユーザーIDを入れることで、特定のユーザーを指定できます。また、最後に「callback=?」と入れることで、他ドメイン中のJSONデータでも利用できるようになります[1]。
プラグイン化
Twitterをリストで表示する、という機能は実装できたので、今回ももっと様々な場面で使えるようにプラグインにしてみましょう。まずは完成したソースコードを見てください。
実行する場合は以下のように実行します。
今回は前回利用した書き方ではなく、その前まで利用していた書き方に戻しています。その他の部分は、$.getJSON()メソッドを使う部分や細かい点などは今回用担っていますが、前回の内容と多くは同じになっています。
Twitterの投稿はうまく表示されましたでしょうか?Twitterをよく利用して、その投稿内容をサイトにも表示しておきたいような場合にぜひご利用下さい。