メインコンテンツまでスキップ

Flutterプロジェクトを使い始める

Flutterは、開発者がiOSとAndroidの両方向けにネイティブアプリを作成できる、モバイルアプリSDKです。BitriseはFlutterアプリをサポートしており、Flutterに関するあらゆるニーズに対応する専用のStepsを用意しています。このガイドでは、Bitrise上でシンプルなFlutterプロジェクトのセットアップ、テスト、ビルド、デプロイの手順を説明します。

BitriseへのFlutterプロジェクトの追加Click to copy link​

プロジェクトの追加方法は他のプロジェクトと同じです。ウィザードの詳しい手順については新しいプロジェクトの追加を参照してください。このセクションでは、Flutterに固有の内容について説明します。

スキャナーによるFlutterプロジェクトの検出方法Click to copy link​

プロジェクトスキャナーは、node_modulesを除くリポジトリ内のあらゆる場所でpubspec.yamlファイルを検索します。このファイルが存在するディレクトリはすべて、Flutterプロジェクトの候補となります。

各候補について、スキャナーは以下もチェックします。

  • テストを有効にするため、少なくとも1つの*_test.dartファイルを含むtest/ディレクトリ。
  • iOSビルドを有効にするためのios/Runner.xcworkspaceディレクトリ。
  • Androidビルドを有効にするためのandroid/build.gradleまたはandroid/build.gradle.ktsファイル。
  • Webビルドを有効にするためのweb/ディレクトリ。

生成されるFlutterのWorkflowがこれらのプラットフォームをすでに処理するため、同じプロジェクトに対する単独のiOS、macOS、Androidスキャナーは無効になります。

設定できる項目Click to copy link​

CI configurationの段階では、ウィザードには1つのオプションのみが表示されます。それはProject location、つまりpubspec.yamlファイルが含まれるディレクトリです。ビルドするプラットフォームを含め、それ以外はすべて自動的に検出され、生成されるWorkflowに組み込まれます。

FlutterアプリのテストClick to copy link​

Flutterでは、ユニットテスト、ウィジェットテスト、統合テストを作成して実行できます。詳細については、Flutterの公式ドキュメントを参照してください。

自動生成されたprimaryWorkflowを使用して、Flutterアプリをテストできます。これには、Flutterのテストを実行し、コードカバレッジレポートも生成できるFlutter TestStepを含めることができます。

テストレポート

Deploy to Bitrise.ioStepは、デフォルトでFlutter TestStepの結果をTestsタブにエクスポートします。

Flutterアプリでテストを実行するには、次の手順を行います。

  1. アプリのWorkflow Editorを開き、primaryWorkflow、またはテストの実行に使用したい任意のWorkflowsを開きます。

  2. Flutter InstallStepで、Flutter SDK version or bundle URL入力欄を入力します。

    FlutterのSDKのgitリポジトリのタグまたはブランチのいずれかを指定できます。default valueはstableです。これにより、Flutterの最新の安定版ブランチが使用されます。

  3. Flutter TestStepを追加します。Additional parameters入力欄に、使用したいフラグを入力します。

    Stepは、指定されたフラグを付けてflutter testコマンドを実行します。利用可能なフラグを確認するには、自分のマシンでコマンドラインインターフェースを開き、flutter test --helpを実行してください。

    Getting_started_with_Flutter_apps.png

  4. Flutter TestStepのProject Location入力欄が正しいことを確認します。

    default valueは、Flutterプロジェクトの場所用に作成された環境変数（Env Var）です。

  5. コードカバレッジレポートを生成する場合は、Generate code coverage files?入力欄をyesに設定します。

    これにより、--coverageフラグを付けてflutter testコマンドが実行されます。

  6. テスト結果をTestsタブにエクスポートするには、Workflowの末尾にDeploy to Bitrise.ioStepを追加します。

    詳細については、Deploying and viewing test resultsを参照してください。

FlutterアプリのデプロイClick to copy link​

Flutterアプリをビルドしてデプロイするには、Workflowに次のFlutterStepsが含まれている必要があります。

  • Flutter Install
  • Flutter Build

