この記事は 「Movable Type Advent Calendar 2022」、11 日目の記事です。
今年の Movable Type Advent Calendar 2022 は 1 日目の記事を書かせて頂いたのですが、数日後に同 Advent Calendar を見ていたら遠慮のかたまりのようにこの日だけ書く人が決まってなかったのでとりあえず埋めとこということで登録しておいてから書くこと決めました。なのでかなり雑です。
さて、この Blog ではサイト内検索に Google カスタム検索エンジン （今は 「Programmable Search Engine - プログラム可能な検索エンジン」って呼んでるみたいですね） を長年使っていまして、別にこの検索機能自体に不満はないんですけども、以前から機会があったら カスタム検索 JSON API を使用してサイト内検索を実装し直そうかななんて考えてました。
機会があったら...... なんて言ってるとだいたいやらないんですけど、ご多分に漏れず数年放置。そんな中でシックス・アパートさんが Google のカスタム検索 JSON API を使用しつつも簡単にサイト内検索を導入可能なサービス、MovableType.net サイトサーチを提供開始したニュースも当然、目にはしていましたが、これも 「まぁ時間があったら試すか......」 のまま放置と駄目人間状態で数年。
が、ここに来て急遽 Advent Calendar のためにネタを...... で思い出して、早速導入してみました。前置きが長いですし、「5 分で導入する」 は釣りタイトルです。
ところでサイトサーチ、MovableType.net と名前が付いているだけで正確には Movable Type 関係ない気もしますがよいのでしょうか......
前提
ということで、ささっと導入する手順を。今回する話の前提としては下記の通りです。
- すでに Google カスタム検索エンジンを導入済み （「検索エンジンID」 をコピーしておきましょう）
- 検索結果表示用ページがすでに用意されている （レイアウト設定で 「結果のみ」 を使用している）
なので、はじめて Google カスタム検索エンジンを使用しますという場合は、サービスにログインして検索エンジンを作成し、各設定をした上で、「検索エンジンID」 を取得しておきましょう。
手順
手順と言っても、もう下記の公式マニュアルや、動画を観ていただければわかるレベルなので書くことないのですが、タイトルの通り、Google カスタム検索エンジンから差し替える際のポイントだけ簡単にまとめています。
- 参考 サイトサーチの設定、設置、運用を開始するために必要なカスタマイズ方法について - MovableType.net サイトサーチ マニュアル
- 参考 MovableType.net サイトサーチ 解説動画 - YouTube
MovableType.net サイトサーチの設定例
MovableType.net サイトサーチ （以下 「サイトサーチ」） を利用するためには MovableType.net アカウントが必要ですので、アカウントを取得後、新しいサーチエンジンを作成します。今回の設定内容としては下記のような感じ。
ポイントは、赤枠付けてますが、「検索結果のページ移動」 を有効にし、検索結果表示用ページの URL を設定する点くらいでしょうか。
「検索エンジンID」 には元々使用していた Google カスタム検索エンジンから取得した ID を設定します。
検索対象 URL の絞り込みなどは、Google カスタム検索エンジン側で設定できますので通常はそれでよいと思いますが、Google 側はドメイン全体を検索対象にしておいて、サイトサーチ側で絞り込みを設定することもできます。この場合、上記、設定画面の 「ディレクトリによる絞り込み」 とは別で、埋め込みコード側に下記のような設定を加えます （例えば、ドメイン直下の blog ディレクトリのみ検索対象にしたい場合）。
data-filter-pathname="/blog/"
設定を保存すると 「埋め込みコード」 部分に専用のソースコードが出力されますので、それをコピーしておきましょう。
Google カスタム検索エンジン用のコードと差し替え
もともと Google カスタム検索エンジンを使用していれば、検索結果表示用ページに下記のようなコードが入っていると思います。
<script async src="https://cse.google.com/cse.js?cx=********"></script>
<div class="gcse-searchresults-only"></div>
この部分を、そのまま先ほどサイトサーチの設定画面からコピーしたソースコードに差し替えれば、検索結果表示用ページの設定は終わりです。
次に、検索フォームの方を少し修正します。
細かいところは置いておいて、Google カスタム検索エンジンを使用している場合の検索キーワード入力フォームは下記のような感じで、name="q" という形で name 属性が付与されていると思います。
<label>
検索キーワードを入力
<input type="search" name="q" value="" placeholder="検索キーワードを入力" required="">
</label>
これを、下記のように name="mtssq" に属性値を変更してあげましょう。
<label>
検索キーワードを入力
<input type="search" name="mtssq" value="" placeholder="検索キーワードを入力" required="">
</label>
これだけで Google カスタム検索エンジンで使用していた検索フォームがそのまま使えます。
これでサイトサーチの導入は終了。簡単でしたね。ここまでなら 5 分で導入というのもウソではないでしょう。
あとは、自前で CSS 書いて、サイトのデザインに合わせてあげればよいでしょう。
スタンダードプラン以上を契約すれば、「優先記事機能」 という、特定の検索キーワードに対して、特定の URL を優先的に検索結果に表示するなんて機能も利用可能になります。企業の Web サイトなんかでは検索キーワードに応じて該当するサービスのページを優先表示したりと、使い道は多そうです。
注意点
- 設置が終わって使い続けようと思ったら、早めにライセンスを購入しておきましょう。フリートライアルとして （スタンダードプラン） を 3 日間は利用できますが、それ以降はライセンスが必要 （サイトサーチのプラント価格はここ）。
- 「月ごとの最大検索回数」 となっているのは、検索結果ページの 「ページ送り」 も 「検索 1 回」 としてカウントされるので注意。つまり、何か検索して、その検索結果で、2ページ目、3ページ目とページ送りした場合、その一連の操作で発生する検索回数は 「3回」 です。
- 上記のことから、設定画面の 「検索結果の件数 （30～100 で設定可能）」 に関しては 「30」 などにして、検索結果のページ数を最小にしておいた方がよいと思います。
ということで、カスタム検索 JSON API を使用して自前でサイト内検索を実装するなんて楽勝ですよとか、より細かく検索結果をカスタマイズしたいという人はそちらを選択すればよいと思いますが、手軽に、低料金で広告なしのサイト内検索を導入したいという場合にはとても便利なサービスだと思います。
