😽

Custom Search APIの実装確認

に公開

はじめに

こんにちは。プログラミングスクールでRuby on Railsを主に学習しているりゅうと申します。
前回作成したアプリで、Google Custom Search JSON API を使用したので記事にしました。

⚠️ 注意
プログラミング初心者のため、間違いがあるかもしれません。
また、お使いのPCや環境によってはうまく動作しない可能性もございます。
お気付きの点がありましたら遠慮なく教えていただけると嬉しいです。
よろしくお願いいたします。

前提

・Google Custom Search JSON APIキーを取得済み
・検索エンジン(cx)を取得済み
まだ取得していない方はこちらの記事を参考にしてください👇
👉 Custom Search API キーと検索エンジン(cx)の取得方法

バージョン

Ruby 3.2.3
Rails 7.2.2.1
PostgreSQL 17.6
開発環境 Docker
デプロイ render.com

この記事の内容

この記事ではCustom Search APIが実装できるか確認する記事を書いていきます

手順

Gemfileにgem "httparty"をインストールします。

このgemは外部サービスとHTTP通信を行うためのライブラリになります。
APIリクエストを送る、レスポンスを受け取る役割になります。

config/routes.rb の設定

config/routes.rb ファイルに以下を追記してください。

config/routes.rb
get "test", to: "tests#index"

.env の設定

.env ファイルに以下を追記してください。

.env
GOOGLE_CSE_API_KEY=あなたのキー
GOOGLE_CSE_CX=あなたのキー

.gitignoerの設定をよく確認して、github上にキーが漏洩しないように注意しましょう。
.envに関しては、こちらの記事が参考になると思います👇
👉 環境変数と .gitignore を使用して API キーを非公開にする手順

コントローラーの実装

app/controllers/tests_controller.rb に以下を記述します。

app/controllers/tests_controller.rb
class TestsController < ApplicationController
  require "httparty"

  def index
    query = "Google"

    res = HTTParty.get("https://www.googleapis.com/customsearch/v1", query: {
      key: ENV["GOOGLE_CSE_API_KEY"],
      cx: ENV["GOOGLE_CSE_CX"],
      q: query,
      num: 1
    })

    item = res.parsed_response["items"]&.first
    render plain: item ? "#{item["title"]} - #{item["link"]}" : "検索失敗 or 結果なし"
  end
end

コードの解説

require "httparty"を書くことで、httpartyをこのファイルで使えるように明示します。

HTTParty.getの第一引数にはデータを送るURLを指定します。今回はGoogle Custom Search 用のURLになります。
第二引数にはquery: {}を書きます。
これでHTTPartyにこのハッシュをクエリパラメーター(?key=...&cx=...)にしてねと明示します。
最終的にhttps://www.googleapis.com/customsearch/v1?key=...&cx=...&q=Google&num=1こういうリクエストを作ります。

queryには検索のキーワードが入ります。今回はGoogleを代入しています。

keyでAPIキーを渡して、このAPIを使えるようにしています。

cxでcxを渡して検索の指定をしています。

numは検索結果の件数で、今回は1件です。

parsed_responseはハッシュ化、APIのレスポンスデータはJSON形式でこれをRubyのハッシュに変換しています。

itemsはGoogle Custom Searchのレスポンス仕様で元々定義されているものです。
以下のようにitemsの配列にデータが格納されています。

json
"items": [
  {
    "title": "Google",
    "link": "https://www.google.com/",
    "snippet": "Google の説明..."
  }
]

["items"]&.first
&.は安全演算子ナビゲーションで、値がnilの時はエラーではなく、nilを返します。

render plainはプレーンテキストを返します。
例えばこういう値が入ってきた場合
"<h1>Hello</h1>"

plain: <h1>Hello</h1> このまま文字列になります

HTML: 見出し(h1タグ)としてHelloが表示されます。

item ? ... : ...で三項演算子を使っています。

true、つまりitemがあれば"#{item["title"]} - #{item["link"]}" 検索したtitleとlinkを取得します。

動作確認

http://localhost:3000/test

以下の画像が出ました。

これでGoogle Custom Search APIが使えています!
あとは自分の使いたいように、使用しましょう。

おわりに

今回Google Custom Search APIを実装する方法を見てきました。データの形式やリクエスト・レスポンスの流れの理解を深められました。
ご覧いただきありがとうございました。

参考記事

Discussion