WebAPIを駆使して東京電力使用状況メーターを作る!(Perl版とJavaScript版)
2011-04-02-1
[WebAPI][Programming]
Yahoo!の電力使用状況API[2011-03-31-2]とGoogle Chart APIを使って「東京電力使用状況メーター」を作ることができます。
ムジログでPHPを利用した方法が解説されていました。
というわけで、これを参考に Perl 版と JavaScript 版を作りました。メーターのデザインはムジログ版との互換性を保ちました(つまり、まるっきり真似しました、ということですw)。
Perl 版は、電力使用状況APIの結果を得て、それもとにGoogle Chart APIのURLを構築し、最後にそのURLにリダイレクトするという仕組みです。
■コード(stdn.cgi):
■設置例:
JavaScript 版は JSONP やら Ajax やら魔法の言葉でありがたいことにブラウザだけで完結します。Perl版のようにサーバにスクリプトを置く必要はありません。
■コード(stdn.html):
■設置例:
https://yapi.ta2o.net/setsuden/stdn.html
以上、どうぞご利用ください。
なお、appid の取得は下記からどうぞ:
http://e.developer.yahoo.co.jp/webservices/register_application
ムジログでPHPを利用した方法が解説されていました。
- 東京電力使用状況メーターをヤフーのAPIとGoogle Chartで作る方法 ([Mu]ムジログ)
http://musilog.net/webdesign/my-works/tepco-graph.php
というわけで、これを参考に Perl 版と JavaScript 版を作りました。メーターのデザインはムジログ版との互換性を保ちました(つまり、まるっきり真似しました、ということですw)。
Perl 版「東京電力使用状況メーター」
Perl 版は、電力使用状況APIの結果を得て、それもとにGoogle Chart APIのURLを構築し、最後にそのURLにリダイレクトするという仕組みです。
■コード(stdn.cgi):
#!/usr/bin/perl -T use strict; use warnings; use LWP::Simple; use POSIX qw(ceil); my $appid = "(YOUR APPID)"; my $yurl = "http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage?appid=$appid"; my $data = get($yurl); my ($usage) = $data =~ m{<Usage.*?>(\d+)</Usage>}; my ($capacity) = $data =~ m{<Capacity.*?>(\d+)</Capacity>}; my ($hour) = $data =~ m{<Hour.*?>(\d+)</Hour>}; my $rate = ceil($usage / $capacity * 100); my $url = 'https://chart.apis.google.com/chart?chxt=x&chbh=a,4,5&chs=225x69' .'&cht=bhs&chco=FFCC33,FF0000&chd=t:'.$rate.'|'.(100 - $rate) .'&chtt=%E6%9D%B1%E4%BA%AC%E9%9B%BB%E5%8A%9B%E4%BD%BF%E7%94%A8%E7%8A%B6%E6%B3%81' .$hour.'%E6%99%82%E5%8F%B0&chts=676767,14.5'; print qq(Location: $url\n\n);
■設置例:
<img src="//yapi.ta2o.net/setsuden/stdn.cgi">
JavaScript 版「東京電力使用状況メーター」
JavaScript 版は JSONP やら Ajax やら魔法の言葉でありがたいことにブラウザだけで完結します。Perl版のようにサーバにスクリプトを置く必要はありません。
■コード(stdn.html):
<html> <head> <script> function stdn_graph_insert(json){ var usage = json["ElectricPowerUsage"]["Usage"]["$"];; var capacity = json["ElectricPowerUsage"]["Capacity"]["$"]; var hour = json["ElectricPowerUsage"]["Hour"]; var rate = Math.ceil(usage / capacity * 100); document.getElementById('stdn').src = 'https://chart.apis.google.com/chart?chxt=x&chbh=a,4,5&chs=225x69' + '&cht=bhs&chco=FFCC33,FF0000&chd=t:' + rate + '|' + (100 - rate) + '&chtt=%E6%9D%B1%E4%BA%AC%E9%9B%BB%E5%8A%9B%E4%BD%BF%E7%94%A8%E7%8A%B6%E6%B3%81' + hour + '%E6%99%82%E5%8F%B0&chts=676767,14.5'; }; function djson() { var script = document.createElement('script'); var appid = '(YOUR APPID)'; var apiurl = 'http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage' + '?appid=' + appid + '&output=json&callback=stdn_graph_insert'; script.id = apiurl; script.charset = 'UTF-8'; script.src = script.id; document.lastChild.appendChild(script); }; </script> </head> <body onload="javascript:djson();"> <img src="" id="stdn" name="stdn"> </body> </html>
■設置例:
https://yapi.ta2o.net/setsuden/stdn.html
おわりに
以上、どうぞご利用ください。
なお、appid の取得は下記からどうぞ:
http://e.developer.yahoo.co.jp/webservices/register_application
この記事に言及しているこのブログ内の記事