FlutterFireアプリ完全セットアップガイド
別アカウント・新規プロジェクト対応版

Windows の場合

1. Flutter SDKをダウンロード
   • Flutter公式サイトから最新版をダウンロード
2. インストール先を決定
   • 推奨: C:\flutter
   • 注意: Program Files フォルダは避ける（権限の問題）
3. ZIPファイルを解凍
   • ダウンロードしたZIPファイルを C:\ に解凍
4. 環境変数PATHに追加
   • 「システムのプロパティ」→「環境変数」を開く
   • 「Path」を編集
   • C:\flutter\bin を追加
5. インストール確認
   flutter doctor

macOS の場合

1. Flutter SDKをダウンロード
   cd ~
   curl -O https://storage.googleapis.com/flutter_infra_release/releases/stable/macos/flutter_macos_arm64_stable.zip
   unzip flutter_macos_arm64_stable.zip
2. PATHに追加
   echo 'export PATH="$PATH:$HOME/flutter/bin"' >> ~/.zshrc
   source ~/.zshrc
3. インストール確認
   flutter doctor

1. Node.jsをダウンロード
   • https://nodejs.org/ から LTS版をダウンロード
2. インストーラーを実行
   • デフォルト設定のままインストール
3. インストール確認
   node --version
   npm --version

1. Firebase CLIをインストール
   npm install -g firebase-tools
2. インストール確認
   firebase --version
3. Firebaseにログイン
   firebase login
   • ブラウザが開くので、Googleアカウントでログイン
   • 権限の許可を求められたら「許可」をクリック

1. FlutterFire CLIをインストール
   dart pub global activate flutterfire_cli
2. PATHの確認
   • Windows: %LOCALAPPDATA%\Pub\Cache\bin がPATHに含まれているか確認
   • macOS/Linux: ~/.pub-cache/bin がPATHに含まれているか確認

1. Firebaseコンソールを開く
   • https://console.firebase.google.com/ にアクセス
2. 「プロジェクトを追加」をクリック
3. プロジェクト名を入力
   • 例: my-rehab-app
   • 注意: プロジェクトIDは自動生成されます（例: my-rehab-app-abc123）
4. Google Analyticsの設定
   • オプション: 後で有効化することも可能
   • 推奨: 無効のまま進む（シンプルな設定のため）
5. 「プロジェクトを作成」をクリック
   • 完了するまで数十秒待つ

1. Firebaseコンソール → Authentication
2. 「始める」をクリック
3. 「Sign-in method」タブをクリック
4. 「メール/パスワード」を選択
5. 「有効にする」トグルをONにする
6. 「保存」をクリック

1. Firebaseコンソール → Firestore Database
2. 「データベースの作成」をクリック
3. セキュリティルールを選択
   • テストモード: すべてのアクセスを30日間許可（開発用）
   • 本番モード: すべてのアクセスを拒否（推奨、後でルールを設定）
   • 推奨: 本番モードを選択
4. ロケーションを選択
   • 推奨: asia-northeast1 (東京)
   • 注意: 一度選択したら変更不可
5. 「有効にする」をクリック

1. Firebaseコンソール → Storage
2. 「始める」をクリック
3. セキュリティルールを確認
   • デフォルトは認証済みユーザーのみアクセス可能
4. ロケーションを確認
   • Firestoreと同じロケーションが推奨
5. 「完了」をクリック

1. 作業ディレクトリに移動
   # Windows の例
   cd C:\Users\YourName\work
   
   # macOS/Linux の例
   cd ~/work
2. Flutterプロジェクトを作成
   flutter create my_app
   • my_app は任意のプロジェクト名に変更可能
   • 注意: アンダースコア区切り、小文字のみ使用
3. プロジェクトディレクトリに移動
   cd my_app

1. pubspec.yaml を開く
   • VSCode、Android Studio、またはテキストエディタで開く
2. dependencies セクションに追加

   dependencies:
     flutter:
       sdk: flutter
   
     # Firebase
     firebase_core: ^3.0.0
     firebase_auth: ^5.0.0
     cloud_firestore: ^5.0.0
   
     # UI
     cupertino_icons: ^1.0.2

3. パッケージをインストール
   flutter pub get

1. FlutterFire CLI を実行
   flutterfire configure
   • Windows で実行できない場合は、フルパスを使用：
     dart pub global run flutterfire_cli:flutterfire configure
2. Firebaseプロジェクトを選択
   • 矢印キーで作成したプロジェクトを選択
   • Enterキーで確定
3. プラットフォームを選択
   • スペースキーで選択（複数選択可）
   • 推奨: web を選択
   • モバイルアプリも開発する場合: android, ios も選択
   • Enterキーで確定
4. パッケージ名の入力（Android/iOS を選択した場合）
   • Android: com.yourcompany.yourapp
   • iOS: 同じBundle IDを使用

• 既存のプロジェクトに Web サポートを追加
• web/ ディレクトリが作成されます

lib/main.dart を以下の内容で編集：

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

void main() async {
  // Flutter の初期化を確実にする
  WidgetsFlutterBinding.ensureInitialized();

  // Firebase の初期化
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My Rehab App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('My Rehab App'),
      ),
      body: const Center(
        child: Text(
          'Welcome to My Rehab App!',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

lib/screens/auth_screen.dart を作成し、認証機能を実装します。詳細は、既存のプロジェクトの auth_screen.dart を参考にしてください。

1. firebase ディレクトリを作成
   mkdir firebase
2. firestore.rules ファイルを作成

   firebase/firestore.rules に以下を記述：

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
       // 認証済みユーザーのみアクセス可能
       match /{document=**} {
         allow read, write: if request.auth != null;
       }
     }
   }

1. Firebase プロジェクトを初期化
   firebase init
2. 使用する機能を選択
   • Firestore を選択（スペースキーで選択）
   • Hosting を選択
   • Enterキーで確定
3. 既存のプロジェクトを選択
   • 作成したFirebaseプロジェクトを選択
4. Firestoreの設定
   • Rules file: firebase/firestore.rules (既にある場合はそのまま)
   • Indexes file: デフォルトのまま
5. Hostingの設定
   • Public directory: build/web
   • Configure as SPA: Yes
   • Set up automatic builds: No

1. アプリを起動
   flutter run -d chrome
   • Chromeブラウザでアプリが開きます
   • ホットリロード対応（コード変更が自動反映）
2. 動作確認
   • 画面が正常に表示されるか確認
   • F12 で開発者ツールを開いてエラーがないか確認

1. Webアプリをビルド
   flutter build web
   • build/web ディレクトリに本番用ファイルが生成されます
   • ビルドには数分かかる場合があります

1. Firestoreルールをデプロイ
   firebase deploy --only firestore:rules
2. Hostingにデプロイ
   firebase deploy --only hosting
   • デプロイ完了後、URLが表示されます
   • 例: https://your-project-id.web.app

1. URLにアクセス
   • デプロイ時に表示されたURLをブラウザで開く
2. 画面表示の確認
   • ホーム画面が正常に表示されるか
   • レイアウトが崩れていないか
3. 認証機能のテスト
   • 新規ユーザー登録を試す
   • ログイン・ログアウトを試す

1. Authentication
   • 登録したユーザーが表示されるか確認
2. Firestore Database
   • 作成されたドキュメントが表示されるか確認