ウェブ閲覧でちょっとした問題に出会った場合、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が作成されました。