Zenn
🐺

node-fetchとcheerioでOGPデータを取得する

2024/08/09に公開
Next.js
npm
Node.js
cheerio
tech

はじめに

Node.js上でOGPデータをスクレイピングする必要があり、今回node-fetchとcheerioを利用して対応した話

node-fetchとは

node-fetchは、Node.js環境で使われる軽量のHTTPクライアントで、ブラウザのfetch APIを模倣したものです。
ブラウザのfetchが持つシンプルで使いやすいインターフェースをNode.jsでも利用できるようにするために作られました。

https://www.npmjs.com/package/node-fetch

https://developer.mozilla.org/ja/docs/Web/API/Fetch_API

実行環境

  • ブラウザのfetch: ブラウザ内でHTTPリクエストを行うために使用される。
  • node-fetch: Node.js環境でHTTPリクエストを行うために使用される。

使用例

  • ブラウザのfetch:
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
  • node-fetch:
const fetch = require('node-fetch');

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

機能について

  • Promiseベース: 両方ともPromiseを使用して非同期操作を管理します。
  • リクエストとレスポンスの操作: HTTPリクエストを送信し、レスポンスを処理するためのメソッド（GET, POST, PUT, DELETEなど）を提供します。
  • ストリーム処理: レスポンスデータをストリームとして処理できるため、大量のデータを効率的に扱うことができます。

OGPデータを取得する

今回は設定されたOGPデータを取得するため、html情報を解析・操作することができるcheerioを利用していきます。

npm
https://www.npmjs.com/package/cheerio

hp
https://cheerio.js.org/

HTMLの解析

Function: load()

load(content, options?, isDocument?): CheerioAPI
https://cheerio.js.org/docs/api/functions/load

load()関数を利用することでHTMLドキュメントを取得できます。

実際にHTMLを取得する

取得したドキュメントからOGPタグの情報を取得していきます。

<meta property="og:description" content="Methods to manipulate elements within a document." data-rh="true">
<meta property="og:url" content="https://cheerio.js.org/docs/basics/manipulation" data-rh="true">
<meta property="og:title" content="Manipulating the DOM | cheerio" data-rh="true">

cheerioで実際に取得する場合

const ogTitle = $('meta[property="og:title"]').attr('content');
const ogDescription = $('meta[property="og:description"]').attr('content');
const ogUrl = $('meta[property="og:url"]').attr('content') || url;

Devetoolなどでよく使う$(selector)と同じように利用することができます。
慣れていることもあり、直感的で使いやすい。

// console.log
$('meta[property="og:title"]')
<meta property="og:title" content="Manipulating the DOM | cheerio" data-rh="true">

https://developer.chrome.com/docs/devtools/console/utilities?hl=ja#querySelector-function

ドキュメントよく見てみるとCSS selectorsで取得していると記載があった。

Cheerio allows users to select elements from an HTML document using CSS selectors. This allows you to select elements based on criteria such as their tag name, class name, and attribute values. This guide provides an overview of how to use CSS selectors to retrieve elements.
https://cheerio.js.org/docs/basics/selecting

他にもattrを利用することでElementの操作をすることも可能そう

// Set the 'src' attribute of an image element
$('img').attr('src', 'https://example.com/image.jpg');

// Set the 'checked' property of a checkbox element
$('input[type="checkbox"]').prop('checked', true);

// Get the 'href' attribute of a link element
const href = $('a').attr('href');

// Get the 'disabled' property of a button element
const isDisabled = $('button').prop('disabled');

https://cheerio.js.org/docs/basics/manipulation#modifying-element-attributes-and-properties

まとめ

  • Node.js上でfetchをする場合はデフォルトで利用できるnode-fetchで取得できる
  • HTML解析や操作にはcheerioを利用することで簡単にHTMLを操作することが可能

Discussion