ブックマークレットをいつでもJavaScriptのメンテが可能な状態で配布する

サーバー側にブックマークレット本体の JavaScript コードを置いて、配布するブックマークレット用コードから、サーバーに置いたブックマークレット本体の JavaScript コードを読み込むようにさせます。こうしておくと、いつでもブックマークレット用の JavaScript をメンテナンスできるのでメリットが大きい。

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

サーバー側のブックマークレット本体 JavaScript コード

サーバー側に置く JavaScript コード。ブックマークレットを動作させるためのロジック本体です。Rails の場合であれば public/javascripts 以下に作成します。

public/javascripts/bookmarklet.js

alert("Hello World!");

1	alert("Hello World!");

とりあえず説明用なので、alert のみで。ここに好きなようにブックマークレット用の JavaScript コードを書く。

配布するブックマークレット用の JavaScript コード

以下の配布用コードを作成して、これを配布します。まずは、改行とインデントさせた見やすい形のコード。

javascript:void((
function(){
  var d = document;
  s=d.createElement('script');
  s.setAttribute('src','bookmarklet-url');
  d.body.appendChild(s);
})());

javascript:void((

function(){

var d = document;

s=d.createElement('script');

s.setAttribute('src','bookmarklet-url');

d.body.appendChild(s);

})());

s.setAttribute(‘src’,’bookmarklet-url’); の行で、サーバーに置いた本体 JavaScript コードを読み込んでいます。bookmarklet-url の部分は、サーバー側においた本体コードの URL に変更。

以下は、配布用コードを1行にまとめたバージョンです。改行を削除して、半角スペースを’%20’に置き換える。

javascript:void((function(){var%20d=document;s=d.createElement('script');s.setAttribute('src','bookmarklet-url');d.body.appendChild(s);})());

1	javascript:void((function(){var%20d=document;s=d.createElement('script');s.setAttribute('src','bookmarklet-url');d.body.appendChild(s);})());

Rails で配布用コードのリンクをビューに表示

Rails で配布用コードのリンクを表示させる場合は、以下コードを任意のビューに追加します。

<p><%= link_to "ブックマークレット", "javascript:void((function(){var%20d=document;s=d.createElement('script');s.setAttribute('src','http://#{request.raw_host_with_port}/javascripts/bookmarklet.js');d.body.appendChild(s);})());" %></p>

上記ブックマークレットを、ブラウザ上部のブックマークツールバーにドラッグ＆ドロップしてください。

上記ブックマークレットを、ブラウザ上部のブックマークツールバーにドラッグ＆ドロップしてください。

<%= request.raw_host_with_port %> の部分は、ローカルでのテストで localhost:3000 を取得したかったために、request.raw_host_with_port を使いました。ポート番号の必要ない本番環境では、request.domain などで取得しても可。

以上、いつでもメンテンナンス可能な状態でブックマークレットを配布する方法でした。