Algolia

全文検索できるよ。あいまい検索やヒットした単語の強調などできて、日本語もOKだったり。

Algolia登録

  1. Algoliaのアカウント作成
  2. New AppligacionからAppsを作成
    • アプリ名はあとからでも変えられる
    • Community(free) planで問題ないかと（ロゴ表示必須）
    • 地域を選んでCONTINUE WITH JAPAN AS MAIN DATA CENTERへ + Dashbordが出てくるが、Community(free) planを使うにはBrand Assetsが必須
  3. Apps→API keysに必要な情報が
    • Application ID
    • Search-Only API Key
    • Admin API Key

続きは、JekyllやBloggerなどへ。
の予定だったのだが。

サイトからindexを作成

古すぎて（しかも構造がめちゃくちゃ）無理だろうと諦めていたサイトがあるのだが、algolia-webcrawlerなるものを発見。
sitemap.xmlなどを潜って行くタイプなので、ページネーションやら何やらを気にしなくても可能。
ただ、なにぶんWindowsにGit Bashを突っ込んでいる環境なので、この説明は完全に誰得。

  1. （無ければ）Xml Sitemap Generatorなどでsitemap.xmlを作成し、FTPで放り込んでおく
  2. npmでインストール 
    $ npm i algolia-webcrawler -g
  3. config.jsonのサンプルなどを参照にconfigファイルを作る
    • APPSを作成したときのキーなどが必要
    • API Parametersにあるような設定はほとんど設定できる
    • その他いろいろ取り込んだり1
    • “blacklist”にセットできるのはURL（キーワードではない）
  4. 本文取得のpluginを作成2
    config_plugin.js
  5. 実行 
    $ algolia-webcrawler --config <jsonな設定ファイル>

で、ずらずら～っと登録完了。

実は本文をサンプルのようにタグを指定3したり、またはbodyでざっくり取得していたのですが、そうすると本文データが分割されてしまってたんですよね。
pluginでjsなスクリプトを作って実行すると解決できた。

余談ですが、過去にiso-2022-jpで作ってて、しかもCloudflareを噛ませていると、文字化け地獄になります。
CloudflareのPage RulesでEmail Obfuscation: Offにしたり、見知らぬ言語4でpluginsを作ろうとしたりあがいてみましたが、最終的には全部UTF-8な文字コードに変換5し、中途半端に書いてあったcharsetも置換6し、.htaccessにAddDefaultCharset UTF-8を追加しました。

検索

instantsearchのバージョンが2から3に上がったので、いろいろ変わったようです。

ページネーションあり

まずはページをこんな感じで。 イチから見た目を整えるのなら、こっちの.cssを呼び出す。

@import url('https://cdn.jsdelivr.net/npm/[email protected]/themes/algolia-min.css');

スクリプトの最新情報はInstallation を、cssはCustomize an Existing Widget を確認。

スクリプト。 ぐりぐりカスタマイズするなら、cssClassesでclassを追加できる。

無限スクロール

ついでに無限スクロールバージョンも。
ページは「ページネーションあり」から一部削除してこんな感じに。

<div id="searchbox"></div>
<div id="powered-by"></div>
<div id="stats"></div>
<div id="hits"></div>

スクリプトはこうなる。

無限スクロール(connectors無し)

上記の方法だとページによっては無限スクロールにしてくれないので、スクリプト的に頑張ってみた。

データバックアップ

コマンドプロンプトが使えて、その他いろいろ導入済みという前提の誰得記録。

前準備

$ npm install --save algoliasearch
$ npm install --save json

Rubyの場合

require 'json'
require 'algoliasearch'

Algolia.init(application_id: 'アプリケーションID',
             api_key:        'API Key')

index = Algolia::Index.new('インデックス名')

hits = []

index.browse do |hit|
  hits.push(hit)
end

File.write('index_filename.json', hits.to_json)

Node.jsの場合

const algoliasearch = require('algoliasearch');

const client = algoliasearch('アプリケーションID', 'API Key');
const index = client.initIndex('インデックス名');

const fs = require('fs');
const browser = index.browseAll();
let hits = [];

browser.on('result', content => {
  hits = hits.concat(content.hits);
});

browser.on('end', () => {
  console.log('Finished!');
  console.log('We got %d hits', hits.length);
  fs.writeFile('index_filename.json', JSON.stringify(hits, null, 2), 'utf-8', err => {
    if (err) throw err;
    console.log('Your index has been exported!');
  });
});

browser.on('error', err => {
  throw err;
});

  1. 日記の日付が時期によってバラバラだったのでうまい具合に拾ってみた

    • bタグで囲っていた期（1990年代）
    • h4タグで囲っていた期（1990年代）
    • div.dateで囲っていた期（2000年以降）

    ↩

  2. スクリプトのpath指定が面倒なら、AppData\Roaming\npm\node_modules\algolia-webcrawlerにスクリプトを。 ↩

  3. 昔はtableやblockquoteタグでレイアウトしているのもありましたし… ↩

  4. 当時。しかもちゃんと調べてみたらJavascriptでコードを書いて処理すればいいと判明。 ↩

  5. コマンドが面倒or苦手なら、Windows的にKanjiTranslatorなどを使ったり。 ↩

  6. 同じく、TextSSを使ったり。って、そもそも古くから携わっている人で「黒い画面」が苦手な人って少ない気がする。 ↩