書籍検索
きんあり
きんありは、Kindle Unlimited対象として収録した書籍を、書名、著者、テーマ、レビューから探せる静的サイトである。確認済みの書籍をCSVで管理し、ASIN(Amazonの商品識別子)を軸に記事や個別ページを結ぶ。検索はページに埋め込んだ書籍データをブラウザ内で絞り込む。
公開サイトを見る (新しいタブ)
技術スタック
| 技術 | このサイトでの役割 |
|---|---|
| Astro | CSVと記事コレクションから検索画面、特集記事、対象書籍の個別ページをビルド時に静的HTMLとして生成する。 |
| CSV / Papa Parse | 書籍のASIN、書名、著者、タグ、レビューをCSVから読み取り、表示用の型付き書籍データへ変換する。 |
| Fuse.js | ブラウザに渡した書籍データを、書名、著者、レビュー、タグを対象にあいまい検索し、結果を画面に表示する。 |
| MDX | 特集記事に書籍のASINを記録し、CSVの書籍情報を記事内のカードや個別ページと識別子で結び付ける。 |
処理の流れ
書籍をCSVに登録
ASINと書名、著者、タグ、レビューを読み込み、ASINから紹介リンクを組み立てた書籍データをビルド時に作る。
記事の参照を検査
公開記事に記したASINが書籍CSVにあるか、記事内の書籍参照が範囲内かをビルド前に確認する。
検索と個別ページを生成
レビューのある書籍を検索用JSONへ変換し、条件を満たす書籍にはASIN別の静的ページを生成する。
実装の工夫
ASINでデータを接続
書籍CSVを中心に、特集記事の書籍参照、個別ページ、Amazonへの紹介リンクをASINで結んでいる。記事側に書誌情報を重複して持たせず、書籍カードは登録済みデータから引く構成である。
参照切れをビルド前に検出
チェック用スクリプトは記事frontmatterのASINをCSVと突き合わせる。書籍カードの添字が記事のASIN配列を越える場合や、個別ページ用ノートが参照する書籍の欠落も検出し、ビルドを止める。
レビューを軸に検索
検索画面はレビューがある書籍を対象に、Fuse.jsで書名、著者、タグ、レビューを検索する。テーマ別タグの絞り込みもブラウザで行い、個別ページがある書籍はサイト内へ、ない書籍は紹介リンクへ導く。
構成と制約
- 検索対象はCSVに登録され、レビュー本文を持つ書籍である。検索条件の処理にはブラウザのJavaScriptを使う。
- ASIN別ページは全書籍を機械的に作らず、記事で紹介された本か個別ノートがある本など、実装上の条件を満たすものに限る。
実装確認: