>  > 【純正】TOYOTA TANK トヨタ タンク【M900A M910A】  ペットシートカバー(2列目用)[08213-00430]

ペットシートカバー(2列目用)[08213-00430] M910A】 TANK タンク【M900A トヨタ M910A】 トヨタ 【純正】TOYOTA

【純正】TOYOTA TANK トヨタ タンク【M900A M910A】  ペットシートカバー(2列目用)[08213-00430]

 · 6 min read

こんにちは。
当ブログのサイト内検索をしたことある方はお気づきかもしれませんが 14インチ サマータイヤ セット【ムーブ カスタム(LA100系)】MANARAY ユーロストリーム JL10 ディープメタリックシルバー 4.5Jx14SINCERA SN832i 155/65R14、サイト内検索にbrembo ブレンボ ブレーキパッド リア セラミック 三菱 エクリプス D32A D38A 95/2~99/6 P54 012N ブレーキ パッド 交換 部品 メンテナンス パーツ ポイント消化を利用しています。
(後述の事情により月初に使えなくなることがたまにありますが)動作速度もかなり早く、安定して稼働してます。

運用コストもゼロで、記事書いてPRをマージすれば記事公開日に勝手にコンテンツが検索対象に一手間加えてあります。
Algoliaを1ヶ月実運用してみたので、Algoliaはいいぞという紹介記事を書きたいと思います。

また、CQRS・DDDの勉強のために、フロントはReactとAlminで実装してみました。
Almin、CQRS、Fluxの小さな実装例の1つとしても参考になるかと思います。

【純正】TOYOTA TANK トヨタ [Projectμ] タンク【M900A M910A】 ブリヂストン ペットシートカバー(2列目用)[08213-00430]

https://www.algolia.com/

Algoliaは、検索機能を提供するAPIと管理用APIと公式ライブラリ、そして周辺ツール群にて構成されています。
私なりの「Algoliaのここがすごい!」は、

  • 検索がとにかく早い
  • プランが柔軟
  • カスタマイズ性が高い
  • 1ヶ月利用して1回も落ちてない
  • 検索APIの気が利いてる
  • 自動でタイポの名寄せをしてくれる(NoedをNodeとして解釈可能)
  • バックエンド、フロントエンド共にライブラリが充実
  • フィールドの重み付けなどのパラメータ調整をコード変えずに対応可能

あたりです。
大きな導入事例もあり、Alt GoogleSiteSearchのデファクトなのでは!? と思うほどのクオリティと感じています。

DocSearchとは

今回はAlgoliaのすごさを全力アピールするため、周辺ツールも紹介します。
Algoliaが提供する周辺ツールのうち、ぜひ知って欲しいのがDocSearchです。

DocSearchはAlgoliaのコミュニティが提供する、ドキュメントに特化した検索機能用のツールです。
Algoliaのバックエンドを利用する点は同じですが、タグを数行書けばサイト内をクローリングして検索対象を自動収集してくれます。
今は亡きGoogle Site Searchのような使い勝手で、使い心地はこちらの方が高いと感じました。

グーグルは、サイト内検索サービスのGoogle Site Searchを2018年に終了することを決定しました。

Google Site Searchが終了へ、サイト内検索は2018年までに他のサービスに乗り換えを | 編集長ブログ―安田英久 | Web担当者Forum

導入例はかなり強力で、その界隈の開発者にとっては馴染み深いドキュメントで広く活躍してます。 もしかしたらこれらのドキュメントを読んでる過程で、サイト内検索を利用し、Algoliaのロゴに出会ったりしていないでしょうか。

なお、今回は自前で実装してAlmin エムズスピード FORGED DESIGN 773 ホイール 22インチ BKアルマイト/PO 22×9.5JJ 5穴 P.C.D.114.3、DDD、CQRSについて実践したかったので、DocSearchではなくAlgoliaを利用しています。

Algoliaの導入例

周辺ツールの1つであるDocSearchに話が逸れましたが、Algolia本家の話に戻します。

先述の通りAlgoliaは一部開発者にとっては馴染み深いドキュメントで利用されていますが 送料無料 ステップワゴン マイナー前 RG1 2 3 4 LEDヘッドライト ロービーム H11 PHILIPS製 ZESチップ 8枚搭載 新基準車検対応 360°調整可能 6500K 2個セット P、
他にも有名なWebサービスでも利用されているようです。

