最速!Google Wave API解説

第3回エンベッドAPI

ついにGoogle Developer Day(GDD)参加者にGoogle Waveの招待状が届いて、日本人ユーザーの手にもアカウントが続々と手に入っているようですね。Google Waveは単なるサービスとして見ても非常に興味深いものですが、APIを利用してその機能を拡張することができれば、おもしろさはさらに広がります。アカウントが手に入った皆さんは、これまでに説明したガジェットAPIとロボットAPI、そして今回説明するエンベッドAPIを使ってGoogle Waveを遊び尽くしてください。

エンベッドAPI使用例

さて、連載最後となる今回のターゲットはEmbed APIです。これまでの2つのAPI(ガジェットAPI・ロボットAPI)とは異なり、Embed APIはGoogle Waveそれ自体にはなんの機能も追加しません。その代わりに、Google Waveの機能をGoogle Waveの外部で利用することを可能にします。

これまでの例にならって、まず実際の動作を見てみましょう。ブラウザを開き、 http://google-wave-embedded.seesaa.net/にアクセスしてみてください。

おそらく多くの方は、次のように表示されていると思います。

図1 非ログイン時のブログの表示
図1 非ログイン時のブログの表示

Waveサンドボックスのアカウントを持っていて、ログイン済みの人には次のように見えています。

図2 ログイン時のブログの表示
図2 ログイン時のブログの表示

このGoogle Mapが表示されている青い部分がEmbed APIによってブログに挿入されたWaveで、Google Waveにも同じ内容のWaveがあり、そちらで見ると次のようになっています。Google Mapのモードは共有されていないようですが、表示されている場所Bath Abbey, Bath, UKは同じです。

図3 Google Wave上での表示
図3 Google Wave上での表示

そして、ブログにEmbedされたWaveは単にGoogle Waveの内容が表示されているだけではありません。Google Waveで編集した結果は即座に反映されますし、ブログ側から内容を変更する事も可能です。画像内では編集中のユーザー名がどちらも「me」になっていますが、私以外が編集しているときにはもちろんそのユーザー名が表示されます。

図4 Google Wave上での編集がブログに反映される
図4 Google Wave上での編集がブログに反映される(1) 図4 Google Wave上での編集がブログに反映される(2)
図5 ブログ上での編集がGoogle Waveに反映される
図5 ブログ上での編集がGoogle Waveに反映される(1) 図5 ブログ上での編集がGoogle Waveに反映される(2)

以上で、エンベッドAPIがどのようなものか理解できたと思います。それでは本APIを実際に使用するにはどのようにすればいいかを見ていきましょう。

Waveを外部サイトに組込む

