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 >
<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
この記事に言及しているこのブログ内の記事