JSONP　寝太郎の江戸風呂。ね！

2024
11
22

[PR]

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

2024/11/22 (Fri.)

2011
05
01

JSONPで取得したデータを Google Chart API で表現する。

「東京電力需給状況」のページで利用しているWEBサービスについて、これまで数回に渡って紹介してきました。

「電力使用状況API」
「Google Ajax API」「jQuery.getJSON()」
「Google Chart API」「Goole-O-Chart」

今回はこれらのまとめです。jQuery.getJSON() で「電力使用状況API」にリクエストを行い、取得したデータを「Goole-O-Chart」で表示します。「Goole-O-Chart」自体は静的なPNGファイルですが、「電力使用状況API」から取得するデータが、１時間ごとに変わりますので、表示されるグラフもこれに合わせて変化します。

HTMLソース

最初にソースコードを示します。

<html><head>
<title>東京電力使用量率メーターチャート</title>
<script src=
 "https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
</script>
<script>
function callback(obj){
 var data    = obj.ElectricPowerUsage;
 var Usage   = (data.Usage.$-0)/10000;
 var Capacity= (data.Capacity.$-0)/10000;
 var rate    = Math.round(Usage*100/Capacity);
 var chart   = 'https://chart.googleapis.com/chart?';
     chart  += 'chs=200x150&cht=gom';
     chart  += '&chco=00FF00,FFFF00,CC0000&chxt=x,y';
 var chd     = '&chd=t:'+rate;
 var chxl    = '&chxl=0:|'+Usage+'|1:|0|'+Capacity;
 var chtt    = '&chtt=data.Date+'+'+data.Hour+'%E6%99%82|'
               +rate+'%+(%E4%B8%87Kw)';
 var src     = chart+chd+chxl+chtt;
 var img     = document.createElement('img');
 img.src     = src;
 img.alt     = chtt;
 $('#latestPowerUsage').append(img);
}

$(function(){
  var url="http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage?"
  var data={
   appid:あなたのアプリケーションID,
   output:"json"
  };
  $.getJSON(url+'&callback=?',data,callback);
});
</script>
</head>
<body>
<div id="latestPowerUsage"></div>
</body>
</html>

ソースコードの解説

jQuery のロード

まず、Google Ajax API から jQuery をロードします。jQuery は、DOM構築後の処理指定、JSONリクエスト、IMG要素のドキュメントへの追加の３箇所で利用します。

スクリプトでは、まずcallback関数の定義がありますが、内容については後ほど触れます。

DOM構築後の処理指定

コールバック関数でドキュメントの中にIMG要素を追加することになりますので、その際に追加する場所がブラウザに認識されている必要があります。そのため、「電力使用状況API」に対するリクエストは、DOM構築後にします。

このHTMLソースでは、「window.onload」を上書きしても何ら問題はありませんが、せっかく jQuery をロードしているので、jQuery を利用しました。この書き方は、複数共存できるのもメリットといえるでしょう。

jQueryでDOM構築後の処理を指定する記述方法は、幾種類かありますが、一番短い書式は、関数を f とすると次のものです。

$(f);

fは、別に定義してもよいですし、無名関数としてその場所に内容を記述しても構いません。

$(function(){
  処理内容
});

サンプルのソースコードでは、処理内容は、$.getJSON() で「電力使用状況API」に対するリクエストをしているだけです。「電力使用状況API」からリクエストが返ってくると、コールバック関数が実行されます。

コールバック関数の処理内容

コールバック関数で処理していることは、次の内容です。
1) 受け取ったデータから、日時、電力使用量、電力供給量を取り出す。 2) 電力消費率を計算する。 3) 「Google Chart API」へのリクエストURLを組み立てる。 4) IMG要素を生成し、ドキュメントに追加する。

最後に

細かい部分については、これまで説明していますので、今回は省略します。

一部内容は、異なりますが、出来上がりは次のページと同じようになるはずです。「東京電力使用量率チャート」

2011/05/01 (Sun.) Trackback() Comment(0) JSONP

2011
01
19

JSONPでレスポンスが返らない場合の処理

JSONPで、データの要求をした場合、コールバック関数が実行されます。また、リクエストに不備があった場合には、エラーコードが返って来ることが多いでしょう。しかしながら、何のレスポンスもない場合があります。このような場合に、何らかの処理をする必要があるときは、どうしたらよいでしょう。

便法としては、setTimeout関数を利用する方法があります。すなわち、サーバーにリクエストを送ると同時に、何秒かに実行される関数を指定するのです。その関数の中で、レスポンスが返って来ない場合の処理を記述するのです。レスポンスが返って来たか来ないかは、フラグを設定しておいて、コールバック関数の中でフラグを変更すれば、把握することができます。