Skype for Mac のチャットテーマを作って遊ぶ -- 画像のインライン表示テーマ編

前回のエントリでは，Skype for Mac の Conversation.html をいじってネットから取ってきた情報を出す方法について書いた．

次の段階として，チャットにメッセージが投稿される毎に，そのメッセージに処理を加えてみよう．
今回は，「チャットに貼られた URL が画像ファイルであったときのにインライン表示するテーマ」を作ってみよう．

素の Skype では，
  「http://www.google.co.jp/intl/en_com/images/srpr/logo1w.png」
というメッセージがチャットに書かれても
    http://www.google.co.jp/intl/en_com/images/srpr/logo1w.png

というようにリンクになるだけである．
これを
    
というようにチャットメッセージ中に画像を表示したいわけである．


以上のような変更は，前回のように Convesation.html をいじるだけではいかなそう，ということで js/main.js をながめてみる．

ちょっと長めのファイルなのだけれど，書かれているコメントをみていると appendItem がチャットにメッセージが投稿される毎に呼ばれるメソッドのようだ．（455 行目付近）

  this.appendItem = 
    function(html, scroll) {
      if (_container.length > 0) {
        var atEnd = self._nearBottom();

        if ($("#typing").length > 0) {
          $("#conversation #typing").before(html);
        } else {
          _container.append(html);
        }
  /* ここから追加 */
        $("#conversation .body").last().find("a").each(
          function(index, elem) {
            var attr = $(this).attr("href");
            if (attr) {
              if (attr.match(/\.png$|\.jpg$|\.jpeg$/i)) {
                var tmp = "<a href='"+ attr + "'><img src='" +
                          attr + "' style='width: 200px;'></a>";
                $(this).replaceWith(tmp);
              }
            }
          });
  /* ここまで追加 */
          if (scroll && atEnd) {
            self.scrollToEnd();
          }
          return SCS.err.showError(200, "appendItem");
        } else {
          return SCS.err.showError(510, "appendItem");
        }
      };

解説すると，
  (1) #conversation の body クラスを持つやつの最後のエレメント
      （最新の投稿メッセージ）について，A タグを探す．
  (2) それぞれについて href 属性が画像ファイルと思ったら，
      Image タグに替えてやる．
という処理をやるだけ．
JQuery を使って簡潔に書けますね．

ちなみに，#conversation とか body クラスとかエレメントを変更すればよいというのは，コンテストのテンプレート を参照すると分かる（すべての要素が列挙されているそうなので．．前のエントリーも参照）

実際動かしたときのスクリーンショットは以下のようになる．

画像のインライン表示

実用にするには，上のコードは，まだかなりいい加減だけれど，そこそこ使えるテーマなんじゃないかと思う．（メッセージの編集などを考えると main.js の messageUpdate メソッドなどでも同様の A タグから Image タグの置き換えをしないといけなそう．）


次回のエントリは，Google 翻訳と組合せたテーマについて．