iGoogleガジェットを作ってみる

展覧会案内の週間リスト表示が一応できたので、iGoogleのガジェットとして表示できるようにしてみます

iGoogleっていうのは、自分用のgoogleのtopページを作れるサービスで、ニュースとか天気予報との表示枠をガジェットとして配置することができます


このガジェットを自分で作成することが出来るので、今回はこれを作ってみることにします


ガジェットの作り方を勉強する

まずはGoogle ガジェットのページからスタートガイドざっと読みます。日本語ページなので助かります。
ただし、Google gadgetはiGoogle以外にdesktop用等種類があって、微妙にAPIの対応等が異なるみたいです。最初はガイド通りに作っても、動作しなくて悩みましたが、gadgets.* APIが
iGoogle Sandbox デベロッパー ガイドかLegacy Developer's Guideを読んだほうが良いかも。他人の作ったgadgetのソースを見ることができるのですが、いわゆるレガシーな記述が多いと思うのでLegacy Developer's Guideが参考になりそうです。Legacy....の方は日本語ページが無いので、Englishページからしか見つけられません

開発環境を準備する

必要なものはwebブラウザだけです。テキストエディタすら要らないです。
コーディングとプレビューはweb上のGoogle Gadgets Editorを使用します。これも日本語ページからは見つかりませんでした。Google Gadget Editor(以降ggeと書きます)はiGoogle上に配置できます

あとはdeveloper.xmlガジェットを使うと便利です。作成したgadgetはgoogleのサーバ上でキャッシュされるので開発時に変更したコードがiGoogle上で反映されないことが良くあります。developerガジェットでCachedチェックを外しておくとキャッシュされなくなります

上記のガジェットと作成中のガジェットをiGoogleに配置したタブを作成することができます



コードを書いてみる

ggeで最初にHello, worldサンプルコードが表示されているのでこれを書き換えていきます。previewタグで書き換えたコードを直ぐに試すことが出来ます

Hello, world の部分にhtmlを直接書いていく感じです。javascriptもここに書きます

<script type="text/javascript">
function jump(str){
var url = 'http://forlune.appspot.com/week?startdate='+str;
_IG_FetchContent(url, function (responseText) {
var html = responseText;
_gel("week").innerHTML = html;
});
_IG_AdjustIFrameHeight();
}
function dateclick(str){
jump(str);
}
function cardclick(str){
window.open('http://forlune.appspot.com/card?key='+str,'_blank');
}
_IG_RegisterOnloadHandler(jump);
</script>
<div id="week">Loading...</div>

まず

  _IG_RegisterOnloadHandler(jump);

でページが表示されるときに、function jump()を実行します

jump()内で、展覧会案内の週間リストhtmlをサーバーからロードします

    _IG_FetchContent(url, function (responseText) {});

ロード後にfunction(responseText){...}が実行されるので<div id="week"> を受信したhtmlで書き換えます
最後にガジェットの表示高さを

    _IG_AdjustIFrameHeight();

で調整して終わりです

その他、表示コンテンツ内のボタンを押したときの処理をするfunctionも書いておきます。表示の体裁を整える<style TYPE="text/css">もここに書いちゃいました
後はガジェットのタイトルとかを記述して完成です

iGoogleで使えるようにアップロードする
ggeのEditorタブのFileメニューからSave Asでファイル名を決めて保存します。保存先はgoogleのサーバでアカウント毎に管理されてます。保存したファイルはOpenメニューで再編集することも出来ます。
保存したらPublishでiGoogleに登録します


Add to my iGoogle page をクリックするとiGoogleに追加できます
Add to a webpage で自分のウェブページに貼り付けることも出来ます
↓こんな


こんな感じで週間展覧会案内リストのiGoogleガジェットが出来ました。週間リストの内容はxmlで受信してjavascriptで表示の体裁を整えるようにしたほうが、自由度が高くて良いかなと思いました。そのうち書き換えようと思ってます