Waveの機能を使ったプログラム部分を作ろう
使用するライブラリの設定
実は、この画面だけ作ったガジェットはWaveガジェットではなく、普通のGoogleガジェットです。GoogleガジェットにGoogle Wave APIのライブラリを追加することでWaveガジェットになります。よって、まずその設定をしましょう。
<ModulePrefs title="Vote Gadget"> <Require feature="wave" /> </ModulePrefs>
ModulePrefsタグの中に、使用するライブラリをRequireタグで指定します。ここではwaveを指定しています。waveはGoogle Wave用のライブラリで、他のユーザと状態を共有するためのSharedStateの機能を提供します。
画面にボタン機能の追加
画面に表示したHTMLにボタンの機能を追加します。ボタンにしたい部分のspanタグにonClick属性を追加し、クリックしたときに実行したい関数名を記述します。関数の定義は後ほど記述します。
<span class="good" id="good" onClick="goodButtonClick();">○
<span class="good_result" id="good_result">0</span>
</span>
<span class="bad" id="bad" onClick="badButtonClick();">×
<span class="bad_result" id="bad_result">0</span>
</span>
○ボタン押下時の処理
次にプログラム部分を作成します。まずは○ボタンの処理です。htmlのheadタグ内にscriptタグを追加し、○ボタンが押下された際の処理を記述します。
<script type="text/javascript">
function goodButtonClick(){
// Good評価の取得
var value = parseInt(wave.getState().get('GoodCount', '0')) + 1;
// インクリメントした値を保存
wave.getState().submitValue('GoodCount',value );
}
</script>
wave.getState()でWaveガジェットのSharedStateを取得しています。SharedStateの詳細はまた後ほど説明します。ボタンが押された回数はローカル変数に保存するのではなく、SharedStateに保存してWaveの他の参加者と共有します。ローカル変数に保存しても他の参加者とは共有できないため、注意が必要です。
×ボタン押下時の処理
×ボタンの処理は、○ボタンと同じでSharedStateに保存するキー名が違うだけです。
function badButtonClick(){
// Bad評価の取得
var value = parseInt(wave.getState().get('BadCount', '0')) + 1;
// インクリメントした値を保存
wave.getState().submitValue('BadCount', value );
}
SharedStateのAPI
次にSharedStateのAPIを紹介します。SharedStateには文字列をキーにして、その値として文字列を保存することができます。また、他の参加者がSharedStateを更新すると、その更新はすぐさま他のユーザに通知されます。SharedStateの主なAPIは次の通りです。
| メソッド | 戻り値 | 説明 |
| get(key:String, opt_default?:String) | String または null | Waveガジェットで共有する値を取得します。存在しない場合のデフォルト値を指定する場合は第2引数に指定します。 |
| submitValue(key:String , value:String) | なし | 共有する値を設定します。 |
| submitDelta(delta:Object) | なし | 同時に複数の値を設定します。 |
| reset() | なし | 共有している値をリセットします。 |
SharedState変更のイベントハンドラ
Waveガジェットの一番の特徴は、Waveの他の参加者とガジェットを共有することにあります。先ほどのSharedStateの説明で、SharedStateに値を保存する方法と値を読み込む方法を説明しました。では次に、他の参加者がSharedStateを変更したら、その変更イベントを受け取るイベントハンドラを登録しましょう。
// 初期化処理
function init() {
if (wave && wave.isInWaveContainer()) {
// SharedStateが更新されたときに呼び出されるコールバック関数の登録
wave.setStateCallback(stateUpdated);
}
}
gadgets.util.registerOnLoadHandler(init);
上記のコードはgadgets.util.registerOnLoadHandler(init);を実行することで、ガジェットが読み込まれたときにinitメソッドを呼ぶように設定しています。
初期化処理はinitメソッドに書き、initメソッドの中ではwaveライブラリが使用可能かどうかをチェックし、使用可能であればwave.setStateCallback(stateUpdated);を実行しています。
wave.setStateCallback(メソッド名)を実行することで、SharedStateが変更された際に指定したメソッドが呼ばれるようになります。
では次に投票ガジェットでSharedStateが更新された際の処理を書きましょう。
