Flutter Meetup Tokyo #4 発表資料 擬似的なflavor指定による、Flutterでのサーバ接続先や google-service.json などの切替についての資料です。

1. Before launch オプションを使って
Flutterでstaging/release環境を
切り替える
Flutter Meetup Tokyo #4
1

2. 自己紹介
名前
robo （兼高理恵）
好きなもの
モバイル端末
おしごと
アプリの設計から実装まで
2

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

6. 6
Flutter での
ビルド構成指定方法の概要

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 でビルド前に行う処置の設定ができます。

15. 15
Before lunch オプションの設定手順

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 を
ビルド構成と呼びましたが、
本当は、実行構成です。

26. 26
Before lunch オプションを使った
疑似flavorによるリソース切替ライブラリ

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

35. 35
ご清聴、
ありがとうございました。