stabucky tool - Google Gadget


Googleガジェットの作り方

GoogleガジェットはXML

Googleガジェットは、XMLを書いて適当なサーバにアップロードするだけでできます。
つまり、いわゆる「ホームページ」を作ることができる人ならばGoogleガジェットを作ることができます。

詳しい説明はガジェット* デベロッパー ガイドに記載されています。

My Gadgets

Googleガジェットを自作するのに便利なツール「My Gadgets」があります。
これもGoogleガジェットの一つです。
自作をはじめる前にこれをiGoogleに追加しておきます。

My Gadgets

XMLに直接書く

実際にGoogleガジェットを自作してみます。
最初は、内容を直接、XML内に書く方法です。
最も簡単な方法です。

sample1.xml

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="sample1" />
<Content type="html">
<![CDATA[
ハロー
]]>
</Content>
</Module>

エディターで上の通り書いて(もちろんコピー&ペーストでも構いません)、「sample1.xml」というファイル名を付けて保存します。文字コードはUTF-8にします。
これを適当なサーバスペースにアップロードします。

ブラウザのアドレスにそのURLを入力して表示してみてください。

サンプル
sample1.xml

表示されれば正しいXMLだと言えます。正しくないとエラーが表示されます。

次にMy Gadgetsの「Add a gadget」にそのURLを入力してボタンをクリックしてください。
sample1.xmlがGoogleガジェットとして追加され、iGoogleに表示されます。
sample1.xmlの文字列の部分を書き換えていろいろ試してみてください。
またこの文字列の部分にはHTMLを使うことができます。

HTMLを参照する

XMLとは別に書いたHTMLを参照することもできます。
既存のページを利用することが可能です。

sample2.xml

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="sample2" />
<Content type="url" href="http://tool.stabucky.com/google/sample2.htm" />
</Module>

sample2.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<p>ハロー</p>
</body>
</html>

エディターで上の通り書いて、「http://tool.stabucky.com/google/sample2.htm」のところを自分のURLに書き換え、それぞれ「sample2.xml」「sample2.htm」というファイル名を付けて保存します。文字コードはUTF-8にします。
これを適当なサーバスペースにアップロードします。
次にMy Gadgetsの「Add a gadget」にsample2.xmlのURLを入力してボタンをクリックしてください。
sample2.xmlがGoogleガジェットとして追加され、iGoogleに表示されます。
sample2.htmの「

ハロー

」の部分を書き換えていろいろ試してみてください。

この方法は既存のHTMLを活用するのに有効であり、特にiframeの表示先として使っていたようなHTMLならばそのまま使えるケースが多いと思います。

JavaScriptを使う

JavaScriptを使うこともできます。
値を与えてそれに応じて表示を変えるということもできます。

sample_js.xml

<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
<ModulePrefs />
<UserPref name="myword" display_name="word" required="true" />
<UserPref name="mycolor" display_name="color" default_value="red" datatype="enum">
<EnumValue value="red" />
<EnumValue value="blue" />
<EnumValue value="green" />
</UserPref>
<Content type="html">
<![CDATA[
<script type="text/javascript">
var prefs = new _IG_Prefs(__MODULE_ID__);
var tempword = prefs.getString("myword");
var tempcolor = prefs.getString("mycolor");
document.write("<p>" + tempword + "</p><p>" + tempcolor + "</p>");
</script>
]]>
</Content>
</Module>

エディターで上の通り書いて、「sample_js.xml」というファイル名を付けて保存します。文字コードはUTF-8にします。
これを適当なサーバスペースにアップロードします。
次にMy Gadgetsの「Add a gadget」にsample_js.xmlのURLを入力してボタンをクリックしてください。
Googleガジェットとして追加され、iGoogleに表示されます。

表示されたGoogleガジェットの「編集」の部分をクリックすると入力部分が表示されます。
「word」のところに言葉を入力し、「color」のところで色を選択して入力します。
保存をクリックすると入力した言葉と色が表示されます。

PHPを使う

HTMLの代わりにPHPを使うこともできます(もちろん、自分のサーバスペースがPHPを使える環境である必要があります)。
ここではPHPに引数(「?」の後に付く文字列)を渡す方法を示します。

standings.xml

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Standings" />
<UserPref name="myleague" display_name="League" default_value="Central" datatype="enum">
<EnumValue value="Central" />
<EnumValue value="Pacific" />
</UserPref>
<Content type="url" href="http://tool.stabucky.com/standings.php?lg=__UP_myleague__" />
</Module>

「http://tool.stabucky.com/standings.php」はプロ野球の順位表を表示します。「?lg=」の後に「Central」または「Pacific」を渡します。
Googleガジェットでは「__UP_名前__」を使い「編集」で設定する文字列を代入することができます。
このサンプルでは「myleague」に与えられた文字列を代入することができ、「__UP_myleague__」を使います。
つまり「standings.php?lg=Central」と書くところを「standings.php?lg=__UP_myleague__」と書きます。


stabucky tool - Google Gadget