概要
読んだ本の知見と、仕事への活かし方を記録する書評管理アプリ。評価・タグ・検索で整理でき、Proプランでは端末間の同期と表紙画像の保存に対応する。
画面づくりから、ログイン、クラウド同期、サブスクリプション課金までを実装。
技術構成
当初はAWS Amplifyでバックエンドを構築し、公開にあたって開発・運用のしやすさを優先してFirebaseへ移行した。設計から実装、デバッグまでをClaude Codeと共に進めている。
開発支援
Claude Code
機能追加・リファクタリング・デザイン修正まで、実装の大部分をClaude Codeとの対話で進行
フロントエンド
JavaScript（Vanilla） + Stripe.js
フレームワークを使わず、HTML・CSS・JavaScriptで画面を実装。決済フォームにStripe.jsを組み込み
バックエンド（現行）
Firebase
Authentication・Firestore・Storageで、ログイン、データ同期、表紙画像の保存を実装
バックエンド（初期版・現在未使用）
AWS Amplify
Lambda・DynamoDB・API Gatewayで構築した最初のバックエンド。Firebase移行後は停止中
主な機能
1. 書評の記録と整理
- 書評の追加・編集・削除と、5段階評価
- ハッシュタグでの分類
- ドラッグ＆ドロップでの並び替え、リスト表示とグリッド表示の切り替え
2. 検索・並び替え・絞り込み
- タイトル・著者・メモ本文からのキーワード検索
- 登録順・評価順・タイトル順での並び替え
- タグと評価での絞り込み
3. データの保存と持ち運び
- ログインなしでも使えるよう、ブラウザ内（LocalStorage）に自動保存
- JSON形式でのエクスポートとインポート（上書きか結合かを選択）
4. クラウド同期と表紙画像（Pro）
- Firebase Authentication・Firestoreによる端末間の同期
- 表紙画像をブラウザ内で縮小し、Firebase Storageに保存
5. 収益化の仕組み
- Stripeによる月額$5のProプラン
- 書籍ごとのAmazon・楽天アフィリエイトリンクと、広告枠
- 特定商取引法に基づく表記と使い方ページの整備
成果
- 無料プランとProプラン（月額$5）の2段構成で、課金までの導線を実装
- ログインなしで始められ、必要になったらクラウド同期へ移れる構成
- AWS AmplifyからFirebaseへのバックエンド移行を、無停止で実施
学び
-
無料と有料の線引き
端末間の同期と表紙画像という、使い続けるほど価値が増す機能をProに。何を無料にするかが、続けて使ってもらえるかを左右すると実感。
-
作って終わりにしない
決済、法的な表記、使い方の案内までそろえて、はじめてサービスとして公開できる。実装の外側にある仕事の多さを体感。
-
見た目が使われ方を決める
入力欄やボタン、一覧の見せ方を何度も作り直し、記録を続けたくなる画面を追求。