BookForgeの公開デモ｜本を探し、読書の振り返りにつなげる
BookForgeは、蔵書の整理から読書後の振り返りまでを一つの流れにするアプリです。今回公開したのは、架空の本とメモを使って画面を試せるポートフォリオデモです。登録せずに操作できます。
公開デモ： https://bookforge-portfolio-web.nuconeko-garden.com/
本の一覧を、次の読書につなげる
本を持っていること、読んでいること、読み終えたことは別の状態です。BookForgeでは、未読・読書中・読了などの状態に分類やタグを組み合わせ、今読みたい本を探し直せるようにしました。蔵書と「気になる本」も分けて扱います。
蔵書画面では検索、絞り込み、並び替えを試せます。書影を見渡すグリッド表示と、タイトルや著者を比較しやすいリスト表示も切り替えられます。「読書フォーカス」では、読書中の本、振り返りを残した本、次に読む本を確認できます。読み終えた本について要約、学び、次に試す行動を記録し、読書を日々の実践へつなげる考え方です。
公開デモに入れたもの、入れなかったもの
公開デモの本、著者、読書メモは架空のサンプルです。私用の蔵書やObsidianのVaultは公開環境へ持ち込んでいません。書影もデモ用の共通画像です。実際の個人データを公開せずに、検索や表示切替の使い心地を伝えるための環境にしました。
デモで加えた変更は、そのタブのsessionStorageへ一時的に保存します。共有の初期データは書き換わりません。タブを閉じてもブラウザのセッション復元で状態が残ることがあるため、確実にやり直すときは画面上部の「初期状態に戻す」を使ってください。実際の蔵書や個人的なメモを長期保存する場所としては使わないでください。
個人用アプリにはISBN登録、書誌検索、ObsidianへのMarkdown保存などがあります。公開デモはそれらの外部連携をすべて提供するものではなく、外部の書誌サービスやAI APIも呼び出しません。体験できる範囲を分けることで、作品の考え方を見せつつ、個人データとの境界を守っています。
Cloudflare上のデモ構成
画面はNext.js 15、React 19、TypeScript、Tailwind CSS v4で作りました。個人用の環境ではFastAPIとPostgreSQLを使いますが、公開デモは別の構成です。Web画面をOpenNextでCloudflare Workersに配置し、APIにはPython Worker、架空の初期データにはD1を使っています。
Web WorkerからAPI WorkerへはService Bindingで接続し、API Workerを一般向けのURLとして公開していません。ブラウザはWeb側を通して初期データを受け取ります。個人用データベースを公開環境に置かずに、操作できるデモを届けるための構成です。
まず蔵書画面でグリッドとリストを切り替え、状態や分類で絞り込んでみてください。次に読書フォーカスを開くと、「今読む」「振り返る」「次に読む」がどうつながるかを確認できます。デモで扱うのはサンプルデータですが、読書の記録を後から使える形にしたいという作品の意図は、実際の操作から伝えられると思います。