ブックマークレットとは
ブックマークレットとはブラウザのブックマークに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ランチャーブックマークレットの完成となる。