1. Amazonの汚いURLを短縮してコピーするためのボタンを作る
Updated
2021/8/8 7:59
Author
Jumpei Ikegamiこの「ブックマークレットでブラウザを自動操作する」という一連のチュートリアルでは、「ブックマークレット」と呼ばれるWebブラウザの仕組みを使って文字通りブラウザを操作してみます。ブラウザを操作するためには主にJavaScriptと呼ばれるプログラミング言語を使います。JavaScriptがよくわからなくても安心してください。このチュートリアルでは、コピペするだけでJavaScriptを動かすことができます。（そもそもJavaScriptがバリバリ書ける人はこのチュートリアルには来ていないと思いますが。。。）
この記事では、Amazonの汚いURLをスマートに扱うための便利なボタンを作ってみます。
作るもの
仕事やプライベートでAmazonの商品詳細ページURLを共有するときに、困ったことはないでしょうか？Amazonの商品詳細ページURLは、デフォルトだと商品名が入っていて無駄に長いのです。特に日本語の商品名の場合、%がたくさん入った謎の文字列に変換されてしまいます。（ちなみにこの変換はURLエンコードといいます。）無駄に長いURLをSlackなどに貼ると見栄えが悪いので、できれば短くしたいです。
実は、Amazonの商品詳細ページURLは商品名の部分を削除しても適切にリンクとして機能します。
- 短縮前
https://www.amazon.co.jp/%E5%AE%8C%E5%85%A8SIer%E8%84%B1%E5%87%BA%E3%83%9E%E3%83%8B%E3%83%A5%E3%82%A2%E3%83%AB-%E6%B1%A0%E4%B8%8A%E7%B4%94%E5%B9%B3-ebook/dp/B07TM9LWTN
- 短縮後
https://www.amazon.co.jp/dp/B07TM9LWTN
そこで、今Chromeで見ているAmazonの商品詳細ページURLの「短いURL」を、ワンクリックでブラウザのダイアログに表示するようなボタンを作ってみましょう。AmazonのURLを誰かにシェアしたいときに、便利に使うことができるでしょう。
体験すること
このチュートリアルによって、以下を体験します。
- ブックマークレットを登録する
- JavaScriptを使ってページ上の変数の値を使う
- JavaScriptを使って文字列の結合をする
- JavaScriptを使ってブラウザのダイアログを表示する
チュートリアルスタート！
ここからは、実際に手を動かしながら読み進めていきましょう。ただ読むだけよりも、実際に体験した方が内容を深く理解することができます。
ただし、まずは「ブックマークレット」とは何かについて簡単に理解しましょう
「ブックマークレット」を理解する
Webページをブラウザで開くとき、実は様々なJavaScriptプログラムが裏側で動いています。たとえば、ボタンをクリックしたときにモーダル画面が開くのも、JavaScriptで実現されています。その多くは、Webページを提供する会社が記述したプログラムです。
しかし実は、ブラウザを開いているあなた自身が、そのWebページを開いているブラウザに対して、JavaScriptプログラムを後から追加で実行することができます。これにより、たとえばページの表示を変えたり、自動でクリックさせたりなど、ブラウザを操作することができます。ブラウザ上でJavaScriptプログラムを実行する方法はいくつかあります。その最も簡易な方法の1つが、「ブックマークレット」と呼ばれるものです。
ブックマークレットとは、「JavaScriptプログラムが登録されたブラウザ内のブックマーク」です。普通のブックマークは、クリックすると登録されたURLに遷移します。ブックマークレットの場合は、クリックすると登録されたJavaScriptプログラムが実行されます。よく使うプログラムをブックマークレットに登録しておくことで、面倒なブラウザ作業をワンクリックで実現できるようになります。
ブックマークレットを登録する
ここからは、実際にブックマークレットを作成する中で、簡単なJavaScriptプログラムを書いてみましょう。なお、ブラウザにはGoogle Chromeを使っている前提で解説します。他の多くのブラウザでも、ブックマークとして登録すれば問題なく動作するはずです。
まず、ブックマークレットを登録する手順を紹介します。以下のブックマークレットの内容をクリップボードにコピーします。
JavaScript
次に、適当なページでChromeの「ブックマークに追加」ボタンを押し、名前を「Amazon URL短縮」などわかりやすいものに変更します。
「その他」をクリックし、ブックマーク編集画面でコピーした内容をURLの欄にペーストします。
そのまま「保存」ボタンを押します。
実際に適当なAmazonの商品ページを開いて、登録したブックマークをクリックしてみます。うまくいくと、短縮されたURLがブラウザの上部に表示されます。
これで、「Amazonの汚いURLを短縮してコピーするためのボタン」は完成です！簡単ですが、これでも立派なエンジニアリングです。
ブックマークレットの中身のJavaScriptを見てみる
ここで終わりにしてもいいですが、せっかくなのでJavaScriptコードの中身を見て少しだけ理解してみましょう。
JavaScriptをURLとして解釈させる
ブックマークレットのURLに登録した内容は、以下のような構成をしています
JavaScript
実際のプログラムは「JavaScriptのプログラム」と書かれた部分であり、その外側をブックマークレットで決まった書き方で囲っています。特に理解する必要はないですが、簡単に解説します。
JavaScript
この部分は、JavaScriptのプログラムをURLとして解釈するために必要な部分です。普通、ブックマークにはWebページのURLが登録されます。ここにいきなりJavaScriptのプログラムを書いてしまうと、ブラウザが混乱してしまいます。そこで、予め「ここにURLを書かなきゃいけないのは知ってるけど、JavaScriptを書くから実行してね」という宣言として書いています。
JavaScript
この部分は、JavaScriptのプログラムを周りに悪影響が無いように閉じ込めるために必要な部分です。無くても動きますが、ページのもともとの挙動がおかしくなることを防ぐために念のため書いています。
ブラウザのダイアログを表示する
ここからは、「JavaScriptのプログラム」の中身を細かく分けて解説していきます。JavaScriptのプログラム全体は以下です。
JavaScript
このプログラムは、以下のような構成でできています。
JavaScript
このプログラムによって、ブラウザに「ダイアログ」のUIを表示しています。ダイアログというのは、ブックマークレット実行時にブラウザ上部に出てきた小さなウィンドウです。
promptという記述は、「ダイアログを開け」というJavaScriptの命令です。命令の直後に()を付けることで、その命令を実行させることができます。()の中にある文字列を変化させることで、命令の内容を変えることができます。日本語の命令を例にして説明します。たとえば「〇〇を買ってこい」という命令があるとします。それに"焼きそばパン"という文字列を含めて実行すると、「焼きそばパンを買ってこい」になります。買ってくるものに応じて、命令に含める文字列を変化させることで、1つの命令で柔軟に命令を使い分けることができます。
命令
promptの場合は、カンマ（,）区切りで2つの文字列を含めることができます。- 1つ目の文字列: 「ダイアログに表示するテキスト」
- 2つ目の文字列: 「テキストボックスに表示するテキスト」
試しに、以下のようなプログラムを実行してみます。
JavaScript
すると、ダイアログには以下のように表示されます。
promptという命令を使うことで、任意のテキストをダイアログ内のテキストボックスに表示することができます。これで簡単にコピーできるようになります。
文字列をデータとして表現する
ここまでで、「文字列」という言葉が登場しました。JavaScriptにおける文字列とは、その名の通り文字の列であり、1つまたは複数の文字の連なりです。
「命令」と「データ」を明確に区別することが、プログラムを書く上で重要になります。「文字列」や「数値」は、「データ」を表現する形式の1つです。たとえば、私の名前がjumpei_ikegamiであり、年齢は永遠の25歳だとします。これらの名前や年齢は、私のデータであり、
"jumpei_ikegami"は文字列で、25は数値です。文字列をプログラム上にデータとして表現する場合は、以下のように文字列を半角クォーテーションマーク（
" or '）で囲います。JavaScript
プログラムの中にある
"https://www.amazon.co.jp/dp/"も、AmazonのURLの一部を示すための文字列データであることがわかります。
変数を変身させる
今回のプログラムの中で、
ue_ptiという部分があります。JavaScript
これは、変数と呼ばれるものです。変数は、何らかのデータを格納したものであり、自由に名前を付けることができます。
ue_ptiという変数は、Amazonが商品ページ上に予め用意している変数です。Amazonがサイト上の何らかの機能に使っているものと思われます。（つまり、この記事で書いたプログラムは少しだけズルをしています。最初のうちは、がんばりすぎず使えるものは使っていきましょう。ただし、Amazonの仕様が変わるとバグってしまう可能性があります。）変数
up_ptiの中には、Amazonの現在開いている商品ページの商品ID（"B07TM9LWTN"など）を示す文字列データが格納されています。変数の名前をプログラム中にそのまま記述すると、変数はその中身のデータに「変身」します。たとえば、変数
ue_ptiの中身が文字列"B07TM9LWTN"だった場合、プログラム実行時は以下のように変身します。- 変身前
JavaScript
- 変身後
JavaScript
プログラムを解読しているときに変数が出てきた場合は、それが何に変身するかを頭の中で考えて読み進めましょう。
文字列を結合する
複数の文字列データがあるとき、それを組み合わせて、1つの文字列データに変身させることができます。そのためには、以下のように+記号を使います。
JavaScript
文字列同士を足し合わせるから+記号を使っているのは、わかりやすいですね。
今回のプログラムでいうと、プログラム実行時はたとえば以下のように変身します。
- 変身前
JavaScript
- 変身後
JavaScript
ここまでで、最終的にコピーしたいURLをJavaScriptブログラムで生成することに成功しました。
プログラムの文の区切りを示す
日本語の句点（。）のように、JavaScriptでも半角セミコロン（
;）を使って文の区切りを示すことができます。今回のプログラムでも、最後にセミコロンが付いています。JavaScript
JavaScriptプログラム全体を見直す
最後に、プログラム全体をおさらいしましょう。変数や文字列結合がどのように変身するのかを分解して考えると、以下のように読み解くことができます。
- 元のプログラム
JavaScript
- 変数が変身すると？
JavaScript
- 文字列の結合後は？
JavaScript
- つまり、全体が1つの命令promptであることがわかる
JavaScript
このように、プログラムはごく小さな部品の集合体です。最初はコピペでもいいですが、もしいずれ自分でプログラムを書いてみたいと思う人は、なるべくプログラムの個々の小さな部品の意味を理解しようとしてみましょう。使える小さな部品を集めることができれば、その組み合わせで大きなプログラムを記述できるようになるはずです。
応用例
このチュートリアルの内容に少しのJavaScriptを足すと、たとえば下記のようなブックマークレットを作ることができます。もしJavaScriptを少し覚えたら、挑戦してみてください。
- URLからクエリパラメタやアンカーを削除したものをコピーするためのボタン
- URL内のクエリパラメタの組を整理して表示