Zenn
📝

Custom Search EngineとCustom Search APIを利用したサイト内検索（JavaScript）

2024/05/24に公開
JavaScript
customsearchengine
customsearchapi
tech

はじめに

サイト内検索を

  • Custom Search Engine
  • Custom Search API

を利用して開発しました。

設定

まず、Custom Search Engine、Custom Search APIの設定を行います。

Custom Search Engine

特定のサイトやドメインを対象としたサイト内検索を作成できるサービスです。
ココで指定したサイトまたはページが検索の対象になります。

Custom Search API

Custom Search APIは、Custom Search Engineの機能をプログラムから利用できるようにするためのAPIです。
これにより、Custom Search Engineだけでは、静的な検索機能しか提供できないのが、Custom Search APIを利用することで、動的な検索クエリの処理や結果のリアルタイム取得が可能になります。

設定手順

  1. Google Cloudで新しいプロジェクトを作成します。

  2. 利用するサービスを選択する
    ライブラリに移動します。
    今回は、「Custom Search API」を利用します。

  3. APIを利用するために認証情報を設定する。
    「認証情報を作成」から、APIキーを発行します。

JavaScriptを使ったサイト内検索

onst fetchAllResults = async (apiKey, searchEngineId, query) => {
  const url = `https://www.googleapis.com/customsearch/v1?key=${apiKey}&cx=${searchEngineId}&q=${query}`;
  const response = await fetch(url);
  const data = await response.json();
  console.log('Search Results:', data);
};

const apiKey = ''; // Custom Search APIを有効にして取得したAPIキーをここに入れてください
const searchEngineId = ''; // Custom Search Engineを作成して取得した検索エンジンIDをここに入れてください
const query = ''; // 検索クエリをここに入れてください

fetchAllResults(apiKey, searchEngineId, query);

あとは、変数queryの部分をhtmlのbuttonから取得するなどすれば、ウェブサイトからサイト内検索が可能になります。

おわりに

なぜ、Custom Search EngineとCustom Search APIの２つを設定するのか？それぞれの役割が理解できていませんでした。
今回の記事を作るに当たって、それぞれの役割が理解でき、勉強になりました。

Custom Search Engine：検索するサイト、ページを指定する
Custom Search API：検索するキーワードを動的に指定できる。これにより、さいとのキーワード検索でサイト内検索が可能になる。

最後まで読んでいただき、ありがとうございます！

Discussion