Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

はてなブログにブックマークレットリンクを貼るやり方

はてなブログでブックマークレットを紹介するとき、ドラッグ&ドロップですぐ設置できるようにリンクを置いておきたくなります。そんな時にどうやれば良いのかについて悪戦苦闘したのでメモしておきます (完全なやり方はまだ分かってない)

比較的単純な場合はaタグで書く

ブックマークレットリンクは、基本的にaタグを使って書きます。単純な場合はそのまま書くだけで大丈夫です。

<a href="javascript:alert('hello')">単純なブックマークレット</a>

実物: 単純なブックマークレット

(( )) を含む場合は違う書き方に直す

はてなブログにおいて (( )) で囲むと注釈扱いになります。そのため、これを含んでいるとうまくリンクにできません

<a href="javascript:(()=>console.log('yes'))()">動かないブックマークレット</a>

アロー関数を使うと (( が出てきやすいです。そのため、functionで関数を定義しましょう。

<a href="javascript:(function(){console.log('yes')})()">動くブックマークレット</a>

動くブックマークレット

mapなどの高階関数も同じくfunctionで書けばOKです。

<a href="javascript:console.log([1,2,3].map(function(n){return n*2}))">mapを使ったブックマークレット</a>

mapを使ったブックマークレット

番外編: aタグを使わずに書く

aタグを使わないやり方も一応はできます。

[ブックマークレット]
[ブックマークレット]: javascript:console.log([1,2,3])

ただし、URLに空白を入れられないなどの制約があるため、基本的にはaタグを使って書いたほうが無難です。