WebアプリをClaudeCodeで作成しました⑤
hatake_sr全5回 ― 第5回
Firebaseのセキュリティ警告
毎日こんなメールが届くようになりました。
「すべてのユーザーがデータベース全体を読み取ることができます」
「すべてのユーザーがデータベース全体に書き込むことができます」FirebaseのAPIキーはHTMLのソースコードに記載されているため、技術的な知識がある人なら管理画面を開かずに直接データベースに書き込める状態です。
リスクの判断
このアプリに保存されているデータを確認しました。
- 営業中/準備中
- 卓の状況
- お知らせ・イベント
- 店舗情報（電話・住所）
全て公開情報です。個人情報・決済情報は一切ありません。最悪いたずらされても、管理画面で即修正できます。セキュリティ対策の手間とリスクのバランスを考えて、現時点はそのまま運用という判断をしました。
完璧なセキュリティを目指すよりも、リスクの大きさに見合った対策をするという考え方も大切です。
データのバックアップ方法
万が一データが壊された場合に備えて、定期的にバックアップを取っています。
エクスポート（バックアップ）
- Firebase コンソール → Realtime Database
mahjong_statusノードをクリック- メニュー → Export JSON → ファイルを保存
インポート（復元）
- 同じくメニュー → Import JSON
- 保存したファイルを選択
お知らせ・イベント・ルール・FAQ・店舗情報、全て含まれます。保存場所はプロジェクトフォルダの外（デスクトップやGoogle ドライブ）に。プロジェクトフォルダに入れるとGitHubに上がってしまいます。
今後の課題
デザインのクオリティを一発目から上げたい
今回の開発で一番難しかったのは、最初から完成度の高いデザインを引き出すことでした。「かっこよくして」だけでは曖昧すぎて、何度もやり直しが発生。次回はこんなテンプレートを使ってみたいと思っています：
【デザイン指示テンプレート】
雰囲気：ダーク / ライト / ミニマル / ポップ
カラー：メイン○○、アクセント○○
フォント：見出し○○、本文○○
参考：（スクリーンショット or URL ＋ 「この部分」）
重視：読みやすさ / インパクト / 高級感汎用的に使えるプロンプトを作りたい
機能追加・デザイン変更・バグ修正、それぞれの場面で使えるプロンプトのパターンを蓄積していきたいです。
まとめ
- コードが書けなくてもアプリは作れる
- 一度に詰め込まず、1つずつ確認しながら進める
- 複数のAIを使い分けると効率が上がる
- エラーはそのまま貼り付ければ解決してくれる
- デザイン指示はスクリーンショット＋言葉が最強
- セキュリティはリスクと手間のバランスで判断する
今回かかったAIのコストは月あたり約5,800円（Claude Code Proプラン月額22ドル＋Gemini年間契約200ドルの月割り）。プロのエンジニアへの外注費と比べれば、ほぼゼロに近いコストでアプリが完成しました。
AI開発のハードルはどんどん下がっています。「やってみたい」という気持ちがあれば、誰でも始められます。コードの知識が無くてもアプリが作れてしまいます。友人の麻雀店をよろしくお願いいたします。まーじゃんらんどピノ
