「AIと一緒にアプリ開発」第4弾：Web版プロトタイプ完成＆Firebase連携🎉💻

AI開発 アプリ開発日記 初心者でもできる開発

こんにちは、Rainbowです🌈

前回は、iPadプロトタイプの限界に気づき、Web版を作ることにした話をしました💡
今回は、ついに Web版プロトタイプ完成 ＆ Firebaseとの連携テスト までたどり着いたお話です📱🌐

Web版プロトタイプ完成！

Web版は基本的な操作画面と機能を実装済みです✨

  • iPhone・iPad・Windows どのデバイスでもアクセス可能

  • 操作画面はiPad版とほぼ同じUIで統一

  • ボタンやフォームの配置もAIと相談して最適化

初めて「自分の作ったアプリが複数デバイスで動く！」という感動を味わいました💖

Firebaseとつなげてみた

Web版はFirebaseを使ってデータを管理しています。

  • Firestoreにユーザーの入力データを保存

  • データのリアルタイム同期を確認

  • iPhoneで入力 → Web版ですぐ反映、逆もOK

最初は認証やセキュリティルールでエラーも出ましたが、AIと相談しながら段階的に修正。
「allow read/write: if request.auth != null」をうまく使って、権限管理もクリア👍

トラブルと解決ポイント💡

  • Firestore権限エラー → ルールを段階的に修正

  • GitHub Actionsでデプロイ失敗 → Secretsの更新と新トークン発行

  • PowerShell実行制限 → Set-ExecutionPolicy RemoteSigned で解決

初心者でもAIと相談すれば、こうしたトラブルも少しずつ解消可能です✨

ここまでのまとめ

  • iPadだけでの操作感は確認済み

  • Web版プロトタイプ完成、Firebaseと連携

  • 複数デバイスでデータ同期が可能に

  • トラブルはAIの助けで一つずつ解決

次回は、やっぱりiPhoneアプリを作りたい気持ちが収まらない。Mac環境が必須！💻

Rainbow 🌈