Waveガジェットを作成する前に
Waveガジェットはインターネットから見える場所にXMLファイルを配置する必要があります。Waveガジェットを公開するにあたり、いくつか方法があるので紹介します。
一番手軽なのはGoogle Gadgets Editor（以下、GGE）を使用して作成する方法です。GGEはブラウザ上で動作するエディタで、GGEでファイルを保存するとGoogleのサーバに保存されます。
そしてそのまま世界に公開することもできます。必要なものはGoogleアカウントだけなので、気軽にガジェットを作成することができます。
また、Google Codeを使用するという手段もあります。Google Codeにコミットすると外部からアクセスできるURLが提供されるため、そのURLでWaveガジェットを貼り付けることができます。
他にはオンラインストレージサービスの「Dropbox」を使用するという手段もあります。Dropboxのpublicディレクトリにファイルを保存すると、自動でアップロードされ外部からアクセスできるようになります。エディタで保存するだけで公開できるため、非常に楽です。
今回は手軽に公開することができるためGGEを利用します。
GGEはたまに不安定で、正常に動作しないことがあります。その際はGoogle Codeなど別のホスティングサービスを使用することをお勧めします。
さぁWaveガジェットを作成しよう
最初に画面を作ろう
Waveガジェット開発の第1ステップとして、まず画面を作成します。画面が完成したら、それに対しJavaScriptでコードを追加していきます。
次のHello Worldガジェットを見てください。画面にHello World!と表示するだけの、一番シンプルなガジェットです。
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Hello World!" />
<Content type="html">
<![CDATA[
Hello, world!
]]>
</Content>
</Module>
Contentタグの中にHTMLを記述することで画面を表示することができます。よってHello world!となっている部分を変更し画面を作成します。
画面はHTMLとスタイルシートを用い作成します。たとえば次のようになるでしょう。
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Vote Gadget"/>
<Content type="html">
<![CDATA[
<html>
<head>
<style type="text/css">
.good {font-size:50pt;font-weight:bold;color:red}
.good_result {font-size:15pt;font-weight:bold;color:black}
.bad {font-size:42pt;font-weight:bold;color:blue}
.bad_result {font-size:15pt;font-weight:bold;color:black}
.total {margin:0 0 0 20px;font-size:30pt;font-weight:bold;}
</style>
</head>
<body>
<span class="good" id="good">○<span class="good_result" id="good_result">12</span></span>
<span class="bad" id="bad">×<span class="bad_result" id="bad_result">5</span></span>
<span class="total" id="total">0</span>
</body>
</html>
]]>
</Content>
</Module>
値を出力する部分は、spanタグを配置しid属性で名前を付けます。上記の例ではgood_result、bad_result、totalが値の表示部分となります。
自分好みの画面を記述するか、上記のXMLをコピー＆ペーストして画面を作成します。では画面だけ作ったところで、一度Waveに貼り付けてみましょう。
上記のXMLをGGEにコピー＆ペーストする際は、一度テキストエディタに貼り付け、プレーンテキストをコピーし直す方がよいでしょう。直接コピー＆ペーストすると、半角スペースが に変換される場合があります。
また、テキストエディタからGGEにコピー＆ペーストする際は、エディタの内部コードがUTF-8で無いと正しく貼り付けられない場合があります。
公開し、Waveに貼り付けてみよう
GGEの左上のメニューから［Save］を選択し、保存します。
ファイル名を聞かれるので「vote_gadget.xml」と入力し、［OK］ボタンを押下します。
初回保存時などに、「作成者しか当該ガジェットを編集できないが誰でも閲覧はできる」ことやプライバリシーポリシーの詳細へのリンクが明記された、下記の画面が表示されることがあります。特に問題なければ［Save］ボタンを押下して手順を進めましょう。チェックボックスをオンにしておくと、以後この注意が表示されなくなります。
次に、それを公開します。GGEのメニューから［Publish］を選択します。
Publishを選択した際に、「Validation is not allowed for this file.」と赤く表示されることがあります。これはガジェットのXMLが不正なため公開に失敗したことを示しています。XMLが妥当かどうかチェックしてください。
Validation Warningと表示され「これらの設定がされていませんがよろしいですか？」と注意されます。［OK］ボタンを押下すると注意を無視し公開することができます。
めでたく公開できました！ ｢here」というリンクを右クリックし、公開されたURLをコピーして、メモしましょう。このURLが作成したガジェットのURLとなります。
次にGoogle Waveでの作業に移り、Waveに今作成したガジェットを貼り付けます。ツールバーからガジェット追加ボタンを押下します。
もしWaveの上にこのツールバーが出ていない場合は、Waveが編集状態ではありません。Waveの右上にある▼メニューを開き、［Edit this message］を選択します。
ガジェット追加ボタンを押下すると次のダイアログが表示されるので、ガジェットのURLを入力し［Add］ボタンを押下します。
これで無事にガジェットを貼り付けることができました。
