ブックマークレットをご存知ですか？
Webブラウザのブックマーク（お気に入り）に登録して使う、JavaScriptを使用した簡易的なプログラムです。
このブックマークレットを使って、テスト等で使用する際に必要な「ログインID」や「パスワード」等をワンボタンで一瞬にして入力することができます。
※ちなみに名前の由来は、「ブックマーク」＋「アプレット（小さなプログラム）」を合体させた言葉だそうです。
この便利機能を使って日々のちょっとした手間を省く方法を、分かりやすくご紹介します！
実際のやり方
まずは、ブラウザにブックマークレットを登録して実際に動かすまでのステップです。
登録手順
ブラウザのブックマークバー（お気に入りバー）の空いているところを右クリックし、「ページを追加」や「ブックマークを追加」を選択します。
名前:
「テスト用ログイン入力」など、分かりやすい名前を付けます。
URL:
通常はWebサイトのURLが入る場所に、以下のコードをそのままコピーして貼り付け、保存します。
javascript:(function(){
document.getElementById('email').value='test@example.com';
document.getElementById('password').value='password123';
})();
使い方
対象のログイン画面をブラウザで開きます。
ブックマークバーにある、先ほど作成したブックマークをクリックします。
指定した文字がパッと入力欄に自動入力されます。
要素の取り方
上記のコードをご自身の業務で使うためには、「どの入力欄に文字を入れるか」という目印（ID）をWebサイトから探して、コードを書き換える必要があります。
目印（ID）の探し方
対象のWebページ（ログイン画面など）を開きます。
文字を自動入力させたい枠（メールアドレスの欄など）の上にマウスカーソルを合わせ、右クリックします。
表示されたメニューから「検証」（または「要素を調査」）をクリックします。
画面の端に開発者用のパネルが開き、HTMLコードの一部が色付きで表示されます。
その中から、id=”〇〇〇” と書かれている箇所を探し出します。
コード内の getElementById(‘email’) となっている部分を、見つけ出したID（例：login_id なら getElementById(‘login_id’)）に書き換えれば完成です。
※ちなみに、test@example.com以外の値にしたい場合、”の中身を変えれば変更できます。
「value=’ここを変える’;」
「未入力」扱いになってしまう場合の対処法
最近の高度なWebサイトでは、プログラムで文字を流し込んだだけだと「人間がキーボードで入力していない」と判断され、エラーが消えなかったりボタンが押せなかったりすることがあります。
そんな時は、文字を入れた直後に「ちゃんと入力したよ！」という合図（イベント）をシステムに送ってあげるコードを追加します。
対処手順
以下のコードをコピーします。（5行目の dispatchEvent から始まる処理が、その合図を送る役割をしてくれます）
javascript:(function(){
document.getElementById('email').value = 'test@example.com';
document.getElementById('email').dispatchEvent(new Event('input', { bubbles: true }));
})();
登録済みのブックマークレットを右クリックして「編集」を開き、URL欄をこの新しいコードに書き換えて保存します。
再度ログイン画面を開き、ブックマークレットをクリックして、エラーが出ずにボタンが押せるか確認します。
終わりに
ログインIDやPWだけだとパスワードマネージャーでいいじゃん。
と思われますが、こちらメールやPWだけでなく、登録フォームの名前や住所などにも使用できるので活用できる範囲が広いのが特徴です。
繰り返し使うものを何度も入力するのは面倒ですよね。少しでも時短をして、業務を効率的にしましょう！
