Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
東京電力管内の電力使用量をリアルタイムに表示するOpenSocialガジェット
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="電力供給状況" description="東京電力の電力供給状況を表示するガジェット" author="Kimura Youichi (@kim_upsilon)" height="150">
<Require feature="views" />
</ModulePrefs>
<Content view="home,profile" type="html">
<![CDATA[
<style>
p, div {
padding: 0;
margin: 8px;
}
</style>
<div style="float: left; margin: 8px 20px">
<img id="graph" src="https://chart.googleapis.com/chart?chf=bg,s,FFFFFF00&amp;chxt=y&amp;chbh=a,8&amp;chs=70x120&amp;cht=bvs&amp;chco=FF0000&amp;chd=t:0" width="70" height="120" />
</div>
<p style="font-size: 20px"><span id="status">情報を取得中です...</span><span id="ratio"></span></p>
<p style="font-size: 14px"><span id="updated_at"></span> 現在</p>
<p style="font-size: 15px">
消費電力: <span id="usage">----</span> 万kWh / 供給電力: <span id="capacity">----</span> 万kWh
</p>
<p id="saved" style="font-size: 15px"></p>
<p style="font-size: 13px">
<span style="white-space: nowrap">使用データ: <a href="http://tepco-usage-api.appspot.com/">東京電力電力供給状況API</a></span>
<span style="white-space: nowrap">グラフ生成: <a href="http://code.google.com/intl/ja/apis/chart/">Google Chart API</a></span>
</p>
<script type="text/javascript">
<!--
function $(id) { return document.getElementById(id); }
var params = {};
params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.NONE;
params[gadgets.io.RequestParameters.REFRESH_INTERVAL] = 1800;
gadgets.io.makeRequest("https://tepco-usage-api.appspot.com/latest.json", function(response) {
if (!response.data) {
$('status').innerHTML = '情報の取得に失敗しました';
return;
}
var ratio = Math.round(response.data.usage * 1000 / response.data.capacity) / 10;
var color = 'ffffff';
if (ratio >= 97)
color = 'ff0000';
else if (ratio >= 95)
color = 'ff9900';
else if (ratio >= 90)
color = 'ffff66';
else
color = '009900';
$('graph').src = 'https://chart.googleapis.com/chart?chf=bg,s,FFFFFF00&chxt=y&chbh=a,8&chs=70x120&cht=bvs'
+ '&chco=' + color + '&chd=t:' + ratio;
$('status').textContent = '現在の電力使用量: ';
$('ratio').textContent = ratio + '%';
$('ratio').style.color = '#' + color;
$('usage').textContent = response.data.usage;
$('capacity').textContent = response.data.capacity;
if (response.data.saving)
$('saved').textContent = '計画停電実施中です';
else
$('saved').textContent = '計画停電は実施されていません';
var updated_at = response.data.year + '年' + response.data.month + '月' + response.data.day + '日'
+ ' ' + response.data.hour + '時〜' + (response.data.hour + 1) + '時';
$('updated_at').textContent = updated_at;
}, params);
//-->
</script>
]]>
</Content>
<Content view="canvas" type="html">
<![CDATA[
このアプリはホーム画面専用です。<a href="javascript:void(0)" id="gotohome">ホーム画面へ移動</a>
<script type="text/javascript">
<!--
document.getElementById('gotohome').addEventListener('click', function(e) {
var view = gadgets.views.getSupportedViews()['home'];
gadgets.views.requestNavigateTo(view);
}, true);
//-->
</script>
]]>
</Content>
</Module>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment