アプリの構想
バーチャル図書館アプリは、物理的な空間や建物がなくても自分で図書館をつくり、図書館を通して他のユーザーと交流できるアプリです。
プロダクト名はまだ決まっていません。
現状下記のような仕様を想定しています。
- 街をイメージしたバーチャル3D空間に自分の図書館を作れるWebアプリ
- 自分の図書館には自分が実際に持っている本や好きな本、読んでみたい本などを置ける
- 図書館を持つユーザー間で図書館の行き来が可能
- ユーザー同士で一緒に読書をしたりチャットをしたり交流が可能
技術スタック
現在想定している技術スタックは下記のとおりです。
- フロントエンド：Next.js (React) + TypeScript
- バーチャル空間：React Three Fiber（Reactで3D空間を構築するためのライブラリ）
- バックエンド/DB：Firebase（ユーザー認証、リアルタイムDB、ストレージ等）
- インフラ/デプロイ：Vercel & Firebase Hosting（インフラ管理の手間を最小化）
React Three Fiberで実現したいこと
React Three Fiber（以下R3F）は、Reactの構文でThree.jsを使って3Dコンテンツを記述できるライブラリです。
このライブラリを使用して、下記を実現したいと考えています。
- バーチャル3D空間に街をつくり、建造物や自然などのオブジェクトを配置する
- 街中でキャラクターを移動・行動させる
- 街中に図書館を建築する
- 建築した図書館内に本棚や本、椅子、机などを設置できる
- 街の天候や四季などを変化させることができる
FirebaseとAWSの比較
上記の仕様を実現するために、FirebaseとAWSの機能を比較検討しました。
| 機能 | Firebase | AWS | 比較 |
|---|---|---|---|
| ユーザー認証 | Authentication | Amazon Cognito | 簡易かつスピーディに導入したいならFirebase、大規模・エンタープライズ用途ならAWS |
| APIサーバー | Cloud Functions | API Gateway + Lambda | 小規模〜中規模なら Firebase、複数サービス連携やAPI構成を細かく設計したいならAWS |
| データベース | Firestore (NoSQL) | Amazon DynamoDB | リアルタイム性・柔軟な構造が必要ならFirestore、性能重視・厳格なデータ設計ができるならAWS |
| リアルタイム通信 | Firestoreの同期機能 | AWS AppSync（+ DynamoDB） | とにかく手軽にリアルタイム通信したいならFirestore、複雑なGraphQLベースのリアルタイム通信ならAWS |
| ファイル保存 | Cloud Storage | Amazon S3 | 中小規模の画像・動画管理ならFirebase、大量・多用途なファイル保存・配信ならAWS |
| ホスティング | Firebase Hosting | AWS Amplify Hosting | 静的Webアプリを素早く公開するならFirebase、複雑な構成（SSR, API統合）ならAWS |
FirebaseとAWSのハイブリッド構成
現状Firebaseで構築することが学習コストを抑えてよりスピーディーに開発することが可能ですが、今後の発展性を考えて、FirebaseとAWSのハイブリッド構成も検討しています。
下記が検討例です。
- 認証（Firebase Authentication）
- メールとパスワードに基づく認証
- フェデレーションIDプロバイダとの統合（Google、Facebook、Twitter等）
- ユーザー・図書館データ（Firestore）
- 柔軟な階層型データ構造に対応
- リアルタイム アップデート
- 同期・交流機能（Firestore or AppSync）
- シンプルなチャットや位置共有なら Firestore
- 複雑なイベント・通知が絡むなら AWS AppSync + DynamoDB
- 書籍検索API（AWS Lambda + API Gateway）
- Google Books APIなどをバックエンド経由で呼び出す
- LambdaでCORS制御やAPIキー管理などを行う
AWS AppSync + DynamoDBでどのような機能を実現できるか
ハイブリッド構成を採用した場合、最も学習コストが高いAWS AppSync + DynamoDBについて、バーチャル図書館アプリでどのように活用できるかについて調査しました。
| 機能 | AppSync + DynamoDBの活用例 |
|---|---|
| 📖 読書セッションの同期 | 同じ本を開いているユーザー一覧をリアルタイム表示（Subscription） |
| 💬 図書館内チャット | 図書館ごとのリアルタイムチャット（GraphQL Mutation + Subscription） |
| 📊 行動履歴 | 誰がどの図書館に何分滞在したかをDynamoDBに記録し分析 |
| 🔍 検索 | DynamoDB + Lambda連携で全文検索やタグフィルタなどに対応 |
| 🔐 認可 | 自分の図書館だけ編集可／他人のは閲覧のみ、などを認可設定で制御 |
今後のスケジュール
段階を踏んで、下記の通りに開発を進めていきます。
- フロントエンド技術の学習および開発（Three.js、Blender等、3D技術の勉強）
- Firebaseの導入をしてマルチプレイヤー化
- AWSを導入してハイブリッド構成に
- 月に一度Qiitaで進捗および学習記録の記事を更新