続・ブックマークレットをつくろう。

前回のおさらい

前回はaタグのhref属性にスクリプトを書くという手法でブックマークレットを実装しました。
この方法は非常に手軽ではあったのですが、いくつか制約がうまれます。

スクリプトをワンライナー（1行）で書く必要がある。
スクリプト内で '（もしくは " ）をつかう場合はエスケープする必要がある。
スクリプトの文字数をURLの上限までに収める必要がある。

大きくはこの3点です。

外部スクリプトを実行する方法

今回はもっと手軽にブックマークレットをつくることを目指します。

具体的には、実行したいJSファイルをサーバにアップロードしておき、
ブックマークレット側では、そのJSファイルをロードする処理のみを記述します。
では、実際につくってみましょう。

href属性側のJavaScriptの準備

href属性側はこんな感じのスクリプトが実行されれば良いことになります。

var doc    = document,
    script = doc.createElement("script");

script.src = ""; // JSファイルのパスを記述

doc.body.appendChild(script);

単純に外部スクリプトを実行するだけの非常にシンプルなスクリプトです。
※ document.bodyがあるページで使われること前提です。

ワンライナーにしてhref属性の中にいれるとこんな感になります。

<a href="javascript:var doc=document,script=doc.createElement('script');script.src='/*JSファイルのパスを記述*/';doc.body.appendChild(script);">/*ブックマークレット名*/</a>

一回つくってしまえば、パスを書き換えるだけで何度でもつかえるのがよいですね。

サーバにアップする側のJavaScriptの準備

実際に実行される処理を記述します。
今回は前回と同じようにアラートを表示する下記のようなスクリプトを作成し、
http://jsrun.it/kimmy/9rHR/js/ にアップしてみました。

(function () {
    "use strict";

    alert("じぇじぇじぇ");
})();

つかいかた

これで準備は完了です。
早速、aタグのhref属性内に記述したパスを書き換えてつかってみましょう。

<a href="javascript:var doc=document,script=doc.createElement('script');script.src='http://jsrun.it/kimmy/9rHR/js/';doc.body.appendChild(script);">ブックマークバーにドラッグしてね</a>

このリンクをブックマークバーにドラッグすればブックマークレットのできあがりです。
ブックマークバーにドラッグしてね

いかがでしょうか。
前回よりも手順が増えたような気もしますが、ちょっと複雑な処理をしようとする場合は今回のやり方のほうがおすすめです。

kimizuka.hatenablog.com