3. Amazonの星1レビューのリンクに一瞬で飛ぶボタンを作る

この記事では、JavaScriptを使ってサイト上の要素を自動でクリックしてみます。これを応用すれば、よく使うサイトのよく使うボタンを、わざわざ自分でマウスポインタを動かさなくてもブックマークレットを押すだけで自動クリックさせることができます。

前提知識

先に次のチュートリアルをやるのをおすすめします。

作るもの

「Amazonの星1レビューのリンクをすぐにクリックする」ためのブックマークレットを作成します。

Amazonの商品ページでは、カスタマーレビューの掲載エリアがページの下部にあり、スクロールしないと見ることができません。ブックマークレットを使って、ワンクリックですぐに星1レビューに遷移できるようにしましょう。

体験すること

このチュートリアルによって、以下を体験します。

  • JavaScriptを使ってページ上のHTML要素を自動でクリックする
  • JavaScriptのセキュリティ上の危険性を理解する

チュートリアルスタート!

ここからは、実際に手を動かしながら読み進めていきましょう。ただ読むだけよりも、実際に体験した方が内容を深く理解することができます。

ブックマークレットを登録する

試しに以下のブックマークレットを登録して、Amazonの商品詳細ページで実行してみましょう。星1のレビューがあるページを選んでください。

{% c-block language="js" %}
javascript:(function(){
   var element = document.querySelector(
       "#histogramTable > tbody > tr:nth-child(5) > td.aok-nowrap > span.a-size-base > a"
   );
   element.click();
})()
{% c-block-end %}

うまくいけば、一発で星1レビューのページに遷移します。

もしうまく動かない場合は、以下の可能性があります。

  • 星1のレビューが投稿されていない商品を開いている
  • Amazonの仕様変更で星1レビューへのリンク要素を指定するセレクタが変わってしまった

もし後者の場合は、右端の「フィードバック」から教えてください。

HTML要素を自動クリックさせる

実際のプログラム部分は以下です。

{% c-block language="js" %}
var element = document.querySelector(
   "#histogramTable > tbody > tr:nth-child(5) > td.aok-nowrap > span.a-size-base > a"
);
element.click();
{% c-block-end %}

まず、Chromeデベロッパーツールで取得した「星1つレビュー」へのリンクのセレクタを指定して、ページ上の要素を取得し変数elementに格納しています。ここは、これまでのチュートリアルで学んだのと同様です。

まだ説明していないのは、最後の行だけです。取得したHTML要素は、中に入っているテキストを抜き出すだけではなく、以下のようにクリックを自動で発生させることができます。

{% c-block language="js" %}
element.click()
{% c-block-end %}

クリック以外にも、一般的には以下のような操作をJavaScript経由で実行することができます。

  • ボタンやリンクをクリック
  • プルダウンを選択
  • テキストボックスに値を入力

これらを複数組み合わせて実行させることもできます。JavaScript経由でブラウザの操作を実行することで、人間にはできないスピードの操作も実現できるようになります。

他のHTML要素をクリックさせる

短いですが、これでこのチュートリアルは終わりです。チュートリアルは短いですが、「自動でクリックする」という処理は応用の幅がとても広く重要です。

操作に慣れるためにも、「星1つレビュー」へのリンクではなく、「カートに入れるボタン」をクリックするブックマークレットを作ってみましょう。セレクタの部分を、カートに入れるボタンのセレクタに変更すればOKです。

ブックマークレットができたら、実際に実行してみましょう。なんと、ブックマークのボタンを押すだけで商品をカートに入れることができました。

JavaScriptとセキュリティについて理解する

このように、JavaScriptを使うとリンクやボタンを自動でクリックさせることができます。Amazonの「今すぐ買う」ボタンであっても、自動でクリックさせることができます。そう言われると、なんだかちょっと怖いですね。

今は自分が書いたプログラムを自分のブラウザで動かしているだけなのでまだ安心できますが、Webには「他の人が書いたJavaScriptをサイト上に読み込んで実行する」という機能があります。もしあなたがECサイトを管理しているとき、よくわからない出自のJavaScriptを全員のブラウザに読み込んでしまったとします。そのJavaScriptを書いた人に悪意があったら、たとえば「色んな人に勝手に商品を買わせる」みたいなことができてしまうかもしれません。

JavaScriptは色々なことができて便利ですが、逆に色々できすぎるが故に、多くのWebのセキュリティ問題はJavaScriptに関連するものだったりします。

もちろん、Coinhive事件やアラートループ事件のように危険ではないJavaScriptを過度に危険視して規制するというのも愚かなことです。JavaScriptには何ができて何ができないのかを理解した上で、便利なJavaScriptと堅牢なセキュリティとの間でどのようにバランスを取っていけばいいのか。我々はそれについて建設的な議論をする必要があると思います。このサイトが少しでもその役に立てば嬉しいです。

応用例

このチュートリアルの内容に少しのJavaScriptを足すと、たとえば下記のようなブックマークレットを作ることができます。もしJavaScriptを少し覚えたら、挑戦してみてください。

  • よく使うサイトのよく使うボタンを、自動でクリックする