【Flutter/Dart】iOS/Androidアプリのリリースビルドを作成・アップロードする方法!

【Flutter/Dart】iOS/Androidアプリのリリースビルドを作成・アップロードする方法!

この記事からわかること

  • Flutter/DartiOS/Androidアプリリリースする方法
  • リリースビルド作成アップロード

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Flutterで開発したiOS/Androidアプリをリリースするためにリリースビルドの作成からストアへのアップロード手順をまとめていきます。

Flutterアプリをリリースする前にやること

Flutterで開発したアプリをリリースする前に、実装漏れや問題がないか色々チェックしておきましょう。

アプリ名の変更

端末にアプリをインストールした際に表示されるアプリ名の変更は忘れることは少ないと思いますが、最後にチェックしておいてください。iOSのアプリ名を変更するにはios/Runner/Info.plistの中に定義されているCFBundleDisplayNameの値を変更すればOKです。Androidのアプリ名を変更するにはandroid/app/src/main/AndroidManifest.xmlの中に定義されているandroid:labelの値を変更すればOKです。

iPhoneホーム画面のアイコン下に表示される名前

アプリアイコンの設定

端末にアプリをインストールした際に表示されるアプリアイコンの変更も忘れることは少ないと思いますが、最後にチェックしておいてください。flutter_launcher_iconsパッケージを使用することでiOS/Androidを一括で全サイズに対応させることが可能になっています。

アプリID(BundleID)の設定

ストアにアプリを公開する際にアプリを一意に識別するためのアプリIDの設定も必要です。change_app_package_nameパッケージを使用することでプロジェクト内の変更箇所を自動で更新してくれます。

$ $ flutter pub run change_app_package_name:main com.XXXX.XXXXXX

ダークモード対応

忘れがちなのがダークモード対応です。対応方針はダークモードに合わせてアプリ内の色を変更するか、ライトモードのみにするかの2択になると思います。ライトモードに固定したい場合はCupertinoApp/MaterialAppそれぞれ以下のように指定すればOKです。

CupertinoApp(
  title: 'Sample App',
  theme: CupertinoThemeData(
    // ライトモード限定にする
    brightness: Brightness.light,
    // プライマリーカラー
    primaryColor: CustomColors.thema,
  ),
  home: startScreen,
);
MaterialApp(
  title: 'My App',
  theme: ThemeData(
    brightness: Brightness.light,
  ),
  darkTheme: ThemeData(
    brightness: Brightness.dark,
  ),
  // ライトモード限定にする
  themeMode: ThemeMode.light,
  home: MyHomePage(),
)

画面ごとに細かくデザインを変化したい場合はTheme.of(context).brightnessから現在のテーマを取得できるようです。

final isDarkMode = Theme.of(context).brightness == Brightness.dark;

デバッグモードタグの非表示(※正確には対応不要)

デバッグモードでアプリを起動していると上部バーにデバッグモードタグが表示されます。これはリリースビルドでは自動で非表示になるので特に気にしなくても良いですが、気になる場合は明示的に非表示にしておきましょう。

Flutterとは?インストール〜開発環境構築までの手順!プロジェクト作成

ここからはiOS/Androidごとにアプリをリリースする手順などをまとめていきます。

iOSアプリ:リリースビルドの作成・ストアへアップロードする手順

まずはiOSアプリ側でリリースビルドの作成・ストアへアップロードする手順をまとめていきます。必要な流れは以下になります。

  1. アプリ登録に必要となるもの
  2. スクリーンショットの準備
  3. Apple Developer Programへの登録
  4. App IDの作成
  5. AppStore Connectに登録
  6. 登録するアプリ情報を編集
  7. App情報の編集
  8. 価格および配信状況の編集
  9. Appのプライバシーの編集
  10. Xcodeからアプリをアップロード
  11. ビルド情報を編集
  12. アプリを申請する

基本的に上記の詳細な流れは以下の記事を参考にしてください。Flutter開発アプリでも同様にXcodeでios/Runnerディレクトリを表示させアプリをリリースする手順でアーカイブを作成、アップロードすればOKです。

Androidアプリ:リリースビルドの作成・ストアへアップロードする手順

続いてAndroidアプリ側でリリースビルドの作成・ストアへアップロードする手順をまとめていきます。基本的な流れは以下になりますが「2.AABファイルの準備」の部分が少し異なりました。

  1. アプリ登録に必要となるものの準備
  2. AABファイルの準備
  3. アプリ名と言語を設定
  4. アプリのセットアップ
  5. 製品版リリースの作成
  6. 画像のアップロード
  7. 申請

