アプリのビルドを楽にするかわいいスクリプトを作ってみた

Slide 1

Slide 1 text

アプリのビルドを楽にするかわいいスクリプトを作ってみたモバチキ #7 2025/3/13　Reimim

Slide 2

Slide 2 text

HELLO! 松元麗美 / Rem　@Reimim03 マネーフォワードエックス株式会社サービス開発本部 Fintechサービス開発グループ 2

Slide 3

Slide 3 text

HELLO! 3 福岡出身いつか帰りたい😘　昨年東京からUターン🙌 筋トレ💪 自転車🚴　ジム　ボクシング　トランポリン！　その他いろいろ FF14💎　鉄道🚃　日本縦断🗾　廃墟🌱

Slide 4

Slide 4 text

HELLO! 地方銀行のユーザー様向けバンキングアプリを Flutterで開発しています現在6銀行分開発中！ 4

Slide 5

Slide 5 text

OVERVIEW 概要 1 5

Slide 6

Slide 6 text

OVERVIEW 6 Developer CI / CD

Slide 7

Slide 7 text

OVERVIEW 7 Developer Script CI / CD

Slide 8

Slide 8 text

OVERVIEW 8 主にBitriseでのビルドの話なので iOSプロダクトでもAndroidプロダクトでも使える方法です！ Flutterプロダクトでやったことの話ですが

Slide 9

Slide 9 text

BEFORE 今までのビルド 2 9

Slide 10

Slide 10 text

QUESTION 10 テストアプリどうやってビルドしていますか？さっそくですが

Slide 11

Slide 11 text

dev dev2 staging Staging2 production 11 A銀行 B銀行 C銀行 D銀行 E銀行 F銀行 MoneyForward A銀行 B銀行 C銀行 D銀行 E銀行 F銀行接続先サーバー銀行デベロッパーアカウント ✖ ✖

Slide 12

Slide 12 text

12 さらに

Slide 13

Slide 13 text

13 機能1 = true 機能2 = true 機能3 = false 機能4 = true 機能5 = false Release Toggle ✖ ✖ API version Ver2 Ver3 ver4 銀行・開発ステータスなどによって変わる機能ON / OFFのフラグレスポンスの切り替えに使うHTTPヘッダー用のパラメーター

Slide 14

Slide 14 text

14 ✖ Branch

Slide 15

Slide 15 text

BEFORE 15 これを今までどうしていたかというと

Slide 16

Slide 16 text

BEFORE 16

Slide 17

Slide 17 text

BEFORE 17

Slide 18

Slide 18 text

わわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわわ BEFORE 18

Slide 19

Slide 19 text

● 接続先✖銀行✖デベアカの組み合わせで全てのパターンのworkflow を用意していた ● 開発初期は導入行も少なく、シンプルでわかりやすい作りだった ● 導入行が増えてくるとパターンが膨大になってしまい、選択肢を選ぶのも一苦労になってしまった 19 BEFORE

Slide 20

Slide 20 text

20 BEFORE さらに

Slide 21

Slide 21 text

21 BEFORE Release Toggle $PROJECT_ROOT/lib/core/release_toggle.dart に記載 API version $PROJECT_ROOT/lib/core/bank_constants.dart に記載

Slide 22

Slide 22 text

22 BEFORE Release Toggle $PROJECT_ROOT/lib/core/release_toggle.dart に記載 API version $PROJECT_ROOT/lib/core/bank_constants.dart に記載

Slide 23

Slide 23 text

23 BEFORE Release Toggle $PROJECT_ROOT/lib/core/release_toggle.dart に記載 API version $PROJECT_ROOT/lib/core/bank_constants.dart に記載

Slide 24

Slide 24 text

24 BEFORE Release Toggle $PROJECT_ROOT/lib/core/release_toggle.dart に記載 API version $PROJECT_ROOT/lib/core/bank_constants.dart に記載

Slide 25

Slide 25 text

25 BEFORE 仮ブランチを作成して temp/build_for_test_20250313 release_toggle.dart bank_constants.dart を編集してcommit＆push

Slide 26

Slide 26 text

26 BEFORE 　　　　　　に丸投げするはずだったのに

Slide 27

Slide 27 text

AFTER スクリプト作ってみた 3 27

Slide 28

Slide 28 text

AFTER 28

Slide 29

Slide 29 text

29 Enterを押したあとはこうなります AFTER

Slide 30

Slide 30 text

30 Enterを押したあとはこうなります AFTER

Slide 31

Slide 31 text

31 AFTER パラメーターの JSONの中に先ほどscriptで指定した内容が格納されています

Slide 32

Slide 32 text

DETAILS 解説 4 32

Slide 33

Slide 33 text

DETAILS 33 大まかな仕組みについて

Slide 34

Slide 34 text

34 DETAILS ● ビルドをトリガーするエンドポイントが Bitrise API にある ● スクリプトで質問形式で設定値を収集し、パラメーターのJSON に追加する ● Bitrise側のworkflowはできる限り共通化し、環境ごとの差分をパラメーターのみで吸収できるようにする

Slide 35

Slide 35 text

DETAILS 35 JSONパラメータの内容

Slide 36

Slide 36 text

