Skype for Mac のチャットテーマを作って遊ぶ -- チャットの一部に，ネットから取ってきた情報を出す編

日付:
前回のエントリの続きとして， Conversation.html に記述を加えよう．
Conversation.html を見れば分かるのだけれど，Skype for Mac のチャット部分の表示には JQuery を使っていて，そんなに特別な知識を要せずに色々な機能を追加できる．

今回のエントリでは，チャットの一部にネットから取ってきた簡単な情報を出すための変更について書く．
これは，Conversation.html へのちょっとした変更だけでできる．

それでは，Conversation.html を開いてみよう．
中身は，

 <html>
  ...
  <body>
    <div id="container">
      <div id="conversation">
        <div class="item typing invisible" id="typing">
          <div class="container">
            <div class="head">
              <span class="sender"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  ...
といったように非常に単純．
<div id="container"> のエレメントにチャットのメッセージが追加されていくようだ．


単純にここにエレメントを追加すれば，情報を表示することができる．
今回は，「東京電力の計画停電」に関する情報として，「東京電力 電力需給状況」を出すことにしよう．
ありがたい事に，JSON 形式で情報を配ってくださっている方々がいるので，（東京電力電力供給状況API）それをありがたく使わせていただく．

上の <div id="container">...</div> の後に続けて，以下のような記述を追加する．


  <div id="tepco" style="position:fixed; top:0px; left:0px;
                         background-color: white;">
  </div>
  <script type="text/javascript">
    function parseResponse(retval) {
      document.getElementById("tepco").innerHTML 
        = retval.usage + " / " +
          retval.capacity + " (at " + retval.usage_updated + ")";
    }
  </script>
  <script type="text/javascript"
          src="http://tepco-usage-api.appspot.com/latest.json?callback=parseResponse">
  </script>

やっていることは，チャットの上端に用意したエレメント（id が tepco のもの）に JSON 形式で取れる値を入れるだけ．

これだけで，以下のような感じで，常に電力需給状況を表示できる．

チャットの上端に電力需給状況を表示したもの

一応，これだけだと，情報が更新されないので，本気で電力需給をチェックしたい場合には，定期的に JSON を取得しなおしてやる必要がある．（今回は省略）

※ そういえば，今回の変更を適用をしたテーマを，このページからダウンロードできるようにしようかと思ったけれど OK なのだろうか?
Panamericana を丸々コピーしているので，とりあえずは公開せずにおこう．


以上のように，普通に Javascript を書けばよいだけなので，色々と機能を追加した Skype のテーマを作れる可能性がありそうだ．
この方法をちょこっと替えれば，Twitter からの情報を出したりも簡単にできそう．

Skype のテーマ作りが流行らないかなぁ．．という気持ちも込めて，続く 2 エントリでは，
・チャットに貼られた URL が画像であったときのにインライン表示するテーマ
・チャットメッセージの自動翻訳テーマ
という Skype テーマについて書こう．

コメント

コメントを投稿