チュートリアルFeb 20, 20246 分 READ

Flutter とは?フラッターアプリの CI / CD パイプラインを構築しよう

根本 征

ソリューション エンジニア

Flutter アプリのCI/CDパイプライン

Flutterとは、2018年にGoogleがオープンソースとしてリリースした、クロスプラットフォームアプリ開発のためのフレームワークです。

主に Android / iOS のスマホアプリ開発の用途で使われることが多いですが、現在のバージョン(2.5)では Webアプリやデスクトップアプリ開発もできるようになりました。

一般的にモバイルアプリ開発となると、iOS / Android それぞれの開発プラットフォーム上で開発することになります。

開発言語やIDE、アーキテクチャーやAPIなどが異なるため、iOS / Android アプリで同じような機能を提供しようとしてもそれぞれで開発するにはある程度のコストがかかります。

しかし、Flutter では Dart という言語で書かれた1つのソースコードからiOS / Android はじめ複数プラットフォームへのアプリを同時に開発することができます。

これにより、下記のメリットがあります。

  • 開発・運用コストの削減
  • 開発期間の短縮
  • モバイルエンジニア不足の解消

また、独自のマテリアル UI のサポート・ホットリロード対応など Flutter では生産性の高い開発を行うことが可能です。 これらの理由から Flutter は注目度が高く、海外だけでなく国内の採用事例も増えてきました。

Flutter Orb を使って CI / CD パイプラインを構築する

iOS / Android アプリの CI / CD パイプラインと同様、CircleCI を使って Flutter の CI / CD パイプラインを構築することができます。 Flutter の CI / CD パイプラインを構築する際には、事前に各OSに合わせた Flutter SDK をインストールする必要があります。

しかし、実際には Flutter SDK のインストールのみならず、ビルド・テスト・リリースを実行する前に下記の手順が必要になります。

  • 依存パッケージのインストール・キャッシュ(dart pub, Gradle, CocoaPods)
  • 継続的デリバリーのための fastlane のインストール

そして1からこれらを記述しようとすると、CircleCIの設定ファイルの記述量が多くなってしまいます。 この問題を解決するために、CircleCI では Orb という機能を提供しています。

Orb とは CircleCI の設定ファイルを再利用可能な形でパッケージされたものであり、設定ファイルをよりシンプルにすることができます。

Orb は自作して社内のみ共有する(プライベートOrb)こともできますし、CircleCI や各種パートナー、そしてコミュニティが公開している Orb (パブリック Orb) を利用することもできます。

そして、CircleCI では Flutter の Orb を今年リリースしました。

この Orb は 現在 Linux / macOS をサポートしており、

  • Flutter SDK のインストール
  • 依存パッケージのインストール・キャッシュ(dart pub, Gradle, CocoaPods)
  • Unit Test, Lint の実行

などのコマンド/ジョブが用意されています。

Flutter Orb のドキュメントに Orb の使い方が紹介されているほか、下記のリポジトリでは実際に Flutter Orb を使ってFlutter の CI / CD パイプラインを作成したサンプルがありますので参考にしていただけたらと思います。

Flutter Orb は GitHub でオープンソースとして公開していますので、フィードバックがあれば Issue や Pull Request を作成してもらえると助かります。

CircleCI で効果的に Flutter の CI / CD パイプラインを運用してもらうための機能

最後に CircleCI で Flutter の CI / CD パイプラインを運用してもらう際に、効果的に使ってもらえる機能を3つ紹介したいと思います。

  • カスタムリソース
  • Insights
  • iOS シミュレーター / Android エミュレーター を使った Integration テスト

カスタムリソース

Flutter を使って実際にアプリをリリースするためには各プラットフォーム毎にビルドする必要があり、ある程度のスペックのビルドマシンやビルド時間が必要になります。

また、Android アプリは複数のOS上でビルドできるものの、iOS アプリの場合には macOS 上でビルドする必要があります。

CircleCI では Androidアプリをビルドするための Linux VM、そして iOSアプリをビルドするための macOS VM を用意しており、それぞれ複数のリソースクラス(CPU, RAM)を用意しています。

Linux VMのリソースクラス Linux VM

MacOS VMのリソースクラス macOS VM

*詳しくはこちらのページを参考にして下さい。

現状のチームに最適なリソースクラスを使うことによって、Flutter での開発生産性をより上げることができます。

Insights

先ほども書いた通り、Flutter でそれぞれのプラットフォーム毎にビルドするにはある程度のビルド時間が必要になります。

そして、そのビルド時間がアプリケーションの規模や開発規模が大きくなることによって長くなってしまい、知らない間に開発生産性を低くしてしまっている可能性があります。

CircleCI の Insights 機能では、ビルド時間など CI / CD に関するデータをダッシュボードで定量的に把握し、改善するヒントを見つけることができます。

CircleCi Insights ダッシュボード機能

詳細は下記の記事・ドキュメントを参考にしていただければと思います。

https://circleci.com/ja/blog/monitor-and-optimize-your-ci-cd-pipeline-with-insights-from-circleci/

https://circleci.com/docs/ja/insights/

iOS シミュレーター / Android エミュレーター を使った Integration テスト

Unit, Widget テストではそれぞれの class や function, widget を検証することはできますが、結合した上でアプリがそれぞれのプラットフォームで正しく動作することを検証することはできません。

Integration テストでは、結合したアプリを実機や iOS シミュレーター / Android エミュレーター上で動作を確認することができます。

https://flutter.dev/docs/cookbook/testing/integration/introduction

しかし、これらのテストコードを実行させるためには 実機あるいは iOS シミュレーター / Android エミュレーターが必要になります。

CircleCI では iOS シミュレーター / Android エミュレーター を起動・実行できる環境が整っています。

iOS シミュレーターは macOS VM で起動させることができます。

iOS シミュレーターは起動に時間がかかるため、下記のドキュメントに記載されているように、テスト実行前に事前に起動させておくことをおすすめします。

https://circleci.com/docs/ja/testing-ios/#pre-starting-the-simulator

Android エミュレーターは Android マシンイメージを使うことで x86 Android エミュレーターを利用することが可能です。

こちらも iOS シミュレーター同様起動に時間がかかるため、下記のドキュメントに記載されているように、テスト実行前に事前に起動させておくことをおすすめします。

https://circleci.com/docs/ja/android-machine-image/#no-orb-example

おわり

今回のブログでは、CircleCI を使った Flutter の継続的インテグレーションについて紹介しました。

今回ご紹介した Flutter Orb や CircleCI の機能を活用していただき、Flutter での開発生産性をあげていただければと考えています。

Flutterおすすめ情報一覧

クリップボードにコピー