Bookmarkletを作ろう(jQuery準備編）

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

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

javascript:alert($.fn.jquery);

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

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

バージョンが表示される場合は、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のライブラリを読み込んでから、コードを実行するようにします。コードの内容は、参考ページ１と参考ページ２に書いてあるとおりです。この辺にはあまり独自要素を持ち込まず、先輩の知恵をそのまま拝借しています。自分の動かす環境では２重にロードすることの待ち時間は気にならないので、常に最新版の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の左側

###コンパイル結果

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が表示されれば動作確認は完了です。

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

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

#参考にしたページ
参考ページ１　https://qiita.com/otchy/items/5c4f2e1b2a93ac200f1c
参考ページ２　http://blog.mudatobunka.org/entry/2016/02/29/030633