ブログ一覧ページにページ内検索を実装した
先日、Blog ページにページ内のインクリメンタル検索を実装してみた。記事のタイトルを対象に検索できるようにしていて、ブラウザのページ内検索機能の劣化版という感じ。ｗ
参考にしたのは以下の Gist。Blog ページに適用させるために若干作り直している。
検索対象としたい要素を querySelectorAll() でかき集め、textContent と比較していく。マッチする文字列があったらその文字列部分を mark 要素代わりの span で囲むように innerHTML を操作している。一方、マッチしなかった要素には CSS クラスを付与して display: none にしている、というワケ。
element.outerHTML = element.textContent とすればその element 自体を消せる、という技がかなり参考になった。
現状、ブログ記事は2,800件を超えていて、input イベントの度に2,800件の DOM 要素をゴリゴリ操作しているので中々重たい。クライアントサイドで JS オンリーでやろうとするのはキツいか。というか DOM 要素を直接検索してるのがムチャクチャなんだよな。
僕は記事のタイトルになるべく色々なキーワードを含めるようにしているので、自分は「Blog ページでのページ内検索」で事足りるようになっているんだけど、本文を調べたい場合はやっぱり Google のサイト検索に頼るしかなく、その辺がちょっと残念な感じする。
とはいっても、ブログ本文の全文検索をやろうとすると、それもメチャクチャしんどい。
- 記事ファイルからテキストを抽出する … 画像の
alt属性値は拾いたい、広告などの要素は除外したい - そのデータをメタデータとともに DB なり何なりに蓄えておく … その DB のホスティング代を考えないといけないね？
- 検索エンジンを何らか用意する … XREA なら昔ながらの Namazu が使えるけどどうだろう？ElasticSearch？そのホスティング代がやっぱりね…
- 検索 API とフロントエンドを作る
- 日々の記事公開に合わせて DB の更新も必要になる
レンタルブログサービスとか、WordPress みたいなのをセルフホストしてたりすれば、この辺何も考えなくて良いけど、全部自前で作っているサイトだとキツいね。所詮は Atom RSS フィードを吐いてるだけの静的 HTML サイトだからね…ｗ
そんなワケで、ページ内の DOM 要素をゴリゴリ捜索するぐらいならクライアントサイドで JS オンリーで実現できるかなーと思って実装したので、ココが関の山。コレ以上金や労力をかけて頑張る気もないし自分がそこまでの機能を欲しくはないのでおしまい。ｗ
