YattecastのページにAlgoliaの検索バーを追加してみた話

algolia.fmというドメインでPodcastをはじめることにして、Yattecastをforkして〜みたいなブログを昨日書きましたが、今日はめでたくその初収録を終えて、今は録音した音声ファイルの編集作業を半田さんに行ってもらっています。

私の方はせっかくAlgoliaのPodcastなのでウェブサイトにAlgoliaの検索バーを付けてみました。

会社の同僚たちのリアクション

今日はパリの同僚とロンドンの同僚とそれぞれ1on1があったのだけど、『おー、イイじゃん』みたいに言ってくれて、俺も出たい的なことを言ってもらえたので、ひとまず胸をなでおろしているところではあるのですが、実際に自分の声を聞いたら軽くショックなのかなーなんて思いつつ、昔読んだパブリックスピーカーの告白という本(オライリーでしか買えなくなってる？)で、自分の中では最大限にテンパってても、実際に聴いてる人は大してなんとも思ってない、みたいな記述に助けられて前職でも登壇をこなしていたタイプです(綿密に下準備しなさいっていう話ではあるのですが…)

今日学んだこと - JavaScript編

今回はバニラなJSのInstantSearch.jsを使ったのですが、検索バーはおまけみたいなものなので、デフォルトでのempty queryを表示させないようにしました。

ググればすぐ出てくる感じですが👇のようにinstantsearchのインスタンスを生成する時に表示させないようにする。ただ、これだとqueryそのものは飛ぶように思うので、無駄なクエリを発行させないっていう意味だと、以前Vue InstantSearchでやったように、空だったらAlgoliaに検索に行かずに擬似的に0件の結果を返す的なことをやらないと超人気サイトのトップページとかだと辛いかも(まぁ、そんな人気サイトだったら画面表示と同時に検索エンジンが叩かれるのかもしれませんが…)

const search = instantsearch({
  indexName: "xxxx",
  searchClient,
  searchFunction(helper) {
    const container = document.querySelector('#hits');
    container.style.display = helper.state.query === '' ? 'none' : '';

    helper.search();
  }
});

そして、npm install〜とか嫌だったので(というか他のJSファイルもCDNから取ってくる形になってた)👇のようにjsdelivrからalgoliasearchとinstantsearchを読み込むにようにしてみました。最後のapp.jsに上記で記載したAlgolia検索に関する実装(って言ってもwidget足してるだけだけど…)が入っています。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/2.23.4/mediaelement-and-player.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script>
<script src="js/app.js"></script>

今日学んだこと - CSS編

SCSSっていうビルドする時にCSSにコンパイルしてくれる機構が使われていて、今回は検索用に css/blocks/_search.css というファイルを作って、そこに検索バーのデザインとかヒットした文言のフォントサイズとか色とかを設定しました。特に検索ボックスとかは、色々設定項目が多いのでネスト(入れ子)にして書けると便利だなーと思ってたのですが、色々試したら逆に全部消してpaddingだけにした方がスッキリしたので結果👇だけになりました。笑

#searchbox {
  div.ais-SearchBox {
    padding: 10px;
  }
}

.hit-title {
  color: $color-text-light-secondary;
  font-size: 0.9rem;
}

.ais-Highlight-highlighted {
  color: $color-text-dark-primary;
}

これを main.scss の中で @import "blocks/search"; という風にインポートしてあげたら、あとはビルド君にお任せ。

クローラー

そう言えば、cheerio-httpcliでスクレイピングしてJSONを作ってAlgoliaに登録するコードも書いたのだけど、ほぼこのyoshida.redのコードをコピって編集しただけですみました。

---

そんなこんなで当初の目標だった今週中に公開するっていうのが実現出来そうな予感です。