先日公開した「iGoogleテーマエディタbookmarklet」をWebOS Goodiesさんで取り上げていただきました。ありがとうございます。
で、今日はbookmarkletのコード解説をしたいと思います。といっても、たいしたソースじゃないですが。
（※行数はversion 0.1.0 でカウントしているので、後から見るとずれるかもしれませんが雰囲気で追ってください）
1～11行目：コメントです。
12～18行目：
var jq=document.createElement('script');
jq.id="jqery";
jq.type="text/javascript";
jq.src="http://igoogle-theme-editor.googlecode.com/svn/trunk/iGoogleThemeEditor/dist/jquery-1.2.2.min.js?"+new Date().getTime();
document.getElementsByTagName('head')[0].appendChild(jq);
いきなりjQueryのjsファイルをheadにappendしています。今回はデザインを色々といじるってことで、ライブラリを読み込んだ方が都合が良かったのでそうしました。jQueryを選んだ理由は、ファイルサイズが小さく、グローバルなオブジェクトを汚染せず、かつスタイルの操作がやりやすいからです。
19～22行目：
var jqueryStartTimer;
if(!jqueryStartTimer) jqueryStartTimer = setInterval(themeEditorload,500);
続いて、iGoogleテーマエディタを表示するために、setIntervalで定期的にthemeEditorload()を実行します。即実行できないのは、scriptタグで後からappendしたjsファイルが、ロードが終了し、ページ上でコンパイルされるまでタイムラグがあるからです。
23～31行目：
function themeEditorload(){
try{
if($){
clearInterval(jqueryStartTimer);
}else{
throw new Exception();
}
メインメソッドです。$をチェックし、定義されていれば（if($)でtrueが返れば）、setIntervalで定義したタイマーをclearIntervalでクリアしています。もしこの関数が実行されたとき、まだjQueryがロードされていなければ、Exceptionをthrowしてスルーします。
32～46行目：URLを操作する現在開発中のjQueryプラグインです。まだアルファ版にもならない完成度ですが、試しに使ってみることにしました。
47～61行目：iGoogle Theme 用のXMLの元データです。文字列の最後に\を付ければ改行できることを知ったので、そういう風に書いています。
62～65行目：
function createAttr(id,attr){
if($('#'+id).val()) return '<Attribute name="'+attr+'">'+$('#'+id).val()+'</Attribute>\r\n';
return '';
}
この後のcreateXML()の中で使っている関数です。iGoogle Theme 用のXMLを作る際、ユーザが値をテキストフィールドに入力していれば、引数のデータを利用してXMLデータの一部を返します。
66～102行目：XMLを生成している部分です。思いっきりベタ書きです。
103～104行目：
var lang = $.urlParams('lang',$('#igteid')[0]);
ここで、先ほど紹介したURLを操作するプラグインを利用しています。このブックマークレットをappendしているscriptタグのsrc属性のURLから、GETパラメータに指定されているlang属性を取得しています。
105～141行目：ここで多言語のメッセージオブジェクトを保持しています。そう、このbookmarkletは無駄に多言語対応させているのです。
142～149行目：
function message(key,lang){
try{
var t = words[key];
return (t[lang])?t[lang]:t['en'];
}catch(e){
return '';
}
}
メッセージオブジェクトから、言語名とキー値を元に、メッセージを取得します。デフォルトは"en"の値です。
長くなったので、今日はここまで。続きはまた明日。
