Edited at

Instant Search with Laravel Scout & Algolia

Algoliaは、高速で高機能な検索を提供してくれるサービスです。

この記事では、Laravel Scoutを使ってAlgoliaにデータをindexして、Vue.jsで検索フォームを実装する方法を説明します。基本的なことしか説明していないので、詳しくは公式ドキュメントを参照してください。


Algoliaについて


  • https://www.algolia.com

  • データベースからAlgoliaにデータを登録しておけば、AlgoliaのAPIを使ってフロントエンドやサーバーサイドから検索リクエストを送れる

  • 類義語の関連付けができる

  • 検索対象のプロパティに対して重み付けができる

  • 世界中にデータセンターがあるので、日本でも高速
    image.png


Laravel Scout


  • LaravelのEloquentモデルをAlgoliaと連動させられる

  • Composerパッケージとして提供されている


Docs


Install

composer require laravel/scout

composer require algolia/algoliasearch-client-php


Config


configファイルがコピーされる

php artisan vendor:publish --provider="Laravel\Scout\ScoutServiceProvider"



.env

ALGOLIA_APP_ID=YourApplicationID

ALGOLIA_SECRET=YourAPIKey

環境変数に設定する値は、AlgoliaのAPI Keysから取得できます。

image.png


Eloquent

AlgoliaにindexしたいEloquentモデルで、 Searchable traitをuse


Product.php

<?php

namespace App;

use Laravel\Scout\Searchable;
use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
use Searchable;

//
}


これだけで、このテーブルにレコードを作成したり更新したときに、Algoliaにindexされるようになります。


Queue

LaravelのQueueを使って、Algoliaにindexするのをバックグラウンドで実行させることができます。

環境変数を以下のように設定し、Queue Workerを起動するだけです。


.env

SCOUT_QUEUE=true


$ php artisan queue:work

[2018-10-31 16:11:54][XDt6YC6SH63xdKJOoMn8kLixY3i97i6t] Processing: Laravel\Scout\Jobs\MakeSearchable
[2018-10-31 16:11:54][XDt6YC6SH63xdKJOoMn8kLixY3i97i6t] Processed: Laravel\Scout\Jobs\MakeSearchable


Vue InstantSearch

Vue.jsでAlgoliaの検索を簡単に実装するためのComponentたちが、Vue InstantSearchとして提供されています。

これを使えば、驚くほど簡単にVue.jsでAlgoliaの検索APIを利用できます。

vue-instantsearchをインストール

yarn add vue-instantsearch

以下のようにInstantSearchを初期化。

import Vue from 'vue';

import App from './App.vue'
import InstantSearch from 'vue-instantsearch';

Vue.use(InstantSearch);

new Vue({
el: '#app',
render: h => h(App)
});

あとは、こんな感じでInstantSearchのコンポーネントを使ってやれば、検索フォームと検索結果を表示することができます。

ais はAlgoliaInstantSearchの略。

<ais-index

app-id="your-app-id"
api-key="your-api-key"
index-name="products"
>
<ais-input placeholder="何をお探しですか?"></ais-input>
<ais-results>
<template slot-scope="{ result }">
<p>{{ result.product_name }}</p>
</template>
</ais-results>
</ais-index>


Multiple data source

複数のデータソースを1つの検索結果として表示することはできません。

例えば、LaravelとWordPressそれぞれのDBに入っているデータをAlgoliaで1つの検索結果として表示するためには、Algoliaで1つのindexの中に両方のデータを保存する必要があります。

https://github.com/algolia/algoliasearch-helper-js/issues/468