Warning: count(): Parameter must be an array or an object that implements Countable in /home/sndbox/sndbox.jp/public_html/wp-includes/post-template.php on line 284
wordpress

WordPressにAlgoliaの全文検索を使ってみた

  • このエントリーをはてなブックマークに追加
  • LINEで送る
Wordpress

WordPressとAlgoliaの全文検索を体験しよう

全文検索って聞いたことありますか?そう、曖昧な表記ゆれとかも含めて検索してくれるあれです。せっかくなので、Wordpress + Algoliaの全文検索を体験してください。
以下のリンクは弊社が作っているNipoという日報クラウドシステムです。このたびNipoに全文検索を採用しました。

例えば、こんなキーワードを入れてみてください

  • 日報
  • 印刷
  • クラウド

全文検索の威力を試す

超高速レスポンスと曖昧検索の利便性

どうでした?これ、ヤバクナイですか?ちょっと戦慄してしまうくらいサクサク動いてびっくりしました。しかも導入が簡単なんです。

Algoliaで検索

例えばあなたが、何を思ったのかプリンが食べたくなりました。
そこでこう検索します。
「プリンが」

デフォルトのWordpressにも検索機能は付属していますが、正直比較にならなりません。Ajaxとか使ってページ遷移なしに出力するのでストレスもないし、何より検索結果得られるデータの曖昧検索が非常にありがたい。だから日報システムのサイトで「プリンが食べたい」なんて検索されてもそれらしいページが出るから安心なんです。厳格すぎる完全一致検索は用途によっては役立ちますが、ブログ記事検索なのではある程度ファジーに検索してくれる方がありがたいと思います。

Algoliaの導入設置方法

で、ここから本番になります。といっても全然簡単です。プログラムコードをいじることはほとんどありません。せいぜい子テーマのCSSをちょっといじる程度です。
まず、Algoliaのアカウントを作りましょう。Algoliaは海外サイトで、残念ながら日本語化はされてません。

続いて、WordpressでAlgolia用のプラグインをインストールします。Search by Algoliaという名前のプラグインです。普通にAlgoliaと検索すれば出てきます。

その後は、Algoliaの管理画面とWordpressの管理画面を開きながらの作業です。Algoliaの管理画面からAPIキーや検索キーなどをコピーして、WordperssのAlgolia初期設定画面にコピペする作業です。
Algoliaは様々なキーの種類があって、キーごとに「読み取り専用」とか、「読み書きOK」とか細かく設定できます。

Application IDとAdmin API keyを入力したら、Wordpress管理画面から「Algolia search」を開いて、インデックス化してもらいましょう。記事の量にもよりますが、そんなに長い時間はかからずに終わるはずです。
Algoliaの管理画面に戻ると、Wordpress用のIndiceが作成されています。
AlgoliaのIndiceとは、mySQLでいうデータベースみたいなもんです。 create databases hogehoge みたいなコマンドをたたいたんだなぁと思って下さい。
Nipoではwp_searchable_postsという名前のIndiceでした。おそらく皆さんも同じような名前のIndiceが作られると思います。

私はAlgoliaを既に別のWebシステムでも併用して使っているので、WordpressはWordpressのIndiceだけしか検索できないようにしたいのです。その場合はwp_searchable_posts専用のAPIキーを生成して、WordpressのSearch-only API keyに生成したキーを指定すればいいです。
そうすれば、このキーはwp_searchable_posts内のデータしか検索できず、他のシステムとの干渉を防げます。

そして最後に、Wordpress標準の検索からAlgoliaを使った検索に切り替えます。WordpressのAlgolia PluginからSearch pageを開き、「Use Algolia with Instantsearch.js」にチェックをすると、Wordprss標準の検索がAlgoliaの検索に切り替わります。
このやり方は設定が簡単でいいんですが、デフォルトで検索の画面はアイキャッチを表示したり、検索結果の文字が大きすぎたりと、デザイン的には非常にいまいちなので、子テーマなどからCSSである程度操作するといいでしょう。

上で紹介したサンプルは、このようなCSSを当てています。

.search img {
	display:none
}

.search h2 {
	font-size: 115%;
}


.ais-hits--item {
	border-bottom : 1px solid #ccc;

}

Algoliaの無料プラン

気になる費用ですが、ありがたいことに無料プランがあります。10Kレコードとなかなかに太っ腹ですので、Webサイトとしては十分すぎる量です。

  • このエントリーをはてなブックマークに追加
  • LINEで送る

日報クラウドnipo

nipoはFirebase上で運用されています。Cloud FunctionsとFireStoreを使って作られました。
フロントはVue.jsフレームワークに、Quasarを重ねています。

Vue.jsとサーバレスで作られたnipoを御覧ください