iGoogleのテーマXMLを作成するbookmarklet (でぃべろっぱーず・さいど)

先日公開されたiGoogle Theme API を便利に使うためのbookmarkletを作ってみました。

iGoogle のページで実行すると、テーマ変更用のエディタが表示されます。

iGoogle Theme Editor （←右クリックからお気に入りに追加できます）

javascript:var s = document.createElement('script');s.id="igteid";s.type="text/javascript";s.src="http://igoogle-theme-editor.googlecode.com/svn/trunk/iGoogleThemeEditor/dist/ige.js?lang=ja&"+new Date().getTime();document.body.appendChild(s);void(0);

例えば、↓こういうデザインにしているiGoogleの画面でbookmarkletを実行します。

すると、適用されているデザインがクリアされて（そう言う風に見せかけているだけですが）、↓こんな画面になります。

「ヘッダ部分」をクリックすると、ヘッダエリアのデザインを変更することができます。画像のURLを指定するところには、サーバにアップロード済みの画像のアドレスを入力してください。画像を使用しない場合は空欄でかまいません。

以下、同様に「タブ部分」「ガジェット部分」「フッタ部分」を変更できます。

入力した後、「XML生成 >>」をクリックすると、テキストエリアに現在適用されているテーマのためのXMLが表示されます。

この内容を、テキストファイルにコピペして、適当な名前を付けてxmlとして保存してください。

保存したxmlをサーバにUP（サーバを持っていない人は、Google Codeにホスティングすることができます）して、↓以下のようにURLを指定すると、xmlのデザインを確認することができます。

ちなみに、超簡単ですが、↓僕が試しに作った白黒のデザインのxmlです。

http://www.google.com/ig?skin=http://www.chrisryu.com/data/igoogle_theme/blackandwhite.xml

作ったXMLを公開したり、コンテンツディレクトリに登録する際は、XMLの以下の部分を編集してください。

<ConfigMap type="Skin">
<Meta name="title">theme title</Meta>
<Meta name="description">theme description</Meta>
<Meta name="author">author</Meta>
<Meta name="author_email">email</Meta>
<Meta name="thumbnail">thumbnail url</Meta>
<Meta name="screenshot">screenshot url+</Meta>
</ConfigMap>

こんなツールは、もっと使い勝手が良くて便利なものをGoogleが提供してくれそうですが、jQueryの練習のために（jQuery読み込んでます）作ってみました。

内容の解説は、また別のエントリで。

2008.1.21 12:15追記　動作確認しているブラウザは、IE7 & FF2です。IE6だとデザイン崩れちゃいます。ごめんなさい。