再編集可能なbookmarklet

ウェブ閲覧でちょっとした問題に出会った場合、bookmarkletを作って対処することが時々あります。そういったbookmarkletを使っていくうちに、後で修正したくなることもよくありますが、そんな時に自分がどのようにしているかについて述べてみます。

例えばdeadspaceの最新の更新箇所をすぐに見つけたいなという場合。取り敢えずふつうのJavaScriptソースを書くように、以下のような感じで書いていきます。

(function(){
	var nodes = document.getElementsByTagName('ol')[0].childNodes;
	for (var i = nodes.length - 1; i >= 0; i--) {
		var node = nodes[i];
		if (node.nodeType == 1) break;
	}
	node.style.outline = 'dotted 1px red';
	scrollTo(0, node.offsetTop - 100);
})();

これをbookmarklet、つまりjavascript:スキームのURIの形に変換するのですが、その際には以下のような秀丸のマクロを使っています。

//js2bmlt.mac
selectall;
copy;
newfile;
disabledraw;
paste;

gofiletop;
insert "javascript:";
replaceallfast "%","%25", regular;
replaceallfast "\\n","%0A", regular;
replaceallfast "\\t","%09", regular;
gofiletop;
replacedown "(%0A|%09)+$", "", regular;
gofileend;

selectall;
copy;
quit;

このマクロを実行すると、以下のコードがクリップボードにコピーされます。

javascript:(function(){%0A%09var nodes = document.getElementsByTagName('ol')[0].childNodes;%0A%09for (var i = nodes.length - 1; i >= 0; i--) {%0A%09%09var node = nodes[i];%0A%09%09if (node.nodeType == 1) break;%0A%09}%0A%09node.style.outline = 'dotted 1px red';%0A%09scrollTo(0, node.offsetTop - 100);%0A})();

つまり、改行やタブ文字がパーセントエンコーディングの形で残ることになります。Firefoxだとこのエンコードされた%0A%09を改行やタブ文字として扱ってくれるので、問題なく実行できます。(今確認したところ、Operaでも問題なく実行できるようです)

で、うまく動けばこれをそのままFirefoxのブックマークに登録して使っていきます。しばらく使ってみた後で修正したいところが出てきたら、ブックマークからコードを秀丸にコピーしてきて、以下のマクロを使います。

//bmlt2js.mac
gofiletop;
replacedown "^javascript:", "", regular;
replaceallfast "%0A", "\\n", regular;
replaceallfast "%09", "\\t", regular;
replaceallfast "%25", "%",   regular;

すると、最初に書いたソースのように改行・インデントが復元され、見やすい形で再編集ができるというわけです。

ちなみにこのやり方だと、スクリプトに誤りがあった場合にも、エラーコンソールでエラーとなった行が何行目なのかが分かるので、デバッグにも便利です。あと行コメント(//)が使えるという利点もあります。

……以上は Firefox + 秀丸 という環境の話ではありますが、他の環境でもある程度応用はできるのではないかと思います。

追記

mayokaraさんにより、ブラウザ上で複数行コードとbookmarkletコードとの相互変換を行うre-editable-bookmarklet-editorが作成されました。