このページの対象読者

このページは、実際にBookmarkletを作成しようとする開発者向けに書かれています。Bookmarkletを使用する方法についてはBookmarkletとは？をご覧ください。

Bookmarkletの作成方法(基礎)

まずは、通常のJavaScriptを書く要領で記述します。

<script type="text/javascript">
	function bookmarklet() {
	    var url = location.href;
	    window.alert(url);
	}
</script">

動作確認

まずは作成したbookmarkletが正しく動作することを確認します。特定のタイミングで実行されるように、ボタンもしくはアンカーのクリック時のイベントで記述すると良いでしょう。

<a href="#" onclick="javascript:bookmarklet();return false;">bookmarklet実行</a>
　

上記のようにして作成したアンカーが以下のものです。クリックすると、このページのURLアドレスが表示されます。

bookmarkletを実行する

bookmarklet用に加工する

作成したJavascriptのままではbookmarkletとして使用できません。所定の形式に体裁を整えてあげる必要があります。テキストエディタに先ほど作成したJavascriptを張り付けて編集していきます。

• <script>タグおよび関数名の除去
• 特定文字のURLエンコード
• 改行の除去
• "javascript:"を先頭に付加

<script>タグの除去

関数上下の<script>タグと関数名を除去し、余計なインデントを除去します。

var url = location.href;
window.alert(url);

特定文字のURLエンコード

特定の文字はURLエンコードする必要があります。

文字	置換文字
半角スペース	%20
引用符（ダブルクォーテーション）	%22

置換したのが次のソースです。

var%20url%20=%20location.href;
window.alert(url);

改行の除去

改行を削除して１行にします。

var%20url%20=%20location.href;window.alert(url);
　

"javascript:"を先頭に付加

先頭に、"javascript:"を付加します。

javascript:var%20url%20=%20location.href;window.alert(url);
　

ブックマークレットを登録するためのアンカーを作成する

次のような形式のアンカー（リンク）を作成します。

<a href="上記で作ったもの">ページのURLアドレスを表示するbookmarklet実行</a>

実際には次のようになります。

<a href="javascript:var%20url%20=%20location.href;window.alert(url);">ページのURLアドレスを表示するbookmarklet実行</a>
 
 

再テスト

実際に作成したページのアンカーをお気に入りに登録して正しく動作することを確認します。

ページのURLアドレスを表示するbookmarklet実行

その他の約束事

今回の例は簡単なプログラムでしたので、比較的少ない手順で正しく動作するものができました。

しかし実際のところ、bookmarkletとして正しく機能するように作るには、色々な約束事があります。さらに詳しい情報をお望みの場合は、ブックマークレットの作成(応用)をご覧ください。

↑このページの先頭へ

 

ad