Bookmarkletの作成方法(基礎)

Bookmarkletの作成方法(基礎)

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

JavaScriptで記述

まずは、通常のJavaScriptでfunctionを定義します。

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

動作確認

まずは作成したbookmarkletが正しく動作することを確認します。ボタンもしくはアンカーのクリック時のイベントで先ほどのfunctionを呼び出します。

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

 

ブックマークレット用に加工する

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

  1. <script>タグおよび関数名の除去
  2. 特定文字のURLエンコード
  3. 改行の除去
  4. “javascript:”を先頭に付加

 

1.<script>タグの除去

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

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

2.特定文字のURLエンコード

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

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

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

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

 

3.改行の除去

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

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

4.”javascript:”を先頭に付加

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

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

 

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

 

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

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

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

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

 

再テスト

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

その他の約束事

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

しかし実際のところ、bookmarkletとして正しく機能するように作るには、様々な細かい約束事があります。

さらに詳しい情報をお望みの場合は、ブックマークレットの作成(応用)をご覧ください。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です