AABファイルの作成方法

FlutterプロジェクトではAndroid Studioの上部メニューの「Build」>「Generate Signed Bundle」が存在しませんでした。これにより紹介している「AABファイルの作成方法」とは少し異なる手順で作成が必要でした。詳細は以下の記事を参考にさせていただきました。

Qiita:【Flutter】Androidアプリリリース手順(ビルド方法)

手順は以下です。

  1. KeyStoreをコマンドラインから作成
  2. key.propertiesファイルを用意
  3. build.gradle.ktsから読み込み
  4. AABファイル(リリースビルド)の作成

1.KeyStoreをコマンドラインから作成

上部メニューが異なるためKeyStoreをコマンドラインから作成していきます。以下のフォーマットに従ってコマンドを実行します。

$ keytool -genkey -v -keystore {KeyStoreを作成したいパス} -keyalg RSA -keysize 2048 -validity 10000 -alias {エイリアス名}

例は以下のような感じです。

$ keytool -genkey -v -keystore /Users/XXXXXX/Desktop/FlutterApp/salary/my_release_key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

このコマンドを実行するとKeyStoreに保存する情報を色々問われるので入力していきます。

キーストアのパスワードを入力してください:  
新規パスワードを再入力してください: 
姓名は何ですか。
  [Unknown]:  {名前}
組織単位名は何ですか。
  [Unknown]:  {組織単位名}
組織名は何ですか。
  [Unknown]:  {組織名}
都市名または地域名は何ですか。
  [Unknown]:  {都市名または地域名}
都道府県名または州名は何ですか。
  [Unknown]:  {都道府県名}
この単位に該当する2文字の国コードは何ですか。
  [Unknown]:  JP
CN=XXXXXXX, OU=XXXXXXX, O=XXXXXXX, L=XXXXXXX, ST=XXXXXXX, C=JPでよろしいですか。
  [いいえ]:  y

10,000日間有効な2,048ビットのRSAのキー・ペアと自己署名型証明書(SHA256withRSA)を生成しています
        ディレクトリ名: CN=XXXXXXX, OU=XXXXXXX, O=XXXXXXX, L=XXXXXXX, ST=XXXXXXX, C=JP
[/Users/XXXXXX/Desktop/FlutterApp/salary/my_release_key.jksを格納中]

これで指定したディレクトリにファイルが生成されます。

2.key.propertiesファイルを用意

続いてFlutterプロジェクトのAndroidアプリでリリースビルド(AAbファイル)を作成できるようにしていきます。android/key.propertiesを作成し、先ほど入力した内容と生成したパスを記述します。


storePassword={PASSWORD}
keyPassword={PASSWORD}
keyAlias=key
storeFile={KeyStoreを作成したパス}

3.build.gradle.ktsから読み込み

続いて「build.gradle.kts」から作成したKeyStoreの情報を読み込めるようにしていきます。


// 〜〜〜〜〜〜〜〜
// key.properties をロードする
val keystorePropertiesFile = rootProject.file("key.properties")
val keystoreProperties = Properties().apply {
    if (keystorePropertiesFile.exists()) {
        load(keystorePropertiesFile.inputStream())
    }
}

android {
    // 〜〜〜〜〜〜〜〜
    // KeyStoreの情報を追加
    signingConfigs {
        create("release") {
            keyAlias = keystoreProperties["keyAlias"] as String
            keyPassword = keystoreProperties["keyPassword"] as String
            storeFile = keystoreProperties["storeFile"]?.let { file(it as String) }
            storePassword = keystoreProperties["storePassword"] as String
        }
    }

    buildTypes {
        debug {
            // 開発用
        }
        release {
            // 本番用
            // リリースに変更
            signingConfig = signingConfigs.getByName("release")
        }
    }
}

4.AABファイル(リリースビルド)の作成

これで準備が整ったので上部メニューの「Build」>「Flutter」>「Build App Bundle」をクリックするとAABファイルの生成が始まります。成功すると以下のように出力されBuilt build/app/outputs/bundle/release/app-release.aabにAABファイルが生成されるのでこちらを使用してストアにアップロードし、ストア申請処理を進めればOKです。

Running Gradle task 'bundleRelease'...                          
// 〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
Running Gradle task 'bundleRelease'...                            155.8s
✓ Built build/app/outputs/bundle/release/app-release.aab (39.2MB)
Process finished with exit code 0

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article