Jamstackサイトへ超簡単にサイト内検索を実装できる、クロール型検索 Site Search 360！

かつてのGoogleカスタム検索のように、サイト内検索を手軽に実装できる手段があればなあ…データを用意しなくても勝手にクロールしてくれたらなあ…あわよくば無料で…という願望への答えがありました。

それがSite Search 360です。


このページではNext.jsで利用する方法をご紹介しますが、いわゆる静的HTMLサイトにもJavaScriptを数行埋め込むだけで実装できます。また、WordPressプラグインもあるようです。最終的にHTMLとして生成されるページなら、CMSを問わず、もちろんプレーンなHTMLでも使える、嬉しいサービスです。

Jamstackのみならず、Googleカスタム検索の代替手段をお探しの方におすすめです。

目次

Site Search 360 無料版でできること

Site Search 360は、無料〜119ドルの範囲でプランを選べます（Our Pricing）。

無料プランでできること

無料プランでは下記の条件でサイト内検索を利用できます。超小規模サイトや、趣味サイトでは充分な条件です。

  • インデックス上限150ページまで
  • 月間検索上限1000回まで
  • 検索解析結果を3ヶ月保持
  • トップページを登録して自動クロール
  • サイトマップを登録して自動クロール
  • カスタム辞書の登録
  • 検索結果マネージャー（検索結果の調整）
  • 検索結果のカテゴリー分類機能
  • FAQのインデックス
  • Google Analytics連携
  • 検索結果にSite Search 360のロゴが入る（控えめです）

有料プラン／オプション

有料プラン／オプションを選択すると、課金内容に応じて、下記のような機能が利用できます。

  • インデックスできるページが増える
  • 月間の検索可能数が増える
  • Eコマース特化検索ができる
  • 解析結果の保持期間が増える
  • 絞り込みオプションが使える
  • JavaScriptで生成した結果をクロールできる
  • YouTubeビデオのインデックス
  • PDF, DOC, PPT, XLSのインデックス
  • 検索結果の画像を最適化できる
  • 検索結果でPDFを画像として表示できる
  • 地域によるセグメント（Geo-segmentation）
  • 検索インサイトを表示できる
  • 機械学習によって検索結果が調整される
  • 人気のキーワードのサジェスト機能が搭載される
  • APIアクセス機能
  • 検索結果のSite Search 360のロゴ削除

Site Search 360に登録する

Site Search 360サイトにアクセスして、右上の「Free Trial」から登録します。


初めて登録する場合は、メールアドレスと、希望するパスワード、検索させたいサイトのURLを入力して、アカウントを作成します。


しばらく待てば登録完了です！Let's Get Started!をクリックしましょう。

ひとりでにクロールが始まる

先ほど入力したURLを自動的にクロールしてくれます。

右上の currently running task(s) をクリックするとクロール状況が見られます。

もし表示されていない場合は、おそらくすでにクロールが終わっています（速い！）


Site Idを確認しておく

次のステップの設定のために、管理画面のAccountからSite ID を確認しておきます。

Next.jsで検索を利用してみよう

参考ページ：Can I use Site Search 360 with React?


私のサイトはNext.jsを利用しているので、React用ライブラリをインストールしてみます。

npm install site-search-360-react


検索コンポーネントを、配置したいファイル内でインポートします。

import SiteSearch360 from 'site-search-360-react';

※私の環境では「TS2306: File '（省略）node_modules/site-search-360-react/lib/SiteSearch360.d.ts' is not a module.と怒られたので、そっと// @ts-ignoreしました…


検索入力欄を置きたい場所にコンポーネントを挿入します。siteIdには先程確認した Site IDを入力します。原則としては設置サイトのドメインを入れることになるようです。

<SiteSearch360 siteId="penaprogram.cms.am" />


スクリーンショット：検索欄に「ios」が入力され、検索結果が表示されている

（見た目はさておき）たったこれだけで検索が実装できてしまいました！


この状態でエンターキーを押すか、もしくは検索アイコンをクリックすると、更なる検索結果がオーバーレイで表示されます。


スクリーンショット：検索結果がオーバーレイ表示されている

エンターキーでの即時送信を無効にしよう

キーワード入力欄にて日本語変換を確定するためにエンターキーを押すと、それだけで検索が走ってしまいます。英単語なら問題ありませんが、この挙動は日本のユーザーにとって都合が悪いです。


コンポーネントにエンターキーを無効にするSite Search 360 configuration objectを渡せば、エンターキーの動作を無効にできます。

エンターキーを無効にするのはいかがなものか、と思いつつも、なんというか、仕方ないので…。

  <SiteSearch360
    siteId="penaprogram.cms.am"
    ss360Config={{ results: { ignoreEnter: true } }}
  />


エンターキーの動作を無効にしても、検索アイコンをクリックするか、Tab移動して検索アイコン上でエンターキーを押せば、検索結果画面を表示できます。


その他の設定について

その他の設定に関してもAdvanced Configurationに記載されている設定を記述すれば動くようです。アレンジできる項目がとても多いのも特徴ですね。


Site Search 360 の管理画面上からXPathsを指定することで、検索対象の要素（<div id="main"></div>など）を絞り込むことも可能なようです。

デフォルトCSSを無効にしよう

