記事内容

Google検索で表示される画像のデータを取得してNext.jsのアプリの画面に表示するまでの方法

GCP上でAPIと検索エンジンの準備をする

流れとしては自分用の検索エンジンを作って、その検索結果を使うことになる。
https://plus-pm.jp/blog/search-rank-check-use-google-custom-search-api/
この記事に従ってGoogle Custom Search APIのプロジェクトの作成、APIキーの取得、APIの有効化、Custom Search Engine（自分用の検索エンジン）を作成する。

Google API Client Librariesを使ってAPIを叩く

JavaScriptを選択すると、以下Githubのページに飛ぶ。
https://github.com/google/google-api-javascript-client

READMEの通りに進めていく。
TypeScriptの場合は@types/gapiを使えば良いとのことなので、そっちを使っていく。

npm install --save @types/gapi

https://developers.google.com/identity/oauth2/web/guides/migration-to-gis?hl=ja
上記のページの通りgoogle-api-javascript-clientは既に非推奨であった。
以前まではGoogleログインプラットフォームライブラリとGoogleAPIクライアントライブラリを使っていたが、これから Google Identity Services ライブラリに移行するらしい。

READMEのOption 2を試してみると、headに以下のスクリプトタグを追加する必要があるので
Next.jsのHeadを使用して、layout.tsxに追加。

<script src="https://apis.google.com/js/api.js"></script>

このスクリプトをそのまま使うと、Next.jsの非同期スクリプトエラーが出るため、async属性を追加しました。

import Head from 'next/head';

const MyHead = () => {
  return (
    <Head>
      <script src="https://apis.google.com/js/api.js" async />
    </Head>
  );
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <Providers>
          <MyHead />
          <div>{children}</div>
        </Providers>
      </body>
    </html>
  );
}

最後に、googleapisとaxiosをインストールし、custom searchのURLに各種情報を入れてAPIを叩く。

npm install googleapis axios

"use client";

import styles from "./page.module.css";
import { useState } from "react";
import { Input, IconButton, SearchIcon } from "@/plugins/chakra-ui-modules";
import axios from "axios";
import { customsearch_v1 } from "googleapis";

export default function Vocabulary() {
  const [englishWord, setEnglishWord] = useState("");
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) =>
    setEnglishWord(event.target.value);

  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === "Enter") {
      searchEnglishWord();
    }
  };
  const searchEnglishWord = async () => {
    searchImages();
  };

  const [images, setImages] = useState<string[]>([]);

  const searchImages = async () => {
    try {
      const API_KEY = process.env.NEXT_PUBLIC_GOOGLE_SEARCH_API_KEY;
      const CUSTOM_SEARCH_ENGINE_ID =
        process.env.NEXT_PUBLIC_CUSTOM_SEARCH_ENGINE_ID;

      const response = await axios.get(
        `https://www.googleapis.com/customsearch/v1?q=${englishWord}&cx=${CUSTOM_SEARCH_ENGINE_ID}&key=${API_KEY}&searchType=image`
      );

      const items = response.data.items as customsearch_v1.Schema$Result[];

      const imageUrls = items.map((item) => item.link || "");
      setImages(imageUrls);
    } catch (error) {
      console.error("データの取得中にエラーが発生しました:", error);
    }
  };

  return (
    <div>
      <div>
        <Input
          value={englishWord}
          onChange={handleChange}
          onKeyDown={handleKeyDown}
          placeholder="英単語を入力してください。"
        />
        <IconButton
          aria-label="SearchIcon"
          icon={<SearchIcon />}
          onClick={searchEnglishWord}
        />
      </div>
      <div>
        {images.map((imageUrl, index) => (
          <img
            key={index}
            src={imageUrl}
            alt={`image${index}`}
            className={styles.image}
          />
        ))}
      </div>
    </div>
  );
}