ExtJSで楽しくRIA業務アプリ開発

このブログに載っているサンプルコードや、簡単なコードをチェックする際に、わざわざHTMLファイルを用意して、ExtJSの読み込むコードを埋め込んで、Java Scriptを書くのは少し面倒くさかったりします。そんなときに使える小技にブックマークレットとFirebugの合わせ技があります。
ExtJSライブラリをブックマークレットで読み込んで、FirebugのコンソールにExtJSのコードを書いていくことができます。
元ネタはここです。
http://extjswordpress.net/extjs-apps-as-bookmarklets/

上記のリンク先からのコードをブックマークして使います。
下にそのコードを見やすく改行したのを展開してみました。

javascript:
var ss=document.createElement('link');
ss.setAttribute('rel','stylesheet');
ss.setAttribute('type','text/css');
ss.setAttribute('href','http://extjs.cachefly.net/ext-2.2/resources/css/ext-all.css');
document.getElementsByTagName('head')[0].appendChild(ss);
void(ss);
var core=document.createElement('script');
core.setAttribute('src','http://extjs.cachefly.net/builds/ext-cdn-8.js');
document.body.appendChild(core);
core.onload=function(){Ext.Msg.alert('Ext',%20'ExtJS%20is%20loaded!');};
core.onload=function(){Ext.Msg.alert('Ext',%20'ExtJS%20is%20loaded!');};
void(core);

前半はExtJSのCSSを読み込んでいて、後半はライブラリを読み込んでいます。どちらもextjs.cachefly.netのものを使っています。
最後のところでcore.onloadで２回ExtJSのアラートを読んでいるのがよくわかりません。試しに外したものでやってみましたが、普通に動きました。Firefoxで試したので、ひょっとしたら別のブラウザのためのハックかもしれません。

適当なページ(JSを使っていないページが良い)でブックマークレットをクリックするとExtJSのアラートが出て、ExtJSのライブラリの読み込みが完了します。

あとはFirebugのコンソールに好きなコードを書いて実行または⌘+Returnで実行できます。
元ページによっては多少背景が変だったり、エラーが出たりするのはどうしようものないので、実行に適したページを探しておくといいかもしれません。

実際にFirebugでコードを実行してみるとこんな感じです。

ちなみに元ネタのブログは以前紹介した。ExtizeMeと同じとこ(http://extjswordpress.net)です。世界には色々変な人がいますね。

このsus4 ExtJSブログのサンプルをちょろっと実行したい場合に試しに使ってみてください。
ExtJSのコードを試すための、ちょっとしたtipsでした。