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

スポンサーリンク

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

【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました
スポンサーリンク

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

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

public/javascripts/bookmarklet.js

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

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

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

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

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

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

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

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

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

スポンサーリンク
オライリーのJavaScritp本(通称サイ本)は、昔かなり読み込みました。
 
スポンサーリンク

Leave Your Message!