algolia: angular-instantsearchv2からv3へのアップグレード
V2の問題
v3にすれば使えるオプションが増えるのでぜひともアップグレードしたい。例えば現在はスマフォ対応できていない。リアルタイム検索なので文字入力すると瞬時に結果が返ってくるが、スマフォだとこんな具合↓
キーパット画面が邪魔で見えない。
完了をタッチして閉じると検索結果も消えてしまう。
アップグレードを試す
単純にアップグレードコマンドがうまくいかない
$ npm install --save instantsearch@^3
Not Found 404 エラーになる。
参考：Migration from v2 to v3
インストールを試す
なのでスクラッチインストールを試みた（必ずGitしてから作業）
参考：Installation
手順どおりにやってng buildすると次のエラー
import algoliasearch from 'algoliasearch/lite';
~~~~~~~~~~~~~
../node_modules/@types/algoliasearch/lite/index.d.ts:191:1
191 export = algoliasearch;
~~~~~~~~~~~~~~~~~~~~~~~
This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
これはtsconfig.jsonをいじってからビルドしなおすとできた。
参考：https://github.com/visjs/vis-network/issues/67
...
"allowSyntheticDefaultImports": true, <=追加
...
解決。
##### 今度はサーチできない。 サーチするとThe indexName option is required.のエラー。 
どうやらコンフィグの書き方が変わったようだ。
旧来の書き方
Config = {
appId: 'TOxxxxxxM',
apiKey: '8cefxxxxxxxxxxxxxxxxxxxc10',
indexName: 'comments'
}
新しい書き方
Config = {
indexName: 'comments',
searchClient: algoliasearch('TOxxxxxxM', '8cefxxxxxxxxxxxxxxxxxxxc10')
};
参考：What Is Angular InstantSearch?
はい解決。
### では``を編集 今までV2では以下のようにplaceholderしか生きなかった。
<ais-search-box placeholder="質問フォーラム内検索"></ais-search-box>
それが[searchAsYouType]="false"を追加してリアルタイム検索を解除できるように。
<ais-search-box placeholder="質問フォーラム内検索" [searchAsYouType]="false" submitTitle="検索" resetTitle="クリア">
エンターキーを押すか🔍をクリックorタッチしないと検索しないようになるので、スマフォで入力したあとキー画面を閉じて検索ボタン（🔍）をタッチしてから結果を表示するという操作ができるようになった。
…submitTitle="検索" resetTitle="クリア">で勝手にボタンができるのかと思ったがそうではない。🔍と✖にマウスオーバーすると文字が表示されるだけ。まあ良い。
参考：ais-search-box
ページネーション
ページネーションは以下のように。
<ais-pagination padding="2"></ais-pagination>
参考:pagination
サニタイズ
検索結果の表示はすべてサニタイズされている。コメント欄はHTMLの解釈を許すようにしたかったが無理なようだ。
### ソート カラム毎にソートしたりもできるようになった（replicaというものを作らなければならない）こんな感じ↓ 
今の所は必要ないがそのうち作ろうと思う。
参考：ais-sort-by
あとがき
algoliaインスタントサーチは情報が少ないので手探りでやっていくしかない。と思う。
参考：https://instantsearchjs.netlify.com/stories/?path=/story/basics-searchbox--search-on-enter