小さい頃はエラ呼吸

いつのまにやら肺で呼吸をしています。


jQueryが読み込まれていないページでもjQueryが使えるjQuerify Bookmarklet

jQuery

昨日社内でJavaScriptの勉強会をしました。そこで後輩の新人の子に教えてもらったのがjQuerify Bookmarkletです。jQuerify Bookmarkletは、jQueryが読み込まれていないページでもjQueryが使えるようにしてくれる便利なブックマークレットです。

jQuerify Bookmarklet

jQuerify Bookmarkletは、現在表示中のページに新たにscriptタグを埋め込み、強制的にjQueryを読み込ませるブックマークレットです。

このブックマークレットは何が便利なのでしょうか。その答えは「いまブラウザで見ているこのページを jQuery で調べる&動的に修正して見られたらいいのに」という悩みを解決できることです。
いつでも jQuery を読み込めるブックマークレット jQuerify | バシャログ。 はてなブックマーク - いつでも jQuery を読み込めるブックマークレット jQuerify | バシャログ。

jQueryをブックマークする

以下のコードをコピーして、WDF - Software : ブックマークレット作成スクリプト はてなブックマーク - WDF - Software : ブックマークレット作成スクリプトにペーストします。適当な名前(たとえば、jQuerify Bookmarklet)をつければ、すぐに使うことができます。

var s=document.createElement('script');
s.setAttribute('src','http://jquery.com/src/jquery-latest.js');
document.getElementsByTagName('body')[0].appendChild(s);
jQueryを使ってみる

さっそくjQueryを読み込んでいないページでこのjQuerify Bookmarkletを使ってみます。
1.事前準備として、Firebugを用意します。インストールしていない方は、以下からインストールしてください。

2.続いて、jQueryを読み込んでいないページGoogleにアクセスします。
3.さきほどブックマークしたjQuerify Bookmarkletをお気に入りから起動して、jQueryを読み込みます。
4.読み込みが完了すると、以下のようにscriptタグが追加されます。
5.Firebugを起動します。
6.コンソールを起動して、以下のようにjQueryのメソッドを使ったコードを記述します。

(function(){
  $("#logo").css('width','1000px');
})();

7.実行ボタンをクリックすると、以下のようにロゴ画像が大きくなります。

たったこれだけです。ブックマークからjQueryを読み込ませれば、いつでもどこでもjQueryが使えます。

以下のエントリも合わせてどうぞ