マック食べたい
何食べよう。今は何が売られてるんだろう・・・。
そうだ、スクレイピングしよう
⚠機械的なスクレイピングはグレーな行為⚠
スクレイピングは楽しいです。
ただ、実行規模や対象システム・サービスのスペック・仕様によっては負荷攻撃とみなされる可能性があります。
実際、QiitaやConnpassでは、お手製ツールでのスクレイピングを禁止しており、APIを経由した情報取得を推奨しています。
マックも
マックのサイトポリシーを見ると、「7.禁止事項」に以下の記載があります。
10.当サービスの運営を妨げるまたは妨げるおそれのあるような行為。
11.前各号に定める行為を助長する行為。
12.その他、当社が不適切と判断する行為。
一応、ツールを使ったスクレイピングはやめた方がよさそうです
そこで今回の記事の本題です！！！！！
半自動スクレイピング
ツールを使わず、また、サービスへの負荷も考慮しつつスクレイピングしていきます。
具体的には、chromeの機能でjsを実行し、DOM上の要素を収集・整形して出力してみます。
やってみます！
まずはマックのバーガー一覧画面に移動します
開発者ツール
chromeには、開発者ツールという神機能が存在します。
Win、MACともにF12で表示できます。違ったらごめんなさい。
こんな感じのが表示されます。
これが開発者ツールです。色んな便利機能があるのですが、今回は主に2つ使用します。
開発者ツール：コンソール
タブを選択し、コンソールを開きます。
WarningやErrorなどがごちゃごちゃ出力されています。
コンソールの名の通り、これらはブラウザページ上で動いているjavascriptのコンソールログです。
また、一番下の部分にフォーカスインでき、javascriptを書くことができます。
ここでjavascriptを記載し、画面上のバーガーの名前全てを取得しよう！ということですね！
DOMを解析する
javascriptはDOMを結構自由に操作できます。
例えばですが、querySelectorAll メソッドは、セレクタで一致した全要素を配列（っぽいもの）形式で取得できたりします。
このメソッドでバーガー情報を扱うために、CSSの記述などを確認します。
これも開発者ツールで簡単に行えます。
開発者ツール：要素
タブを選択し、要素を開きます。
言葉で説明がムズイのでgifで説明しますｗ
こんな感じで要素を一意に特定できるclass名を頑張って取得していきます！
作成したコード
コードはAIと適当に作ればいいので、作成過程はカットします。
今回は以下のようなコードを作成しました。
const productClass = ".product-list"
const nameTag = "strong"
const priceClass = ".product-list-card-price-number"
// 商品リストの要素をすべて取得
const products = document.querySelectorAll(productClass);
// 商品情報を配列として収集
const productInfo = Array.from(products).map(product => {
const name = product.querySelector(nameTag)?.textContent.trim() || "商品名なし";
const price = product.querySelector(priceClass)?.textContent.trim().replace("~", "") || "価格なし";
return { name, price };
});
// お値段順にソート
productInfo.sort((a, b) => a.price - b.price);
// ログ出力
console.log(productInfo);
for (const product of productInfo) {
console.log(`✨: ${product.name} | 💰: ¥${product.price}`);
};
実行してみると・・・
良い感じですね！！
chromeの開発者ツールは使いこなすととても便利なので、こんな感じで普段使いして、慣れていければ良いなーと思います。