AlgoliaのVoice searchで本ブログを検索する

AlgoliaのVoice search

AlgoliaのVoice searchに関しては👇この辺のYoutubeのビデオとか、

👇この辺のブログ記事とかをご覧いただきたいのですが、

今注目すべき音声検索の5つのトレンド – 5 voice search trends to look out for

実際のところ日本語でどうなの？というお問い合わせをいただくことがあるので、このブログで試してみたいと思います。

InstantSearch.jsを導入

まずは検索用のページを作っていきます。とりあえずsearch.mdっていう名前で。 👇中身はコレだけ。笑

## Algolia voice search

<VoiceSearch />

VuePressでは .vuepress/components の下にVueファイルを置くと上記のようにコンポーネントとして呼び出せるようになっています。

ということで、VoiceSearch.vueというファイルを作っていきますが、やってることはまんま👇です。

ais-voice-search | Vue InstantSearch | API parameters | API Reference | Algolia Documentation

"横浜"で音声検索した結果

録画したのをYoutubeにアップロードしてみました。検索結果のUIがショボ過ぎてアレがアレですが(笑)、とりあえず検索は出来るようにはなったかと思います。

Web Speech API

Vue InstantSearchでは、Web Speech APIを使っています。ということで、使っているブラウザとかプラットフォームによっては動かない可能性がございますので、ご了承くださいませ。(今のところChromeでしか動かなそうです)

試してみたい方は

👇コチラでどうぞ。

https://yoshida.red/search.html