Bookmarklet準備編その2

はじめに

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

Bookmarkletから外部jsライブラリを呼び出す

参考ページ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){
  // バージョン確認
  ;;; 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

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.