読者です 読者をやめる 読者になる 読者になる

kur.jp

バイオリンと自転車をこよなく愛するkurのチラシの裏。たまには技術的なことを書いたりするかも知れません。

GreasemonkeyでjQueryを利用する

たいていのプログラミング言語においては,includeとか,requireだとか,useだとかいう機能を使うことで,外部ファイルを読み込むことができる.

ところが,JavaScriptにおいては,こういった機構が用意されていない.だけど,プログラムの実行に必要なライブラリだけを読み込むすることができるので,通信量の削減だとか,メモリの使用量だとか,様々なメリットがある.

で,そのためにどんな方法があるのかと調べてみたところ,下記の2つの方法があることがわかった.

  1. XMLHttpRequestで読み込み,その後evalで評価を行う方法
  2. scriptタグを生成することによって読み込みを行う方法

それぞれに利点欠点があるんだけど,1の方法だとセキュリティ上,ドメインの制約を受けてしまうため,今回開発しているアプリケーションには適用できない.なので,2の方法を採用することとした.具体的なコードはこんな感じ.

var head = document.getElementsByTagName("head")[0]; script = document.createElement('script'); script.type = 'text/javascript'; script.src = "jQuery.js"; head.appendChild(script);

これで,head内に,jQueryスクリプトが読み込まれる.読み込みには少し時間がかかるのでチェック機構を付けるなどの注意が必要だと思うが,問題なく利用できる.なお.具体的なチェックの仕方としては,

if(window.jQuery)

とかで良いと思う.

次に,Greasemonkeyを利用するときの,外部スクリプトの読み込みについて書く.先程と同じような方法で

var head = document.getElementsByTagName("head")[0]; script = document.createElement('script'); script.type = 'text/javascript'; script.src = "jQuery.js"; head.appendChild(script);

とすれば外部スクリプトを読み込むことができる.が,問題はここからで,ちゃんと調べきれてない,というか調べても良くわからなかったんだけど,Greasemonkeyを利用すると,名前空間がunsafeWindowになったりだとか,なんだか良くわからない制約があったりだとかで面倒.

なので,こんな感じでメインスクリプトごと,あとから読み込んでしまう方法を取ってみることにした.

var head = document.getElementsByTagName("head")[0]; script = document.createElement('script'); script.type = 'text/javascript'; script.src = "js.js"; head.appendChild(script); var head = document.getElementsByTagName("head")[0]; script = document.createElement('script'); script.type = 'text/javascript'; script.src = "jquery.js"; head.appendChild(script);

詳しくはチェックしてないんだけど,簡単にチェックした限りでは,こうすることで,通常と同じ名前空間を利用できるみたいなので,私のやりたいこととしては解決.もちろん,

window.jQuery

も利用できる.まぁ,ある程度の遅延は仕方がないけども.