博士

やっほー、ロボ子！今日はAnnexUIっていう、MITライセンスのUIライブラリについて話すのじゃ！

ロボ子

AnnexUIですか、博士。それはどのようなライブラリなのでしょう？

博士

これがまたすごいんじゃ！開発者が数分でUIを立ち上げられるように設計されてて、クリーンでUXにめっちゃ焦点を当ててるらしいぞ。

ロボ子

数分で立ち上げられるんですか！それはすごいですね。具体的にはどうやるんですか？

博士

Typesenseクラスタを設定して、⌘kを押すとAnnexが起動するらしいぞ！今はまだ初期開発段階みたいだけど。

ロボ子

Typesenseクラスタを使うんですね。UIはどのように実装されているんですか？

博士

`<annex-search-widget>`っていうHTMLタグの中にカプセル化されてるみたいじゃ。このWebコンポーネントは、`show`、`hide`、`focus`みたいなメソッドを公開してて、開発者が操作できるんだって。

ロボ子

なるほど、Webコンポーネントとして提供されているんですね。レイアウトの種類も豊富なようですが。

博士

そうそう！`inline`、`modal`、`panel-left`、`panel-right`の4つのレイアウトをサポートしてるぞ。ダークモードやレスポンシブレイアウト、イベント処理もサポートしてるみたい。

ロボ子

ダークモードまで！CSS変数も65以上オーバーライド可能なんですね。カスタマイズ性が高くて便利そうです。

博士

しかも、データはCookieとかlocalStorageに保存されないらしいぞ。クエリはTypesenseクラスタにのみ送信されて、ミドルウェアは存在しないんだって。画像もbase64エンコードされてて、リモートで要求されないから安心じゃ。

ロボ子

セキュリティ面も考慮されているんですね。クエリの処理方式はどうなっているんですか？

博士

今はクエリに対して「後入れ先出し」アプローチを採用してるみたいじゃな。`searchRequestMethod`を`lifo`に設定するらしいぞ。

ロボ子

後入れ先出しですか。リアルタイム検索に向いていそうですね。設定オプションもたくさんありますね。

博士

`$container`、`autoFocusOnScroll`、`callbacks`、`chips`、`cluster`…いっぱいあるぞ！特に`cluster`はTypesense関連の認証情報が入ってるから、しっかり設定しないとね。

ロボ子

`cluster.apiKey`、`cluster.collectionName`、`cluster.hostname`など、Typesenseの設定が細かくできるんですね。

博士

そう！他にも、`colorScheme`でカラースキームを変えたり、`debug`でデバッグ情報を出したり、`keyboardShortcut`でショートカットキーを設定したりできるぞ。

ロボ子

キーボードショートカットは便利ですね！属性ベースのイベントも色々あるみたいですね。

博士

`data-annex-search="clear"`で検索クエリをクリアしたり、`data-annex-search="hide"`で非表示にしたりできるぞ。`data-annex-search-query="apple"`で特定のクエリを実行することもできるみたい。

ロボ子

イベントも豊富ですね。`result.click`、`results.empty`、`results.error`など、様々な状況に対応できそうです。

博士

メソッドもたくさんあるぞ！`disable`、`enable`、`focus`、`hide`、`show`…色々操作できるみたいじゃ。

ロボ子

`getConfig`で設定を取得したり、`setConfig`で設定を変更したり、`setMutator`でデータを変更したりもできるんですね。

博士

そうそう！`showToast`でトーストを表示することもできるぞ。Annexに含まれる唯一のサードパーティベンダーはLodashらしい。

ロボ子

Lodashだけなんですね。軽量で使いやすそうですね。博士、今日はAnnexUIについて色々教えていただきありがとうございました。

博士

どういたしまして！最後に一つ、AnnexUIを使うと、Typesenseの設定が面倒で、タイプセンスがない… なんちゃって！