DocSearchのように、だいたいサイト内検索系のサービスの対象は静的サイトだと思いますが、
Algoliaが恐ろしいのは動的なWebサービスでも利用されているという点です。
それもAmazon(Twitch)やTwitter(Periscope)などすでに巨大な検索エンジンを持ってそうな企業が採用している点は脅威です。

自分で使ってみても、それくらい検索性・速度の面で圧倒的に良いと思いますし、
何より 、複雑になりがちな検索機能のクエリ処理を実装しなくていいというのはかなりのアドバンテージなのではないでしょうか。
試してはないですが、AlgoliaはバックエンドのAPIがかなり整っているので、動的サイトでも大きな遅延なく検索機能を代替できそうなイメージがあります。

Algoliaの料金・制限

Algoliaの料金ページ

Algoliaは無料で始められます。
また、小規模なサイトであれば無料のまま使い続けられます。

  • 検索対象になるマスタデータ1万件まで

    • 当ブログに置き換えると1万記事までOK
  • Algolia APIを月10万回まで実行可能

    • 記事の登録も1回、記事の検索も1回
  • Algoliaを用いている箇所にAlgoliaのロゴを表示すること

で用途として足りていれば、無料のまま継続利用できます。
月10万回というのがとても絶妙な数でして、月1万PVほどの当ブログで1ヶ月試した結果、ギリギリアウトでした(残3日にて回数上限オーバー)。
なお、上限オーバーすると、検索もコンテンツの追加もできなくなります。

このブログにおいて検索はさほどクリティカルな機能ではないし、無料で提供しているので、まぁ数日くらい検索できなくてもいいやくらいの温度感でやってます。
もしプラン上げたくなったら、管理画面から手続きすればプランの分だけ上限は復活するので、最悪そうします。

概要、メリット 【送料無料】 フロントガラス トヨタ TOYOTA ランドクルーザー(2ドア幌型) 型式70系用 203015 車検部品 車検 部品 フロントウインドシールドガラス、費用面について整理できたので早速Algoliaで検索機能の実装を始めます

記事をJSON化してAlgoliaに登録する

当ブログはMiddleman(Ruby)を使用しているので、algolia/algoliasearch-client-rubyを使用します。
おそらく大体の言語の公式クライアントライブラリがあるので、

【純正】TOYOTA TANK トヨタ タンク【M900A M910A】  ペットシートカバー(2列目用)[08213-00430]を激安販売中


【データシステム/DataSystem】TV-NAVI KIT テレビ&ナビキット スマートタイプ 車種別 標準&メーカーオプションナビ用 レクサス IS200t/IS250/IS350 ASE30/GSE31・35 などにお勧め 品番:TTN-18S


【純正】TOYOTA TANK トヨタ タンク【M900A M910A】  ペットシートカバー(2列目用)[08213-00430] 215/55R17 サマータイヤ タイヤホイールセット 【送料無料】Advanti ER-ADVANTI SPIESS 17x7.0 +53 114.3x5 BP + MAXIMUS M1 (215-55-17 215/55/17 215 55 17)マックストレック 夏タイヤ 17インチ 4本セット 新品

↓↓↓BLITZ NUR-SPEC VSR マツダ アテンザ GJ2FP用 (62132V)【マフラー】【自動車パーツ】ブリッツ ニュルスペック ブイエスアール【個人宅配送不可】【送付先が車関係の法人様のみ配送可】【通常ポイント10倍!】;[コブラ]C33系 ローレル用シートレール;235/55R17 BRIDGESTONE ブリヂストン BLIZZAK VRX2 ブリザック VRX2 BAHNS TECK VR-01 バーンズテック VR01 スタッドレスタイヤホイール4本セット, 【送料無料】 205/50R17 17インチ KYOHO 共豊 シュタイナーフォースド SF-V 6.5J 6.50-17 FALKEN ファルケン ジークス ZE914F サマータイヤ ホイール4本セット フジコーポレーション, ブリヂストン DUELER デューラー H/L 850 サマータイヤ 225/55R18 ブリヂストン ECOFORM エコフォルム CRS12 ホイールセット 4本 18インチ 18 X 7.5 +42 5穴 114.3, 18インチアベンシス250系WEDS ウェッズスポーツ SA-72R ハイパーブラッククリア 7.5Jx18Bluearth エース AE50 215/40R18, DUNLOP ダンロップ エナセーブ プレミアム ENASAVE PREMIUM サマータイヤ 205/60R16 HotStuff 軽量設計! G-SPEED G-04 ブラック ホイールセット 4本 16インチ 16 X 6.5 +38 5穴 114.3;[コブラ]HNP10系 プリメーラ(4WD)用シートレール ミツビシ デボネア 89.10~92.10 S11A ACRE(アクレ) ブレーキパッド ダストレスリアル 309 フロント 左右セット ブレーキ アクレ パッド↓↓↓イケヤフォーミュラ リア キャンバーアジャスターアッパーアーム(ピロタイプ) フェアレディZ Z32 ネガティブキャンバータイプ, 【エスペリア Espelir】デイズルークス 等にお勧め ダウンサスプラス / フロント用左右セット 型式等:B21A 品番:ESN-3431F, 【超低ダスト】Audi アウディ A7 4GCYPC用 フロントブレーキパッド+センサー+ローター 左右セット ☆送料無料☆ 当日発送可能(弊社在庫品の場合), ツーブラザーズレーシング フルエキゾースト M-2 02年-15年 ズーマー カーボン 005-2450107V HD店, エスペリア スーパーダウンサス リア左右セット CX-5 KF5P ESM-3012R ESPELIR Super DOWNSUS ダウンスプリング バネ ローダウン コイルスプリング【店頭受取対応商品】


