Skype for Mac のチャットテーマを作って遊ぶ -- チャットメッセージの自動翻訳テーマ編

Skype に関するエントリがかなり長編になってしまったが，その最後として，「チャットに発言されたメッセージの自動翻訳をする」ようなテーマを作ってみよう．

ありがたいことに，Google 翻訳は Javascript の API が公開されている．

とりあえず，前々回のエントリでやったのと同様にして Conversation.html に以下のような記述を追加する．

  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load("language", "1");
    function translate(elem) {
      google.language.translate(elem.text(), "ja", "en", 
        function(result) {
          if (result.error) {
            elem.append("<div class='translated'>Translated: " + 
                        "Error:" + result.message + "</div>");
          } else {
            elem.append("<div class='translated'>Translated: " +
                        result.translation + "</div>");
          }
          return;
      });
    }
  </script>

API を初期化して，翻訳用のメソッドを準備しておく．翻訳用のメソッドでは，与えられた DOM エレメントのテキストを Google 翻訳に投げて，翻訳結果を追加してやる．
今回のは 日本語 -> 英語への翻訳を行なう．
非常に簡単なのは，Google 様々である．

次に，前回のエントリのように js/main.js の appendItem メソッドに，チャットメッセージ投稿毎の処理を追加してやる．

  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);
          }

    /* ここから追加 */
          var tmp = $("#conversation .body").last();
          translate(tmp);
    /* ここまで追加 */
          if (scroll && atEnd) {
            self.scrollToEnd();
          }
          return SCS.err.showError(200, "appendItem");
        } else {
          return SCS.err.showError(510, "appendItem");
        }
      };

上で用意した translate メソッドを呼ぶだけなので，非常に単純．

以下のスクリーンショットのようにできた．

メッセージの自動英訳

これで，ほぼ良いのだけれど，実用するには，翻訳の ON/OFF とか，英語 -> 日本語への変更とかが設定できるような UI も追加しておきたい．


長編になってしまったが，Skype for Mac のテーマは，HTML + Javascript + CSS3 でかなりの自由度でカスタマイズできることが分かった．
これまでのエントリ一覧は，以下のとおり
・Skype for Mac のチャットテーマを作って遊ぶ -- テーマコンテスト編
・Skype for Mac のチャットテーマを作って遊ぶ -- 導入編
・Skype for Mac のチャットテーマを作って遊ぶ -- チャットの一部に，ネットから取ってきた情報を出す編
・Skype for Mac のチャットテーマを作って遊ぶ -- 画像のインライン表示テーマ編
・Skype for Mac のチャットテーマを作って遊ぶ -- チャットメッセージの自動翻訳テーマ編

Webkit なので，HTML 5 もいけそうだし，今後おもしろい Skype のテーマを作ってくれる人が増えてくれることを願いたい．