ブックマークレットで始める業務改善⑤ ログインフォームの自動化（複数の入力欄）

シド・ブックマーカー

2024年5月1日 18:25

前回はこちらです。

今回は、複数の入力欄にまとめて文字を入れる練習をします。

デベロッパーツールのコンソールの使い方も説明します。

今回は、ユーザーID欄が3つに分かれているログインフォームにチャレンジします。

こういうログインフォーム、たまーに見かけますが、コピペが面倒だし、ブラウザーの自動入力機能もうまく働かなくなってしまうし、かなり不親切ですよね。こういうときこそブックマークレットを使いましょう！

複数の処理を並べて書く

今回も練習用のフォームを用意しています。

以下のように、プログラムを並べて書けば、それを順番に実行してくれます。

javascript:(function(){
    document.querySelector("#要素のID名").value = "my-user-id";
    （ここにもう1行プログラムを書く）
    （さらにもう1行プログラムを書く）
    （...）
})();

前回作ったブックマークレットを改造して、1つめの欄に"syd"、2つめの欄に"1234"、3つめの欄に"JP"と入力するようにしてみましょう。要素のIDの調べ方は前回の記事で復習してください。

正解は空の下です。

解答：

javascript:(function(){
    document.querySelector("#user_id1").value = "syd";
    document.querySelector("#user_id2").value = "1234";
    document.querySelector("#user_id3").value = "JP";
})();

このように、プログラムは何行も続けて書くことができます。各行の最後に ; （セミコロン）を付けるのをお忘れなく。

コンソールの使い方

要素のID名を調べるのに使っているデベロッパーツールは、プロのプログラマー（なんだか冗長だ）もバリバリ使っている高機能ツールです。

ここではコンソールという機能の使い方を紹介します。デベロッパーツールの「コンソール」と書かれたところをクリックしてください。
※ Edgeだと四角いウィンドウのアイコンになっていると思います

なんだかすごいシンプルな画面が出てきたと思います。

このコンソールは、直接JavaScriptのプログラムを打ち込んで動かすことができます。例えば > の後に

> alert("こんにちは！")

と打ち込んで、Enterキーを押してください（頭の > は最初から表示されているものです）。メッセージが表示されます。

コンソールの活用1: 要素の取得方法の確認

querySelector( ) などでうまく要素が取れるか確認できます。

> document.querySelector("#user_id1")

と書いてEnterキーを押せば、取得できた要素の詳細が表示されます。そこをマウスオーバー（マウスを重ねる）と、webページ上の対応する箇所が強調表示されます。便利！😀

一方で、

> document.querySelector("#user_id5")

とすれば、取得に失敗して何も出てきません（何もないことを示すnullが表示される）。

複雑なwebページから必要な要素をいかにうまく捕まえるか、がブックマークレット作成の肝になります。ぜひ活用してください。

コンソールの活用2: ブックマークレット用プログラムの実行

コンソールでは、ブックマークレット用のプログラムをそのままコピペして動かすこともできます。いちいちブックマーク（お気に入り）に登録しなくても良いので開発中はとても便利です。

javascript:(function(){ から始まるプログラム全体（複数行あっても大丈夫）をコピーして、コンソールにペーストして、Enterキーを押してみてください。

一行ずつコピペして、一行ずつ動作確認することもできます。その場合は最初の javascript:(function(){ と最後の })(); の行は飛ばしてください。

コンソールの活用3: エラーメッセージの確認

ブックマークレットを動かしたときにエラーが発生すると、コンソールにエラーメッセージが表示されます。

これを読み解くのはなかなかハードルが高いと思いますが、少なくともエラーが起きたことは分かります。コンソール上で1行ずつ実行するなどして、不具合を解消（デバッグ）してください。

コンソールの表示が増えてゴチャゴチャしてきたら、左上の禁止アイコン🚫で全消しできます。

今回のまとめ

プログラムを何行も続けて書けば、その順に実行されていきます
- ただし、処理が終わる前に次の行へ進む関数もあります。次回で取り上げる setTimeout( ) などです。こういう関数は非同期関数といいます
デベロッパーツールのコンソールを使えば、JavaScriptのプログラムをその場で実行したり、エラーメッセージを確認したりできます

次回はこちらです。

このシリーズのすべての記事は、こちらのマガジンにまとめています。

🐶スキしていただけると励みになります！

この記事が気に入ったらサポートをしてみませんか？