リポジトリでプラットフォームが指定されている場合、Bitriseでプロジェクトを追加する際にデプロイWorkflowが自動的に生成されます。このWorkflowの内容はプラットフォームによって異なります。たとえば、FlutterプロジェクトにiOSプロジェクトのみが含まれている場合、WorkflowにはCertificate and profile installerStepが含まれます。

iOSとAndroidの両方のプロジェクトを同時にビルドすることも、それぞれ独自のWorkflowを使用して個別にビルドすることもできます。これは、Flutter BuildStepのPlatform入力欄でいつでも設定できます。デフォルトでは、Bitriseでアプリを追加した際にスキャナーが検出したプラットフォームに応じてStepが設定されます。

以下は、この設定で使用するWorkflowの例で、必要なStepsがすべて含まれています。

Getting_started_with_Flutter_apps.jpg

並列化のためのPipelines

これらの例では、同じWorkflow内でアプリのiOS版とAndroid版の両方をビルドおよびデプロイし、必要な処理を順番に実行することを前提としています。ただし、Pipelinesを使用すれば、1つのビルドトリガーで両方のバージョンを並列に実行することもできます。

パッケージとライブラリ

Flutterのパッケージとライブラリのビルドもサポートしています。アプリの場合と異なり、ビルドするアーティファクトがないため、WorkflowにFlutter BuildStepは必要ありません。

クロスプラットフォームアプリをbitrise.ioにデプロイするClick to copy link​

Deploy to bitrise.ioStepは、ビルドに関連するすべてのアーティファクトを、BuildのページにあるArtifactsタブにアップロードします。

生成されたバイナリファイル（Android用のAPK、またはiOS用のIPAファイル）は、公開インストールページを使用してチームメンバーと共有できます。公開インストールページはURLであり、他のユーザーと共有することで、生成されたアプリバイナリを各自のデバイスにインストールしてもらえます。また、APKまたはIPAファイルがビルドされたことを、ユーザーグループや個々のユーザーに通知することもできます。

expo.ioへの公開

Deploy to Bitrise.ioStepはExpoコマンドを使用せず、expo.ioへの公開も行いません。このStepは、アーティファクトをBitriseに公開するものであり、特定のプラットフォームに限定されません。

expo.ioに公開する必要がある場合は、Expo EjectStepのRun expo publish after eject?入力欄をyesに設定します。この場合、expo.ioに公開するためにExpoアカウントのユーザー名とパスワードを入力する必要があるので注意してください。

  1. Bitrise にアクセスして Log in、左側の Bitrise CI を選択し、プロジェクトを選択します。

  2. メインページの Workflows ボタンをクリックします。

  3. WorkflowにDeploy to bitrise.ioStepがあることを確認します。

  4. Notify: User Rolesで、このロールを付与されたユーザーのみに通知が届くようにロールを追加します。または、通知したいユーザーのメールアドレスをNotify: Emailsフィールドに入力します。

    これらのメールアドレスは必ずSecretsとして設定してください。この詳細情報は、Artifactsタブで生成されたバイナリの横にあるeyeアイコンをクリックすることで、Notificationsでも変更できます。

  5. Stepに公開インストールページを生成させたい場合は、Enable public page for the App?入力欄をtrueに設定します。

FlutterアプリをApp Store ConnectにデプロイするClick to copy link​

iOSのFlutterプロジェクトをApp Storeにデプロイするには、アプリをビルドし、IPAファイルをエクスポートして、App Storeに送信する必要があります。

テストとは異なり、これにはcode signingファイルが必要です。

  • iOS Distribution Certificate（.p12ファイル）。
  • App Store Provisioning Profile。

Flutterアプリケーションの場合、code signingではXcodeのproject settingsでTeam IDを設定する必要があります。

FlutterアプリのTeam IDの設定Click to copy link​

iOSプロジェクトをローカルで作成したら、Xcodeでそのproject settingsを確認する必要があります。具体的には、有効なTeam IDを設定する必要があります。設定しないと、Bitriseでビルドが失敗します。

  1. Xcodeで、your appのiosフォルダにあるRunner.xcworkspaceを開きます。

  2. アプリの設定を表示するには、XcodeのプロジェクトナビゲーターでRunnerプロジェクトを選択します。次に、メインビューのサイドバーでRunnerターゲットを選択します。

  3. Generalタブを選択します。

  4. SigningセクションでTeamメニューを見つけ、登録済みのApple Developerアカウントに関連付けられたチームに設定します。

  5. この変更をリポジトリにコミットしてください。

    変更のコミットを忘れないでください

    Team IDをローカルでのみ設定した場合、Bitriseでビルドが失敗します。

