AlgoliaでWordPressのサイト内検索をパワーアップする

WordPressで運用中のwebサイト、サイト内検索にオートコンプリートを追加したりカスタム投稿タイプのデータも検索対象に入れたりといったカスタマイズを簡単にやってみたくなりませんか？今回は検索のFaaS(Funct […]

WordPressで運用中のwebサイト、サイト内検索にオートコンプリートを追加したりカスタム投稿タイプのデータも検索対象に入れたりといったカスタマイズを簡単にやってみたくなりませんか？

今回は検索のFaaS(Function as a Service)であるAlgoliaを使ったWordPressサイトのサイト内検索実装法を紹介します。

Algoliaとは？

https://www.algolia.com/

Algoriaは検索APIを提供するFaaS(Function as a Service)です。
Elasticsearchを知っている方は、それをさらに検索へ特化させたSaaSと思ってもらうのが近いかもしれません。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-15-59-44

言語やプロダクトの対応もかなり幅広く、気軽に導入できます。

会員登録する

無料から始めることができますので、会員登録してみましょう。

GitHubやGoogle+アカウントでのシングルサインオンに対応しています。

追加の情報を設定すれば登録完了！

チュートリアルを試す

会員登録が完了すると、早速チュートリアルが始まります。

チュートリアル用データの投入

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-15-53-46
検索用のデータを保存。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-15-54-03
検索フォームから投入したデータへの検索が試せます。

検索と検索対象のカスタマイズ

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-15-54-59
先ほどの検索結果をよくみると、画像のパス名まで検索対象にしてしまっていました。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-15-55-11
検索するフィールドを指定することもできますので、指定します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-15-55-25
名前だけで検索できるようになりました。

検索結果のソート

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-15-55-55
検索結果を並び替えすることもできます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-15-57-27
ratingで並び替えてみましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-15-57-38
ratingが高い順で表示されるようになりました。

検索UIのカスタマイズ

Algoriaは検索APIを提供するサービスですので、出力は任意にカスタマイズすることができます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-15-57-55

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-15-58-02
生データを出力している例

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-15-58-08
名前だけを出している例。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-15-58-14
ハイライトなども可能です

データを組み合わせてこのような表示も。

管理画面にログインする

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-15-59-54
こちらが管理画面。
データ量と検索リクエスト数でプランの制限がかかりますので、実運用時は要注意です。

チュートリアル用データの削除

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-16-00-09
先ほどのチュートリアルのあとは、チュートリアル用データを削除する必要があります。
「getstarted_actors」などでインデックスを検索し、「Manage current index」からdeleteを選んで削除しましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-16-00-24
削除します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-16-00-34
インデックスが空になっていれば、準備完了です。

WordPressと連携する

そしてWordPressなどの多くのプロダクトで、連携プラグインがリリースされていることも特徴の１つです。

連携プラグインのインストール

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-16-08-15
WordPressサイトで、Search by Algolia – Instant & Relevant resultsをインストールしましょう。

API Keyを確認

連携にはAPIキーが必要ですので、Algoriaの管理画面から控えておきます。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-16-01-13

プラグイン初期設定

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-16-19-34
プラグインを有効化すると表示される初期設定画面です。
ここに先ほどのAPIキーやアプリケーションIDをそれぞれ入力しましょう。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-16-22-33
インデックスするデータを指定します。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-16-26-20
検索ページでのAlgoriaの使い方を選びます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-17-02-09
オートコンプリートの設定もできます。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-01-16-32-50
すべての設定が完了するとこのように検索フォームがAlgoriaのものに自動的に置き換えられます。

料金・・・というか無料プランについて

こういうFaaSやSaaSを調べていて気になるのが料金です。
安心してください。Algoliaは無料プランが存在します。

データが10,000レコードまで、月間の検索オペレーションが100,000回までという制限がついていますが、個人ブログやテストサイトに使う分にはこれでも十分すぎるでしょう。

本番サイトへの導入については、$49/moから各種プランがありますので、今後のアップデートへの投資という意味合いもかねてぜひ契約して頂ければと思います。