2. ワンクリックでAmazonの商品名をGoogle検索するボタンを作る

この記事では、Amazonで商品を見ているときに、その商品名でGoogle検索ができる便利なボタンを作ってみます。

前提知識

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

作るもの

Amazonの商品詳細ページから、その商品の名前で検索したときのGoogle検索結果ページにワンクリックで飛ぶためのブックマークレットを作ってみます。商品の公式ページを素早く探したいときやAmazon以外のレビューサイトを見たいときなどに、少しだけ便利かもしれません。

体験すること

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

  • JavaScriptを使ってページ上のHTML要素を取得する
  • JavaScriptを使ってブラウザを自動でページ遷移させる

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

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

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

まずは結果を見るために、ブックマークレットを試しに実行してみましょう。「Amazonの汚いURLを短縮してコピーするためのボタンをブックマークレットで作る」でやったのと同様に、次のブックマークレットを登録します。

{% c-block language="js" %}
javascript:(function(){
    var element = document.querySelector("#productTitle");
    var title = element.innerText;
    location.href = "https://www.google.co.jp/search?q=" + title;
})()
{% c-block-end %}

Amazonの商品ページを開いているときにクリックしてみてください。うまく登録できていれば、Googleの検索結果ページに自動でページ遷移し、その商品のタイトルで検索した結果が一覧表示されます。

HTMLドキュメントにアクセスする

このブックマークレットのうち、実際のプログラム部分は以下です。

{% c-block language="js" %}
var element = document.querySelector("#productTitle");
var title = element.innerText;
location.href = "https://www.google.co.jp/search?q=" + title;
{% c-block-end %}

今回は、3行のプログラムから成っています。まず最初は、Amazonの商品ページの「HTMLドキュメント」から、商品タイトルを含む「HTML要素」を取得しています。

HTMLドキュメントとは、Webページの設計書です。全てのWebページにはそれに対応するHTMLドキュメントが存在し、ブラウザはHTMLドキュメントという設計書を読み込んで、そのページをどのように描画すればいいかを理解します。HTMLドキュメントは、画像、テキストボックス、テーブルなど、小さな「HTML要素(Element)」の組み合わせでできています。

ページ上の文字列をプログラム中で使いたい場合は、まずHTMLドキュメントからその文字列を含むHTML要素を取得します。プログラムでいうと、次の部分です。

{% c-block language="js" %}
document.querySelector("#productTitle")
{% c-block-end %}

プログラム中からHTMLドキュメントを参照するには、documentという変数にアクセスします。

実は、変数というのは入れ子にすることができます。つまり、変数の中に別の変数を格納することができます。これは、パソコンのフォルダとファイルの関係に似ています。たとえばパソコンのフォルダの「書類(docs) > テキスト(text) > memo_0414.txt」という位置にファイルがあるとします。これと同様の関係を、変数を入れ子にしてJavaScriptのプログラムで表すと、次のようになります。

{% c-block language="js" %}
c.text.memo0414
{% c-block-end %}

また、こうした変数の中に命令を格納することもできます。

変数memo0414の中身が文字列データである場合、docs.text.memo0414全体も、プログラム実行時にその文字列データに変身します。HTMLドキュメントにアクセスするための変数documentも、その中に色んな変数や命令を含んでいます。それらにアクセスするためには、次のように記述します。

{% c-block language="js" %}
document.変数名
{% c-block-end %}

{% c-block language="js" %}
document.命令()
{% c-block-end %}

HTMLドキュメントからHTML要素を取得する

HTMLドキュメントから特定のHTML要素を取得するには、document.querySelector()という命令を使います。

{% c-block language="js" %}
document.querySelector(セレクタを示す文字列)
{% c-block-end %}

命令には、その命令に必要なデータを渡すことができるのでした。命令document.querySelector()に必要なデータは、「セレクタを示す文字列」です。

「セレクタ」とは、HTMLドキュメントの中の住所みたいなものです。主にCSSで使うので、「CSSセレクタ」とも呼ばれます。住所で家の場所を特定できるように、セレクタを使うとHTMLドキュメントの中からHTML要素の場所を特定することができます。セレクタの書き方に関して詳細な説明をすると、それだけで本が書けるので、今回は割愛します。

代わりに、セレクタを自動で生成しコピーする方法を紹介します。

  • Amazonの適当な商品ページを開く
  • F12キーを押して、Chromeデベロッパーツールを開く
  • 左上の矢印マークをクリックし、HTML要素を選択するモードに切り替える
HTML要素を選択するためのボタン
  • ページの中で、セレクタを知りたい部分(今回は商品タイトル部分)をクリック
セレクタを知りたいHTML要素をクリック
  • デベロッパーツールのElementタブが自動で開いて、対応するHTML要素がハイライトされる
  • ハイライトされたHTML要素を右クリックし、Copy > Copy selectorボタンを押す
Copy selectorボタン

