« 就職活動は「縁」です | メイン | iGoogleテーマエディタのコード解説 --- その2 »

iGoogleテーマエディタのコード解説 --- その1

先日公開した「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"の値です。

 

長くなったので、今日はここまで。続きはまた明日。