JavaScriptを使用したURLランチャーブックマークレット制作

ブックマークレットとは

ブックマークレットとはブラウザのブックマークにJavaScriptのコードを登録して、クリックした際に実行できる技術。

今回はブックマークレット実行後に表示されるダイアログでaを押すとアマゾン、rを押すと楽天、yを押すとヤフーが表示されるブックマークレットを作成する。

サンプルのブックマークレットを作成したのでブックマークバーにドラッグ&ドロップするか右クリックでブックマークに登録して実行すれば試してみてほしい。

ブックマークレット

ブックマークレットの作成方法

まずはエディタを開いてJavaScriptを書く。

自分で入力したa, r, yのいずれかにより開くWebサイトを指定するためにpromptを使用する。

prompt使用時にtrim()を付けておけば前後に半角スペースが含まれても削除することができる。

また、大文字の英字が入力されたときのためにtoLowerCase()も付けておく。

コードは最後に改行を削除して1行にするため、テンプレートリテラルで改行を入れている場合は\nも追加しておく。

var p = prompt(`
■ 表示したいサイトを入力\n
a: アマゾン\n
r: 楽天\n
y: ヤフー
`).trim().toLowerCase();

次にa, r, y 入力時に開くWebサイトのURLをオブジェクトで作成する。

var urls = {
  'a': 'https://www.amazon.co.jp/',
  'r': 'https://www.rakuten.co.jp/',
  'y': 'https://www.yahoo.co.jp/',
};

最後にこれをwindow.openで開くようにする。

window.open(urls[p]);

最後にブックマークレットは実行するには先頭にjavascript:を付けてコードを1行にする必要があるため、以下のように修正する。

コードを1行にするには正規表現で\nをすべて削除すれば良い。

javascript:var p = prompt(`■ 表示したいサイトを入力\na: アマゾン\nr: 楽天\ny: ヤフー`).trim().toLowerCase();var urls = {  'a': 'https://www.amazon.co.jp/',  'r': 'https://www.rakuten.co.jp/',  'y': 'https://www.yahoo.co.jp/',};window.open(urls[p]);

あとはこれをブラウザのブックマークに追加すればJavaScriptを使用したURLランチャーブックマークレットの完成となる。

ブックマークレット