最速!Google Wave API解説

第1回 ガジェットAPI

この記事を読むのに必要な時間:およそ 2 分

Shared Stateを使用したガジェット

ここまでで非常にシンプルながらWave上に自作のガジェットを表示することに成功しました。しかしこのままでは何かが足りないと思いませんか?

そうです。まだこのガジェットにはWave参加者のリアルタイムなやり取りが実装されていません。参加者同士でリアルタイムにデータをやり取りするにはShare Stateと呼ばれるKey-Value型のオブジェクトを使用します。これもまずは公式ドキュメントの例を見てみましょう。

リスト2 Shared Stateを使用したガジェット公式ドキュメントより引用

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="State Example" height="120">
  <Require feature="rpc" />
</ModulePrefs>
<Content type="html">
<![CDATA[
  <div id="content_div" style="height: 50px;"></div><!-- カウンタを表示 -->
  <script type="text/javascript"
      src="http://wave-api.appspot.com/public/wave.js"></script>
  <script type="text/javascript">

    var div = document.getElementById('content_div');

    // countの値をインクリメントする関数
    function buttonClicked() {
      // countの値を取得して数値に変換。なかった場合は0になる
      var value = parseInt(wave.getState().get('count', '0'));

      wave.getState().submitDelta({'count': value + 1});
    }

    // countの中身を表示する関数
    function stateUpdated() {
      // 共有ステートにcountがあるかないかを確認
      if(!wave.getState().get('count')) {
        // なければ0と表示
        div.innerHTML = "The count is 0."
      }
      else {
        // あればcountの値を取得して表示
        div.innerHTML = "The count is " + wave.getState().get('count');
      }
    }

    function main() {
      if (wave && wave.isInWaveContainer()) {
        // Shared Stateが変更されたときに実行される関数を登録
        wave.setStateCallback(stateUpdated);
      }
    }

    // ガジェットがロードされたときに実行される関数を登録
    gadgets.util.registerOnLoadHandler(main);

    // countの値を0にリセットする関数
    function resetCounter(){
      wave.getState().submitDelta({'count': '0'});
    }

  </script>
  <input type=button value="Click Me!" id="butCount" onClick="buttonClicked()">
  <input type=button value="Reset" id="butReset" onClick="resetCounter()">
]]>
</Content>
</Module>

上記のソースで赤くなっている部分がそのShared Stateを扱っている箇所です。3種類の関数しか使われていないので抜き出してみます。

wave.setStateCallback(FUNCTION)
Shared Stateが変更したときに呼び出されるコールバック関数として,FUNCTIONを設定する
wave.getState().submitDelta({KEY: VALUE})
Shared StateにKEYに対応する値としてVALUEを設定する
wave.getState().get(KEY)
Shared StateからKEYに対応する値を取得する

全体の流れとしては,以下のとおりです。

  1. wave.getState().get(KEY)関数を使って変更された状態を処理するハンドラを作成する(例ではstateUpdated関数)
  2. 作成したハンドラをwave.setStateCallback(FUNCTION)関数でShared State変更時のコールバックに登録しておく
  3. 何らかのイベントが発生してwave.getState().submitDelta({KEY: VALUE})関数が呼び出されたときに全参加者のコールバック関数が実行される

では,前項の手順にしたがってWave上にガジェットを追加し,実行してみましょう。

図6 カウンターガジェット

図6 カウンターガジェット

ある参加者がボタンをクリックすると,全ての参加者のガジェットでカウンタの表示がインクリメントされました。このようにWaveガジェットでは Shared Stateを使って非常に簡単にCometを利用した参加者同士のリアルタイムなやりとりが実装できます。

そして,Shared Stateを使う利点はこれだけではありません。今度はWave上部の「Playback」⁠再生)ボタンを押下してみましょう。

図7 Playbackボタン

図7 Playbackボタン

ツールバーが変更され,巻き戻し・早送りボタンとスライダが表示されました。スライダを移動したりボタンを押下するとWaveの状態が巻き戻されて,今回の場合であればカウンタの値が減って行きます。このようにWaveではShared Stateの変更はすべて履歴に保存されていて,ガジェット開発者がなにも意識しなくてもPlayback機構は正しく動作します。

まとめ

基本的なガジェットの作成方法は以上のようになります。いかがでしょうか? iGoogle,OpenSocialなどでガジェットを作成したことのある人であれば,リアルタイム通信やプレイバックなどのWaveの機能を利用するWaveガジェットも非常に簡単に作れることが分かると思います。またガジェット未経験の方も,ガジェットは結局のところはHTML,CSS,JavaScriptなどの既存のWebページと同じ構成要素をXMLで包んだだけのものであって,特に心配する必要はないことが分かったでしょう。

Waveは現在デベロッパープレビューとして公開されていますが,Developer Sandboxもまだこちらのサイトでアカウントのリクエストが開始されたばかりで,実際にアクセスできる人のほとんどいない,謎の多いサービスだと思います。 本連載がその疑問に少しでも答えられるものになっていると嬉しく思います。

次回はもう一つのExtensions,Robots APIについて説明します。お楽しみに。

著者プロフィール

あんどうやすし

シーサー株式会社 プログラマ。Google App Engine API Expert。

Google I/O翌日にGoogleオフィスで開かれたWave Hackathonに潜り込んできました。そこで得られた知識を,記憶が温かいうちにみなさんと共有できればと思います。

URLhttp://d.hatena.ne.jp/technohippy/

Wave ID:technohippy@wavesandbox.com