2024
11
22
2011
04
29
jQuery.getJSON の利用。
前々回は、「東京電力需給状況」のページを紹介し、前回は、そのデータ元である「電力使用状況API」について説明しました。
今回は、「電力使用状況API」からのデータを JSON で取得する方法を jQuery の getJSON メソッドで取得する方法を説明します。
Google Ajax API からの jQuery のロード
私は最近、jQueryは、Google Ajax API からロードするようにしています。Google Ajax API を利用するメリットは、それが普及すればするほど、ネット全体のキャッシュ効果が高まることが挙げらています。
また、複数のサイトを運営している場合には、それごとに jQuery のファイルを置く必要がなくなること、それに伴い、そのファイルへのパスをいちいち確かめる必要がなく、同一の記述がのままでよいという作業面のメリットもあります。 ほとんどの場合、次のように記述するだけです。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" > </script>
バージョンはいくつかあります。また、"jsapi"をロードしている場合には、別の記述方法で jQuery をロードできます。
<script
src="http://www.google.com/jsapi"
type="text/javascript">
</script>
<script type="text/javascript">
google.load("jquery", "1.5");
</script>
サブバージョンの指定を省略すると、指定した部分までの最新バージョンを読み込めるようです。
jQuery.getJSON()
基本の構文は次のとおりです。
$.getJSON(url,data,callback)
urlにクエリストリングが含まれている場合には、次の形でもOKです。
$.getJSON(url,callback)
ただし、別のドメインのデータにリクエストする場合は、これに手を加える必要があります。
$.getJSON(url+"&callback=?",data,callback)
コールバック関数名を指定する部分を"?"にします。この"?"の場所が jQuery が裏で内部的に付けるコールバック関数名に置き換わります。
jQuery.getJSON()で 東京電力の使用量データを取得する。
「電力使用状況API」のリクエストURLは、前回紹介しました。これを jQuery を使ってリクエストする場合には、次のように記述します。
var url="http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage?";
var data={
appid:あなたのアプリケーションID,
output:"json"
};
$.getJSON(url+"&callback=?",data,callback);
次のような記述も可能です。
var url="http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage? appid=あなたのアプリケーションID&output=json&callback=?"; $.getJSON(url,callback);
コールバック関数を定義する。
JSONPですから、データを受け取った際の処理をコールバック関数で定義しておく必要があります。返されるデータは、次のようなハッシュオブジェクトの形ですので、それを念頭に使用するデータを取得します。
{"ElectricPowerUsage":
{"Area" :"tokyo",
"Usage" :{"@unit":"kW","$":32910000},
"Capacity":{"@unit":"kW","$":40000000},
"Date":"2011-04-27",
"Hour":19
}
}
返されるデータを resonse で受けるとすると次のように記述します。
callback=function(response){
var e=response.ElectricPowerUsage;
var text=e.Date + ' '+ e.Hour + 'の電気使用量は' + e.Usage.$+e.usage.@unit +'です。':
alert(text);
}
次回は、Google Chart API を利用したデータのグラフ化をテーマにします。
PR
2011/04/29 (Fri.) Trackback() Comment(0) Google Ajax API
2010
08
31
Google Ajax API 動的ロード
Google Ajax API を利用するには、まず HEAD要素内に次の記述をすることとされています。
<script type="text/javascript"
src="http://www.google.com/jsapi?key=ABCDEFG"></script>
このような静的記述の他に、Google Ajax API には、動的に Google AJAX API を導入する方法が用意されています。 その説明は「Google AJAX API の使用 - 動的ロード」にあります。
動的ロードを利用すれば、HTMLと Google Ajax API を分離し、プラグインのような形で JavaScript アプリケーションを提供することが可能になります。
では、動的ロードの流れを簡単に説明しましょう。
１ SCRIPT要素の生成とHEAD要素への追加
document.createElement('script')で SCRIPT要素を生成します。
そして、その src属性を
"http://www.google.com/jsapi?key=ABCDEFG&callback=loadPackage"
のように指定します。
callbackパラメータを記述することで、Google Ajax API のロード後にそのコールバック関数が実行されます。
生成した SCRIPT要素をHEAD要素に追加します。
２ コールバック関数
上記の src要素で記述したコールバック関数を定義します。
通常、パッケージをロードする記述をします。
マップパッケージをロードする場合には、次のような記述になります。
function loadPackcage(){
google.load("maps", "2", {"callback" : packageLoaded});
}
ここで大事なのは、google.load の３番目の引数であるオブジェクトの中で、 パッケージのロード後に実行する関数を callback オプションで指定することです。
３ パッケージロード後実行関数
パッケージのロード後に実行される関数を定義します。
function packageLoaded() {
}
ロードされたパッケージのクラスを利用して、処理を記述します。
このように二度に渡ってコールバック関数を利用することによって、Google Ajax API を利用することができます。
次回は、この動的ロードによる Google Ajax API の利用例を紹介しましょう。
2010/08/31 (Tue.) Trackback() Comment(0) Google Ajax API
