世界を旅して暮らしたい放浪エンジニアブログ

本ブログを利用してNuxt.jsにAlgoliaの検索を導入する

Nuxt.jsで作られた本ブログにAlgolia検索を導入し、サイト内のコンテンツを検索できるようにしました。トップページの検索窓に入力された内容からサイト内コンテンツをサジェスト表示しています。

[ 目次 ]

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ(@nakanakamu0828)です。

今回は前々から利用したいと思っていたAlgoliaを試してみます。
Nuxt.jsで作られた本ブログの検索にAlgoliaを導入します。

Algoliaとは

https://www.algolia.com/

Algoliaは、APIにより様々な検索機能を提供します。
検索対象となるデータは、Algoliaが提供する管理画面からjson、csvでデータ登録するか、対象サイトをクローリングして収集できます。

Algoliaのプランについて

こちら のページからAlgoliaのプランが確認できます。無料プランもありますので今回は無料プランを利用します。

  • 登録できるマスターデータは1万件
  • 1つのマスターデータは最大10KBまで
  • APIリクエストは月10万回まで

このような制限があります。詳細はAlgoliaのページをご確認ください。

Algoliaのアカウント作成

Algolia新規登録 から新規登録します。

Algolia signup

作成後はDashboardに移ってください。
後ほど認証に利用するAPIキーは こちら の画面で確認できます。

Nuxt.jsにAlgoliaを組み込む

algoliasearchライブラリをインストール

$ yarn add algoliasearch

Vue instantsearch というライブラリが用意されているのですが、UI変更に手間がかかりそうだったので今回は採用しませんでした。

DocSearch というAlgoliaが指定したサイトをクローリングして情報収集してくれるサービスもありますが、今回は入門ということでデータは手動で作成します。

Algoliaにデータをインポート

  1. Indices画面から新たに myblog というインデックスを作成します。

  2. Indices > myblog > RANKING から検索対象となる属性値(Searchable Attributes)を設定。今回はブログのタイトル、説明、slug(URLパス)の3つを用意しました。
    algolia Indices myblog ranking

  3. Indices > myblog > BROWS > Add records manually からデータを登録
    algoria Indices myblog browse add record

Algoliaを利用してサジェスト機能を実装

Algoliaの検索部分の処理だけを抽出したソースが以下になります。

<template>
  <main>
    <section class="hero is-primary">
      <div class="hero-body">
        <div class="container">
          <h1 class="has-text-centered title is-size-1 font-leckerli-one">
              Engineer Blog
          </h1>
          <div>
            <div class="control has-icons-left has-icons-right search-field" :class="{'is-large is-loading': this.loading}">
              <input type="text" placeholder="" class="input is-large is-rounded" v-model="keyword">
              <span class="icon is-medium is-left"><i class="fa fa-search"></i></span>
            </div>
            <div class="dropdown is-block is-fullwidth" :class="{'is-active': this.algoliaResults.length > 0}">
                <div class="dropdown-menu" style="width: 100%">
                    <div class="dropdown-content suggest__content">
                        <nuxt-link
                            v-for="(algoliaResult, index) in algoliaResults" :key="index"
                            :to="{ name: 'posts-slug', params: { slug: algoliaResult.slug }}"
                            class="dropdown-item"
                        >
                            <p class="suggest__item__title" v-html="algoliaResult._highlightResult.title.value"></p>
                            <p class="suggest__item__description has-text-grey" v-html="algoliaResult._highlightResult.description.value"></p>
                        </nuxt-link>
                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </section>

  </main>
</template>

<script>
import algoliasearch from 'algoliasearch'
const algoliaSearch = algoliasearch(process.env.ALGOLIA_APPLICATION_ID, process.env.ALGOLIA_SEARCH_API_KEY)
const algoliaClient= algoliaSearch.initIndex('myblog')
export default {
    data () {
        return {
            keyword: '',
            algoliaResults: [],
            loading: false,
        }
    },
    watch: {
        keyword: function(val) {
            if (val === '') {
                this.algoliaResults = []
                return
            }
            this.loading = true
            algoliaClient.search(val, function (err, content) {
                this.loading = false
                if (err) {
                    throw err
                }
                this.algoliaResults = content.hits
            }.bind(this))
        }
    }
}
</script>

どのようなUIになったかはブログのHOME からご確認ください。

最後に

今回の記事はAlgoliaの利用方法を簡単にまとめたものです。本ブログではContentfulを利用して記事を投稿していますが、投稿したらAlgoliaに自動でインデックスが作成されるような仕組みを今後導入していきたいと思っています。

前のページ

次のページ

Profile

なかむ🇭🇰Webデベロッパー

なかむ🇭🇰Webデベロッパー

香港在住4年目になるWEBエンジニアのなかむです。 現在は、LaravelやRailsを利用したWEB開発を中心にエンジニアをしています。 顧客は全て日本の企業になります。リモート開発にて各企業様の支援を行なっております

プロフィール詳細はこちら

Latest Posts