Google Waveをガジェットで拡張してみよう

Google Waveガジェット作成チュートリアル（1）

SharedState変更時の処理（画面描画）

　ボタン押下時の処理はSharedStateの操作だけで、画面更新の処理は書きませんでした。画面の再描画はボタンの押下時ではなく、SharedState更新のコールバックメソッドで行うのが良いでしょう。そうするとWaveの他の参加者と同じ画面が見えていることが保証されます。

// SharedStateが更新されたときに呼び出されるコールバックメソッド
function stateUpdated(){
    var good = parseInt(wave.getState().get("GoodCount", '0')) ;
    var bad = parseInt(wave.getState().get("BadCount", '0')) ;
    _gel("good_result").innerHTML = good;
    _gel("bad_result").innerHTML = bad;
    _gel("total").innerHTML = (good - bad) ;
}

　上記のコードは、SharedStateから○ボタンと×ボタンが押された回数を取得しています。

　そして、_gel("要素名")でHTMLの要素を取得しています。_gelはGoogleガジェットで利用することができるメソッドでdocument.getElementById()の代わりとなるものです。

　HTMLの要素を取得したら、その要素のInnerHTMLに値を設定し表示を書き換えます。

完成!

　画面を作成し、ボタンクリック時の処理も記述したので完成です。

　ではさっそく動作させてみましょう。GGEを使用しているので、保存するだけでWaveに反映されます。保存し直し、Waveをリロードしてみましょう。

　○や×をクリックすると無事動作することを確認できると思います。

　また、複数のブラウザを立ち上げて同じWaveを表示させてみましょう。その状態でボタンをクリックすると複数のブラウザに表示させたWaveガジェットで同期が取れていることを確認できます。

まとめ

　Waveガジェットの一番の特徴は、Waveの参加者とガジェットを共有することができる点にあります。また、Waveガジェットではそれを「SharedStateに値を保存する」と「値が変更されたら通知する」という、とてもシンプルな仕組みで実現しています。

　WaveガジェットはGoogleガジェットの拡張のため、Googleガジェットを作りなれている方にはWaveガジェットも簡単に作ることができるでしょう。

　また、Googleガジェットに関するドキュメントはすでにネット上に豊富にあるため、Googleガジェットを作ったことがない方でもそれほど苦労せずWaveガジェットを作成することができると思います。

　次回はGWTを用いたWaveガジェットを作成する方法を解説予定です。

参考資料

• Wave Gadgets Tutorial

Waveガジェット作成のチュートリアル

• Google Wave Gadgets API Reference

WaveガジェットAPIのリファレンス

• Google Gadgets Editor

手軽にWaveガジェットを作成することができるツール。