Nuxt4でプログラム可能な検索エンジンを組み込む

はじめに

ブログにサイト内検索機能を追加したいと思い立ちましたが、真面目にサイト全体検索を考えると結構大変です。
（記事だけなのかとか、タグページも見れるようにするのかとか、ポートフォリオだって検索でヒットさせたいよねとか…。）

スクレイピングしたり、シノニムどうするか考えたり、ゼロから作るのも楽しそうですが、時短でGoogleのプログラム可能な検索エンジンを使います。

プログラム可能な検索エンジンとは

Googleの検索結果をサイト内に表示できる機能です。
検索の範囲を特定のドメイン内に絞り込めるので、サイト内検索機能を実装することができます。
(以下の画像のように、「検索機能」項目で「検索するサイト」に自分のサイトのドメインをワイルドカード付きで入力すればOKです。)

サイトに組み込む

検索キーワード入力画面

検索キーワードを入力する画面を作成します。
検索にはすべてのページからアクセスしたいので、ヘッダーに新たにメニューを追加します。

とはいえ、すでにスマホのヘッダーにはロゴとハンバーガメニューがあり、キーワード入力欄を設けるにはスペースが無いのでMDNのサイトを参考にさせて頂き、クリックで検索用の画面が表示されるようにします。
（ついでにタグの絞り込み機能も付けました。）

実際のコードはGitHubのリンクから見られます。
プログラム可能検索エンジン実装に必須部分だけ抜粋すると以下になります。

<script setup lang="ts">
const searchKeyword = ref('')

const searchGoogle = () => {
    let query = 'q=' + searchKeyword.value
    query += '&cx=XXXX' // XXXXには検索ID 
    query += '&ie=UTF-8'
    navigateTo('/search?' + query, { external: true })
}
</script>

<template>
    <form
        action="/search"
        @submit.prevent
    >
        <label for="input-search-keyword">サイト内検索</label>
        <input
            id="input-search-keyword"
            v-model="searchKeyword"
            type="text"
        >
        <button
            @click="searchGoogle"
        >
            検索
        </button>
    </form>
</template>

GETリクエストで、「q(検索キーワード)」、「cx(検索ID)」を渡して、指定のスクリプトとdivを埋め込んでいるページに遷移すればOKです。

検索結果画面

検索結果画面についても必須の部分だけ抜粋しています。

<script setup lang="ts">
useHead({
    script: [
        {
            async: true,
            src: 'https://cse.google.com/cse.js?cx=XXXX', // XXXXには検索エンジンIDが入る
        },
    ],
})
</script>

<template>
    <div class="gcse-searchresults-only" />
</template>

まず、useHeadを使って、指定のスクリプトを読み込みます。
その後、ページ内の検索結果を出したい部分に指定のdivタグを追記すればOK。

自分の場合検索結果だけ表示したかったので、「<div class="gcse-searchresults-only" />」を入れてますが、ここについては欲しいレイアウトの種類によって変わってくると思います。

実際に検索すると以下のように表示されて、自分のサイトのレイアウトの中にGoogle検索を載せることが出来ました。

おわりに

実際は別の機能を追加したり、レイアウトを整えたりしているのでそんなに短くはないですが、
必須のコード量はたったこれだけでサイト内に検索機能を付けることが出来ました。
Google検索なので、シノニムなども対応しておりかなり高機能なのもありがたいです。

これは規約などでOKなのか怪しいですが、クラス名等を調べてスタイルを変更してさらにサイトになじませることも可能です。

自前で作る検索機能にはないデメリットもあります。例えば以下3点。

• Googleの検索エンジンの結果なので、インデックスされるまでは検索結果に表示されない。
  （サイト内で表示されているとしても）
• レイアウトの自由度は高くない
• 表示できる項目も固定（例えば自分のサイトの場合、タグを結果に表示したくてもできない等）

特に１点目は結構大きめのデメリットだと思うので、メリット・デメリットを考慮して実装をする必要があります。
（それでも、シノニム検索を自前で実装不要、関連度検索が高精度等、メリットの方が圧倒的に大きいと思います。）