静的サイトに検索機能を付ける

静的HTMLだけのサイトでも、検索は諦めなくてよい、という話です。

仕組み

1. ビルド時に全記事から検索用のインデックス（JSON）を生成する
2. 検索ページのクライアントJSがそれを読み込み、ブラウザ内で照合する

サーバーには検索エンジンも動的コードも要りません。

日本語の照合

英語のように単語がスペースで区切られていないため、素朴な部分一致だと精度が出ません。このサイトでは uni-gram / bi-gram（1文字・2文字の断片）でスコアリングしています。

「しずおか」で「静岡」は引けませんが、表記どおりの検索には十分実用になります。かな漢字の揺れまで拾いたくなったら、その時に考えます。

気を付けたこと

• 検索語はユーザー入力。 結果の描画は textContent か、エスケープ済み文字列に対してだけ <mark> を挿入します。?q= に細工した文字列を入れたリンクを踏ませる反射型XSSの典型パターンがあるためです。
• インデックスのサイズ。 本文は整形記法を落としたプレーンテキストで持ち、数百記事でも数百KB程度に収まる想定です。それを超えたら分割を考えます。

使い心地

インデックスは初回検索時に一度読むだけなので、2回目以降の検索は即答です。小規模サイトの検索としては、外部サービスに頼るよりずっと手軽でした。