36 どのworkflowでビルドするかを指定できます ● Develop ● Simulator ● Store 私は銀行ごとにこの3つに分けています DETAILS

Slide 37

Slide 37 text

37 workflow実行中に Bitrise上で参照できる環境変数になります DETAILS

Slide 38

Slide 38 text

38 workflow実行中に Bitrise上で参照できる環境変数になります DETAILS ちなみにこれをtrueにすると valueとして他の環境変数を指定・展開できる

Slide 39

Slide 39 text

DETAILS 39 workflowの整理

Slide 40

Slide 40 text

40 DETAILS Abank dev

Slide 41

Slide 41 text

41 DETAILS Abank dev2

Slide 42

Slide 42 text

42 DETAILS 差分は環境切り替え時の引数のみだった Abank stg

Slide 43

Slide 43 text

43 DETAILS サーバーの数だけあった開発用workflowを Abank_develop に1本化

Slide 44

Slide 44 text

44 DETAILS Abank_develop 環境の切り替えはここで行う

Slide 45

Slide 45 text

45 DETAILS Abank_develop 環境の切り替えはここで行う差分になっていた環境切り替え処理

Slide 46

Slide 46 text

46 DETAILS Abank_develop

Slide 47

Slide 47 text

47 DETAILS Abank_develop JSONで渡す環境変数 (そのまま使える)

Slide 48

Slide 48 text

48 DETAILS 余談 BANK _TARGETもJSONの環境変数にすれば全てを共通化できますが、この画面で銀行名がわからないのは不便なのであえて分けました workflow名に銀行名を入れたかった

Slide 49

Slide 49 text

49 DETAILS ストア申請用workflow iOS用：銀行のデベアカTEAM ID Android用：アップロード鍵情報を指定

Slide 50

Slide 50 text

50 DETAILS ストア申請用workflow iOS用：銀行のデベアカTEAM ID Android用：アップロード鍵情報を指定

Slide 51

Slide 51 text

51 DETAILS ストア申請用workflow iOS用：銀行のデベアカTEAM ID Android用：アップロード鍵情報を指定

Slide 52

Slide 52 text

52 DETAILS 鍵情報は全て BitriseのSecretsに記載しています記載後に鍵をかければ、記載する本人ですら内容を確認できないのでおすすめ！ストア申請用workflow

Slide 53

Slide 53 text

DETAILS 53 今まで仮ブランチにコミットしていた設定値は？ Release ToggleとかAPI versionとか

Slide 54

Slide 54 text

54 大丈夫ですちゃんと環境変数として受け取っているので Bitrise上で使えます DETAILS

Slide 55

Slide 55 text

55 DETAILS 環境を切り替えるタイミングで環境変数の値をもとに Dartファイルを書き換えるスクリプトも実行するようにしてあります

Slide 56

Slide 56 text

DETAILS 56 これがBitrise上で実行されます Bitrise環境のローカルでdartファイルを編集しているだけですトリガーする時に渡したそのまま使える環境変数！

Slide 57

Slide 57 text

DETAILS 57 スクリプトの中身：地道にsedコマンドで.dartファイルを書き換えています

Slide 58

Slide 58 text

DETAILS 58 私はこのへんのコマンドをよくわかっていませんが ChatGPTがいい感じに書いてくれます

Slide 59

Slide 59 text

DETAILS 59 なんならスクリプトの書き方も全然わかっていませんが ChatGPTがいい感じに書いてくれます

Slide 60

Slide 60 text

DETAILS 60 でも、スクリプトをかわいくしたのは私です！

Slide 61

Slide 61 text

DETAILS 61 でも、スクリプトをかわいくしたのは私です！

Slide 62

Slide 62 text

DETAILS 62 そして、開発者は質問に答えるだけで仮ブランチも作ることなく簡単にアプリがビルドできるようになりました👏

Slide 63

Slide 63 text

DETAILS 63 Workflowの共通化により bitrise.ymlのコード量も 1580 414 lines lines ﾒﾝﾃ！ｼﾔｽｲ！ 🦜

Slide 64

Slide 64 text

64 ✏ SUMMARY ● Bitrise APIを使えば、パラメーターつきでビルドをトリガーできる ● スクリプトを使えば、パラメーターの生成もトリガーのリクエスト送信も容易 ● トリガーする時に渡す環境変数＋スクリプトを使って、 Bitrise上で一時的にコードを編集したものをビルドすることも可能

Slide 65

Slide 65 text

65 🚫 NO MORE OREORE ● 俺しかメンテできない「オレオレスクリプト」にならないように細心の注意を払いましょう ● スクリプトには、手厚すぎるくらいにコメントをつけていいと思います ● とにかくわかりやすくしておきたい

Slide 66

Slide 66 text

66 🚫 NO MORE OREORE ● 俺しかメンテできない「オレオレスクリプト」にならないように細心の注意を払いましょう ● スクリプトには、手厚すぎるくらいにコメントをつけていいと思います ● とにかくわかりやすくしておきたい

Slide 67

Slide 67 text

DETAILS 67 関連トピック：ソースコードの中で使うけどリポジトリには含めたくない機密情報をローカル環境 / CI環境でどう扱うか... というような検討も最近したので興味のある方は話しかけてくれると嬉しいです！