何を今更という感じなのだが、初めて Bookmarkletを使ってみた。 JavaScriptのコードなんて 1バイトも書いたことがないのだが、他人が作ってくれて、ネット上に転がっている物でも、随分便利な物があるようだ。でも、ちょっとした修正くらいはしたくなるのが常である。
このブログを読んでくれている人たちはすでに知っていることと思うが、簡単に言えば、 bookmarkletとは 1行の JavaScriptの小さなプログラムで、 javascript:という URLの形で記述したものを、 IEなどのブックマークとして登録してやることで、容易にそのプログラムを呼び出せるようにして、いろいろな作業を楽ちんにしようというものだ。今まで、 Bookmarkletなどというものには全く興味を持っていなかったのだが、最近 Movable Typeを 3.2に更新したところ、管理者画面のトップの部分に、 Quick Postなるものが現れていることに気づいたのをきっかけに、ちょっと調べてみることにした。
これもご存じの方が多いと思うが、 Quick Postを設定すると、 Webページ閲覧中に、簡単にブログに投稿できるような bookmarkletが作成される。たとえば、この記事を読んでいる時に、「こんなくだらないブログ見つけた」と貴方のブログに書きたいと思ったとしよう。そう思った瞬間に、「お気に入り」に登録しておいた Quick Postの bookmarkletを実行すると、貴方のブログの投稿用のフォームが現れて、そこにはすでにこの記事へのリンクが記入された状態になっている。まあ、ざっとこんな感じのものである。
確かにニュースなどのページを読んでいる時に、「ああ、これについて書こうかな」と思うようなことはしばしばあるので、比較的便利だと思う。しかし僕の場合、 IEの画面上で自分の記事を編集するということはまずない。だいたい別のエディタで書いた物を後で投稿フォームに貼り付けて書き込んでいる。だから、せっかく便利そうなこの bookmarkletが使われることはまずないだろう。でもそこで少し考えた。投稿用のフォームを開くのではなくて、単に見ているページのリンクをクリップボードに保存してくれるようなものがあれば、これは随分便利そうである。そこで、早速 Googleに聞いてみたところ、こんなページが見つかった。
Bookmarklet - パソコン遊戯
ここに、まさに僕が求めているものがあった。すなわち、見ているページの URLとタイトルを使って、 a要素を作ってクリップボードに貼り付けてくれるのだ。早速試してみたところ、なかなか良さそうだ。そこで、このことについて書いてやろうと思って、早速記事を書き始めようとした。
ところが、いざ使ってみると、細かいところが気になった。というのは、この bookmarkletが作ってくれるコードは、
<a href="url">title</a>
のように、 1行に全てが収まっていて、かつ行末には改行がない形になっているのだが、僕は編集の容易さなどの好みで、普通は、
<a href="url">
title</a>
のように 2行に分けて書くことが多い。さらに、クリップボードから貼り付ける先が HTMLではない場合には、 </a> が別の行になってくれている方が、少しだけ便利でもある。ということで、上記のページにあった bookmarkletを改造して、適当に改行を入れてくれるようにしようと思い立った。
前述の通り、僕は JavaScriptは全く知らない。しかし、ちょっと見てみると、まあ何をしようとしているのかは分かった。そこで、まずは改行が挿入されて欲しいところに \nを入れてみた。しかし結果には変化がない。次に、 \nの代わりに %0dを、それから %0d%0aを入れてみたが、やはりだめ。 Googleでいろいろと検索してはみたものの、どうもはっきりとしたことが分からない。仕方がないので、ダメ元で \rも試してみた。するとこれがうまく行ったのである。 \r\nがうまく行って \rだとだめ、というのならなんとなく分からないでもないのだが…。
昔初めて Cを勉強したときに読んだ本には、確か、 \nは処理系に適した形に変換される、というような記述があったような気がする。仮にそれが本当だとしても、 JavaScriptには適用されないルールなのかもしれないわけだが、この手の事柄はプログラマの混乱を招かないような形にして言語を作って欲しいものである。
というわけで、最終的に僕の bookmarkletはこんな感じになった。
javascript:(function(){var%20t,u,a,r;t=top.document.title.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>').replace(/"/g,'"');u=top.document.URL.replace(/&/g,'&');a='<a%20href="'+u+'">\r\n'+t+'\r\n</a>\r\n';b=document.createElement('textarea');b.appendChild(document.createTextNode(a));r=b.createTextRange();r.execCommand('Copy');})()
ちょっと JavaScriptを学んでみようかという気がしている今日この頃です。