たった1回のクリックで自動ログインできるブックマークレットの活用術

スポンサーリンク

「ユーザ名とパスワード、いちいち入力するの面倒だなー」

「クリック1回で自動ログインしてくれないかなー」

そう思っているアナタ、セキュリティへの意識が足りませんよ

とはいえ、人は誰しも面倒なことはやりたくないですよね。

そんな面倒臭がりなアナタに、「ブックマークレット」という魔法の呪文を伝授します。


↑↑あの商品が”今だけ”おトク!?↑↑

とりあえず、ブックマークレットを使ってみよう

こんにちは、子育てSEブロガーのあおやまです。

なにを隠そう私、SEなんですよ。

そう、システムエンジニアです。

早速、プログラミングという魔法を使って、面倒を解消しようと思います。

このくらいのプログラムならちょちょいと組めるんだぜっ!

ってとこを見せつけたいと思いますw

Amazonに自動ログインするブックマークレットを作ってみよう

とりあえず、やってみましょう。

「そもそも、ブックマークレットってなに?」

そう思ったアナタ、きっと優秀なシステムエンジニアになれますよ。

システムエンジニアは、疑問に思うことが大切な仕事ですからね。

でも、その説明は後半でじっくりやります。

まずは、実践あるのみです!

1.Chromeブラウザを開く

Chromeってなに?と思ったら、以下からダウンロードしてください。

パソコン版 Chrome – Google

※言い忘れましたが、パソコンでの操作が大前提です。

2.適当なページを開いて、「Ctrl」+「D」を押す

「Ctrl」+「D」は、開いているページをブックマークしたい時に使うショートカットキーです。

押すと、以下のような画面が開きます。

3.編集…ボタンを押す

編集…ボタンを押すと、以下のような画面が開きます。

4.名前を適当に変更する

なんでもいいです。

今回は、Amazonへの自動ログインなので、仮に「amazonログイン」としておきます。

5.呪文をコピーする

ここからが少し面倒です。

面倒なんですが、先を考えればたいしたことはありません。

とりあえず、以下のよくわからない呪文を、すべてコピーしてください。

6.URLへ貼り付ける

コピーした呪文を、3.の画面のURL欄に貼り付けてください。

7.URL欄の「メールアドレス」と「パスワード」を編集する。

貼り付けた呪文の文末にメールアドレスと、パスワードという表記があると思います。

これを、Amazonに登録している実際のメールアドレスと、パスワードに変更してください。

これで、呪文は完成です。

8.保存ボタンを押す

保存ボタンを押すと、ブックマークに登録されます。

これで作業は完了です。お疲れさまでした。

さあ、Amazonへログインしてみよう

というわけで、さっそく試してみましょう。

以下のリンクから、Amazonのログイン画面を開いてください。

Amazon サインイン画面

開いたら、作成した呪文(ブックマークレット)をクリックします。

すると、、、

どうでしょう?

うまくログインできましたか??

うまくいかない場合は、きっとレベル不足なので雑魚キャラをぶっ倒して

経験値を積んでから出直して来てください。

というのは、冗談です。

お気軽に、あおやままでご連絡ください。

マジメにご質問頂ける方なら、喜んで返信します。

私自身の勉強にもなるので、大歓迎です。

※Twitterに抵抗がある方は、この記事の一番したに各SNSのシェアボタンがあるのでそこからどうぞ。問い合わせフォームからでもオッケーです。

ブックマークレットについて解説します

では、「魔法の呪文」あらため、「ブックマークレット」について解説していきます。

そもそも、ブックマークレットってなに?

ググってください。

ウソです。ググるとこんな説明がされています。

ブックマークレット (Bookmarklet) とは、ユーザーがウェブブラウザのブックマークなどから起動し、ウェブブラウザで簡単な処理を行う簡易的なプログラムのことである。 携帯電話のウェブブラウザで足りない機能を補ったり、ウェブアプリケーションの処理を起動する為に使われることが多い。

wikiより

そういうことらしいです。正直、私もよくわかってないです。

Javascript(ジャバスクリプト)というプログラミング言語を使ったプログラムです。

今回の場合、このプログラムを使って以下の手動操作を自動化したわけです。

  1. メールアドレスを入力する。
  2. パスワードを入力する。
  3. サインインボタンを押す。

自動ログインのソースコード解説

では、今回のブックマークレットのソースコードを解説していきます。

だんだん、システムエンジニアっぽくなってきますよ~

まず、今回実行したソースコードはこちらですね。

これを見やすくするために改行するとこんな感じです。

1行目は、Javascriptを使ってますよーと宣言している感じです。

2行目も宣言みたいなものです。

3行目で、メールアドレスを入力し、

4行目で、パスワードを入力、

5行目で、サインインボタンを押しています。

6行目はカッコを閉じてるだけです。

そして、最後の7行目がとても重要です。

これは、2行目で宣言した変数に値を代入するための記述です。

具体的には以下の通りです。

  • d=document
  • i=’getElementById’
  • n=’getElementsByName’
  • v=’value’
  • in1=’ap_email’
  • in2=’ap_password’
  • in3=’signInSubmit’
  • t1=’メールアドレス’
  • t2=’パスワード’

