Blogブログ

Day: March 25, 2019

Vueで検索エンジンAlgoliaの実装

goolge site search, yahoo site searchが廃止になったことで、注目を浴びだしたのが全文検索可能なSAAS。 その一つであるAlgoliaを使ってみる。 what Algolia? https://www.algolia.com/ 検索のみを提供するサービス。 APIは豊富にある。 検索対象とするキーの設定なども容易。 利用例は多く、近いところだとvue。 https://vuejs.org/ 個人であれば無料で月10万コールまで利用出来る。 データの更新なども上限はある。 https://www.algolia.com/pricing/ アカウント作成 無料で作成出来る。 最初にチュートリアルがあり、検索対象カラムの指定や条件の編集方法などが簡単に学べる。 https://www.algolia.com/apps/ARUFSHIXOF/api-keys/all サンプルプロジェクト作成 ライブラリが用意されているvueで実装。 インストール vue init webpack vue_algolia cd vue_algolia npm install npm install algoliasearch –save データの追加 日本語も念の為追加してみる algoliaのダッシュボードから追加。 indicesという項目から進む。 Add recordでjson形式で追加が可能。 試しに、日本語も追加してみる。 https://www.algolia.com/apps/ARUFSHIXOF/explorer/browse/getstarted_actors ビルド~デプロイ cloudfrontに上げてみた。 日本語も問題なく検索できる! http://dukpd3il98sac.cloudfront.net