« 2007年に人気伸びたのはPython、Ruby/Perlは微減 | メイン | 就職活動は「縁」です »

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を実行します。

igte_0001.png

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

 

igte_0002.pngガジェットのエリアの左側に、iGoogleのテーマを編集するエリアが表示されます。それぞれのリンクをクリックすると、編集エリアが表示されます。

 

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

 

igte_0004.png

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

 

igte_0005.png

 

igte_0006.png

 

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

 

igte_0008.pngこの内容を、テキストファイルにコピペして、適当な名前を付けて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だとデザイン崩れちゃいます。ごめんなさい。