制作実績の一覧へ

書籍検索

きんあり

きんありは、Kindle Unlimited対象として収録した書籍を、書名、著者、テーマ、レビューから探せる静的サイトである。確認済みの書籍をCSVで管理し、ASIN(Amazonの商品識別子)を軸に記事や個別ページを結ぶ。検索はページに埋め込んだ書籍データをブラウザ内で絞り込む。

公開サイトを見る (新しいタブ)
きんありの画面

技術スタック

きんありで使用する技術と役割
技術このサイトでの役割
AstroCSVと記事コレクションから検索画面、特集記事、対象書籍の個別ページをビルド時に静的HTMLとして生成する。
CSV / Papa Parse書籍のASIN、書名、著者、タグ、レビューをCSVから読み取り、表示用の型付き書籍データへ変換する。
Fuse.jsブラウザに渡した書籍データを、書名、著者、レビュー、タグを対象にあいまい検索し、結果を画面に表示する。
MDX特集記事に書籍のASINを記録し、CSVの書籍情報を記事内のカードや個別ページと識別子で結び付ける。

処理の流れ

  1. 書籍をCSVに登録

    ASINと書名、著者、タグ、レビューを読み込み、ASINから紹介リンクを組み立てた書籍データをビルド時に作る。

  2. 記事の参照を検査

    公開記事に記したASINが書籍CSVにあるか、記事内の書籍参照が範囲内かをビルド前に確認する。

  3. 検索と個別ページを生成

    レビューのある書籍を検索用JSONへ変換し、条件を満たす書籍にはASIN別の静的ページを生成する。

実装の工夫

ASINでデータを接続

書籍CSVを中心に、特集記事の書籍参照、個別ページ、Amazonへの紹介リンクをASINで結んでいる。記事側に書誌情報を重複して持たせず、書籍カードは登録済みデータから引く構成である。

参照切れをビルド前に検出

チェック用スクリプトは記事frontmatterのASINをCSVと突き合わせる。書籍カードの添字が記事のASIN配列を越える場合や、個別ページ用ノートが参照する書籍の欠落も検出し、ビルドを止める。

レビューを軸に検索

検索画面はレビューがある書籍を対象に、Fuse.jsで書名、著者、タグ、レビューを検索する。テーマ別タグの絞り込みもブラウザで行い、個別ページがある書籍はサイト内へ、ない書籍は紹介リンクへ導く。

構成と制約

実装確認:

制作実績の一覧へ戻る