↓↓↓↓↓↓↓↓↓↓↓↓

制動屋/セイドウヤ ブレーキパッド SM500 リア シビック FD1 SDY512, 2輪 旭風防/AF-ASAHI ウインドシールド SPC-19 ホンダ スーパーカブ110 EBJ-JA10 中国製 JAN:4560122612643, ACRE ダストレスリアル セルボ セルボ モード HG21S アクレ フロント用, クスコ カッパーディスク単品 クラッチ レガシィ BD5(B/C) EJ20T 93/10~98/5, D.SPEED S14 SILVIA SALT FLAT SPESIAL フロントバンパースポイラー(タイプI)

その他 ショウエイ(SHOEI) ヘルメット FREEDOM マットブラック XL ds-1426328;【最低でも5倍】 ブレーキパッド 低ダスト フォルクスワーゲン EOS イオス 2.0T 3.2 V6■ フロントセット■ 型式 1FBWA 1FBUB■ 年式 06/10~09/11■ LP1837■ 送料無料税込【smtb-F】 ADVANTAGE アドバンテージ SHOWA フロントフォーク 【正立】 43φ ボトムケース:ガンメタ/フォークチューブ:チタンナイトライトTin【Type-1T】 KYB(カヤバ) ショックアブソーバー ニューエスアールスペシャル リア左右セット マツダ キャロル HB36S 15/01- 品番:NSF1267;ミヤコ/Miyaco ホイールシリンダ WC-G223

【BLITZ ブリッツ】 テレビジャンパー オート/スイッチレスタイプ【TAT72】 (テレビキット互換品番:TTA564)プリウス50系など {TAT72[9980]};送料無料(一部離島除く)Winmax ARMA ATSリアシューSUZUKI MRワゴン(MRワゴン MF21S 型式指定11364(409138-))【smtb-td】 フジコーポレーション フジコーポレーション

、言語に合わせて読み替えてください。

使用するメソッドはAlgolia::Index#save_objects!です。ソースはこちら
記事を検索できるように、記事データを登録するために、記事データをJSON化する必要があります。

Middlemanの場合、幸い.jsonのついたファイルを作っておくだけで勝手にJSONを吐いてくれるので、とても楽でした。
なんて美味い話はなくて、多少は楽だったんですが、多少の工夫が必要でした。
記事データをJSON化しているのはこのファイルで、以下の通りです。

<%= all_articles.select{|a| a[:published]}.to_json %>

ここはとてもシンプル。公開されている記事だけフィルタしてJSON化してます。
ここで出てくるall_articlesは自作のヘルパです。このファイルに記述しており、以下の通りです。

helpers do
 # ...
 def all_articles
 blog.articles.map{|post|
 {
 objectID: Digest::MD5.hexdigest(post.slug),
 title: post.title,
 date: post.date,
 body: strip_tags(post.body),
 summary: strip_tags(post.summary),
 tags: post.tags,
 published: post.published?,
 locale: post.locale,
 slug: post.slug,
 path: post.data.path,
 }
 }
 end
 # ...
end
  • objectIDという一位なキーがAlgoliaに必要
  • 記事の本文や冒頭文はHTMLになってるので、HTMLを剥がす必要がある

という手を加えています。

Middlemanでstrip_tagsを使ってサマリーをplain textにする方法

