Algoliaを使って検索を実装してみた話

今日はこれの話です

Algolia | The Most Reliable Platform for Building Search

Algoliaとは

一言でいえば検索エンジンを提供するサービスです

algolia側にJSONやCSVでデータを登録し、どのPropertyで検索するかなどを設定します

algolia自体については以下に詳しく書いてあります

Webサイト用検索ボックスの最高傑作Algoliaが$18.3を獲得、CrunchBaseも使ってるぞ | TechCrunch Japan

50言語に対応、モバイルアプリ向けサイト内検索「Algolia」

無料の範囲であれば、10K Record + 100K Operationsまで行うことができます

実際にどれぐらいの速さかは10K Recordぴったしを入れたデモがあるので、そちらを試してください

https://www.algolia.com/realtime-search-demo/mtgcardsearch

デモに登録されているデータはMTG JSONの全カードデータから10K件分抽出しています。

MTG JSON

実際にWebサイトを作ってみる

Algoliaを使うためにはサイトにアカウントの登録とAPI Keyを手に入れる必要があります

まずはアカウントをつくりましょう

Create an account

アカウントをつくりdashboardに移動するとチュートリアルとしてサンプルのデータの登録と検索対象のPropertyの設定を教えてくれるのでそれにそって進みましょう

それらが終わったら実際に実装してみます。

TextInput１つに検索結果を表示するListだけの簡単なHTMLをVue.jsを使って作り、そこにAlgoliaのSDKをくっつけてみます

まずはprojectを作り、algoliasearchのSDKを導入しましょう

vue init webpack algoliasample
cd algoliasample
npm install
npm install algoliasearch --save

上記のコマンドが終わったら、次はApp.vueを以下のように書き換えます

APP_IDとAPI_KEYは自分のを設定しましょう

Algoliaにログインして、左のメニューからAPI KEYを選択するとわかります

your Algolia account

入力したら実行してみましょう

npm run dev

localhost:8080にアクセスすると以下のリンクと同じサイトがでてくるはずです（上のコードをFirebase Hostingにアップロードしたものです）

https://algoliasearch-43c45.firebaseapp.com

こんな感じに簡単に検索エンジンを導入することができます。

その他にもAutoComplete対応や位置情報を利用した検索などもでき、幅広いオプションがあります。

かなり高速で良いサービスなのでぜひ使いましょうっ