　寝太郎の江戸風呂。ね！

2024
11
26

[PR]

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

2024/11/26 (Tue.)

2011
06
02

appcfg.py update urllib2.URLError

Google App Engine Python で appcfg.py でアップロードを行おうとしたら、次のようなエラー。

urllib2.URLError: 
<urlopen error [Errno -5] No address associated with hostname>

原因は、app.yaml の最後に「#」でコメントを入れたことによるものらしい。このコメント行を削除したら、正常に動きました。

忘れた頃にまた、やりそうなのでメモ。

2011/06/02 (Thu.) Trackback() Comment(0) Google App Engine

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
04
30

Google Chart API。Google-O-Meter。

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

前々回「電力使用状況API」
前回「Google Ajax API」「jQuery.getJSON()」

今回は「Google Chart API」。

「東京電力需給状況」のページでは、「Google Chart API」の中の「Bar Chart」という棒グラフタイプのグラフを利用しています。そこでは、時間を横軸に取って時間的変化を見れるようにしました。ただ、時間を複数取ると少し複雑な処理が必要になります。そこで、今回は、シンプルなデータでもインパクトのある「Google-O-Meter」を利用します。

Google-O-Meter

「Google-O-Meter」は次のようなチャートです。

機械の計器のような形をして針が値を示します。

上記のイメージのソースURLは、次のとおりです。

https://chart.googleapis.com/chart?
chs=200x150
&cht=gom
&chco=00FF00,FFFF00,CC0000
&chxt=x,y'
&chd=t:百分率;
&chxl=0:|使用量|1:|0|供給量
&chtt=%E6%9D%B1%E4%BA%AC%E9%9B%BB%E5%8A%9B%E6%B6%88%E8%B2%BB%E7%8E%87|
日付+時刻%E6%99%82|百分率%+(%E4%B8%87Kw)

１行目は「Google Chart API」に共通するものです。これを見てわかるようにイメージは、Google のサイトから送られてきます。「?」以降に記述するパラメータを元に、Google が PNGイメージを生成して返してくれるのです。随分太っ腹ですよね。

Google-O-Meter のパラメータ

サイズ(chs : Chart Size)

イメージのサイズを「chs=幅x高さ」で指定します。掛け合わせて、300,000ピクセル以内に収める必要があります。幅、高さの限度は、両方とも「1,000」です。

種類(cht : Chart Type)

グラフの種類を「cht=種類」で指定します。「Google-O-Meter」は "gom" です。

色(chco : Chart Color)

グラフの色を「chco=色」で指定します。複数の色を指定する場合には、カンマで区切ります。「Google-O-Meter」の場合、この順番で左から右にグラデーションがかかります。

軸の表示(chxt : Chart Visible Axis)

グラフに表示する軸を「chxt=軸」で指定します。複数指定する場合には、カンマで区切ります。下が「x」、左縦が「y」、上が「t」、右縦が「r」です。

軸のラベル(chxl : Chart Axis Label)

１番目の軸を「0:」とし、指定した軸に表示する目盛をパイプ「|」で区切って指定します。

データ(chd : Chart Data)

データのフォーマットには何種類かあります。基本的なテキスト形式(Basic Text Format)がよく利用されます。その場合には「chd=t:値」のように記述します。値が複数ある場合にはカンマ「,」で区切り、系列が複数ある場合にはパイプ「|」で区切ります。「Google-O-Meter」の場合、全体を100とした場合の値の割合を値とします。

タイトル(chtt : Chart Title)

グラフのタイトルを「chtt=タイトル」で指定します。スペースは「+」、改行は「|」。日本語は URIエンコードします。

テスト用サンプル

下のテキストボックスに「Google Chart API」にリクエストするURLのサンプルを置きました。内容を書き換えて、ブラウザのアドレスバーに入力してみて下さい。

なお、URIエンコードは「encodeURIComponent」のページで変換できます。

また、最新の東京電力使用量率のグラフは「東京電力使用量率チャート」のページでご覧になれます。

次回は、これまでの内容を元に動的にグラフを作成しましょう。

2011/04/30 (Sat.) Trackback() Comment(0) Google Chart

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 を利用したデータのグラフ化をテーマにします。

2011/04/29 (Fri.) Trackback() Comment(0) Google Ajax API

2011
04
27

電力使用状況API

前回の「東京電力管内の電力の需給状況」の記事では、「東京電力需給状況」のページを紹介しました。

今回は、「東京電力需給状況」のデータ元である「電力使用状況API」について説明しましょう。

「電力使用状況API」は、“東日本大震災に対し、自分たちの開発スキルを役立てたい”との「Hack for Japan」の趣旨に賛同して、Yahoo!デベロッパーネットワークで一般に公開されている API です。アプリケーションID さえ取得すれば、これを用いて、誰でも利用できるウェッブサービスです。

「電力使用状況API」からの出力は、XML、PHPserializ、JSON の３種類が用意されています。

リクエストURL

基本部分は、次のとおり。

http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage

これにパラメータを加えて、リクエストURL を作成します。

必須なのは、"appid"。したがって、最短のリクエストURL は次のようになります。

http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage
?appid=＜あなたのアプリケーションID＞

これで、最新の電力使用量と電力供給量がXML形式で取得できます。

JSON でデータを取得したい場合には、outputパラメータ、JSONP を利用したい場合には、さらに callback パラメータでコールバック関数を指定します。

http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage?
appid=＜あなたのアプリケーションID＞
&output=json&callback=callbak

過去の電力使用量と電力供給量を取得したい場合には、datetime パラメータで"yyyymmddhh"形式日時を付け加えます。

http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage?
appid=＜あなたのアプリケーションID＞
&output=json&callback=callbak
&datetime=2011042519

レスポンス

リクエストを送るとXML形式では、次のようなデータが返ってきます。

<ElectricPowerUsage
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns="urn:yahoo:jp:setsuden:latestPowerUsage"
 xsi:schemaLocation=
     "yahoo:jp:setsuden:latestPowerUsage
      http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage.xsd"
>
  <Area>tokyo</Area>
  <Usage unit="kW">34100000</Usage>
  <Capacity unit="kW">38500000</Capacity>
  <Date>2011-02-13</Date>
  <Hour>15</Hour>
</ElectricPowerUsage>

非常にシンプルな構造です。

JSON形式では、次のようになります。

{"ElectricPowerUsage":
  {"Area"    :"tokyo",
   "Usage"   :{"@unit":"kW","$":32910000},
   "Capacity":{"@unit":"kW","$":40000000},
   "Date":"2011-04-27",
   "Hour":19
  }
}

次回は、jQuery を用いて、「電力使用状況API」からデータを取得しましょう。

2011/04/27 (Wed.) Trackback() Comment(0) Yahoo! Web Services