ここまでの手順で、クリップボードに任意のHTML要素を特定するためのセレクタをコピーできます。試しにどこかのテキストボックスにペーストしてみると、#productTitleというセレクタがコピーされていることがわかります。

つまり、Amazonの商品ページからタイトルを含むHTML要素を取得するためのプログラムは、次のようになります。

{% c-block language="js" %}
document.querySelector("#productTitle")
{% c-block-end %}

命令の中には、document.querySelector()のように、あるデータを取得するためのものがあります。
そのような命令は、この命令文自体がプログラム実行時に取得されたデータに変身します。
たとえば、document.querySelector("#productTitle")は、全体として1つのHTML要素データに変身します。

変数を使ってデータに名前を付ける

命令document.querySelector()を使って取得したHTML要素も、文字列や数値とは違った形式のデータの一種です。

データを変数に格納することで、そのデータに名前を付けることができます。名前を付けることで、後から繰り返し再利用できたり、プログラムが読みやすくなったりします。

新しい変数を作成するには、次のようにします。

{% c-block language="js" %}
var 変数名
{% c-block-end %}

varは、variable(変化するもの)の略です。

また、変数にデータを格納するには、=を使って次のようにします。

{% c-block language="js" %}
変数名 = データ
{% c-block-end %}

新しい変数の作成と、その変数へのデータの格納は、次のように同時に行うことができます。

{% c-block language="js" %}
var 変数名 = データ
{% c-block-end %}

つまり、1行目は次のように解釈できます。

  • 元のプログラム

{% c-block language="js" %}
var element = document.querySelector("#productTitle");
{% c-block-end %}

  • document.querySelector()が実行されると、HTML要素に変身する

{% c-block language="js" %}
var element = HTML要素
{% c-block-end %}

  • 全体としては、新しい変数を作成してHTML要素データを格納している

{% c-block language="js" %}
var 変数名 = データ
{% c-block-end %}

HTML要素の中のテキストを抜き出す

続いて、プログラムの2行目です。

{% c-block language="js" %}
var title = element.innerText;
{% c-block-end %}

変数elementに格納されたHTML要素の中には、innerTextという別の変数が含まれています。この変数の中身には、HTML要素の中のテキストが文字列データとして格納されています。

{% c-block language="js" %}
HTML要素.innerText
{% c-block-end %}

変数をプログラム中に記述すると、その中身のデータに変身するのでした。つまり、HTML要素.innerTextをプログラム中に記述すると、このHTML要素の中のテキストを示す文字列に変身します。

今見ている商品ページが「デッドデッドデーモンズデデデデデストラクション」(私が好きな漫画です)であれば、プログラムの2行目は次のように解釈できます。

  • 元のプログラム

{% c-block language="js" %}
var title = element.innerText;
{% c-block-end %}

  • element.innerTextは、文字列に変身する

{% c-block language="js" %}
var title = "デッドデッドデーモンズデデデデデストラクション (1) (ビッグコミックススペシャル)";
{% c-block-end %}

  • 全体としては、新しい変数titleを作成して文字列データを格納している

{% c-block language="js" %}
var 変数名 = データ
{% c-block-end %}

自動でページ遷移する

最後に、プログラムの3行目です。

{% c-block language="js" %}
location.href = "https://www.google.co.jp/search?q=" + title;
{% c-block-end %}

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に格納しています。

  • 元のプログラム

{% c-block language="js" %}
location.href = "https://www.google.co.jp/search?q=" + title;
{% c-block-end %}

  • 文字列を結合

{% c-block language="js" %}
location.href = "https://www.google.co.jp/search?q=デッドデッドデーモンズデデデデデストラクション (1) (ビッグコミックススペシャル)";
{% c-block-end %}

  • 全体としては、変数location.hrefにURLを示す文字列を格納してページ遷移している

{% c-block language="js" %}
変数名 = 文字列
{% c-block-end %}

最後に、プログラム全体をおさらいしましょう。
細かくプログラムの内容を見ていくと、以下のように読み解くことができます。

  • HTMLドキュメントから、商品名を含むHTML要素を、セレクタを使って取得し、変数elementに格納

{% c-block language="js" %}
var element = document.querySelector("#productTitle");
{% c-block-end %}

  • 取得したHTML要素から、中のテキストを取得し、変数titleに格納

{% c-block language="js" %}
var title = element.innerText;
{% c-block-end %}

  • ページタイトルからGoogle検索結果ページのURLを作成し、ページ遷移する

{% c-block language="js" %}
location.href = "https://www.google.co.jp/search?q=" + title;
{% c-block-end %}

なお、同じプログラムでも、書き方は1つではありません。わざわざデータを変数に格納しなくても、同じ動作をするプログラムを書くこともできます。今回は読みやすさを考えて、データを変数に毎回格納し、データの中身に応じた名前をつけています。

この項では、ページ内のHTML要素を取得する方法を学びました。HTML要素を自由に操作できるようになると、実現できることの幅がぐんと広がります。

応用例

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

  • 詳細ページの下の方にあるテキストをワンクリックで取得してダイアログに表示する