忍者ブログ

2024
03
28

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

2024/03/28 (Thu.)

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 アプリケーションを提供することが可能になります。

では、動的ロードの流れを簡単に説明しましょう。

1 SCRIPT要素の生成とHEAD要素への追加
document.createElement('script')で SCRIPT要素を生成します。
そして、その src属性を
"http://www.google.com/jsapi?key=ABCDEFG&callback=loadPackage"
のように指定します。
callbackパラメータを記述することで、Google Ajax API のロード後にそのコールバック関数が実行されます。
生成した SCRIPT要素をHEAD要素に追加します。

2 コールバック関数
上記の src要素で記述したコールバック関数を定義します。
通常、パッケージをロードする記述をします。
マップパッケージをロードする場合には、次のような記述になります。

function loadPackcage(){
google.load("maps", "2", {"callback" : packageLoaded});
}

ここで大事なのは、google.load の3番目の引数であるオブジェクトの中で、   パッケージのロード後に実行する関数を callback オプションで指定することです。

3 パッケージロード後実行関数
パッケージのロード後に実行される関数を定義します。
function packageLoaded() {

}
ロードされたパッケージのクラスを利用して、処理を記述します。

このように二度に渡ってコールバック関数を利用することによって、Google Ajax API を利用することができます。

次回は、この動的ロードによる Google Ajax API の利用例を紹介しましょう。


2010/08/31 (Tue.) Trackback() Comment(0) Google Ajax API

Links

ご注意

当サイトのスクリプトは、ブラウザが FireFox 3.0 であることを前提に作成されています。IE などでは正常に動作しないものがあります。

カテゴリー

ブログ内検索

最新記事

カレンダー

02 2024/03 04
S M T W T F S
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

アーカイブ

RSS

最新CM

[04/15 jTemplate]
[05/22 寝太郎]

プロフィール

HN:
寝太郎
性別:
非公開

バーコード

P R

アクセス解析

リンク

NSM

コガネモチ

フリーエリア