BitriseでのApp StoreへのFlutterデプロイの設定Click to copy link​

アプリをApp Storeにデプロイするには、code signingファイルをアップロードする必要があります。次の2つの方法があります。

  • コードsigning certificateをBitriseにアップロードし、Manage iOS Code signingStepでautomatic code signingを使用する。
  • provisioning profileとコードsigning certificateをBitriseにアップロードし、Certificate and profile installerStepで手動のcode signingを使用する。

このガイドでは、2つ目の方法である手動のcode signingについて説明します。

  1. WorkflowにCertificate and profile installerStepがあることを確認します。

  2. 必要なcode signingファイルをBitriseにアップロードします。

  3. Flutter BuildStepを開き、iOS Platform Configsの入力欄グループを見つけます。

  4. Additional parameters入力欄の値が--releaseになっていることを確認します。

  5. StepのPlatform入力欄を確認し、iOSまたはbothのいずれかに設定されていることを確認します。

  6. iOS output artifact type入力欄をarchiveに設定します。

    flutter-build-ios-config.png

  7. Export iOS and tvOS Xcode archiveStepをWorkflowに追加します。

    これはFlutter BuildStepの後に配置します。

  8. StepのDistribution method入力欄をapp-storeに設定します。

  9. Deploy to App Store ConnectStepをWorkflowの末尾に追加します。

  10. それぞれの入力欄にAppleの認証情報を入力します。

    • Apple ID。
    • パスワード。App Store Connectで二要素認証を使用している場合は、アプリケーションパスワード。

    ご安心ください。パスワードはログに表示されたり、外部に公開されたりすることはありません。

  11. ビルドを開始してください。

問題がなければ、StepによってアプリがApp Store Connectに送信されます。App Store Connectページから、Testflight経由で外部テスターにアプリを配布したり、App Store自体にリリースしたりできます。

FlutterアプリをGoogle PlayにデプロイするClick to copy link​

アプリをGoogle Playにデプロイするには、App Bundleファイルをエクスポートして署名する必要があります。次の2つの方法があります。

  • アプリのbuild.gradleファイルでcode signingを設定すると、Flutterがビルドフェーズ中にアプリに署名します。
  • 専用のStepを使用して、Bitrise上でAABまたはAPKファイルに署名する。

このガイドでは、2つ目の方法であるAndroid SignStepを使用したAAB/APKファイルへの署名について説明します。

  1. キーストアファイルを生成する。

    キーストアファイルはcode signingに必要です。

  2. Bitriseでアプリを開き、Workflow > Code signing > Android Code Signingに移動します。

  3. キーストアファイルをドラッグアンドドロップし、メタデータを入力します。

  4. Google Playへのアクセスを設定します。

    これは、アプリの最初のGoogle Playデプロイの場合にのみ必要です。

  5. Flutter BuildStepでAndroid Platform Configs入力欄グループを見つけ、Additional parameters入力欄の値が--releaseになっていることを確認します。

  6. Android output artifact type入力フィールドで、デプロイ要件に応じてAPKまたはappbundleのいずれかを選択します。

  7. Output (.apk, .aab) pattern入力欄に、Deploy to Google PlayStepが生成されたバイナリにアクセスできるパスを設定します。

    このパスは、BITRISE_SOURCE_DIR環境変数に保存されているproject sourceディレクトリからの相対パスにする必要があります。

  8. Workflow内のAndroid SignStepの後にDeploy to Google PlayStepがあることを確認します。

  9. 必要な入力フィールドに次のように入力します。

    • Service Account JSON key file path：このフィールドはリモートのURLを受け付けるため、アップロード済みのサービスアカウントJSONキーを含む環境変数を指定する必要があります。例：$BITRISEIO_SERVICE_ACCOUNT_JSON_KEY_URL。
    • Package name：Androidアプリのpackage name。
    • Track：APKをデプロイするトラック（例：alpha/beta/ロールアウト/production、または独自に設定したカスタムトラック）。

Flutter関連の追加コンテンツClick to copy link​

関連情報