JavaScript
jQuery
bookmarklet

Bookmarkletを作ろう(jQuery準備編)

Bookmarklet準備編その2

はじめに

前回は、Bookmarkletのごくごく基本の実行方法とCloure Compilerを使って開発を簡単に行う方法を紹介しました。今回は、Bookmarkletで気持ちよく遊ぶための準備編の続きで、BookmarkletでjQueryを使うための下準備をします。

jQueryが使える状態か確認

まずは、ブックマークレットを動そうとしているページがjQueryを使っているかどうか確認しましょう。HTMLのソースから探してもよいですし、開いているページのブラウザのアドレスバーに以下を入力してみると簡単です。

javascript:alert($.fn.jquery);

まず、対象となるページを開き、

image.png

ブラウザのURLバーに先ほどのコードを入力してEnterキーを押すだけです。

image.png

バージョンが表示される場合は、jQueryが使われています。何も表示されない場合には、dev toolのコンソールにエラーが出ていないか確認しましょう。

jQueryが使われていてそのバージョンで十分な場合

ページ内のjQueryで十分な場合には、以下のコードをサンプルにjQueryを使ってコードを書けばOKです。

void((function(a,b){
    //ここに自由にコードを書く $も使える状態です

    console.log('param=%s,%s', a,b);
    alert($.fn.jquery);
    $('img').hide();
}('A','B')))

このコードを実行すると、開いているページ内の画像が全て非表示になります。

jQueryがない場合、バージョンが不足している場合

この場合は、実行するブックマークレットからjQueryのライブラリを読み込んでから、コードを実行するようにします。コードの内容は、参考ページ1と参考ページ2に書いてあるとおりです。この辺にはあまり独自要素を持ち込まず、先輩の知恵をそのまま拝借しています。自分の動かす環境では2重にロードすることの待ち時間は気にならないので、常に最新版のjQueryを読み込むことにしました。

bookmarklet-with-jquery.js
void((function(f){
    var script = document.createElement('script');
    script.src = '//code.jquery.com/jquery-3.2.1.min.js';
    script.onload = function(){
      var $ = jQuery.noConflict(true);
      f($);
    };
    document.body.appendChild(script);
  }
)(
function($, undefined){
  //ここに、$変数(jQuery)を使って自由にコードを書く

  // バージョン確認
  ;;; console.log('jQuery: ', $().jquery);


}
)
);

コードの説明も先輩方が書いているので省略します。バージョン確認のブロックに自分のやりたい事を書くことができます。今後は、このjsファイルの基本の形として、色々組み込んで遊びます。

コンパイルしてみる

前回確認した方法で、Closure Compilerを通し、コンパイルできること(構文エラーがないこと)と、コンパイル済みコードを作ってみます。

Closure Compilerの左側

image.png

コンパイル結果

image.png

voidで囲むところから開始すると、Closure CopmpilerはWarningを返してきます。このWarningはいつも出るものなので、気にしていません。警告ありのコードでも動きます。

Compiled codeのタブにコードが出力されます。変数名はいい感じに短くしてくれるのでBookmarkletが短くできます。

void function(b){var a=document.createElement("script");a.src="//code.jquery.com/jquery-3.2.1.min.js";a.onload=function(){var a=jQuery.noConflict(!0);b(a)};document.body.appendChild(a)}(function(b,a){console.log("jQuery: ",b().jquery)});

動かしてみる

どこでも良いので適当なウェブサイトを開き、F12キーで開発者ツールを開いておきます。
ブラウザのアドレスバーにjavascript:とコンパイル済みのコードを入れて実行をすると、開発者ツールのコンソールにJqueryのバージョンが表示されます。3.2.1を動的に読み込んだので3.2.1が表示されれば動作確認は完了です。

楽天市場のトップページで動かすとこんな感じです
image.png

まとめ

これで、BookmarkletでjQueryを動かす準備が整いました。次回は実際のウェブページを題材にデータをほじくってみます。

参考にしたページ

参考ページ1 https://qiita.com/otchy/items/5c4f2e1b2a93ac200f1c
参考ページ2 http://blog.mudatobunka.org/entry/2016/02/29/030633