ウェブページ上から情報の一覧を抽出（簡易なスクレイピング）したい場合は、GitHub Copilot や ChatGPT を活用すると便利

若槻龍太

2023.06.21

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 Delivery部の若槻です。

今回は、ウェブページ上から情報の一覧を抽出（簡易なスクレイピング）したい場合は、GitHub Copilot や ChatGPT を活用すると便利だったので、方法をご紹介します。

ウェブのDOM要素から情報の一覧を抽出したい

ウェブページ上から情報の一覧を抽出したい時に、「スクレイピングツールを作るほどではないが、手作業でコピペするのは面倒」ということがあります。

例えば「DevelopersIO のトップページ上の記事一覧からタイトルおよびURLリンクを取得して、[タイトル](URL)という記述の一覧を作成したい」場合などです。

GitHub Cpilot を活用する場合

AI によるコード補完ツールである GitHub Cpilot を活用することで、抽出および記述作成を効率的に行うことができます。

GitHub Cpilot の導入方法については下記をご覧ください。

さて、抽出方法としては、まずブラウザの開発者ツールでウェブページ上の抽出したい領域のDOM要素を取得します。

取得したDOM要素は下記です。記事のタイトルとURLが含まれます。

GitHub Copilot の仕様で、18,000文字程度を超えるとコード補完がうまく効かなくなるため、18,000文字程度以内に取得したDOM要素を分割しておきます。

そしてDOM要素より下に、抽出したデータから作成したい記述を先頭から2例ほど書きます。

- [[アップデート] AWS Systems Managerの高速セットアップでEC2起動エージェントの自動更新がサポートされました](https://dev.classmethod.jp/articles/ssm-quick-setup-host-management-automatic-updates-ec2-launch-agents/)
- [[Rust] SeaORMでDBアクセスする](https://dev.classmethod.jp/articles/seaorm-info/)

するとそれ以降の記述で GitHub Copilot によるサジェストが行われます。

最後までサジェストを行うと、抽出データから [タイトル](URL) という記述の一覧が作成できました。

ただ、各行の生成に1秒程度を要したり、DOM要素が大きい場合に分割が必要なので、抽出対象が多い場合は、後述の ChatGPT を活用した方法がおすすめです。

ChatGPT を活用する場合

OpenAI が提供している GPT のモデルを利用したチャットボット ChatGPT を活用すると、より効率的に抽出および記述作成を行なえます。

今回は GPT-4 モデルの ChatGPT を利用します。

先程と同様にブラウザの開発者ツールを開き、今度は抽出対象の要素一覧内の子要素の element および selector を取得します。

取得した element および selector を使用して ChatGPT に次のように質問します。

ウェブページの

<selector>

というセレクターにある

<element>

の要素一覧からデータを抽出して

- [[アップデート] AWS Systems Managerの高速セットアップでEC2起動エージェントの自動更新がサポートされました](https://dev.classmethod.jp/articles/ssm-quick-setup-host-management-automatic-updates-ec2-launch-agents/)
- [[Rust] SeaORMでDBアクセスする](https://dev.classmethod.jp/articles/seaorm-info/)
...

という記述を作るJavaScriptコードを教えてください。

すると抽出および記述作成を行えるスクリプトが回答で返ってきます。

// CSSセレクターを使って対象の要素を取得
let elements = document.querySelectorAll('#__layout > div > div > div.content > div.articles-container > div.articles > div');

// 結果を保存する配列
let results = [];

// 各要素に対してループ処理を行う
elements.forEach((element) => {
  // 各要素からリンクとタイトルを抽出
  let link = element.querySelector('a').href;
  let title = element.querySelector('.post-title').innerText.trim();
  
  // リンクとタイトルを結果の配列に追加
  results.push(`- [${title}](${link})`);
});

// 結果を表示
console.log(results.join('\n'));

ブラウザの開発者ツールでスクリプトを実行すると、抽出データを使用した記述を取得できました。