Google，iGoogle用にオリジナルのテーマが作成できるAPIを公開：ITpro
という記事を見て、面白そうだったので自分だけのテーマを作ってみた。
WebAPIと聞くと「プログラムの中で、Googleから提供されてるこのメソッドを呼び出して・・・」と身構えてしまうかもしれないけれど、方法は意外と簡単。
1.
リファレンスで指定されたとおりにXMLファイルを書く
2. Webサーバに置く
3. （もし持ってないなら）Googleのアカウントを取得して
iGoogleにログイン
4. URLの後ろに「?skin=XMLファイルのURL」をつける
Googleがサンプルとして提供しているXMLファイルがあるので、そこを見てみると分かりやすいかもしれない。
http://www.google.co.jp/igにアクセスしたら、いつものiGoogleが表示される。
次にURLの後ろに「?skin=XMLファイルのURL」をくっつけた状態でアクセスしてみよう。
ちょっと長いけど、
http://www.google.com/ig?skin=http://gadget-doc-examples.googlecode.com/svn/trunk/themes/theme_simple.xmlを開いてみる、さっきとおなじiGoogleに「skin=」というパラメータをくっ付けただけなのに・・・・・・背景とGoogleロゴの色が変わったー。
目に見える変化は楽しいし、嬉しい。
じゃあ自分のXMLファイルを作ってみよーうー、と勢い込んで作ってみた。
作るも何も
iGoogle Themes APIのHOMEにある"How do I start?"に書いてある通り、例を見て
デベロッパー向けガイドを読んで、必要に応じて
リファレンスを参照して色々直すだけです。
とはいえリファレンスは英語のままなので、「XMLファイルにコメントの形式でリファレンスの日本語訳をつけたもの」を以下にざっくり並べておきます。
リファレンスを0から10まで訳したありませんし、解釈の間違っているものがあるかも知れません。上手くいかないときはぜひ元の
リファレンスも参照して下さい。
ついでにコメントで間違いや不足を教えていただけると嬉しいです。
■XMLファイルの書き方の例<?xml version="1.0" encoding="UTF-8" ?>
<ConfigMaps>
<!-- どんな時間も常に適用されるスキン -->
<ConfigMap type="Skin">
<!-- テーマ名（テーマ一覧で表示される）, 0-30文字 -->
<Meta name="title">
HogeTheme</Meta>
<!-- テーマの説明, 0-300文字 -->
<Meta name="description">
Tis the Theme of Hoge</Meta>
<!-- 作者名（テーマ一覧で表示される）, 0-50文字 -->
<Meta name="author">
mochikoAsTech</Meta>
<!-- 作者のEメールアドレス（Googleやユーザからのコンタクト用）, 0-100文字で@必須 -->
<Meta name="author_email">
myMailAddress@mail.ne.jp</Meta>
<!-- 作者の所在地, 0-100文字 -->
<Meta name="author_location">
Japan</Meta>
<!-- サムネイル（410px×70px）のURL（FQDN）, png, gif, jpgのどれか -->
<Meta name="thumbnail.url">
http://hoge.com/image/thumbnail.png</Meta>
<!-- スクリーンショット（680px×116px）のURL（FQDN）, png, gif, jpgのどれか -->
<Meta name="Screenshot.url">
http://hoge.com/image/screenshot.png</Meta>
<!-- ヘッダの背景色, 画像がない場合や透過画像の背景に表示される -->
<!-- 指定方法は3種類, #xxxxxx, RGB(x,x,x), もしくは下記の色名（以下「色名」と書いてあるものは全てこれと同様） -->
<!-- aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, or yellow -->
<Attribute name="header.background_color">
purple</Attribute>
<!-- ヘッダ画像（640px×175px）のURL（FQDN）, png, gif, jpgのどれか -->
<Attribute name="header.tile_image.url">
http://hoge.com/image/header.png</Attribute>
<!-- ヘッダリンク色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
<Attribute name="header.link_color">
white</Attribute>
<!-- ヘッダテキスト色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
<Attribute name="header.text_color">
white</Attribute>
<!-- iGoogleのヘッダロゴ, 28種類から選択 -->
<!--
http://code.google.com/apis/themes/docs/reference.html#Ref_Logos -->
<Attribute name="header.logo">
beveled_white</Attribute>
<!-- タブのボーダー色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
<Attribute name="gadget_area.tab.border_color">
silver</Attribute>
<!-- 選択タブの背景色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
<Attribute name="gadget_area.tab.selected.background_color">
purple</Attribute>
<!-- 選択タブの文字色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
<Attribute name="gadget_area.tab.selected.text_color">
white</Attribute>
<!-- 非選択タブの背景色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
<Attribute name="gadget_area.tab.unselected.background_color">
purple</Attribute>
<!-- 非選択タブの文字色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
<Attribute name="gadget_area.tab.unselected.text_color">
white</Attribute>
<!-- ガジェットエリアのボーダー色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
<Attribute name="gadget_area.border_color">
silver</Attribute>
<!-- ガジェットエリアのタイトルの背景色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
<Attribute name="gadget_area.gadget.header.background_color">
white</Attribute>
<!-- ガジェットエリアのタイトルの文字色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
<Attribute name="gadget_area.gadget.header.text_color">
white</Attribute>
<!-- ガジェットエリアのガジェットのボーダー色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
<Attribute name="gadget_area.gadget.border_color">
silver</Attribute>
<!-- ガジェットエリアのリンク色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
<Attribute name="gadget_area.gadget.body.link_color">
white</Attribute>
<!-- 選択タブのメニューアイコン（12px×12px）のURL（FQDN）, png, gif, jpgのどれか -->
<Attribute name="gadget_area.menu_icon.image.url">
http://hoge.com/image/01.png</Attribute>
<!-- ガジェットのメニューアイコン（12px×12px）のURL（FQDN）, png, gif, jpgのどれか -->
<Attribute name="gadget_area.menu_icon.hover_image.url">
http://hoge.com/image/01.png</Attribute>
<!-- ガジェットの削除アイコン（12px×12px）のURL（FQDN）, png, gif, jpgのどれか -->
<Attribute name="gadget_area.delete_icon.image.url">
http://hoge.com/image/03.png</Attribute>
<!-- マウスオーバー時のガジェットの削除アイコン（12px×12px）のURL（FQDN）, png, gif, jpgのどれか -->
<Attribute name="gadget_area.delete_icon.hover_image.url">
http://hoge.com/image/04.png</Attribute>
<!-- ガジェットの折畳アイコン（12px×12px）のURL（FQDN）, png, gif, jpgのどれか -->
<Attribute name="gadget_area.collapse_icon.image.url">
http://hoge.com/image/05.png</Attribute>
<!-- マウスオーバー時のガジェットの折畳アイコン（12px×12px）のURL（FQDN）, png, gif, jpgのどれか -->
<Attribute name="gadget_area.collapse_icon.hover_image.url">
http://hoge.com/image/06.png</Attribute>
<!-- ガジェットの展開アイコン（12px×12px）のURL（FQDN）, png, gif, jpgのどれか -->
<Attribute name="gadget_area.expand_icon.image.url">
http://hoge.com/image/07.png</Attribute>
<!-- マウスオーバー時のガジェットの展開アイコン（12px×12px）のURL（FQDN）, png, gif, jpgのどれか -->
<Attribute name="gadget_area.expand_icon.hover_image.url">
http://hoge.com/image/08.png</Attribute>
<!-- フッタの背景色, 画像がない場合や透過画像の背景に表示される -->
<Attribute name="footer.background_color">
purple</Attribute>
<!-- フッタリンク色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
<Attribute name="footer.link_color">
white</Attribute>
<!-- フッタテキスト色, #xxxxxx, RGB(x,x,x), もしくは色名 -->
<Attribute name="footer.text_color">
white</Attribute>
<!-- フッタ画像（640px×140px）のURL（FQDN）, png, gif, jpgのどれか -->
<Attribute name="footer.center_image.url">
http://hoge.com/image/footer.png</Attribute>
<!-- 作成者のロゴ画像（100px×50px）のURL（FQDN）, png, gif, jpgのどれか -->
<!-- リファレンスだと先頭にfooter.がついているがfooter.つけてると出ない -->
<Attribute name="attribution.image.url">
http://hoge.com/image/auther.png</Attribute>
</ConfigMap>
</ConfigMaps>
補足事項・
元々のリファレンスに間違いが有ります
「attribution.image.url」は
リファンレンスだと、「footer.attribution.image.url」になっていますが、正しくは「attribution.image.url」です
（
Googleグループでも
同じ指摘が出ていた）
・時間ごとにスキンを変更することが出来ますが、そちらはまだ試していないので上記のサンプル（兼日本語リファレンス）には含めていません。「<Trait name="TimeOfDay">8am-10am</Trait>」のような形で、分単位で指定可能です。（例えば5:15pm-5:20pmのように、一日の中で5分だけ見られる特別なスキンも用意できます）
・さらにリファレンスを読むと、お天気によってもスキンを変えられるようです。
「A ConfigMap represents one fully-qualified skin. That is, it represents a skin with all attributes that apply to it (for example, Foo skin for Cloudy weather)」とあったのですが、残念ながらその部分の書き方が分かりません。ご存知の方は教えてください。
・完成した！このスキンは我ながら素晴らしいので、公開してみんなに使ってもらいたい！と思ったら、
Submit iGoogle ThemesでXMLファイルのURLを登録して、公開することが可能です
但し、公開する場合は「メタデータを全て含めなければならない」「フッタのattribution.image.url以外の場所に社名を入れてはならない」など色々制限事項がありますので、よくガイドラインを読み、十分テストをした上で公開するようにしましょう
・
FC2ホームページのように、画像に対する直リンクを禁止しているWebサーバを利用すると、ヘッダやフッタの画像が表示されないことがあります（というか表示されません）
iGoogleにskinパラメータをつけて開くと、HTTPヘッダにリファラが含まれた状態で、画像を置いてあるサーバにリクエストが行くため、「外部ドメインから画像への直リンクだ」と見なされて、302で「
この画像に対するアクセス権限がありません」というページに飛ばされてしまいます
iGoogleの画面をずっと開きっぱなしということはあんまりないかと思いますが、使ってみると検索の折々で意外と目につきます。
自分のiGoogle Themeを自分で作る、暫く色々試して楽しめそうです。
テーマ : Google関連
ジャンル : コンピュータ