キーワード入力欄や検索結果画面で完全にオリジナルのCSSスタイルを使いたい場合は、CSS無効化にも対応しています。

ss360ConfigにてstyleをdefaultCss: falseに設定するだけです。

<SiteSearch360
  siteId="penaprogram.cms.am"
  ss360Config={{
    results: { ignoreEnter: true },
    style: {
      defaultCss: false,
    },
  }}
/>


ただし、この場合は検索結果画面も含めて全てのスタイルが本当にまっさらになります。つまり、デフォルトCSSを参考にしつつ、イチから設定する必要があります。


単にCSSを上書きできれば良い場合は、下記のようにadditionalCssをminifyした状態で設定するとラクです。

<SiteSearch360
  siteId="penaprogram.cms.am"
  ss360Config={{
    results: { ignoreEnter: true },
    style: {
      additionalCss: '.ss360-search{padding:0}.ss360-ac-bg{background-color:rgb(99, 102, 241)}'
    },
  }}
/>

検索結果画面を日本語にしよう

お気づきの方もいらっしゃるかもしれませんが、Site Search 360は、検索結果画面の言語設定に日本語が含まれておらず、設定できません。

（※この件について「私が！ぜひ！！翻訳します！！！」と問い合わせたのですが、今のところ進展がないです）

このため、設定にてラベルを上書きする形で対応します。


一例として、下記のような形式になります。

※内容を精査していないので間違っていたらすみません、ご指摘ください。

<SiteSearch360
  siteId="penaprogram.cms.am"
  ss360Config={{
    style: {
      additionalCss: '.ss360-search{padding:0}.ss360-ac-bg{background-color:rgb(99, 102, 241)}'
    },
    suggestions: {
      searchHistoryLabel: '検索履歴：',
      viewAllLabel: '全ての検索結果を表示する',
      groupCta: {
        label: '全ての #GROUP# の結果を表示する',
      }
    },
    results: {
      ignoreEnter: true,
      caption: '"#QUERY#" で #COUNT# 件の結果が見つかりました',
      moreResultsButton: 'もっと見る',
      noResultsText: '検索結果は0件です',
      queryCorrectionText: 'もしかして： "#CORRECTION#"?',
      queryCorrectionRewrite: '"#CORRECTION#"の結果を表示しています',
    },
    accessibility: {
      searchFieldLabel: '検索キーワード',
      srSuggestionsHiddenText: '検索の提案が隠れました',
      srNoSuggestionsText: '検索の提案はありません',
      srSuggestionsCountText: '#COUNT# 件の検索提案が表示されています',
      srOneSuggestionText: '検索提案が1つ表示されています',
      srSuggestBoxControlDescription: '検索提案を選択するには上下矢印をご利用ください。選択した結果にアクセスするにはエンターキーを押してください。 タッチデバイスをご利用の方は、タッチとスワイプ両方のジェスチャーを利用できます。'
    },
    smart404: {
      identifier: 'ページが見つかりませんでした',
      caption: '代わりにこちらをお試しください：'
    },
    layout: {navigation: {
        allResultsTabName: '全ての結果',
        allResultsTabTitle: '全ての結果 (#COUNT#)'
      }
    },
    filters: {
      label: '絞り込み',
      deleteAllLabel: '全てをリセットする',
      toggleButtonLabel: '結果を絞り込む',
      multiSelectSearchLabel: '#FILTER_NAME#で検索',
      multiSelectEmptyState: '絞り込み条件に合う結果がありません',
      multiSelectShowMoreLabel: 'さらに #COUNT# 個見る',
      multiSelectShowLessLabel: '選択肢を少なくする',
      clearGroupLabel: '解除する',
      sliderMinUnitLabel: '最小 #UNIT#',
      sliderMaxUnitLabel: '最大 #UNIT#',
      submitButtonLabel: '設定する'
    },
  }}
/>


上記を設定してリロードすれば、検索結果画面が日本語表記になります！

難点もあるけれど、総合的に、ありがたみしかない

日本ローカライズされていないことによる難点がいくつかあります。日本語特有の曖昧検索などは対応していませんし、検索結果の精度が今ひとつだと感じることもあります。あいまい検索に関しては、管理画面からある程度は手動でチューニングは可能です。


Jamstackサイトや静的サイトを制作するにあたっての壁の一つが「サイト内検索」の実装です。

色々と解決策はあるものの、検索用のデータを準備したり、管理する必要があり、手軽とは言い難いものが多いです。もっとも手軽な例として、microCMSを利用すればAPI内のデータの全文検索が可能ですが、APIをまたいだ検索はできませんし、API内に入っていないデータももちろんのこと検索できません。


現在のGoogleはサイトURLを送信しても全ページをインデックスしてくれるわけではないので（site:で検索しても全ページは出てきません）、そういった面から見ても、「サイト内検索」に必要な機能として、サイト内の全ページからデータを収集／掲載してくれるのはありがたいことですね。


総合的に見れば、無料から始められて、競合サイトの広告も出ずに、ここまで手間なくサイト内検索を実装できることにありがたみしか感じないです！オプションがとにかく豊富で、課金すればさらに自由自在ですしね。

  2. 雑記
  3. Jamstackサイトへ超簡単にサイト内検索を実装できる、クロール型検索 Site Search 360！