Flutter : Cloud Firestore からデータの読み込みと保存続いてiPhone

Flutter + Firestore の利用をAndroidで確認したので、それを iPhoneで動かしてみる。

のだが、いろいろ準備が大変。

備忘のために以下にまとめておく。

1.開発者登録

まず、開発用のiPhone1台だけに入れる場合 – 無償の Apple Developer に登録すれば可能。以下から登録する。

https://developer.apple.com/

App Store などでアプリを配布するためには、年会費が必要な Apple Developer Program に登録する必要あり。

2. Flutter SDKを macOSへインストール

https://flutter.dev/docs/get-started/install/macos

上記サイトを参照し、以下を行う。

  1. sdkダウンロード
  2. unzipで解凍
    1. ユーザーホームディレクトリ/opt/flutterに解凍
  3. .bash_profile にPATH登録
    1. 末尾に追記 export PATH=”~/opt/flutter/bin:$PATH”
  4. flutter doctor コマンドで必要な作業のチェックとヘルプ

$ flutter --version
Flutter 1.12.13+hotfix.8 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 0b8abb4724 (9 weeks ago) • 2020-02-11 11:44:36 -0800
Engine • revision e1e6ced81d
Tools • Dart 2.7.0
delhi:~ hirotoyagi$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.8, on Mac OS X 10.15.3 19D76, locale ja-JP)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.4)
[✓] Android Studio (version 3.6)
[✓] VS Code (version 1.43.2)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

3.Xcode の設定

  1. xcodeのインストール
    1. App Store もしくは Apple Developer
      から ダウンロードしXcodeをインストール
  2. command line tools の有効化
    • sudo xcode-select –switch /Applications/Xcode.app/Contents/Developer/
    • sudo xcodebuild -runFirstLaunch
  3. cocoapods のインストール
    • sudo gem install cocoapods
    • pod setup
  4. シミュレーター起動
    • open – a Simulator
  5. プロジェクト作成の場合
    • flutter create my_app
  6. プロジェクトディレクトリで実行
    • flutter run

4.プロジェクトにFirebaseを統合

WindoWindows + Android Studio で動作確認したプロジェクトファイルを、MacにGitを経由してコピー

4.1 プロジェクトフォルダで以下を実行しXcodeで起動する

android_studio_project

4.2 バンドルIDを登録する

0512_ios_bundle_id2

4.3 Team に開発者情報を選択する

Flutter_xcode_sign

4.4 URL スキーマをプロジェクトへ追加

https://developers.google.com/identity/sign-in/ios/start-integrating

認証情報を取得

https://console.developers.google.com/apis/credentials

gcp_scheme

iOSのURLスキーマをコピーし、以下にコピー

Flutter_pod_google_signin

5.FirebaseをiOSに追加する

5.1 FirebaseコンソールからプロジェクトにiOSアプリを追加

ios_firebase

5.2 手順に従う

https://firebase.google.com/docs/ios/setup?hl=ja

ウィザードの、pod ‘Firebase/Analytics’ を pod ‘Firebase/Firestore’ に読み替える

firebase_sdk

他にもさまざまなpod

cocoa_pod

5.3 設定ファイルのダウンロードとプロジェクトへの登録

ウィザードからGoogleServiceInfo.plist ファイルをダウンロード

google_service_info_plist

プロジェクトの適当なディレクトリに配置

xcod_google_plist

6.iPhone

動作確認を行う実機のiPhoneで、デベロッパーを信頼

  • 「設定」>「一般」>「プロファイル」または「プロファイルとデバイス管理」の順にタップします。 「エンタープライズ App」見出しの下に、該当する開発元のプロファイルが表示されます。 「エンタープライズ App」見出しの下で開発元のプロファイルの名前をタップし、その開発元を信頼するように設定

7.実行

Macに、iPhoneを接続し、Android Studio で実行。。。

やっと動いたヨ。

flutter_iphone

Androidと同じ挙動! OK

IMG_0003

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です