cheerio(日本語)

Cheerio は、ウェブスクレイピングを便利に行うためのライブラリで、JQuery に似た文法を提供し、HTML データを簡単に解析できます。非同期でデータを取得して処理する方法を提供し、セレクターを使用して必要な情報を抽出できます。

Features

  1. 馴染みのある文法:Cheerio は、コア jQuery の一部を実装しています。Cheerio は、jQuery ライブラリのすべての DOM の不一致とブラウザのクセを取り除き、美しく直感的な API を提供します。

  2. 高速な処理:Cheerio は非常にシンプルで一貫した DOM モデルで動作します。その結果、パース、操作、およびレンダリングが驚くほど効率的です。

  3. 非常に柔軟:Cheerio は parse5 パーサーをベースに動作し、オプションで@FB55 の寛大な htmlparser2 を使用することができます。Cheerio はほとんどすべての HTML または XML 文書をパースできます。


Installation

まず、npm cheerioをインストールして利用できるようにします。

Installation

npm install cheerio

Usage

Cheerioを使用するために必要なモジュールを読み込み、文法に従って簡単に使用できます。

  • Name
    Cheerio Usage
    Type
    Usage
    Description

    Cheerioを使用してウェブページのHTMLをロードした後、jQueryと似た方法で必要な要素を選択し、処理できます。

Cautions

  • Name
    文字列エンコーディング
    Type
    Cautions
    Description

    ウェブページの文字列エンコーディングが正しくない場合、文字化けなどの問題が発生する可能性があります。必要に応じてエンコーディングライブラリを使用して文字列を変換してください。

  • Name
    動的ページ処理
    Type
    Cautions
    Description

    Cheerioは静的なHTMLページのスクレイピングに適しており、JavaScriptでレンダリングされる動的なページの内容を取得する場合は、別途のライブラリを使用する必要があります。

  • Name
    法律およびサービス契約の遵守
    Type
    Cautions
    Description

    ウェブスクレイピングを行う際には、該当ウェブサイトの法律およびサービス契約を遵守し、機密情報や著作権のある内容を適切に処理する必要があります。

Usage

const cheerio = require('cheerio');

const htmlString = '<h1>Hello, Cheerio!</h1>';
const $ = cheerio.load(htmlString);

const heading = $('h1');

const text = heading.text();

const attributeValue = $('input').attr('type');

$('body').append('<p>New paragraph</p>');

$('p').remove();

Example

これは API リクエストをサーバーで処理するコードです。ただし、lib/lostark/scrapper を介して、Cheerio を使用してウェブスクレイピングを行い、ロストアークのキャラクター情報をユーザーに提供します。

ユーザーのニーズに応じたキャラクター検索結果を得るためには、最低 700 行以上の Cheerio コードが必要であり、最低限の情報を超えて全ての情報を取得するにはさらに多くのコードが必要になるでしょう。

不要なコードを削除するか、より良い方法があるかもしれませんので、Cheerio という機能についてのみ読んでいただければ幸いです。

Additional Explanation

  • Name
    HTMLロードとCheerioオブジェクトの生成
    Type
    Example
    Description
    • getCharacterInfo関数では、入力されたキャラクター名に基づいてウェブページのURLを生成します。
    • getHTML関数を使用してウェブページをロードします。機能を担当するaxios.getを使用してウェブページのHTMLコードを取得します。
    • 取得したHTMLコードをcheerio.load関数に渡してCheerioオブジェクトを生成します。このオブジェクトを使用してウェブページ内の要素を選択および操作することができます。
  • Name
    特定の要素の選択と情報の抽出
    Type
    Example
    Description
    • Cheerioオブジェクトとセレクタを使用して、ウェブページから必要な情報を含むHTML要素を選択します。
    • 選択した要素の内容と属性を抽出して辞書オブジェクトに保存します。
  • Name
    要素の内容の修正と追加
    Type
    Example
    Description
    • 変更または追加したい要素を見つけます。
    • 見つけた要素の内容を修正するか、新しい要素を追加します。

searchCharacter.js

import { searchCharacter } from '@/lib/lostark/scrapper'

export default async function handler(req, res) {
    try {
        const { name } = req.query
        const result = await searchCharacter(name)
        return res.status(200).json({ data: result })
    } catch (error) {
        console.error(error)
        return res
        .status(500)
        .json({ message: 'Error retrieving character information' })
    }
}

scrapper.js

const axios = require('axios')
const cheerio = require('cheerio')

const NAME = 'name'
const URL_HEADER = 'NEXT_LOSTARK_WEB_URL'

const getHTML = async (url) => {
    try {
        return await axios.get(url)
    } catch (error) {
        console.log(error)
    }
}
const getCharacterInfo = (name) => {
    const URL_PARAMS = `${name}`
    return URL_HEADER + encodeURI(URL_PARAMS)
}
const searchCharacter = async (name) => {
    const URL = getCharacterInfo(name)
    return await getHTML(URL).then((html) => {
        // 아래 LostArkResult 결과는 예시입니다.
        let LostArkResult = {
            Character: '',
            profileEngraveSet: []
        }
        const $ = cheerio.load(html.data, { xmlMode: false })
        let profileEngraveSet = []
        $(
        '.profile-ability-engrave > .swiper-container > .swiper-wrapper > .swiper-slide',
        ).each((i, li) => {
        const children = $(li).children()
            children.each((i, child) => {
                const title = $(child).find('span').text()
                const desc = $(child).find('div').find('p').text()

                profileEngraveSet.push({ title: title, content: desc })
            })
        })
        // Character는 예시입니다.
        const Character = $(
            '#lui-tab1-1 > div > div.collection-graph > div > h4 > span',
        )
    }
    return LostArkResult
}
module.exports = {
    NAME,
    searchCharacter,
}