岩家ぶろぐ

昨日，週次レビューをやってるときにふと気になりだしたので，夜通しでつくってました．最低限は形になっているようなので公開してみます．

DQWindowManager – crafts – issm’s …

何？

上記のページにあるリンクをブックマークレットやブックマークとして登録することで，いろいろなサイトを閲覧時にいつでも 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();

これでうまくいってくれたみたいです．

おわりに

思いつきでわけわからないものを作ってみたわけですが，スクリプトの動的ロードにおける同期の必要性なんかについて学べたことを考えれば，まぁよしとしておきますかね．

サイトごとの見え方の差異をなくしていくのに加えて，個人的にまだやってみたいこともいくつかありますので，少しずつバージョンアップ （？） させてみることにします．

こちらもあわせてどうぞ