古い記事
ランダムジャンプ
新しい記事

WebAPIを駆使して東京電力使用状況メーターを作る！（Perl版とJavaScript版）

2011-04-02-1 [WebAPI][Programming]
Yahoo!の電力使用状況API[2011-03-31-2]とGoogle Chart APIを使って「東京電力使用状況メーター」を作ることができます。



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

書いてる人：たつを