サイト内検索サービス LazySearch の課題のとして使い始めるまでに JS で処理を書く必要があり煩雑という問題があります。サイト登録まで到達した後に, さらに JSON/JSONP で Search API に問い合わせる処理を JS で書かなければなりませんでした。
JS で処理を書く, といっても検索結果のデザインやページネーションまで含めればサクッと書けるものでもありません。
そこで JSライブラリを置けばサイト内検索機能が使える を目標に JS ライブラリ lz.js を開発しています。
リポジトリ: https://github.com/fillin-inc/lazysearch-js
目標仕様
- モダンブラウザ + Edge + IE10-11 をサポート
- JS ライブラリを配置し, form タグの hidden に指定されたパラメータを指定する
- 検索結果はモーダル表示
- PC, タブレット, スマホでそれぞれレスポンシブに対応
開発環境
- webpack + Babel
- css-loader + style-loader を使った CSS ロード
- html-loader を使った HTML テンプレートの読み込み
- Pure JS をベースに必要最低限のライブラリで実装
なぜ ES2015 で作ってみてどうだったか
世代的に JS を始めた頃には便利な jQuery がすでにありました。しかし, ES2015 ではより表現しやすい構文が用意され, モダンブラウザではブラウザ間の差異を(そこまで)気にする必要がなかったので苦労はありませんでした。
IE10, 11 で時々使えないメソッドがあったので相変わらず… という気持ちにはなりました。
どちらかというと JS よりも HTML/CSS のマークアップで苦労しました。最近サボったりフリーランスの方にお願いしているのですっかり鈍っていました。
できたもの
このサイトにも lz.js を使ったサイト内検索機能を追加しています。↑の検索窓から動作を確認できます。作ってみて 「Hugo で作った静的サイトに LazySearch を使って5分でサイト内検索を追加する方法」 みたいなタイトルをこの記事に付けたくなるくらい便利でした。
やっていることは難しくありませんが, 単なる API とは異なり目の前で確認できる動作をするためデモをする際にも良い評価をいただけるようになりました。
これから
とりあえずまともに動く, レベルなのでもう少し処理の最適化やテストの追加など作業を進めていきたいと思います。高崎で webpack + babel, Go, Ruby on Rails で開発を可能な人をひっそり探しています…