東京電力管内の電力使用量をリアルタイムに表示するOpenSocialガジェット

tepco-usageview.xml

<?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>