2. ワンクリックでAmazonの商品名をGoogle検索するボタンを作る
Updated
2021/8/8 8:00
Author
Jumpei Ikegamiこの記事では、Amazonで商品を見ているときに、その商品名でGoogle検索ができる便利なボタンを作ってみます。
前のチュートリアル
1. Amazonの汚いURLを短縮してコピーするためのボタンを作る2021/5/9 3:562021/8/8 7:59作るもの
Amazonの商品詳細ページから、その商品の名前で検索したときのGoogle検索結果ページにワンクリックで飛ぶためのブックマークレットを作ってみます。商品の公式ページを素早く探したいときやAmazon以外のレビューサイトを見たいときなどに、少しだけ便利かもしれません。
体験すること
このチュートリアルによって、以下を体験します。
- JavaScriptを使ってページ上のHTML要素を取得する
- JavaScriptを使ってブラウザを自動でページ遷移させる
チュートリアルスタート！
ここからは、実際に手を動かしながら読み進めていきましょう。ただ読むだけよりも、実際に体験した方が内容を深く理解することができます。
ブックマークレットを登録する
まずは結果を見るために、ブックマークレットを試しに実行してみましょう。前回やったのと同様に、次のブックマークレットを登録します。
JavaScript
Amazonの商品ページを開いているときにクリックしてみてください。うまく登録できていれば、Googleの検索結果ページに自動でページ遷移し、その商品のタイトルで検索した結果が一覧表示されます。
HTMLドキュメントにアクセスする
このブックマークレットのうち、実際のプログラム部分は以下です。
JavaScript
今回は、3行のプログラムから成っています。まず最初は、Amazonの商品ページの「HTMLドキュメント」から、商品タイトルを含む「HTML要素」を取得しています。
HTMLドキュメントとは、Webページの設計書です。全てのWebページにはそれに対応するHTMLドキュメントが存在し、ブラウザはHTMLドキュメントという設計書を読み込んで、そのページをどのように描画すればいいかを理解します。HTMLドキュメントは、画像、テキストボックス、テーブルなど、小さな「HTML要素（Element）」の組み合わせでできています。
ページ上の文字列をプログラム中で使いたい場合は、まずHTMLドキュメントからその文字列を含むHTML要素を取得します。プログラムでいうと、次の部分です。
JavaScript
プログラム中からHTMLドキュメントを参照するには、
documentという変数にアクセスします。実は、変数というのは入れ子にすることができます。つまり、変数の中に別の変数を格納することができます。これは、パソコンのフォルダとファイルの関係に似ています。たとえばパソコンのフォルダの「書類（
docs） > テキスト（text） > memo_0414.txt」という位置にファイルがあるとします。これと同様の関係を、変数を入れ子にしてJavaScriptのプログラムで表すと、次のような感じになります。JavaScript
また、こうした変数の中に命令を格納することもできます。
変数
memo0414の中身が文字列データである場合、docs.text.memo0414全体も、プログラム実行時にその文字列データに変身します。HTMLドキュメントにアクセスするための変数documentも、その中に色んな変数や命令を含んでいます。それらにアクセスするためには、次のように記述します。JavaScript
JavaScript
HTMLドキュメントからHTML要素を取得する
HTMLドキュメントから特定のHTML要素を取得するには、
document.querySelector()という命令を使います。JavaScript
命令には、その命令に必要なデータを渡すことができるのでした。命令
document.querySelector()に必要なデータは、「セレクタを示す文字列」です。「セレクタ」とは、HTMLドキュメントの中の住所みたいなものです。主にCSSで使うので、「CSSセレクタ」とも呼ばれます。住所で家の場所を特定できるように、セレクタを使うとHTMLドキュメントの中からHTML要素の場所を特定することができます。セレクタの書き方に関して詳細な説明をすると、それだけで本が書けるので、今回は割愛します。
代わりに、セレクタを自動で生成しコピーする方法を紹介します。
- Amazonの適当な商品ページを開く
- F12キーを押して、Chromeデベロッパーツールを開く
- 左上の矢印マークをクリックし、HTML要素を選択するモードに切り替える
- ページの中で、セレクタを知りたい部分（今回は商品タイトル部分）をクリック
- デベロッパーツールのElementタブが自動で開いて、対応するHTML要素がハイライトされる
- ハイライトされたHTML要素を右クリックし、「Copy > Copy selector」ボタンを押す
ここまでの手順で、クリップボードに任意のHTML要素を特定するためのセレクタをコピーできます。試しにどこかのテキストボックスにペーストしてみると、
#productTitleというセレクタがコピーされていることがわかります。つまり、Amazonの商品ページからタイトルを含むHTML要素を取得するためのプログラムは、次のようになります。
JavaScript
命令の中には、
document.querySelector()のように、あるデータを取得するためのものがあります。そのような命令は、この命令文自体がプログラム実行時に取得されたデータに変身します。たとえば、document.querySelector("#productTitle")は、全体として1つのHTML要素データに変身します。
変数を使ってデータに名前を付ける
命令
document.querySelector()を使って取得したHTML要素も、文字列や数値とは違った形式のデータの一種です。データを変数に格納することで、そのデータに名前を付けることができます。名前を付けることで、後から繰り返し再利用できたり、プログラムが読みやすくなったりします。
新しい変数を作成するには、次のようにします。
JavaScript
varは、variable（変化するもの）の略です。また、変数にデータを格納するには、
=を使って次のようにします。JavaScript
新しい変数の作成と、その変数へのデータの格納は、次のように同時に行うことができます。
JavaScript
つまり、1行目は次のように解釈できます。
- 元のプログラム
JavaScript
document.querySelector()が実行されると、HTML要素に変身する
JavaScript
- 全体としては、新しい変数を作成してHTML要素データを格納している
JavaScript
HTML要素の中のテキストを抜き出す
続いて、プログラムの2行目です。
JavaScript
変数
elementに格納されたHTML要素の中には、innerTextという別の変数が含まれています。この変数の中身には、HTML要素の中のテキストが文字列データとして格納されています。JavaScript
変数をプログラム中に記述すると、その中身のデータに変身するのでした。つまり、
HTML要素.innerTextをプログラム中に記述すると、このHTML要素の中のテキストを示す文字列に変身します。今見ている商品ページが「デッドデッドデーモンズデデデデデストラクション」であれば、プログラムの2行目は次のように解釈できます。
- 元のプログラム
JavaScript
element.innerTextは、文字列に変身する
JavaScript
- 全体としては、新しい変数
titleを作成して文字列データを格納している
JavaScript
自動でページ遷移する
最後に、プログラムの3行目です。
JavaScript
locationというのは、その名の通り、ブラウザが今開いているインターネット上の場所を示す変数です。たとえば、Amazonのページを開いていれば、location変数にはAmazonのページの場所を示すURLなどのデータが格納されます。変数locationは、変数documentと同様に、ブラウザが勝手に用意してくれます。変数
locationの中には、hrefという、ページのURLを格納した変数が存在します。驚くべきことに、その変数に別のURLを示す文字列を格納し直すと、ブラウザが新しく格納されたURLに自動でページ遷移します。Google検索のURLは、 https://www.google.co.jp/search です。Googleの仕様により、クエリパラメタ
qに検索ワードを指定することで、検索結果を指定することができます。今回のプログラムでは、文字列の結合によってURL文字列を作成し、
location.hrefに格納しています。- 元のプログラム
JavaScript
- 文字列を結合
JavaScript
- 全体としては、変数
location.hrefにURLを示す文字列を格納してページ遷移している
JavaScript
最後に、プログラム全体をおさらいしましょう。細かくプログラムの内容を見ていくと、以下のように読み解くことができます。
- HTMLドキュメントから、商品名を含むHTML要素を、セレクタを使って取得し、変数
elementに格納
JavaScript
- 取得したHTML要素から、中のテキストを取得し、変数
titleに格納
JavaScript
- ページタイトルからGoogle検索結果ページのURLを作成し、ページ遷移する
JavaScript
なお、同じプログラムでも、書き方は1つではありません。わざわざデータを変数に格納しなくても、同じ動作をするプログラムを書くこともできます。今回は読みやすさを考えて、データを変数に毎回格納し、データの中身に応じた名前をつけています。
この項では、ページ内のHTML要素を取得する方法を学びました。HTML要素を自由に操作できるようになると、実現できることの幅がぐんと広がります。
応用例
このチュートリアルの内容に少しのJavaScriptを足すと、たとえば下記のようなブックマークレットを作ることができます。もしJavaScriptを少し覚えたら、挑戦してみてください。
- 詳細ページの下の方にあるテキストをワンクリックで取得してダイアログに表示する