# このブログにAlgoliaのDoc Searchを導入してみています。

元々このブログを立ち上げたのは、いつでもサクっと試せるAlgoliaの日本語検索環境が欲しかったっていう話で、それにしては日々ダラダラと色んなことを書いてきてものだな?と思いますが、ようやく重い腰を上げてみることにしました。

# AlgoliaのDoc Searchでインデクシング

このブログはVuePressというエンジンを使っていて、オフィシャルのブログテンプレートを使っているのですが(ブログテンプレートでなくて、デフォルトのテンプレートだったらもっと話は単純だったのかな…とも思ったりしますが、、)

AlgoliaのDocSearchスクレイパーのDockerイメージを落としてきて、コンテンツをインデクシングするようにしました。詳細は後ほど書きますが、👇のようなconfig.jsonをパラメーターにするような感じで『 ./docsearch docker:run "./config.json" 』こんな風に叩くと、、

{
  "index_name": "yoshida.red",
  "start_urls": [
    {
      "url": "https://www.yoshida.red/",
      "selectors_key": ".content__default"
    }
  ],
  "stop_urls": [],
  "selectors": {
    "lvl0": ".content__default h1",
    "lvl1": ".content__default h2",
    "lvl2": ".content__default h3",
    "lvl3": ".content__default h4",
    "lvl4": ".content__default h5",
    "text": ".content__default p, li"
  }
}

ブワーッとインデクシングされていきます。

$ ./docsearch docker:run "./config.json"
> DocSearch: https://www.yoshida.red/ 7 records)
> DocSearch: https://www.yoshida.red/2020/03/06/eigo/ 26 records)
> DocSearch: https://www.yoshida.red/2020/03/07/friday/ 18 records)
> DocSearch: https://www.yoshida.red/2020/03/05/graphql/ 25 records)
> DocSearch: https://www.yoshida.red/tag/ 7 records)
〜略〜
> DocSearch: https://www.yoshida.red/2019/10/28/mojibake/ 12 records)
> DocSearch: https://www.yoshida.red/2019/10/28/yoshida-red-blog/ 11 records)
> DocSearch: https://www.yoshida.red/2019/10/28/natto-will-smith/ 13 records)
> DocSearch: https://www.yoshida.red/2019/10/28/kowichi-no-lease/ 12 records)
> DocSearch: https://www.yoshida.red/2019/10/30/curry/ 13 records)
> DocSearch: https://www.yoshida.red/2019/10/31/domestic-court/ 10 records)
> DocSearch: https://www.yoshida.red/2019/11/01/local-govenment-office/ 10 records)

Nb hits: 2700

# VuePressのブログ上でAlgoliaのdocsearch.jsを使ってクエリ

あとは自前でゴニョゴニョ書いたAlgoliaSearchBox.vueが動けば…と思っていたのですが、VuePressのブログプラグインをconfig.jsだけでレイアウトとか含めてイイ感じにやるのは無理そうだったので、node_modulesの@vuepressの中のtheme-blogの中身をコピってきて、自分のローカルに配置してゴニョゴニョやったらそれっぽく動かせるところまではきましたよ、と。(この辺も細かいところは後から書いていきたいと思います。)

Algolia Search

が、モバイルだと👇のようにうんともすんとも言わなくなってしまうのはなんでだろう〜。笑

Algolia Mobile Search

んま、来週あたりホゲホゲしつつ、Query Suggestionもーってな感じで。

あー、ってか投稿する時にスクレイピングのスクリプトも叩くようにしなきゃいけないのなぁ。自分のMacのcronとか言うのもアレだし、クラウド上でやるようにしますかねぇ、と。

んま、今日のところはこれまで。

このエントリーをはてなブックマークに追加

Algolia検索からの流入のみConversionボタン表示