d~vに関しては、javascriptの関数みたいなものです。

in1~in3は、webページ上の入力箇所(ボタンを押す場所)を特定するものです。

そして、t1,t2は入力する値という感じです。

このような構成のソースコードで成り立っており、ブックマークとしてクリックすることで

このプログラムが実行されるわけです。

Amazon以外も自動ログインするために

ここからは、応用編です。

仕組みを理解しておく必要があるので、わかりにくい部分に絞って解説します。

※以降、ある程度HTML言語を理解していることが条件になってきます。

入力箇所(ボタンを押す場所)を特定する方法

in1~in3をどうやって調べるのかを解説します。

これは、Chromeが便利です。

webページを開き、調べたい入力欄もしくボタンにカーソルを合わせて、

右クリックして「検証」をクリックすると右側にズラッとHTMLソースが表示されます。

そのソースの網掛けになっているところ(たぶん灰色)でidもしくは、nameを探してください。

ちなみに、Amazonのログイン画面はすべてidが振られていましたが、idがないケースもあります。idがない場合は、nameを使用します。

idとname、submitとclickについて

そもそも、紹介したAmazon自動ログインのソースコードは変数を使ってかなり簡略化しています。

変数を使用せずに書くとこんな感じです。

Amazonのログイン画面は、すべてにidが宣言されていたのでこのような記述になりますが、上記でも記載した通り、idが宣言されているケースもあります。

その場合は、nameを使うことになるのですが、そうなるとソースコードも変わってきます。

なお、ボタンを押す命令について、Amazonの自動ログインは、click()を使っていますが、

うまくボタンが押されない場合もあります。その場合はsubmit()を使います。

整理するとこんな感じです。

No パターン詳細 ソースコード
1 idがわかる入力欄 document.getElementById(“id“).value=”入力したいテキスト“;
2 idがない(nameならわかる)入力欄 document.getElementsByName(“name“)[0].value=”入力したいテキスト“;
3 idがわかるボタン[click] document.getElementById(“id“).click();
4 idがない(nameならわかる)ボタン[click] document.getElementsByName(“name“)[0]. click();
5 idがわかるボタン[submit] document.getElementById(“id名”).submit();
6 idがない(nameならわかる)ボタン[submit] document.getElementsByName(“name“)[0]. submit();

さらにこれを、変数で簡略化したものがこちらです。

No パターン詳細 ソースコード(変数使用時)
1 idがわかる入力欄 d[i]([in1])[v]=[t1];
2 idがない(nameならわかる)入力欄 d[n]([in1])[0][v]=[t1];
3 idがわかるボタン[click] d[i]([in1]).click();
4 idがない(nameならわかる)ボタン[click] d[n]([in1])[0].click();
5 idがわかるボタン[submit] d[i]([in1]).submit();
6 idがない(nameならわかる)ボタン[submit] d[n]([in1])[0].submit();

あとは、これを組み合わせれば流用が可能です。

※ただし、入力欄やボタンに、idもnameもないwebページには使用できません。ご了承ください。

その他の具体例

使用する方が一部のサイト運営者に偏りますが、

Amazon以外の具体例も掲載しておきます。

1.Wordpressへの自動ログイン

■ログインするURL

各自のadminログイン画面

■実行用ソースコード

■改行付きソースコード

2.A8.netへの自動ログイン

■ログインするURL

A8.net ログイン画面

■実行用ソースコード

■改行付きソースコード

付録:自動ログインのブックマークレット作成支援

ブックマークレットは、実行時に改行を削除しなければいけません。

ソースコードを書いたり、確認したりする時は改行してあった方がいいですよね。

そんな時便利なのが、サクラエディタのマクロです。

詳細は割愛しますが、私が作成したマクロのソースコードも公開しておきます。

仕組みは実にシンプルです。

何をやっているかは、ソースコード内のコメントを参照してください。

■作成したブックマークレットを1行にするマクロ

■1行のブックマークレットに改行を挿入するマクロ

さらに、Excel関数を使った自動ログイン用のブックマークレット作成支援ツールも作ってみたので、よかったら使ってみてください。

画面構成はこんな感じです。

C列、D列、H列、I列、K列、L列、N列、O列の入力に応じて、

F列にブックマークレットのソースコードを自動生成します。

良さそうだったら、ぜひ使ってみてください。

まとめ

いかがでしたか。

こんなことやらなくても、自動でログインできてますけど。。。

というのは、言わないお約束で。

そーいえば、ブックマークレット(というかjavascript)を調べるにあたり、

『teratail(テラテイル)』というエンジニア用のQ&Aサイトがとても参考になりました。



無料会員登録すれば、質問することもできます。

よかったら、登録してみてください。

ブックマークレットは便利で、比較的入り込みやすいプログラミングでもあるので

興味がある方は、ぜひチャレンジしてみてください。

私もまだまだ詳しくないので、いろいろ勉強したいと思います。

最後までお読みいただき、ありがとうございました。

スポンサーリンク

シェアする

フォローする

たった1回のクリックで自動ログインできるブックマークレットの活用術
この記事をお届けした
SEARCH LOGの最新記事を、
いいねしてチェックしよう!