Before lunch オプションを使って Flutterでstaging/release環境を切り替える
1 like3,132 views
Flutter Meetup Tokyo #4 発表資料 擬似的なflavor指定による、Flutterでのサーバ接続先や google-service.json などの切替についての資料です。
![[CEDEC 2021] 運用中タイトルでも怖くない！ 『メルクストーリア』におけるハイパフォーマンス?ローコストなリアルタイム通信技術の導入事例](https://cdn.slidesharecdn.com/ss_thumbnails/cedec2021-210825103749-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Similar to Before lunch オプションを使って Flutterでstaging/release環境を切り替える (20)
More from cch-robo (15)
Recently uploaded (15)
Before lunch オプションを使って Flutterでstaging/release環境を切り替える
- 1. Before launch オプションを使って Flutterでstaging/release環境を 切り替える Flutter Meetup Tokyo #4 1
- 3. このLT内容は、 Flutter Japan User Group Tokyo #1 で発表された、 セッションの番外編です。 3 Flavor of Flutter Flutterでstaging/production環境を切替える https://speakerdeck.com/fullfool/productionhuan-jing-woqie-ti-eru
- 4. はじめに モバイルアプリ開発では、 テストやサーバサイド開発との連携の兼ね合いで、ビルド構成を設け、 接続先の開発/本番サーバやアプリの署名証明書の切替えだけでなく、 デバッグ版/製品版を区別するため、文言や見た目も変えています。 4 ビルド構成 Android では、Debug/Release などの Build Type や、 Develop/Production などの Build Flavor を合わせて Build Variants と呼んでいる。 Android Studio > Configure build variants https://developer.android.com/studio/build/build-variants?hl=ja
- 5. ビルド構成の反映手法は必須 実装内での環境チェックと条件分岐による挙動の切替えもありますが、 ネイティブ開発環境では、 ビルド構成によるリソースの切り替え機構を使って、 実装コードに余計な処理を入れずに挙動変更ができます。 Flutter でもビルド構成の反映手法は必須でしょう。 Flutter Meetup Tokyo #1 では、 flavorとDart entry-pointを使ったビルド構成の反映機構が紹介されました。 本LTは、IntelliJ IDEA の Before launch オプションについての紹介と実験です。 5
- 7. Flutter でのビルド構成指定方法 1. flutter コマンドの flavor オプション XcodeやGradleのネイティブビルド構成に flavor パラメータを与えます。 2. flutter コマンドの target オプション main 関数を持つ Dartファイルを target で指定する。 アプリを起動する Dart entry-point (.dartファイル)を指定します。 3. IntelliJ IDEA の Before launch オプション ビルド前に実行する shell script や ant, gradle タスクを指定します。 Android Studio も IntelliJ IDEA 系なので利用できます。 7
- 8. 1. flutter コマンドの flavor オプション flavor オプションを使うには、 iOS / Android ともにネィティブのビルド環境(Xcode / Gradle)での 指定 flavor への対応追加が必要です。 ● iOS 1. Xcode のメニューから Product > Scheme > New Scheme でflavor指定の Scheme を新規作成 2. PROJECT Runner > Configurations で、Debug/Releaseと Scheme の組み合わせNameを追加 Debug / Release と Scheme の組み合わせでビルドできるようにします。 例: Schemeがdevの場合は、Debug-dev を指定すると、 $ flutter build ios --debug --flavor dev や $ flutter run --flavor dev コマンドが使えるようになる。 ● Android 1. app/build.gradle に productFlavors {} ブロックを追加し、その中に flavor指定のブロックを追加 8
- 9. 1. flutter コマンドの flavor オプション ● 留意事項 iOS や Android のネイティブビルドシステムにパラメータを与えるため、 Xcode での Scheme や build.gradle での productFlavors ブロックに、 flavor 指定に対応する設定をしていないとビルドすることができません。 このためプラットフォーム別の ネイティブビルドシステムへの理解が必要になります。 反面、ネイティブビルドシステムの知識があれば応用はかなり広がります。 9
- 10. 2. flutter コマンドの target オプション Dart entry-point と呼ばれる、 Flutter アプリを起動する main関数を持つ dart ファイルが指定できます。 debug や staging 専用リソースを設定する Dart entry-poit を設けることで、 Dartコードでの柔軟な挙動切り替えを行なわせることができます。 flutter コマンドでのオプション指定 $ flutter run -t Dartファイルパス $ flutter run --target Dartファイルパス 例）$ flutter run -t lib/main-dev.dart 10
- 11. 2. flutter コマンドの target オプション ● 留意事項 iOS と Android で両者共通の論理的挙動を与えられますが、 ネイティブビルド構成やリソースに影響を与えるものではありません。 このため、挙動の変更にネイティブ実装のリソースや設定切り替えが 必要なものには対処できません。 例）develop と release での、 Firebaseの構成ファイル(google-servie.json/GoogleService-info.plist)の切り替えや、 Facebook 認証ライブラリのようなネイティブコードへの登録 ID付与が必要なもの。 11
- 12. flavor と target の詳細について flavor と target オプションについての IntelliJ IDEA 系でのGUI設定や、 Xcode での操作や build.gradle でのコードおよび応用実装の詳細については、 Flutter Meetup Tokyo #1 で説明されていますので、ここでは紹介いたしません。 詳しくはスライドを参照ください。 Flutterでstaging/production環境を切替える https://speakerdeck.com/fullfool/productionhuan-jing-woqie-ti-eru Flutter Meetup 資料ではありませんが、こちらも参考になります。 flutterで本番/ステージング/開発を切り替える (2018/07/11) https://qiita.com/ko2ic/items/53f97bb7c28632268b5a 12
- 13. 3. IntelliJ IDEA の Before launch オプション Before lunch は、 ビルド前に実行する shell script や ant, gradle タスクを指定するオプションです。 flavor や target と同じく IntelliJ IDEA 系の開発環境の Run / Debug Configurations ダイアログで設定できるオプションですが、 flavor や target が flutter コマンドのビルド構成オプションであるのに対し、 Before lunch は、IntelliJ IDEA が提供するビルド構成オプションです。 イメージ的には、 flutter run コマンドの実行前に、任意指定の処理を行わせるものです。 13
- 14. 14 Run/Debug Configurations ダイアログは、 ツールバーの Run > Edit Configurations… から開きます。 Dart entrypoint で target、Build flavorで flavor、 Before launch でビルド前に行う処置の設定ができます。
- 16. Before lunch を使えばリソースの切替も可能です Before lunch では、dart スクリプト（コマンド） の実行もできます。 dart スクリプトの引数に、flavor 値を擬似的に指定すれば、 flutter アプリのビルドと起動の前に、パラメータ指定に従った リソースファイルのコピーなどを行わせることも可能になります。 つまり Before lunch と flavor 疑似指定を使えば、 サーバ接続先などのプロパティリソースの切替も可能になります。 実現案のサンプルについては後として、 先ずは Before lunch での debug や staging のビルド設定（Configurations）の 新設手順を説明します。 16
- 17. Before launch オプションの設定手順 17 Copy Configuration アイコンをクリックして 元々あった main.dart の設定をコピーした Configuration を追加 ＋ アイコンで 新規追加する場合は Flutter を選択します。 Configuration 名には、 疑似flavor に使う debug, staging などを指定 Run: ウィンドウのタブに使われるので、 flavor を明示する名前にします。 サンプルでは、debug や staging としました。
- 18. Before launch オプションの設定手順 18 ＋アイコンをクリックして Add New Configuration から Run External tool を選択 External Tools ダイアログが開きます
- 19. Before launch オプションの設定手順 19 ＋アイコンをクリックして Create Tool ダイアログを開きます。
- 20. Before launch オプションの設定手順 20 ?Nameは、Run ウィンドウのタブに使われるので、 flavor を明示する名前を付けます。 サンプルでは、flavor_debug や flavor_staging としました。 ?Description は、適当でも構いません。 ?Program は、dart を指定します。 ?Arguments は、実行スクリプトと擬似flavorを指定 第一引数に実行させる dart コマンドプログラム ? main関数を持つ .dart ファイルを指定します。 第二引数に、疑似flavorパラメータを指定します。 サンプルでは、PreBuildFlavor.dart と debug や staging です。 ?Working directory は、プロジェクトルートになるよう 右端の Insert Macro…から $ProjectFileDir$ を選択 …設定が完了しましたら、 OK で設定を保管します。
- 21. Before launch オプションの設定手順 21 Create Tool が登録されたので、 External Tools に作成した設定が 追加されています。 OK で External Tools を閉じると、 Before lunch オプションに External tool 設定が 追加されています。
- 22. Before launch オプションの設定手順 22 各 flavore の Configuration ごとに 手順を繰り返せばツールバーから Run を選択できるようになります 補足 Release ビルドにしたい場合は、 Run/Debug Configurations ダイアログで、 Additional arguments に --release オプションの 追加が必要です。 Share をチェックすると、 Run/Debug Configurations の設定がビルド構成ごとに .idea/runConfigurationsディレクトリにxmlファイルで保管され、 チームで共有することができます。
- 23. IntelliJ IDEA 設定マニュアル （邦訳あり） Edit Configurations … から Run / Debug Configurations ダイアログ の詳細 Creating and Editing Run/Debug Configurations https://www.jetbrains.com/help/idea/creating-and-editing-run-debug-configurations.html https://pleiades.io/help/idea/creating-and-editing-run-debug-configurations.html Run/Debug Configurations Dialog https://www.jetbrains.com/help/idea/run-debug-configurations-dialog.html https://pleiades.io/help/idea/run-debug-configurations-dialog.html External Tools https://www.jetbrains.com/help/idea/settings-tools-external-tools.html https://pleiades.io/help/idea/settings-tools-external-tools.html Create/Edit/Copy Tool Dialog https://www.jetbrains.com/help/idea/settings-tools-create-edit-copy-tool-dialog.html https://pleiades.io/help/idea/settings-tools-create-edit-copy-tool-dialog.html 【参考】Android Studio > Create and edit run/debug configurations https://developer.android.com/studio/run/rundebugconfig?hl=ja 23
- 24. IntelliJ IDEA 設定マニュアル （邦訳あり） Run / Debug Configurations と Before lunch / Extra Tools の設定保管先 Tuning IntelliJ IDEA https://www.jetbrains.com/help/idea/tuning-the-ide.html https://pleiades.io/help/idea/tuning-the-ide.html Run/Debug Configuration で Share をチェックした場合、 Run/Debug Configuration設定は、.idea/runConfigurations に 構成名.xml (例:debug.xml) で保管され、 Before lunch / Extra Tools 設定は、各プラットフォームの 構成ディレクトリに保管されます。 各プラットフォームの 構成ディレクトリ (Configuration directory) ● Windows ： %HOMEPATH%.<product><version>config ● MacOS ： ~/Library/Preferences/<product><version> ● Linux ： ~/.<product><version>/config 例）~/Library/Preferences/IdeaIC2018.1/tools/External Tools.xml （flavor_debugなどが要素として保管される） 【注意】構成ディレクトリはチーム共有できません。 このため Before lunch / Extra Tools は、各開発環境ごとに設定する必要があります。 24
- 25. Run/Debug Configurationsダイアログについて 書籍 IntelliJ IDEA ハンズオン P.149 コラム「プロジェクトに関する設定箇所」より ● Run / Debug Configurations ダイアログ 「アプリケーションを実行する／テストを実行する」といった プロジェクトの実行構成を設定します。 （Run メニューの Edit Configurations … で開く Run / Debug Configurations ダイアログで設定します）。 実行構成は、Project ごとに任意の種類／個数を設定できます。 書籍 IntelliJ IDEA ハンズオン http://gihyo.jp/book/2017/978-4-7741-9383-0 25 説明の都合上、 Run/Debug Configuration を ビルド構成と呼びましたが、 本当は、実行構成です。
- 27. ライブラリの example について コンセプトライブラリの example では、 Run メニューから debug/staging/release の疑似flavor実行構成を選択すると、 アプリ名と画面タイトル名が選択された疑似flavorに従って切り替わります。 実装的には、 flavor 指定ごとにAndroid のStringリソース（string.xml）を上書きコピーし、 flavor 指定ごとにプロパティファイルを切り替えてタイトル値を取得させて 疑似flavor挙動を実現しています。 コンセプトライブラリ cch-robo/flutter_flavor_substitute は、公開しています。 https://github.com/cch-robo/flutter_flavor_substitute 27 サンプルを実行するには、 debug, staging, release の疑似flavor実行構成を再設定してください。
- 28. Run > debug を実行 28
- 29. Run > staging を実行 29 何故か「デバッグ」に なっている Before lunch による、 ビルド前のリソース切り替えは、 安易な発想だったのでしょうか。
- 30. Run > staging を実行 30 実は、リソースが更新される前に アプリが起動したためなので Hot Restart をかけます。
- 31. コンセプトライブラリのキーポイント サンプルのキーポイントは、 ビルド前に実行されれるピュアな Dart プログラムに渡される flavor指定が アプリ内で動作するFlutter プログラムとの間で参照できるように、 flavor指定のプロパティファイルへの書き込みと、 プロパティファイルのアセット化、およびアセット読取が重要キーです。 そのほかのキーポイントは、以下のようになっています。 ● flavorディレクトリの新設 ● プロパティファイル機能の提供 ● プロパティファイルのアセットリソース化 ● flavorリソースからネイティブへの上書きコピー機能の提供 31
- 32. ● flavorディレクトリの新設 プロジェクトルートに flavorディレクトリを設け、 サブディレクトリに各flavorごとのリソースを配置する。 ● プロパティファイル機能の提供 １行が Key=Value フォーマットとするプロパティファイルから、 指定KeyのプロパティValueを取得するピュアDartクラスを提供する。 プロパティファイルは、flavor ディレクトリに配置する。 ● プロパティファイルのアセットリソース化 pubspec.yaml の assets: にプロパティファイルを指定して、 Befor lunch DartプログラムとFlutterアプリ内からアクセス可能にする。 ● flavorリソースからネイティブへの上書きコピー機能の提供 Before lunch Dartプログラムで、flavorディレクトリ内のリソースを 指定ネイティブプラットフォーム先に上書きコピーできるようにする。 32
- 33. exampleは、凝ったものでありませんしリソースを強制上書きするなど、 正攻法とは言えない実装であるため、特にプログラム的な説明はしません。 ● exampleルートの prebuild_main.dart （ピュアなDartプログラム） flavorプロパティ作成、疑似 flavorごとにリソース元を切り替えリソース先に上書きコピーする。 ● lib/main.dart （FlavorSubsituteの初期化と globalプロパティの利用） ● android/app/src/main/AndroidManifest.xml （@app_name利用への変更） ● android/app/build.gradle （flavorApplicationIdプロパティ参照への変更） ● lib/src/flavor/base_flavor.dart （ピュアなDartからでもインポート可能な基盤） ● lib/src/flavor/prebuild_flavor.dart （ビルド前用上書きコピーの提供/ピュアDart） ● lib/src/flavor/application_flavor.dart （アプリ用プロパティの提供） example実装のコードリード?キーポイント 33
- 34. まとめ 正攻法とは言えませんが、 IntelliJ IDEA 系 IDE の Before launch オプションを使って、 擬似的にflavor指定を行うことや、 疑似flavor指定によるアプリ挙動の切り替えに挑戦してみました。 ですがアプリ署名キーを切り替えるにしても、 build.gradle への修正が必要など、まだまだ改良や考慮の余地が山積みです。 今後の Flutter SDK や IntelliJ 系のプラグインの改良に期待したいと思います。 34