Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
アプリのビルドを楽にするかわいいスクリプトを作ってみた
Search
ReimiM
March 13, 2025
Programming
0
120
アプリのビルドを楽にするかわいいスクリプトを作ってみた
2025/3/13 モバチキ#7
Rem / Reimim03
ReimiM
March 13, 2025
Tweet
Share
Other Decks in Programming
See All in Programming
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.3k
신입 안드로이드 개발자의 AI 스타트업 생존기 (+ Native C++ Code를 Android에서 사용해보기)
dygames
0
480
複雑なフォームと複雑な状態管理にどう向き合うか / #newt_techtalk vol. 15
izumin5210
4
2.4k
ローコードサービスの進化のためのモノレポ移行
taro28
1
330
Fluent UI Blazor 5 (alpha)の紹介
tomokusaba
0
120
なぜselectはselectではないのか
taiyow
2
280
小さく段階的リリースすることで深夜メンテを回避する
mkmk884
2
120
PHPのガベージコレクションを深掘りしよう
rinchoku
0
240
安全に倒し切るリリースをするために:15年来レガシーシステムのフルリプレイス挑戦記
sakuraikotone
5
2.1k
CRE Meetup!ユーザー信頼性を支えるエンジニアリング実践例の発表資料です
tmnb
0
150
プログラミング教育のコスパの話
superkinoko
0
110
複数ドメインに散らばってしまった画像…! 運用中のPHPアプリに後からCDNを導入する…!
suguruooki
0
410
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
Being A Developer After 40
akosma
89
590k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Embracing the Ebb and Flow
colly
84
4.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Designing for Performance
lara
605
69k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.8k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
A designer walks into a library…
pauljervisheath
205
24k
Unsuck your backbone
ammeep
669
57k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Code Review Best Practice
trishagee
67
18k
Transcript
アプリのビルドを楽にする かわいいスクリプトを作ってみた モバチキ #7 2025/3/13 Reimim
HELLO! 松元 麗美 / Rem @Reimim03 マネーフォワードエックス株式会社 サービス開発本部 Fintechサービス開発グループ 2
HELLO! 3 福岡出身 いつか帰りたい😘 昨年東京からUターン🙌 筋トレ💪 自転車🚴 ジム ボクシング トランポリン! その他いろいろ FF14💎 鉄道🚃 日本縦断🗾 廃墟🌱
HELLO! 地方銀行のユーザー様向けバンキングアプリを Flutterで開発しています 現在6銀行分開発中! 4
OVERVIEW 概要 1 5
OVERVIEW 6 Developer CI / CD
OVERVIEW 7 Developer Script CI / CD
OVERVIEW 8 主にBitriseでのビルドの話なので iOSプロダクトでもAndroidプロダクトでも 使える方法です! Flutterプロダクトでやったことの話ですが
BEFORE 今までのビルド 2 9
QUESTION 10 テストアプリ どうやってビルドしていますか? さっそくですが
dev dev2 staging Staging2 production 11 A銀行 B銀行 C銀行 D銀行
E銀行 F銀行 MoneyForward A銀行 B銀行 C銀行 D銀行 E銀行 F銀行 接続先 サーバー 銀行 デベロッパー アカウント ✖ ✖
12 さらに
13 機能1 = true 機能2 = true 機能3 = false
機能4 = true 機能5 = false Release Toggle ✖ ✖ API version Ver2 Ver3 ver4 銀行・開発ステータス などによって変わる 機能ON / OFFのフラグ レスポンスの切り替え に使うHTTPヘッダー 用のパラメーター
14 ✖ Branch
BEFORE 15 これを今まで どうしていたかというと
BEFORE 16
BEFORE 17
わわわわわわわわわわわわわわわわわわわわわわわわわわわ わわわわわわわわわわわわわわわわわわわわわわわわわわわ わわわわわわわわわわわわわわわわわわわわわわわわわわわ BEFORE 18
• 接続先✖銀行✖デベアカの組み合わせで全てのパター ンのworkflow を用意していた • 開発初期は導入行も少なく、シンプルでわかりやすい 作りだった • 導入行が増えてくるとパターンが膨大 になってしま
い、選択肢を選ぶのも一苦労になってしまった 19 BEFORE
20 BEFORE さらに
21 BEFORE Release Toggle $PROJECT_ROOT/lib/core/release_toggle.dart に記載 API version $PROJECT_ROOT/lib/core/bank_constants.dart に記載
22 BEFORE Release Toggle $PROJECT_ROOT/lib/core/release_toggle.dart に記載 API version $PROJECT_ROOT/lib/core/bank_constants.dart に記載
23 BEFORE Release Toggle $PROJECT_ROOT/lib/core/release_toggle.dart に記載 API version $PROJECT_ROOT/lib/core/bank_constants.dart に記載
24 BEFORE Release Toggle $PROJECT_ROOT/lib/core/release_toggle.dart に記載 API version $PROJECT_ROOT/lib/core/bank_constants.dart に記載
25 BEFORE 仮ブランチ を作成して temp/build_for_test_20250313 release_toggle.dart bank_constants.dart を編集してcommit&push
26 BEFORE に 丸投げするはずだったのに
AFTER スクリプト作ってみた 3 27
AFTER 28
29 Enterを押したあとはこうなります AFTER
30 Enterを押したあとはこうなります AFTER
31 AFTER パラメーターの JSONの中に 先ほどscriptで 指定した内容が 格納されています
DETAILS 解説 4 32
DETAILS 33 大まかな 仕組みについて
34 DETAILS • ビルドをトリガーするエンドポイント が Bitrise API に ある •
スクリプトで質問形式で設定値を収集し、パラメーター のJSON に追加する • Bitrise側のworkflowはできる限り共通化 し、環境ごとの 差分をパラメーターのみで吸収 できるようにする
DETAILS 35 JSONパラメータの内容
36 どのworkflowでビルド するかを指定できます • Develop • Simulator • Store 私は銀行ごとに
この3つに分けています DETAILS
37 workflow実行中に Bitrise上で参照できる 環境変数になります DETAILS
38 workflow実行中に Bitrise上で参照できる 環境変数になります DETAILS ちなみに これをtrueにすると valueとして他の環境変数を指定・展開できる
DETAILS 39 workflowの整理
40 DETAILS Abank dev
41 DETAILS Abank dev2
42 DETAILS 差分は環境切り替え時の 引数のみだった Abank stg
43 DETAILS サーバーの数だけあった 開発用workflowを Abank_develop に1本化
44 DETAILS Abank_develop 環境の切り替えはここで行う
45 DETAILS Abank_develop 環境の切り替えはここで行う 差分になっていた環境切り替え処理
46 DETAILS Abank_develop
47 DETAILS Abank_develop JSONで渡す環境変数 (そのまま使える)
48 DETAILS 余談 BANK _TARGETもJSONの環境変数にすれば全てを共通化できますが、 この画面で銀行名がわからないのは不便なのであえて分けました workflow名に銀行名を入れたかった
49 DETAILS ストア申請用workflow iOS用: 銀行のデベアカTEAM ID Android用: アップロード鍵情報を指定
50 DETAILS ストア申請用workflow iOS用: 銀行のデベアカTEAM ID Android用: アップロード鍵情報を指定
51 DETAILS ストア申請用workflow iOS用: 銀行のデベアカTEAM ID Android用: アップロード鍵情報を指定
52 DETAILS 鍵情報は全て BitriseのSecretsに 記載しています 記載後に鍵をかければ、 記載する本人ですら内容を 確認できないのでおすすめ! ストア申請用workflow
DETAILS 53 今まで仮ブランチに コミットしていた設定値は? Release ToggleとかAPI versionとか
54 大丈夫です ちゃんと環境変数として 受け取っているので Bitrise上で使えます DETAILS
55 DETAILS 環境を切り替えるタイミングで 環境変数の値をもとに Dartファイルを書き換える スクリプトも実行するようにしてあります
DETAILS 56 これがBitrise上で実行されます Bitrise環境のローカルでdartファイルを編集しているだけです トリガーする時に渡した そのまま使える環境変数!
DETAILS 57 スクリプトの中身:地道にsedコマンドで.dartファイルを書き換えています
DETAILS 58 私はこのへんのコマンドをよくわかっていませんが ChatGPTがいい感じに書いてくれます
DETAILS 59 なんならスクリプトの書き方も全然わかっていませんが ChatGPTがいい感じに書いてくれます
DETAILS 60 でも、 スクリプトをかわいくしたのは 私です!
DETAILS 61 でも、 スクリプトをかわいくしたのは 私です!
DETAILS 62 そして、開発者は 質問に答えるだけで 仮ブランチも作ることなく 簡単にアプリが ビルドできるようになりました👏
DETAILS 63 Workflowの共通化により bitrise.ymlのコード量も 1580 414 lines lines メンテ!シヤスイ! 🦜
64 ✏ SUMMARY • Bitrise APIを使えば、パラメーターつきでビルドをトリ ガーできる • スクリプトを使えば、パラメーターの生成もトリガーのリ クエスト送信も容易
• トリガーする時に渡す環境変数+スクリプトを使って、 Bitrise上で一時的にコードを編集したものをビルドするこ とも可能
65 🚫 NO MORE OREORE • 俺しかメンテできない「オレオレスクリプト」にならない ように細心の注意を払いましょう • スクリプトには、手厚すぎるくらいにコメントをつけてい
いと思います • とにかくわかりやすくしておきたい
66 🚫 NO MORE OREORE • 俺しかメンテできない「オレオレスクリプト」にならない ように細心の注意を払いましょう • スクリプトには、手厚すぎるくらいにコメントをつけてい
いと思います • とにかくわかりやすくしておきたい
DETAILS 67 関連トピック: ソースコードの中で使うけど リポジトリには含めたくない機密情報を ローカル環境 / CI環境でどう扱うか... というような検討も最近したので 興味のある方は話しかけてくれると嬉しいです!
快適なビルドライフをお過ごしください 68
Thank you for listening 69