という感じでMiddlemanなら簡単に記事データをJSON化できたので、あとはそれをクライアントライブラリに渡すだけです。 記事データの登録に成功すると、記事データがAlgoliaに登録されて、検索可能な状態になります。

検索機能を実装する

検索対象を登録したので、早速記事データを検索してみます。
実装の全体像はこちらを見るといいかと思います。

Reactと、Alminというユースケース駆動、CQRS、DDDと相性の良いFlux実装を使って実装してます。
Algoliaを使って検索する、という点はオリジナルですが、実装の雛形はAlmin公式のTODO MVCのチュートリアルがほぼ全てです。
データの取得方法と、取って来たデータの見せ方を変えただけ、という感じです。

In this guide, we’ll walk through the process of creating a simple Todo app.

Todo App · Almin.js

上記チュートリアルでMemoryDBというオンメモリの値をDBかのように振る舞うインフラレイヤのアダプタを参考に、Algolia用のインフラレイヤのアダプタを実装してあります。
Almin自体の詳細はもっとノウハウを貯めて別の記事にて書ければと思います。

記事を書いたら自動でAlgoliaにコンテンツが登録されるようにする

当ブログはTravis CIで事前にビルドしたものをデプロイしているので、
サイトのビルド・デプロイ時に自動的に記事データをAlgoliaに登録する処理を入れてみました。

configure :build do
 after_build do
 def update_search_index(path)
 Algolia.init application_id: ENV['ALGOLIA_APP_ID'], api_key: ENV['ALGOLIA_API_KEY']
 index = Algolia::Index.new(ENV['ALGOLIA_INDEX'])
 batch = JSON.parse(File.read(path))
 index.save_objects!(batch)
 File.delete(path)
 end
 update_search_index('./build/posts.json')
 end
end

build/posts.jsonは、先ほどのJSON化するためのファイルが出力される場所です。
Algoliaに登録したらもうJSONデータは使わないので消してあります。

これでmiddleman buildすれば自動的にAlgoliaに記事データが登録されます。
差分更新にするには記事の追加だけでなく変更や削除まで対応する必要があり、面倒だったので全件更新にしてます。
何か問題が起きたら差分更新にすると思います。

検索対象のデータと、レスポンスに含めるフィールドを調整する

記事の本文も検索対象に含めたかったのですが、記事本文が丸ごとレスポンスに入っているとデータ量が多くてパフォーマンスが出なかったので、調整をしました。

検索する側のパラメータは

 async find (keyword: string): Promise<PostList> {
 const algoliaOptions = {
 query: keyword,
 hitsPerPage: 1000,
 attributesToRetrieve: [
 'title',
 'summary',
 'tags',
 'path',
 'objectID',
 'date',
 'published',
 'locale',
 'slug',
 ]
 }
 const response: AlgoliaResponse = await this.index.search(algoliaOptions)
 // ...
 }

attributesToRetrieveを指定すると、レスポンスに含めるフィールドを指定できます。
記事本文をレスポンスから除外したら 【データシステム/DataSystem】TV-KIT テレビキット 切替タイプ 車種別 標準&メーカーオプションナビ用 ムラーノ PNZ51/TNZ51/TZ51 などにお勧め 品番:NTV318、かなりパフォーマンスが上がりました。

検索にマッチした箇所をハイライト表示

当サイトの検索機能はキーワードにマッチしたところがハイライトされるようにしてるのですが、
これは実装したわけではなく、Algolia側が勝手にやってくれてます。まじすごい。

レスポンスの中に_highlightResultというキーが入っており、ここにハイライト済みのHTMLが格納されています。
HTML文字列をそのまま表示させるので普通にReactは使えなくなってしまうのですが、
dangerouslySetInnerHTMLというpropを使うとお茶を濁せます。

まとめ

  • Algoliaはすごい
  • Algoliaで検索するときはレスポンスのデータ量を最小限にすると早い
  • Alminとても可能性を感じる、手に馴染む

他にも検索可能なフィールドを絞ったり、検索結果の優先度設定などパラメータをいじっているのですが、
それだけで一本記事書けるレベルに量が多くなると思うので、

【純正】TOYOTA TANK トヨタ タンク【M900A M910A】  ペットシートカバー(2列目用)[08213-00430]

、この記事では割愛します。

ぜひAlgoliaとAlmin試してみてください。

Tags:AlgoliaJavaScriptRubyMiddlemanReactAlminDDD
{yahoojp} {blog.leko.jp}
{yahoojp}jpprem01-zenjp40-wl-zd-82121