ブックマークレットで始める業務改善＜中級編＞② 勝手にリンクを付ける！

シド・ブックマーカー

2024年5月26日 16:58

前回はこちら。

初級編では各種フォームの入力を楽にするテクニックを学習しました。

中級編ではもっとアグレッシブに、既存のwebページを好き勝手に書き換えてしまいます。ブックマークレットの真価に触れていただければ！

表にリンクを後付けする

何かのリストがあり、そこから各データの明細ページに飛べれば便利なのに、そうなっていない意地悪なwebシステムはありませんか？そういうときは、自分でリンクを後付けしましょう！

サンプルのwebページを用意しました。

このwebページには、下図のような表があります。Amazonの書籍ランキングです。

以下のように、各行にリンクを付けてAmazonの商品ページへ飛べるようにしたいと思います。

そのために必要なことをリストアップしてみました。ひとつづつ片付けていきましょう。（余談ですが、難しそうな仕事はこんな感じに分解してみると、実現に一歩近づきますね。）

リンクで飛ぶべきURLの構造を調べる
URLを作る
<a>要素を作る（HTMLでリンクを表現するタグ）
作成した<a>要素を表に挿入する

今回の記事は、前提として<table>関係のタグと<a>タグの知識を必要とします。必要に応じてネットで調べてみてください。ポイントは、<tr>が表の1行を表し、<td>が1セルを表すことです。<tr>の中に<td>がいくつか入っている、という階層構造です。

1. URLの構造を調べる

表の一つ目の本をAmazonで探してみると、アドレス欄は以下のようになっていました。

URLに日本語が含まれている場合、それはSEO（検索エンジン最適化）などの都合で入れてあるだけで、無視できることが多いです。

ここを無視すると、今回作るべきURLは
https://www.amazon.co.jp/dp/4095017120
であると推測できます。本当にこのURLで商品ページに飛べるか試してみてください。

なお、ブラウザーのアドレス欄ではURL先頭の https:// や http:// が省略されることがあります。アドレス欄にカーソルを合わせるか、メモ帳などにコピペすると表示されます。

2. URLを作る

上記のURLが正しいとして、ではこの 4095017120 というのはどこにあるのでしょうか。商品ごとに振られた商品番号のようですね。

今回の例だと、ASIN列にそのままズバリ入っていますので、これを使えば良さそうです。

実際には、こういうIDはそのまま表に入っておらず、HTML要素の属性に入っていたりします。Amazonのサイトでも、data-asin などの属性にこのIDが入っていました。

デベロッパーツールで注意深く調べてみてください。Ctrl + F で検索窓を開いて、ID（今回だと 4095017120 ）で検索すると探しやすくなります。

3. <a>要素を作る

ここまでのまとめとして、
https://www.amazon.co.jp/dp/【ID】
というURLへ飛ぶ<a>要素を作れば良く、【ID】に入れるべきものは元の表のASIN列にあることが分かりました。

新しく要素を追加するときは、document.createElement("作りたいタグ名") という関数を使います。更に、setAttribute("属性名", "値") という関数で属性を付与して肉付けしていきます。

元の表の各行で、商品ページへのリンクを持つ<a>要素を作るJavaScriptプログラムは以下の通りです。各行の解説をコメントに入れてあります。

document.querySelectorAll("tbody tr").forEach(function(e) { /* 表の各行で処理を実施する */
	const cells = e.querySelectorAll("td"); /* 処理中の行の全セルを取得してcells変数に入れる */
	const asin = cells[1].innerText; /* URLに入れるべきIDは、2番目のセルにある */
	const a = document.createElement("a"); /* <a> タグを作る */
	a.setAttribute("href", "https://www.amazon.co.jp/dp/" + asin); /* href属性にURLを入れる */
	a.setAttribute("target", "_blank"); /* クリック時に新しいタブで開くための属性設定 */
	a.innerText = cells[2].innerText; /* リンクを付ける文字列はタイトルで、3番目のセルにある */
});

cells のようなリストは通し番号が 0 から始まるため、2番目の要素が欲しいなら[1]とする点にご注意ください。

上記のプログラムは、デベロッパーツールで動かしても、目に見える変化は起きません。せっかく作った<a>要素も、JavaScriptの世界で存在しているだけで、元のHTML文書へ挿入していないためです。

4. 作成した<a>要素を表に挿入する

いよいよ大詰めです。作成した<a>要素を、append( ) 関数でHTML文書に挿入しましょう。

以下のプログラムは、3.で作成したプログラムに2行追加して、javascript:～～などで囲んでブックマークレット化したものです。これで完成です！

javascript:(function(){
	document.querySelectorAll("tbody tr").forEach(function(e) {
		const cells = e.querySelectorAll("td");
		const asin = cells[1].innerText;
		const a = document.createElement("a");
		a.setAttribute("href", "https://www.amazon.co.jp/dp/" + asin);
		a.setAttribute("target", "_blank");
		a.innerText = cells[2].innerText;
		cells[2].innerText = ""; /* タイトル列の中身を一度全部消す */
		cells[2].append(a); /* タイトル列に作成したa要素を追加！ */
	});
})();

表にボタンを追加する

ブックマークレットで、Amazonの商品ページへ飛ぶボタンを追加することも可能です！

これを実現するためのブックマークレットは以下の通りです。

javascript:(function(){
	const header = document.createElement("td");
	header.innerText = "リンク";
	document.querySelector("thead tr").append(header);

	document.querySelectorAll("tbody tr").forEach(function(e) {
		const asin = e.querySelectorAll("td")[1].innerText;
		const td = document.createElement("td");
		const button = document.createElement("button");
		button.setAttribute("onclick", "window.open('https://www.amazon.co.jp/dp/" + asin + "','_blank')");
		button.innerText = "Go!";
		td.append(button);
		e.append(td);
	});
})();

どのような仕組みでボタンを追加しているか、読み解いてみてください。今回の宿題です☝️

今回のまとめ

既存のwebページに要素を追加する方法を学びました。使った関数は以下の3つです。

要素の追加： document.createElement("作りたいタグ名")
属性の付与： setAttribute("属性名", "値")
要素の挿入： append(挿入したい要素)

ぜひ実際に手を動かして、理解を深めてください。読むだけではなかなか使えるようにはなりませんので。

次回はこちらです。

このシリーズのすべての記事は、こちらのマガジンにまとめています。

🐶スキしていただけると励みになります！

この記事が気に入ったらサポートをしてみませんか？