\n\n2019/05/06追記
\nこの記事は古いです
\n
\n当サイトはMiddlemanからGatsbyに移行したため、この記事の内容は古くなっております。
\n動作デモはありませんが、Middleman製サイトに検索機能を実装する場合にはこのまま続きをお読み下さい。
\n現サイトで運用されているGatsby製サイトに検索機能を実装する場合はこちらの記事を参照して下さい。— Gatsby製サイトにAlgoliaのサイト内検索を実装する | WEB EGG
\n
\n— ブログをMiddlemanからGatsbyに乗り換えた雑感 | WEB EGG
こんにちは。
\n当ブログのサイト内検索をしたことある方はお気づきかもしれませんが、サイト内検索にAlgoliaを利用しています。
\n（後述の事情により月初に使えなくなることがたまにありますが）動作速度もかなり早く、安定して稼働してます。
運用コストもゼロで、記事書いてPRをマージすれば記事公開日に勝手にコンテンツが検索対象に一手間加えてあります。
\nAlgoliaを１ヶ月実運用してみたので、Algoliaはいいぞという紹介記事を書きたいと思います。
また、CQRS・DDDの勉強のために、フロントはReactとAlminで実装してみました。
\nAlmin、CQRS、Fluxの小さな実装例の１つとしても参考になるかと思います。
Algoliaは、検索機能を提供するAPIと管理用APIと公式ライブラリ、そして周辺ツール群にて構成されています。
\n私なりの「Algoliaのここがすごい！」は、
あたりです。
\n大きな導入事例もあり、Alt GoogleSiteSearchのデファクトなのでは!? と思うほどのクオリティと感じています。
今回はAlgoliaのすごさを全力アピールするため、周辺ツールも紹介します。
\nAlgoliaが提供する周辺ツールのうち、ぜひ知って欲しいのがDocSearchです。
DocSearchはAlgoliaのコミュニティが提供する、ドキュメントに特化した検索機能用のツールです。
\nAlgoliaのバックエンドを利用する点は同じですが、タグを数行書けばサイト内をクローリングして検索対象を自動収集してくれます。
\n今は亡きGoogle Site Searchのような使い勝手で、使い心地はこちらの方が高いと感じました。
\n\nグーグルは、サイト内検索サービスのGoogle Site Searchを2018年に終了することを決定しました。
\n— Google Site Searchが終了へ、サイト内検索は2018年までに他のサービスに乗り換えを | 編集長ブログ―安田英久 | Web担当者Forum
\n
導入例はかなり強力で、その界隈の開発者にとっては馴染み深いドキュメントで広く活躍してます。\nもしかしたらこれらのドキュメントを読んでる過程で、サイト内検索を利用し、Algoliaのロゴに出会ったりしていないでしょうか。
\nなお、今回は自前で実装してAlmin、DDD、CQRSについて実践したかったので、DocSearchではなくAlgoliaを利用しています。
\n周辺ツールの１つであるDocSearchに話が逸れましたが、Algolia本家の話に戻します。
\n先述の通りAlgoliaは一部開発者にとっては馴染み深いドキュメントで利用されていますが、
\n他にも有名なWebサービスでも利用されているようです。
DocSearchのように、だいたいサイト内検索系のサービスの対象は静的サイトだと思いますが、
\nAlgoliaが恐ろしいのは動的なWebサービスでも利用されているという点です。
\nそれもAmazon(Twitch)やTwitter(Periscope)などすでに巨大な検索エンジンを持ってそうな企業が採用している点は脅威です。
自分で使ってみても、それくらい検索性・速度の面で圧倒的に良いと思いますし、
\n何より、複雑になりがちな検索機能のクエリ処理を実装しなくていいというのはかなりのアドバンテージなのではないでしょうか。
\n試してはないですが、AlgoliaはバックエンドのAPIがかなり整っているので、動的サイトでも大きな遅延なく検索機能を代替できそうなイメージがあります。
Algoliaは無料で始められます。
\nまた、小規模なサイトであれば無料のまま使い続けられます。
で用途として足りていれば、無料のまま継続利用できます。
\n月10万回というのがとても絶妙な数でして、月1万PVほどの当ブログで1ヶ月試した結果、ギリギリアウトでした（残３日にて回数上限オーバー）。
\nなお、上限オーバーすると、検索もコンテンツの追加もできなくなります。
このブログにおいて検索はさほどクリティカルな機能ではないし、無料で提供しているので、まぁ数日くらい検索できなくてもいいやくらいの温度感でやってます。
\nもしプラン上げたくなったら、管理画面から手続きすればプランの分だけ上限は復活するので、最悪そうします。
概要、メリット、費用面について整理できたので早速Algoliaで検索機能の実装を始めます
\n当ブログはMiddleman(Ruby)を使用しているので、algolia/algoliasearch-client-rubyを使用します。
\nおそらく大体の言語の公式クライアントライブラリがあるので、言語に合わせて読み替えてください。
使用するメソッドはAlgolia::Index#save_objects!です。ソースはこちら
\n記事を検索できるように、記事データを登録するために、記事データをJSON化する必要があります。
Middlemanの場合、幸い.jsonのついたファイルを作っておくだけで勝手にJSONを吐いてくれるので、とても楽でした。
\nなんて美味い話はなくて、多少は楽だったんですが、多少の工夫が必要でした。
\n記事データをJSON化しているのはこのファイルで、以下の通りです。
<%= all_articles.select{|a| a[:published]}.to_json %>ここはとてもシンプル。公開されている記事だけフィルタしてJSON化してます。
\nここで出てくるall_articlesは自作のヘルパです。このファイルに記述しており、以下の通りです。
helpers do\n # ...\n def all_articles\n blog.articles.map{|post|\n {\n objectID: Digest::MD5.hexdigest(post.slug),\n title: post.title,\n date: post.date,\n body: strip_tags(post.body),\n summary: strip_tags(post.summary),\n tags: post.tags,\n published: post.published?,\n locale: post.locale,\n slug: post.slug,\n path: post.data.path,\n }\n }\n end\n # ...\nendという手を加えています。
\n\n\n\n
という感じでMiddlemanなら簡単に記事データをJSON化できたので、あとはそれをクライアントライブラリに渡すだけです。\n記事データの登録に成功すると、記事データがAlgoliaに登録されて、検索可能な状態になります。
\n検索対象を登録したので、早速記事データを検索してみます。
\n実装の全体像はこちらを見るといいかと思います。
Reactと、Alminというユースケース駆動、CQRS、DDDと相性の良いFlux実装を使って実装してます。
\nAlgoliaを使って検索する、という点はオリジナルですが、実装の雛形はAlmin公式のTODO MVCのチュートリアルがほぼ全てです。
\nデータの取得方法と、取って来たデータの見せ方を変えただけ、という感じです。
\n\nIn this guide, we’ll walk through the process of creating a simple Todo app.
\n\n
上記チュートリアルでMemoryDBというオンメモリの値をDBかのように振る舞うインフラレイヤのアダプタを参考に、Algolia用のインフラレイヤのアダプタを実装してあります。
\nAlmin自体の詳細はもっとノウハウを貯めて別の記事にて書ければと思います。
当ブログはTravis CIで事前にビルドしたものをデプロイしているので、
\nサイトのビルド・デプロイ時に自動的に記事データをAlgoliaに登録する処理を入れてみました。
configure :build do\n after_build do\n def update_search_index(path)\n Algolia.init application_id: ENV['ALGOLIA_APP_ID'], api_key: ENV['ALGOLIA_API_KEY']\n index = Algolia::Index.new(ENV['ALGOLIA_INDEX'])\n batch = JSON.parse(File.read(path))\n index.save_objects!(batch)\n File.delete(path)\n end\n update_search_index('./build/posts.json')\n end\nendbuild/posts.jsonは、先ほどのJSON化するためのファイルが出力される場所です。
\nAlgoliaに登録したらもうJSONデータは使わないので消してあります。
これでmiddleman buildすれば自動的にAlgoliaに記事データが登録されます。
\n差分更新にするには記事の追加だけでなく変更や削除まで対応する必要があり、面倒だったので全件更新にしてます。
\n何か問題が起きたら差分更新にすると思います。
記事の本文も検索対象に含めたかったのですが、記事本文が丸ごとレスポンスに入っているとデータ量が多くてパフォーマンスが出なかったので、調整をしました。
\n検索する側のパラメータは
\n async find (keyword: string): Promise<PostList> {\n const algoliaOptions = {\n query: keyword,\n hitsPerPage: 1000,\n attributesToRetrieve: [\n 'title',\n 'summary',\n 'tags',\n 'path',\n 'objectID',\n 'date',\n 'published',\n 'locale',\n 'slug',\n ]\n }\n const response: AlgoliaResponse = await this.index.search(algoliaOptions)\n // ...\n }attributesToRetrieveを指定すると、レスポンスに含めるフィールドを指定できます。
\n記事本文をレスポンスから除外したら、かなりパフォーマンスが上がりました。
当サイトの検索機能はキーワードにマッチしたところがハイライトされるようにしてるのですが、
\nこれは実装したわけではなく、Algolia側が勝手にやってくれてます。まじすごい。
レスポンスの中に_highlightResultというキーが入っており、ここにハイライト済みのHTMLが格納されています。
\nHTML文字列をそのまま表示させるので普通にReactは使えなくなってしまうのですが、dangerouslySetInnerHTMLというpropを使うとお茶を濁せます。
他にも検索可能なフィールドを絞ったり、検索結果の優先度設定などパラメータをいじっているのですが、
\nそれだけで一本記事書けるレベルに量が多くなると思うので、この記事では割愛します。
ぜひAlgoliaとAlmin試してみてください。
","timeToRead":13,"frontmatter":{"title":"Algoliaを利用してMiddleman製サイトに検索機能を実装する","tags":["Algolia","JavaScript","Ruby","Middleman","React","Almin","DDD"],"date":"August 17, 2017","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='130'%20viewBox='0%200%20400%20130'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%2060v35h13l23-1c12%200%2014-1%2011-5-1-2%200-2%2050-2a1654%201654%200%200096-4c0-4-1-4-56-5l-57-1c-16-4-17-26-3-33%204-2%208-2%2063-2a603%20603%200%200023-2c-27%200-31%200-30-1l1-4c-1-2-2-2-29-2H77l1-3-1-4-39-1H0v35m258-6c-2%204%204%2010%207%208s5-6%204-8c-1-3-10-3-11%200m76%205l-2%208-2%204h9c8%200%208%200%209-3l-1-3c-1-2%200-2%209-2h11v-6l-17-1h-16v3'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":3.0925925925925926,"src":"/static/805aa3b7b4b5304126127d01dcd71951/8eab8/featured-image.png","srcSet":"/static/805aa3b7b4b5304126127d01dcd71951/1ec58/featured-image.png 334w,\n/static/805aa3b7b4b5304126127d01dcd71951/ccb4a/featured-image.png 668w,\n/static/805aa3b7b4b5304126127d01dcd71951/8eab8/featured-image.png 1336w,\n/static/805aa3b7b4b5304126127d01dcd71951/85e22/featured-image.png 2004w,\n/static/805aa3b7b4b5304126127d01dcd71951/a9ec1/featured-image.png 2672w,\n/static/805aa3b7b4b5304126127d01dcd71951/b3888/featured-image.png 2878w","srcWebp":"/static/805aa3b7b4b5304126127d01dcd71951/f7e47/featured-image.webp","srcSetWebp":"/static/805aa3b7b4b5304126127d01dcd71951/cd98f/featured-image.webp 334w,\n/static/805aa3b7b4b5304126127d01dcd71951/7535d/featured-image.webp 668w,\n/static/805aa3b7b4b5304126127d01dcd71951/f7e47/featured-image.webp 1336w,\n/static/805aa3b7b4b5304126127d01dcd71951/f6b67/featured-image.webp 2004w,\n/static/805aa3b7b4b5304126127d01dcd71951/f71bf/featured-image.webp 2672w,\n/static/805aa3b7b4b5304126127d01dcd71951/650fc/featured-image.webp 2878w","sizes":"(max-width: 1336px) 100vw, 1336px"}}}}}},"pageContext":{"slug":"/implement-site-search-with-algolia/","previous":{"fields":{"slug":"/how-to-use-webpack-with-middleman/"},"frontmatter":{"title":"MiddlemanのビルドにWebpackを組み込む方法","tags":["Middleman","webpack","JavaScript"]}},"next":{"fields":{"slug":"/how-to-build-and-deploy-to-deploygate-in-cli/"},"frontmatter":{"title":"CLIだけでReact NativeアプリをビルドしてDeployGateにデプロイする方法","tags":["iOS","Android","React Native","DeployGate"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}