Embed APIを利用してWaveを外部サイトに組込むのは、そのサイトのHTMLを自由に編集できる環境であれば実は非常に簡単です。基本的にはコピー&ペーストだけで組込みは完了し、カスタマイズが不要ならプログラミングはほとんど不要です。おそらく正式リリース時にはGoogle Web Elementsのような形でコピー&ペースト以外の作業を全くなしで組込めるようになるのでしょう(そう考えると今回の記事の意義にちょっと疑問を覚えますが……⁠⁠。

まず最初に外部サイトに組込むためのWaveを準備しましょう。EmbedされるWaveには公開用の特別なユーザー(public@a.gwave.com)が参加している必要があります。Wave作成後にユーザーを追加してもいいのですが、始めからこのユーザーを指定してWaveを作成する方が簡単でしょう。

図6 Contactsで公開用のユーザーを選択
図6 Contactsで公開用のユーザーを選択
図7 New Waveで新規Waveを作成
図7 New Waveで新規Waveを作成

後ほど必要になるので、作成したWaveのWave IDも調べておきましょう。Wave IDは現在のところ、Waveを選択した状態でDebug」メニューから「Get current wave ID」を選択すれば確認可能です。ただしこれはいずれ確実に変更されます。この手順で確認できなかったときはGoogleのドキュメントを参照してください。

図8 Wave ID確認
図8 Wave ID確認(1) 図8 Wave ID確認(2)

それではAPIドキュメントにあるソースコードの例を見てみましょう。これは当然Google Waveではなく、外部サイトに記述すべき内容になります。

リスト1 The "Hello, World" of Google Wave
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Wave Embed API Example: Simple Wave</title>
    <!-- Embed APIライブラリ読み込み -->
    <script src="http://wave-api.appspot.com/public/embed.js" type="text/javascript"></script>
    <script type="text/javascript">
    <!-- Wave用エレメントの初期化関数を定義 -->
    function initialize() {
      // waveサーバーを指定してWavePanelオブジェクトを生成
      // 今のところwaveサーバーはGoogle製しか存在しないので引数は固定
      // 注意:サーバーURL最後の"/"は必須です
      var wavePanel = new WavePanel('http://wave.google.com/a/wavesandbox.com/');
      // Wave IDを指定してWavePanelオブジェクトにwaveをロード
      wavePanel.loadWave('wavesandbox.com!w+waveID');
      // waveを表示するためのエレメントIDを指定してWavePanelオブジェクトを初期化
      wavePanel.init(document.getElementById('waveframe'));
    }
    </script>
  </head>
  <!-- 読み込み完了時にWave用エレメントを初期化 -->
  <body onload="initialize()">
    <!-- waveを表示するためのエレメント -->
    <div id="waveframe" style="width: 500px; height: 100%"></div>
  </body>
</html>

処理の詳細に付いてはソース中に追加したコメントを参照してください。青い字で書かれている部分が自分でwaveを組込んだページを作るときにコピー&ペーストする部分、赤い字で書かれている部分が自分で変更する必要がある部分です。必要な点を修正してファイルを公開すると、そのWebページの上で自由にWaveを閲覧・編集できます。WavePanelオブジェクトには上記以外にも、見た目の変更、参加者の追加、Replyの追加、などいくつかの関数が定義されています。詳細についてはドキュメントを参照してください。

上のコードのloadWave関数の引数を実際に存在するWave IDに変更した例は以下です(見た目が寂しかったのでチェスガジェットを貼付けてみました⁠⁠。

図9 http://hello-google-wave.seesaa.net/
図9 http://hello-google-wave.seesaa.net/

まとめると、Waveを組込むための必須の手順は以下のようになります。

  1. [Google Wave] Google Wave上で組込み対象のwaveを新規作成する
  2. [Google Wave] 作成したwaveの参加者に公開用のユーザーを追加する
  3. [Google Wave] waveのWave IDを調べる
  4. [外部サイト] waveを組込むためのDIV要素を追加し、IDを設定しておく
  5. [外部サイト] ドキュメントにあるJavaScriptのコードをコピー&ペーストして、DIVエレメントのIDとWave IDを書き換える
  6. [外部サイト] 必要に応じて、WavePanelオブジェクトを利用して背景色等を変更する

まとめ

Embed APIを使用すれば非常に簡単にWaveを外部のサイトに組込めることがわかって頂けたと思うのですが、いかがでしょうか?

今のところ外部サイトに組込まれたWaveでもWaveアカウントを持つ人にしか見ることができないため、Embed APIは使いどころが微妙です。しかしいずれ権限を設定できるようになり、アカウントを持たない人は閲覧のみ・アカウントがあれば書込み可、という使い方ができるようになるはずです。そうなればWave以外のサイトでもソーシャルかつリアルタイムなやり取りを簡単に利用できます。もしかするとWaveの普及のみならず、リアルタイムWebの実現に一番力を発揮するのはこのEmbed APIなのかもしれません。

今回作成したサンプルブログは自由に編集して頂いて構いませんので、ぜひ「普通のブログ上でリアルタイムなやり取りができる」おもしろさを感じてみてください。

最後に

今週はGDD参加者1,000人以上にGoogle Waveアカウントが配られ、一気に日本人ユーザーが増えることになりました。本記事の著者プロフィールには私のWave IDが載っていますので、アカウントが手に入ったみなさんは記事の感想、APIに関する質問、作ってみたガジェット・ロボットの紹介などなんでも気軽に話しかけてください。Google Wave内でみなさんとお会いできることを楽しみにしています。

おすすめ記事

記事・ニュース一覧