ブックマークレットの作り方と活用法

menu

ブックマークレット情報局

Bookmarkletの作成方法(基礎)

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

Bookmarkletの作成方法(基礎)

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

動作確認

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

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

bookmarklet用に加工する

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

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

<script>タグの除去

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

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

特定文字のURLエンコード

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

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

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

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

改行の除去

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

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

“javascript:”を先頭に付加

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

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

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

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

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

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

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

再テスト

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

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

その他の約束事

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

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

  • このエントリーをはてなブックマークに追加

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

注目の商品