ブックマークレットとは、 ウェブブラウザのブックマークで起動し、ブラウザの情報を参照したり更新したりするプログラムをいう。 通常は JavaScript で実装される。
通常のブックマークでは、プロパティを見ると URL が次のように記載されている :
https://jsprimer.net/
そしてこのブックマークを選ぶと、その URL にページが遷移する。
これを javascript: から始まる JavaScript のコードで書き換える。さて、このブックマークを選ぶとどうなるかというと、
あら不思議、
ページは遷移せず（するのもあるが）、ページの情報を取得できたり、ページを書き換えたりできる。
以下説明するブックマークレットで、その挙動を説明する。
現在のページに関係なく、単にポップアップで hello, world とポップアップする。
javascript:alert("hello, world");
現在のページで、入力欄が <input type="text" id="IDENTIFIER"> のように記述されているテキスト入力欄があれば、
このブックマークレットを実行すると入力欄に VALUE が入力される。下のテキスト入力欄は、実際に id="IDENTIFIER" が指定されている。
javascript:(function (){let s=document.getElementById('IDENTIFIER');s.value='VALUE';})();
紹介したブックマークレットでは、次の形の一見奇妙な関数構文が使われている。
(function () {
// …
})();
この関数は即時実行関数式（Immediately Invoked Function Expression, IIFE）と呼ばれている。 この IIFE を使う利点は、ブックマークレット内で新たな変数が定義されたとしても、ブックマークレットの実行が終わった瞬間に変数が破棄される。 そのため、その後の JavaScript で変数が「汚染」される問題が生じないからである。以降のブックマークレットでも IIFE が多用されている。
現在のページで、入力欄が <input type="text" name="NAME"> のように記述されているテキスト入力欄があれば、
このブックマークレットを実行するとname="NAME" が指定されている最初の入力欄に VALUE が入力される。
下のテキスト入力欄は、実際に name="NAME" が指定されている。
javascript:(function (){let s=document.getElementsByName('NAME')[0];s.value='VALUE';}) ();
現在のページにあるチェックボックスすべてについて、トグルが働く。すなわち、チェックされていないチェックボックスはチェックされると同時に、 チェックされているチェックボックスはチェックが外れる。
チェックボックス1 チェックボックス2 チェックボックス3 チェックボックス4
オプションとは、複数の選択肢から一つを選ぶダイアログの形式である。 通常のインターフェースではラジオボタンを用いる。下記のブックマークレットでは、 名称が selection_1 となっている複数の入力から値が radiobutton_3 となるものをチェックする。 下記のオプションは、名称 selection_j の値 radiobutton_k をとるものが、 オプション j-k を表している。つまり上段の名称の name 属性が selection_1 、下段が selection_2 である。 現在の状態が何であっても、ブックマークレットを起動するとオプション１‐３がチェックされることを確認されたい。
オプション１―１ オプション１―２ オプション１―３
オプション２―１ オプション２―２ オプション２―３
該当ページでこのブックマークレットを実行すると、別ウィンドウで該当ページ DOM 構造が見える。
該当ページでこのブックマークレットを実行すると、リンクオブジェクトで onclick 属性があるものがポップアップウィンドウで表示される。
なお、リンクオブジェクトは let d = document.links を使うことで、配列 d が得られる。この document.links は、A 要素と AREA 要素に適用されるが、
LINK 要素には適用されない。リンク要素が LINK であるリンクオブジェクトの配列 l を得るには、
let l = getElementsByTagName("link")とする。下記に例がある:
https://developer.mozilla.org/ja/docs/Web/API/HTMLLinkElement/rel
select 要素は複数の選択肢から一つを選ぶダイアログの形式である。 これについてはオプションと同じであるが、 インターフェースが「ポップアップメニュー」「ドロップダウンメニュー」「リストメニュー」 などの形をとる。ラジオボタンと異なるのは、選ぶ前では選択肢が一部しか見えていないということだ。 昔習ったインターフェースの知識では、選択肢がすべて見えるようにラジオボタンを使うのが原則である、 ということだった。
さて、selecte 要素のブックマークレットの例である。上から順番に i (i = 1 ... 4) 番目の分野で、 i 番目の項目が選ばれるしかけになっている。
| 好きな果物： | |
| 好きな音楽家： | |
| 好きな点心： | |
| 好きな言語： |
自分のページをインターネット上で見ていて、誤りを見つけたとする。そのとき、エディターを起動して訂正するが、 同時に localhost 上で誤りが訂正されたことを確認したい。 そのときのためのブックマークレットを作ったが、現在確認中である。
自分のページをインターネット上で見ていて、誤りを見つけたとする。そのとき、エディターを起動して訂正するが、 その後直接ローカルのファイルで誤りが訂正されたことを確認したい。 そのときのためのブックマークレットを作ったが、現在確認中である。
ログイン画面などで、ＩＤとパスワードを入力してログインボタンをクリックすると先に進むことがある。 これをブックマークレットで実現することができる。
上記は変数 document やメソッド getElementById が繰り返されていて、スペリングのあやまりによるバグを起こしやすい。 そこで同じ変数やメソッドを統一して扱えるように短縮したのが次の記述である。この方法は、リンク集5に拠った。
注意：下記はサンプルのため送信できない。上記ブックマークレットを実行したり、下記[送信]ボタンをクリックしたりしたときの動作は、 単にこのページの上部に戻るだけである。
ボタンクリックのイベントで submit 関数が起動されない場合は、button 要素の可能性がある。 そのときは次のようにする。ただし、ボタンに id 属性として "botton2" が定義されているとする。また、短縮形のみ掲げる。
注意：下記はサンプルのため送信できない。上記ブックマークレットを実行したり、下記[送信]ボタンをクリックしたりしたときの動作は、 単にアラートウィンドウを表示するだけである。
ちなみに、input 要素には、ボタン(type='button')のほかに多くつかわれるものとして、テキスト(type='text')、パスワード(type='password')、 チェックボックス(type='checkbox')、ラジオボタン(type='radio') などがある。
<link rel="reltype" href="url" /> などが head 要素に記述されている場合、 reltype に応じて指定されたリンク先 url に遷移する。下記ブックマークレットは、 reltype が "prev" の場合に指定されたリンク先 l[i].href に遷移する。
ここで、if 文の条件節は、「文字列 "prev" に l[i].rel が大文字小文字の区別なしで一致するならば」ということを意味している。
次の書き方も可能である。
const l=Array の行は、getElementsByTagName メソッドで得られる値の型が HTMLCollection であり、配列ではないため、 強制的に配列にすることを表している。このように配列になおせば配列型のメソッドである find などが使える。
下記ボタンをクリックすると、実際にこのページで指定されたページ（サーバサイド JavaScript）に遷移する。
まりんきょ学問所 ＞ JavaScript 手習い ＞ ブックマークレット
