2010年4月4日日曜日

BookmarkletでDojo

BookmarkletでDojoのdijit.Dialogを表示させるためのメモ。
きっかけは、ブラウザのプラグインを作ろうと思ったのだが、個別のブラウザ毎に作るのは面倒。Greasemonkeyでもブラウザが対応している必要がある。Webアプリにするとサーバーが必要。ということで、ブックマークレットにしてみた。
ちなみに、やってみて思ったが、こういう理由がない限りは、ブックマークレットではなく、ブラウザのプラグインとかにすべき。遅いし、開発効率は悪いしであまり良い事はない。

さて、結果だけを先に書くと、こんな感じ。

javascript:(function(){djConfig={afterOnLoad:true,%20addOnLoad:%20function(){
dojo.require("dijit.Dialog");
dojo.addOnLoad(function() {
var myDialog = new dijit.Dialog({title: "My Title",content: "My Content",style: "width: 300px"});
myDialog.domNode.parentNode.className = "tundra";
myDialog.show();
});
}};
var e1 = document.createElement("link");
e1.rel="stylesheet";
e1.href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/resources/dojo.css";
document.getElementsByTagName("head")[0].appendChild(e1);

var e2 = document.createElement("link");
e2.rel="stylesheet";
e2.href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css";
document.getElementsByTagName("head")[0].appendChild(e2);

var%20e=document.createElement("script");e.type="text/javascript";e.src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js.uncompressed.js";document.getElementsByTagName("head")[0].appendChild(e);}
)()

Dojoのjsを指す、scriptタグを動的に生成し、それの読み込みが終わったらdojo.addOnLoadで処理を行うというもの。JSONPが使えれば良いのだが、それの代わりに、djConfigを宣言し、その中で、読み込み後の処理を書いている。

addOnLoadが2重になっているのは、dojo.requireが終了するのを待っているため。同じfunctionでnew dijit.Dialogを呼ぶと、dojo.requireが終了していないのでエラーとなる。この方法が正解なのかはわからない。

linkタグを生成して、tundra.cssは必ずしも必要ないが、ないとDialogはみっともない。

参考にしたのは、
http://dojotdg.zaffra.com/tag/bookmarklet/

ただ、本当に動いているのかどうかは激しく疑問。素直に、プラグインなり、Webアプリにしたほうがよさげ。

0 コメント: