電気使用量(電力消費)プラグインをバージョンアップしました。html5.jpで公開されているプログレスバーライブラリを使用しています。

html5には、progressというタグが用意されています。これをバーが伸びるアニメーションのように見せるため、html5.jpのプログレスバーライブラリprogress.jsを読み込みます。さらに下記のようなjavascriptを読み込んでいます。

<script type="text/javascript">
window.onload = function() {
  var p = {
    to: 使用率,
    width: バーの幅,
    bar_bgc: "色"
  };
  var o = new html5jp.progress("denki", p);
  o.draw();
};
</script>

表示する場所は、<div id="denki"></div>です。(電気使用量が100％に達するとは限らないため、progressは意味的に変なので、denkiにしています。)

キャッシュは、WordPress APIのget_transientとset_transientを使用しています。キャッシュ時間は30分固定です(変更にはソース書き換えが必要)。

        if ( false === ( $value = get_transient( $this->id ) ) ) {
            // this code runs when there is no valid transient set
            $request_url = "http://setsuden.yahooapis.jp/v1/Setsuden/latestPowerUsage?appid=$appid&output=json$area";
            $json = wp_remote_get($request_url);
            if ( is_wp_error( $json )) {
                echo "Yahoo API Error!";
            } else {
                $value = $json['body'];
                set_transient( $this->id, $value, $this->_cachetime);
            }
        }

電気使用量表示ウィジェットからダウンロードし、プラグインディレクトリにアップロードし、プラグイン有効化してください。なお利用にはヤフーデベロッパーAPIが必要なので、予め取得しておいてください。