はてなブログの記事内にブックマークレットを設置する方法
はてなブログの記事内にブックマークレットを設置しようとしたら少し面倒なことが起こったので、それに対処したという話。
ブックマークレットがうまく設置できない
はてなブログでは、リンクにjavascriptスキームを設定することでブックマークレットを設置できます。
そこで僕も設置しようとしたんですが、なぜかうまくいきません。<a/>タグが正しく表示されなかったり、ブックマークレット内のJavaScriptコードに書いた覚えのない<span/>タグが紛れ込んだりします。
はてな記法がブックマークレットの<a/>タグを改変する
原因を調べてみると、どうやらはてな記法が関係しているようです。
ブックマークレットとして<a/>タグを設置する場合、href属性内に記述したJavaScriptコードの一部がはてな記法として解釈され、<a/>タグが正しく表示されなくなったり、コードが改変されたりするようです。
はてな記法を回避する
はてな記法を回避する方法は、ブログの編集モードによって異なります。
編集モードがはてな記法モードの場合
はてな記法モードでは、はてな記法で使われる特殊文字をエスケープすれば、<a/>タグのhref属性内に記述したJavaScriptコードの一部がはてな記法として解釈されることを防げます。
編集モードが見たままモードの場合
見たままモードでは、はてな記法で使われる特殊文字をエスケープしたHTMLコードを貼り付けても、"("), &(&), <(<), >(>) 以外の文字参照は自動的に元の文字に戻ってしまうようです。
そのため、href属性内のJavaScriptコードに影響を及ぼす可能性があるいくつかの記法について、個別に対処する必要があります。
ちなみに、見たまま編集モードで使えるのは、インラインのはてな記法のみです。インラインのはてな記法とは、一部の入力支援記法 (脚注記法、tex記法、ウクレレ記法) およびすべての自動リンクのことです。
脚注記法の回避
<a/>タグのhref属性内に記述したJavaScriptコードに"(("と"))"で囲まれた部分がある場合、その部分が脚注記法と見なされることがあります。
これを回避するため、"(("を"( ("に、"))"を") )"にそれぞれ置き換えます。
自動リンク停止記法の回避
<a/>タグのhref属性内に記述したJavaScriptコードに"[]"と"[]"で囲まれた部分がある場合、その部分が自動リンク停止記法と見なされることがあります。
これを回避するため、"[]"を"[ ]"に置き換えます。
脚注記法の回避処理と自動リンク停止記法の回避処理を通すことで、その<a/>タグは、見たままモードのHTML編集で貼り付けられる形式になります。
ブックマークレットジェネレーターを作った
上記の変換・置換処理を自動でやってくれる、はてなブログ用ブックマークレットジェネレーターを作ったので置いておきます。
なお、コードの圧縮などは行いません。そのような処理が必要な方は、Closure Compiler Serviceなどのサービスを使ってください。もちろん、そのようなサービスから出力されたJavaScriptコードを入力としてブックマークレットを生成することもできます。
はてなブログ用ブックマークレットジェネレーター
コードの長さ: none
コードにより生成されるリンク: none
注意
"見たままモードのHTML編集で貼り付けられる形式にする"処理は、JavaScriptコードに対する単純な文字列置換によって行っています。
そのため、例えば、正規表現リテラル内の文字列が置換され正規表現の意味が変わってしまい、ブックマークレットが意図した通りに動作しなくなることもありえます。
そのような場合は、ブログの編集モードをはてな記法モードにした上で、"はてな記法で使われる特殊文字をエスケープする"処理を行ったブックマークレットを貼り付けてください。
