[javascript] DQWindowManager - Dragon Quest のコマンドウィンドウのようなものを表示させる JavaScript
昨日，週次レビューをやってるときにふと気になりだしたので，夜通しでつくってました．最低限は形になっているようなので公開してみます．
何？
上記のページにあるリンクをブックマークレットやブックマークとして登録することで，いろいろなサイトを閲覧時にいつでも Dragon Quest のコマンドウィンドウのようなものを表示することができます．
表示されたウィンドウにはいくつかのメニューがあり，それぞれのアクションを起こすことができます．
．．．といっても，今のところ，はてなブックマークとか kwout とかくらいしか行えませんが．
実行例
Google とか Twitter とかで実行してみたキャプチャを以下に示してみます．
元の CSS の影響をかなり受けているようで，サイトごとに表示が異なるのが明らかですね ＞＜
ちょっと中身について： 個人的に苦戦した点
DQWindowManager は jQuery に依存しています．ブックマークレットでは DQWindowManager のスクリプト （以下，dqwm.js） を動的に読み込んでいるのですが，（ブックマークレット実行時に）アクティブになっているサイトに，予め jQuery がインポートされていなければエラーになってしまいます．
ので，dqwm.js の中で動的にロードするようにしました．次のような感じです．
if( typeof jQuery == 'undefined' ) {
var __scr = document.createElement( ’script’ );
__scr.src = ‘jquery.jsのURL’;
document.body.appendChild( __scr );
}
//
// 以下，jQuery に依存したコード
//
しかし，これだとうまくいきませんでした．
どうやら，jquery.js を読み終える前にそれ以降のコードが実行されてしまっているようですね．
1時間以上悩んだ末に思い出したのが 先日の Kanasan.JS での amachang さん や yhara さん の同期・非同期に関する話題でした．
JSDeferred が非常に強力だったりするのですが，さらにインポートとなるとさらにややこしくなりそうなので，setTimeout 関数を使う方法を採ってみました．
こんな感じです．
var execDQWindowManagerAfterLoadingJQuery = function() {
if( typeof jQuery == ‘undefined’ ) {
setTimeout( execDQWindowManagerAfterLoadingJQuery, 0 );
}
else {
//
// jquery.js インポート完了後の処理
//
new DQWindowManager();
}
};
execDQWindowManagerAfterLoadingJQuery();
これでうまくいってくれたみたいです．
おわりに
思いつきでわけわからないものを作ってみたわけですが，スクリプトの動的ロードにおける同期の必要性なんかについて学べたことを考えれば，まぁよしとしておきますかね．
サイトごとの見え方の差異をなくしていくのに加えて，個人的にまだやってみたいこともいくつかありますので，少しずつバージョンアップ （？） させてみることにします．
![twitomonitor [ついともにた]](http://www.iwa-ya.net/img/banner/twitomonitor.png "twitomonitor [ついともにた]")
