たつをの ChangeLog : 2011-04-02

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

「この発言は個人の見解であり、所属する組織の公式見解ではありません」

2011-04-02-2 [WebTool][Neta]
そういえばちょっと前にこんなサービスがオープンしていました。

- ※この発言は個人の見解であり、所属する組織の公式見解ではありません
http://xn--l8j7a8c1aaf6qs19uwqcd53lf3ybg4avk.xn--l8j2bh0c8ah0i3de1gt189bup1ablhwsld95hmtdu46djkb.tsuyabu.in/

微妙な発言をここ経由でTwitterに投稿できます。
その際に使用クライアントとして「※この発言は個人の見解であり、所属する組織の公式見解ではありません」と表示されます。

こんな感じ：
※この発言は個人の見解であり、所属する組織の公式見解ではありません

まあそんだけです。
昨今コンプライアンス的にいろいろとあるのかも知れませんね。

ref.
- 「※この発言は個人の見解であり、所属する組織の公式見解ではありません」をリリースしました (床のトルストイ、ゲイとするとのこと)
http://d.hatena.ne.jp/mirakui/20110220/1298213272

そのディレクトリにあるファイル一覧HTMLページを作成するワンライナー

2011-04-02-3 [Programming]
実験結果ファイルやログファイルが大量に置いてあるディレクトリを至急ウェブブラウザからアクセスして確認してもらうとき用の「その場しのぎ」系ワンライナー。「\ls」のところを「\ls 20110[1-3]*.rslt」などとして使用。
\ls|perl -lne '$sz=-s$_;print qq(<a href="$_">$_</a>($sz)<br>)'>index.html

ref.
- [を] jpgpage.pl[2003-06-19-2]

Perl の vec() で bit vector の操作

2011-04-02-4 [Programming]
後で使うために自分用メモ。
「perldoc -f vec」より。

■テストコード：
#!/usr/bin/perl
use strict;
use warnings;

my $v = "";

vec($v, 0, 1) = 1; # 0ビット目を1に
printbits($v);

vec($v, 9, 1) = 1; # 9ビット目を1に
printbits($v);

vec($v, 0, 1) = 0; # 0ビット目を0に
printbits($v);

print vec($v, 0, 1), "\n"; # 0ビット目を見る
print vec($v, 9, 1), "\n"; # 9ビット目を見る

sub printbits {
    my ($v) = @_;
    my $bits = unpack("b*", $v);
    my @bits = split(//, $bits);
    print "$bits ";
    print join(",", @bits), "\n";
}

■実行例：
10000000 1,0,0,0,0,0,0,0
1000000001000000 1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0
0000000001000000 0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0
0
1
この記事に言及しているこのブログ内の記事

たつをの ChangeLog
Powered by chalow