本記事は、佐藤将来が執筆しました。
この記事で出来るようになること
Shorebird を Codemagic へ連携することで、ストアからのインストールを必要とせずに Dart コードの変更をコードプッシュするワークフローを組み込むことが出来るようになります。
以下の例では、 アプリの UI 上に表示しているテキストの変更が即時反映されています：
Shorebird とは
Shorebirdは Flutter アプリケーション専用のコードプッシュ機能を提供するサービスです。コードプッシュによって、開発者はストアへのリリースを必要とせずにユーザーのデバイスに直接アップデートを反映することができます。つまり、Shorebird を活用することで、Flutter 開発者は Play Store や App Store といった各プラットフォーム上でのガイドラインに準拠しながら効率的にアプリの Dart コードのアップデートを管理することが出来ます。
Shorebird 初期設定
まずは、Shorebird へサインアップして、以下の手順で CLI ツールを使ってみましょう：
-
こちら より、 Shorebird の無料アカウントを作成します。
-
Shorebird の CLI を自身の PC へインストールしましょう。
以下のコマンドをターミナルで実行します：
curl --proto '=https' --tlsv1.2 https://raw.githubusercontent.com/shorebirdtech/install/main/install.sh -sSf | bash上記のコマンドを使用せずに手動で CLI をインストールすることも可能です。詳細については、Shorebird 公式ドキュメント をご覧ください。
-
ログイン
shorebird loginコマンドを実行して、ステップ1で作成したアカウントにログインします。
-
Shorebird の初期化
shorebird initコマンドを実行してshorebird.yamlを作成し、AndroidManifest.xml に INTERNET 権限を追加します：
Shorebird コンソール にアプリが追加されます：
-
Shorebird 認証トークンの作成
Shorebird のコードプッシュはこの CLI ツールだけで実行できますが、今回は Codemagic の CI/CD と連携して自動化する方法を紹介します。CI サーバーで Shorebird を使用するには、Shorebird 認証トークンを生成し、CI 環境にインポートする必要があります。
トークンを生成するには、ローカルマシンのターミナルを開き、以下のコマンドを実行します：
これにより、Codemagic に暗号化されてワークフロー上で変数として利用できる認証トークンが返されます。
後で Codemagic の設定に必要となるため紛失しないように保管しておいてください。
Codemagic とは
ここからは Codemagic を使った手順に入っていきますが、簡単に Codemagic についてご紹介します。
Codemagic とは、Flutter 開発に特化した、テストやビルド、デプロイを自動化する CI/CD ツールです。iOS, Android や React Native など、様々なプロジェクトにおいて利用できますが、Flutter プロジェクトでは Workflow Editor という GUI ツールを用いることが出来ます。これにより、yaml ファイルなどの専用ファイルの作成を必要とせずに直感的な操作による開発が可能です。
個人利用であれば無料で使い始めることが出来、十分な無料枠(毎月500分)を提供しています。料金の詳細については こちら をご覧ください。
前提条件
- 環境の Flutter バージョンは 3.24.0 以降であること
- Codemagic の Workflow Editor 上で Distribution プロセスが有効化されていること
ストアへのリリース
この記事では、Google Play と App Store Connect の内部テストを使用して、自身の実機にて動作を確認する手順を紹介します。
サンプルリポジトリは こちら にあるので、必要に応じて適宜ご覧ください。
Android
まず、Workflow Editor を開き、プラットフォームが Android に設定されていることを確認します：
尚、既存のワークフローを複製することでも新規ワークフローが作成できます：
以下の Release を選択します：
Shorebird セクション（Tests セクションの後に表示されています）で、先ほど作成した Shorebird Auth トークンを設定します：
Distribution セクションで、Track として Internal Testing を指定します：
該当のブランチを選択し、ビルドを開始しましょう。
ビルドが成功すると、ドラフト状態で Google Play コンソール上にアップロードされるので、以下のように保存して公開状態にしましょう。
iOS
Workflow Editor でプラットフォームが iOS に設定されていることを確認します：
以下の Release を選択します：
Shorebird セクションにて、Shorebird の Auth トークンを設定します：
Distribution セクションにて、App Store Connect への配信が有効化されていることを確認してください。
該当のブランチを選択し、ビルドを開始しましょう。
ビルドが成功したら、App Store Connect 上から内部テストとして自身へ配信しましょう：
アプリをインストールする
このアプリをご自身のデバイスへインストールしてください。今回の例では、以下のように Hello World! のテキストがこの時点では表示されています。
Dart コードの更新
画面上で変更差分が分かりやすいように、テキストを以下のように更新しましょう。コードプッシュにより反映が可能なのは Dart コードのみなことにご注意ください。
Before:
After:
Text('Hello World from Shorebird code push!')
上記の変更をコミットして、対応するリモートブランチにプッシュします。
パッチの反映
では、Workflow Editor 上で、変更をコードプッシュしていきましょう。
以下のように Patch を選択して進めていきます：
Shorebird セクションでは、変更を適用したいリリースバージョンを指定します。常に最新版に対して適用したい場合は、空欄のままで問題ありません。
Android では、一時的に Google Play コンソールへの提出を一時的に停止します：
iOS では、一時的に App Store Connect への提出を一時的に停止します：
※ 同時にストアにもアップロードしたい場合、 pubspec.yaml で指定しているバージョン表記をインクリメントしておく必要があることに注意してください。詳しくは こちら をご覧ください。
この状態でワークフローの変更を保存して、再度ビルドしましょう。
ビルドが成功すると、Shorebird のコンソール上にもパッチの配布状況が反映されます。
数分待ってからアプリを2回再起動します。
※ アップデート時の挙動についての詳細は、こちら の Shorebird 公式ドキュメントをご覧ください
以下のように、ストアを経由することなく UI が更新されています?
終わりに
お疲れ様でした?
今回のデモを通して、コードプッシュによるアップデートの便利さがお分かりいただけたかと思います。そしてこのコードプッシュは、今回のように CI/CD ワークフローの中に組み込まれ自動化されることでより利便性が向上します。
何かご質問やお困りごとありましたら、サポートコミュニティにご相談ください?
If you’ve already enabled billing, you can also get support from the in-app chat widget in the bottom right corner of the page.
これからも Codemagic を使って快適に開発を楽しんでいきましょう！
Discussion about this post