メインコンテンツへスキップ
見出し画像

ゲーム攻略サイトをとってきたい

    Webページ取得をためしてみた

    ゲームのキャラ情報は攻略サイトに載っていて、
    ・どんなキャラがいるか
    ・それらのキャラの名前や特性(攻撃力だとか回復量、スキル効果)
    が細かく載っている。

    なので、それらを自動でひっぱってこれたら、わざわざ入力して保存する必要がないなと思った。

    検証その1

    AIにWebページの内容を取得する方法を教えてもらった。
    方法自体は簡単だが失敗するとのことで、本当なのか試してみた。

    try {
        const response = await fetch(`ゲーム攻略サイトのWebアドレス`)
    } catch (error) {
        console.log(error)
    }

    結果はAIがいうとおりで失敗で終わる。
    こういうのは「CORS」という仕様で、ブラウザの通常モードでは回避できない仕組みらしい。

    回避策の模索

    どうしたら回避できそうかをAIに聞いてみた。

    もっとも一般的かつ安全な解決策は
    ①サーバー側でCORSを許可する、または
    ②開発用プロキシ(Proxy)を利用する方法
    です。

    ②のイメージ
    【ブラウザ】(localhost)
     │  ▲
     │   │  ❶「同じlocalhost内」だから
     ▼  │   CORSエラーにならない!(⭕️)
    【開発サーバーのプロキシ機能】(localhost)
     │  ▲
     │   │  ❷「サーバー同士」の通信だから
     ▼  │   そもそもCORSのルールが適用されない!(⭕️)
    【外部API】(://example.com)

    AIが教えてくれたCORS回避策のイメージ

    具体的にどうしたらいいのか?

    AIに教えてもらった回答を素直に受け取ると、なんだか専用のPCみたいなのを用意する必要がありそうだが、そういう必要はなく、とにかくブラウザから取得する方法を諦めたらいいという結論で。

    代わりの策として、ブラウザを動かしているOS上で取得すればいいことにしようと思った。
    その策として、「curl」コマンドを実行してみた。

    検証その2

    わたくしのPC環境はWinなので、コマンドプロンプトを開いて、とりあえず動かしてみた。

    web>curl -help
    Usage: curl [options...] <url>
    -d, --data <data>           HTTP POST data
    -f, --fail                  Fail fast with no output on HTTP errors
    -h, --help <subject>        Get help for commands
    ~~~以降、使い方の簡単な説明

    ※「curl -help」の部分を入力した

    結果のヘルプ情報だと単にURLを指定し実行すればいいとのこと。
    簡単に使うなら、これだけで目的を達成できる(と思った)。
    以下、実験結果。

    web>curl ゲーム攻略サイトのWebアドレス
    <!DOCTYPE html><html lang="ja"><head><meta charset="utf-8" />
    
    ~~~(html内容)
    
    </body></html>

    しっかりHTML内容を取得出来たので、取得内容をファイル保存しWebアプリで利用することにした。

    めでたし! ^^) _旦~~

    あなたへのおすすめ