概要
Folio は、小説を「3D の本」として読む仮想図書館の体験を提供する Web アプリです。本のデータを独自フォーマット（3D 標準フォーマット glTF の拡張として設計、JSON で表現）にまとめ、これを中心に「3D の本棚から本を取り出して読む読者向け画面」と「3D の本を編集・エクスポートする著者向け画面」を、ひとつの Web アプリの中に同居させています。本という物体性とデジタルの編集性を 1 つのアプリで両立しようとする実験的なプロジェクトです。
Overview
Folio is a single-page web app built around the idea of reading novels as 3D books. The book itself is stored in a custom JSON format designed as an extension to the glTF 3D standard. The app has two surfaces in one place: a reader-facing 3D bookshelf, where you pick a book off a shelf and read it; and an author-facing editor that lets you compose and export 3D books. It tries to keep the tactile feel of a physical book and the editability of a digital format inside one continuous experience.
動機・経緯
私が web に連載している小説を 3D 化して読者に届けられたら面白いと思ったというのが経緯です。
技術的なポイント
設計の指針を 4 つに絞って明文化しているのが特徴です。具体的には、表示・アプリケーション・ドメイン・インフラの 4 層に疎結合化すること、毎フレーム呼ばれる描画ループ内で新規オブジェクトを生成させずガベージコレクションの負荷を抑えること、ファイルフォーマット定義を一箇所のスキーマから自動的に型として導出する（仕様と実装が必ず一致する）こと、そして読書中の世界観に応じて環境を変化させるための入り口を最初のバージョンから確保しておくことの 4 点です。これらをカスタムの ESLint ルールとスキーマで機械的に保証する仕組みに落としています。テストは単体テストと E2E テストの二段構えで、Vite + TypeScript を採用したホットリロード前提の開発フローを取ります。
苦労した点・学んだこと
本の 3D モデル構築をプロシージャルな方法で実現するところが非常に苦労した点で、今なお課題でもあります。プロシージャルではなく既存の 3D モデルを使うべきかもしれません。
現状とこれから
2026 年 5 月開始の比較的新しいプロジェクトで、現在は「開いた本の中央くぼみ（紙の本のページが本の綴じ目に向かってわずかに凹む表現）」までが取り込まれた段階です。設計ドキュメントを継続的に更新しつつ、マイルストーンを切って段階的に機能を積み上げる進行をしています。今後の公開時期や配布形態はまだ未定です。