🎮
IGDB APIを使ってみよう

2024/11/26に公開
Next.js
こんにちは
とあるWebアプリの開発を行っており、このAPIを使う機会が出てきた為その時に躓いた事や調べて分かったことなどを書き記していきます。

初投稿なので拙いと思いますがご容赦ください。

 IGDBとは？私はTwitchで様々な配信を見るのが趣味でよく利用しているのですがゲームタイトルで見たい配信を絞る時にこういったボタンが表示されます。



↑IGDB.comで表示ボタンがある。


↑飛ぶとゲームの情報が見れる（日本語はない）
IGDBとは2015年に設立された「ゲームの知識を収集、保存、公開する」ことを目的としたウェブサイトです。そしてTwitchが2019年に買収して今に至るみたいです。

 登録してみようではこのIGDB APIを使っていきましょう。

Twitchデベロッパーコンソール

上の文字をクリックするとデベロッパーページに飛びますので画面に沿って名前を決めたらクライアントIDが発行されて準備完了です。
続いてはPostmanを用いてAPIのテストをしていきます。

Postmanトップ

PostmanはAPIのテストに最適なプラットフォームです。会員登録は省略します。


↑Postmanのコンソール画面
コンソール画面にたどり着いたら新規ボタンを押してHTTPを選びましょう。
GETの所をPOSTにし、こちらのドキュメント

を参考にアクセストークンを発行します。
Twitchの開発者コンソール画面に戻り、拡張機能設定をクリックし、シークレットを生成するをクリックしてシークレットキーを生成しましょう。このキーは画面遷移すると消えてしまうはずなので然るべき場所に保存しておきましょう。
そしてURLに
https://id.twitch.tv/oauth2/token?client_id=[クライアントID]
&client_secret=[シークレットキー]&grant_type=client_credentials
を貼り付け送信します。

すると結果にaccess_tokenが返ってきますのでこれも然るべき場所に保管しましょう。

expires_inはaccess_tokenの認証が切れるまでの秒数みたいです。
それではこのaccess_tokenを使い実際にゲームの情報を取得していきましょう。

ctrl+sで保存するのを忘れずに。

 情報を取得しようそれではまたPostmanに新規作成し、ゲームの情報を取得していきましょう。

試しに世界的人気を誇るleague of legendsの情報を取得していきます。

ここからはIGDBのドキュメントがかなり参考になります。
POSTで
https://api.igdb.com/v4/games
を打ち込み、ヘッダータブで



キーにClient-IDとAuthorizationの項目を増やし値にクライアントIDとaccess_tokenをペーストしましょう。
そしてボディに
fields id,name,cover.url,game_localizations.name; where id = 115;
と書きましょう。
id :IGDBに登録されてるID

name:ゲームの名前

cover.url: twitchで表示されている画像

game_localizations.name:ローカライズされた日本語のタイトル名(たまに韓国語)
whereにはidを指定します。LoLでは115ですね。

そして送信すると



このように結果が取れましたね。
それではNextJSを使いWebアプリで情報を取得していきましょう。

 実装！それでは実装していきましょう。

NextJSは15を使っています。導入は省略します。
ディレクトリ構造をこのようにします。
app
 ↳api
    ↳igdb
        ↳route.js
 ↳igdb-test
    ↳page.tsx
.env.local

 env設定まず作業ファイルの直下に.env.localを配置しましょう。
.env.local
TWITCH_CLIENT_ID=クライアントID
TWITCH_APP_ACCESS_TOKEN=access_token

 route.js設定次にroute.jsを編集します。
 route.js
import { NextResponse } from 'next/server';


export async function POST(request) {
    try {
        const { body } = await request.json();
        const res = await fetch('https://api.igdb.com/v4/games', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Client-ID': `${process.env.TWITCH_CLIENT_ID}`,
                'Authorization': `Bearer ${process.env.TWITCH_APP_ACCESS_TOKEN}`,
            },
            body: body,
        });
        const data = await res.json();
        return NextResponse.json(data);
    } catch (error) {
        return NextResponse.json({ message: 'サーバーエラー', error: error.message }, { status: 500 });
    }
}
NextJSは簡単にCORS回避できるのでありがたいですね。
'Client-ID': `${process.env.TWITCH_CLIENT_ID}`,
'Authorization': `Bearer ${process.env.TWITCH_APP_ACCESS_TOKEN}`,
.env.localからキーを読み取るために忘れずに設定しておきましょう。

 page.tsx設定次はページの編集します。
page.tsx
"use client"
import { useEffect, useState } from "react";

import Axios from "axios";

interface Game {
    id: string;
    name: string;
    cover: {
        image_id: string;
    };
}

export default function page() {


    const [games, setGames] = useState<Game[]>([]);


    const fetchData = async () => {
        let requestBody = "fields name,cover.image_id; where rating > 90; limit 20;"
        await Axios.post('/api/igdb', { body: requestBody })
            .then((res) => {
                setGames(res.data);
            })
    }

    useEffect(() => {
        let ignore = false;
        async function startFetch() {
            if (!ignore) {
                fetchData();
            }
        }
        startFetch();
        console.log("fetching data");
        return () => { ignore = true; }
    }, [])

    return (
        <>
            {games.map((Game) =>
                <div key={Game.id}>
                    <img
                        width={300}
                        height={400}
                        src={"https://images.igdb.com/igdb/image/upload/t_1080p/" + Game.cover.image_id + ".jpg"}
                        title={Game.slug}
                        alt="Game Cover"
                    />
                    <h1>
                        {Game.name}
                    </h1>
                </div >
            )
            }
        </>
    )
}
今回はリクエストbodyに
fields name,cover.image_id; where rating > 90; limit 20;
cover.urlではなくcover.image_idを取得しております。これはcover.urlで取得した画像を表示

しても低画質なので
src={"https://images.igdb.com/igdb/image/upload/t_1080p/" + Game.cover.image_id + ".jpg"}
t_1080pとURLを変えcover.image_idと拡張子を連結させ表示しています。

whereには適当にレートが90点以上のゲームを20件取得するようにしています。
このリクエストbodyをチェックボックスなどと連携させれば絞り込み検索もできそうですね。
そしてこの状態で開発サーバーを立ち上げ、localhost:3000/igdb-testにアクセスすると
取得できましたね！

 終わりにいかがでしたか？

こんな情報量を無償で提供してくれるTwitchさんには頭上がりませんね

ちなみにgame_localizationsで日本語タイトルが取得できた場合には日本語を表示させたいですが後回しにしています。日本語のregionが3なのはわかっているが...いずれは解決しないといけないのでまた追記したいと思います。
ほなまた
IGDBとは？

登録してみよう

情報を取得しよう

実装！

env設定

route.js設定

page.tsx設定

終わりに

Discussion
