業務効率化のためにBookmarkletで遊ぶ

このページは

Bookmarkletの作り方、テストの仕方をメモします。ブックマークレット自体はgoogleで検索するとたくさん出てくるので、別のページも参考にしてください。

今回使うもの

javascript
google closure compiler

Bookmarkletの作り方

基本編

BookmarkletはJavascriptで記述されたプログラムなので、コードを書きましょう。ありがちなhello worldからいきます。知っている人は読む必要ないですね。

alert('はろーわーるど');

このコードが動くとalert boxが表示されます。どうやって動かすのか、それが一番の問題。

動かし方 その1

ブラウザのアドレスバーにコードをコピーして動かします。先頭にjavascript: を足してjavascriptのコード全体を貼り付ける。

javascript:alert('はろーわーるど'); 

やってみると分かりますが、上のコード全体をコピーして貼り付けても、アドレスバーではjavascript:が消されてしまいます。

大事なことは、
アドレスバーにjavascript:を書いてから、javascriptのコードだけを貼り付ける。これで動かすことができるはずです。

動かし方 その2

ブラウザのブックマークにコードを登録してブックマークを呼び出します。呼び出しやすくないと意味がないのでブックマークバーに表示することがおおいです。開発中、何度もコードを書き換えるたびにブックマークを編集するのが面倒なので、アドレスバーで何度か動かしてからブックマークに登録します。

ここまでは基礎の基礎です。

ちょっと複雑版

練習以外でHello worldを作ることは無いと思うので、ちゃんとしたものを作るとjavascriptのプログラムもそれなりに長くなります。長いプログラムをbookmarkletにするとき、Google Closure Compiler を使うと便利です。

クロージャーコンパイラを使う

google closure compiler を使うと、Javascriptのコードを事前にコンパイルしてくれます。コンパイル時に構文エラーを教えてくれるので助かります。しかも改行や空白もキレイにしてくれて1行にまとめてくれるので、長いbookmarkletを作るときにはとって便利です。

Closure Compilerの使い方はこちらにあります。
https://developers.google.com/closure/compiler/docs/gettingstarted_ui

コンパイルしたコード(画面の右側に出力されるもの)をアドレスバーに突っ込めば、そのコードが表示しているHTML内で動きます。基礎編のその1の動かし方です。

  1. コードを書く
  2. Closuer Compilerにコピー、コンパイル
  3. コードをコピーする
  4. アドレスバーにフォーカス当てる
  5. javascript:とタイピング
  6. コンパイル済みのコードを貼り付け
  7. 実行

まぁ、面倒ですね。1日5回が限界。

default.jsを使う

このマニュアルの中に、気になる一文があります。

For your convenience, the Closure Compiler service hosts the output file default.js on its servers for one hour. You can access the URL of the output file by copying the location of the link that's provided above the output pane, where it says The code may also be accessed at {filename}.

簡単に訳すと、
あなたの開発を便利にするために、Closure Compilerサービスは出力したファイルを1時間default.jsという名前でHostします。出力画面にあるURLをコピーするだけで出力ファイルにアクセスできます。

というわけで、Closure Compilerでコンパイルしたファイルは、googleのサーバーにアップされていてHttpでアクセスできるようになってます。下の画面のdefault.jsのリンクです。

image.png

default.jsのリンク先はこのような感じです。(1時間経過しているのでクリックしても何もないはずです)

https://closure-compiler.appspot.com/code/jsc328c01f4982838d888b9be850c219f8/default.js

jsc328c01f4982838d888b9be850c219f8の部分が人によって変わります。最初に生成してから1時間だけ使えます。1時間経つと無効になります。コンパイル後のコードが長くなったときにはブラウザで選択するのも面倒なので、default.jsを開き、CTRL+Aで全体コピーがよいです。

それでもまだ面倒です。では、最終形にいきます

default.jsを動的に読み込むBookmarkletを作る

default.jsが外部公開されて、httpで持ってこれるのであれば、bookmarkletでdefault.jsを参照してしまいましょう。bookmarkletで外部のスクリプトファイルを参照する方法を使ってgoogleのサーバー上にあるdefault.jsを読み込むbookmarkletを作成します。

javascript:(function(d,j,s){s=d.createElement('script');s.src=j;d.body.appendChild(s);})(document,'//closure-compiler.appspot.com/code/jsc328c01f4982838d888b9be850c219f8/default.js')

コードの書き方はいろいろとあると思いますが、自分が使っているのはこれです。(何かを参考にしたのですが忘れました、すいません。)
最後の引数がdefault.jsのURLになっているので、default.jsのURLが無効になったら自分のブラウザのBookmarkletのURLを編集します。

  1. コードを書く
  2. Closuer Compilerにコピー、コンパイル
  3. default.jsを呼び出すbookmarkletで実行する

とてもシンプル

これはあくまでテスト段階の動かし方です。1時間で消えますから、ずっとは使えないです。うまく動くことが確認できたら、コンパイル済みのコードを利用者のブラウザのブックマークに登録するか、default.jsと同じ内容を1時間で消えないところに置いておく必要があります。

注意

Closure Compilerのマニュアルに以下の注意文があります。

Note: To prevent abuse, the Closure Compiler limits the number of consecutive compiles that you can run. If you see the message Too many compiles performed recently. Try again later, it means you've temporarily exceeded the limit.

コンパイルを何度もやるとエラーメッセージが出ることがあるので、その時はちょっと待ちましょう。とのことです。

まとめ

今日はBookmarkletの動かし方と、開発中の動かし方を書きました。
次回は、jqueryを使ってサイト内をデータを取り出して遊ぶ方法を書く予定です。

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