Pexels APIを使用した画像検索機能実装

こんにちは！！
今回は無料で使える画像検索APIであるPexels APIを使って実装してみました。
それではさっそくコードを見てみましょう！！

 Backend

コード紹介

バックエンドのコードはこんな感じになっています。

1. 画像検索処理 (searchImage メソッド)

public function searchImage(Request $request)
{
    $keyword = $request->input('keyword', 'clothing');

    try {
        $translatedKeyword = $this->translateKeyword($keyword);

        $response = $this->client->get('https://api.pexels.com/v1/search', [
            'headers' => [
                'Authorization' => $this->pexelsApiKey,
            ],
            'query' => [
                'query' => $translatedKeyword,
                'per_page' => 9,
            ]
        ]);

        $body = json_decode($response->getBody(), true);
        $images = array_map(fn($photo) => $photo['src']['medium'], $body['photos']);

        return response()->json([
            'success' => true,
            'images' => $images
        ]);
    } catch (\Exception $e) {
        return $this->handleApiError('画像検索に失敗しました', $e);
    }
}

このコードはフロントエンドから渡された keyword を元にPexels APIを使って画像を検索するメソッドです。
•translateKeyword メソッドでキーワードを翻訳し、英語に変換してから画像検索を行います。

次に
英語に変換しているメソッドの部分のコードです

2. キーワードの翻訳処理 (translateKeyword メソッド)

private function translateKeyword($keyword)
{
    try {
        $response = $this->client->post('https://translation.googleapis.com/language/translate/v2', [
            'form_params' => [
                'q' => $keyword,
                'target' => 'en',
                'key' => $this->googleApiKey,
            ]
        ]);

        $body = json_decode($response->getBody(), true);
        return $body['data']['translations'][0]['translatedText'];
    } catch (\Exception $e) {
        return $keyword;
    }
}

このメソッドはGoogle Translate APIを使用して、日本語のキーワードを英語に翻訳する処理を行います。
その次はヘッダー情報を返すメソッドです。

3. 共通のヘッダー情報を返す (getHeaders メソッド)

private function getHeaders($apiKey)
{
    return [
        'Authorization' => 'Bearer ' . $apiKey,
        'Content-Type' => 'application/json',
    ];
}

各APIリクエストで必要となるヘッダー情報を返すメソッドです。主にAPIキーを設定するために使われます。
最後にエラーハンドリングを行うメソッドです。

4. エラーハンドリング (handleApiError メソッド)

private function handleApiError($message, \Exception $e)
{
    return response()->json([
        'success' => false,
        'message' => $message . ': ' . $e->getMessage(),
    ], 500);
}

APIリクエストでエラーが発生した場合に、クライアントにエラーメッセージを返すためのメソッドです。

コード解説

1. 画像検索処理 (searchImage メソッド)

キーワード取得: リクエストから keyword を取得します。指定がない場合はデフォルトで “clothing” を使用します。
キーワード翻訳: translateKeyword メソッドでキーワードを英語に翻訳します。Pexels APIは英語での検索が基本のためです。
Pexels APIにリクエスト送信: GuzzleHttp\Client を使い、Pexels APIに対してGETリクエストを送信します。この時、翻訳したキーワードをクエリパラメータとして渡します。
 結果の取得と整形: レスポンスから取得した画像のリストを配列に整形し、クライアントに JSON 形式で返します。
エラーハンドリング: リクエストが失敗した場合は例外をキャッチし、 handleApiError メソッドを使ってエラーメッセージを返します。

2. キーワードの翻訳処理 (translateKeyword メソッド)

Google Translate APIにリクエスト: GuzzleHttp\Client を使って、Google Translate APIにPOSTリクエストを送信します。リクエストボディには翻訳対象のキーワードとターゲット言語（英語）を含めます。
翻訳結果の取得: APIのレスポンスから翻訳されたテキストを取得します。
エラーハンドリング: 万が一翻訳に失敗した場合は、元のキーワードをそのまま返します。

3. 共通のヘッダー情報を返す (getHeaders メソッド)

Authorization ヘッダーの設定: Bearer トークン形式でAPIキーを設定します。
Content-Type ヘッダーの設定: リクエストボディがJSON形式であることを指定しています。

4. エラーハンドリング (handleApiError メソッド)

エラーメッセージの生成: APIリクエストが失敗した場合、そのエラーメッセージを整形して返します。
JSON形式でのレスポンス: エラーメッセージをJSON形式でクライアントに返し、HTTPステータスコード500をセットします。

このようにしてバックで動かしています。