FlutterでiOSアプリを作成してストアで公開する手順
FlutterでiOSアプリを作成し、App Storeで実際に公開するまでの手順を作業ログとしてまとめました。
開発中につまづいた点や、発生したエラーの解決方法についてもメモしています。
アプリ開発・公開手順開発環境の構築開発に必要なツールのインストールApple Developer Programへの登録Bundle ID・証明書の設定検証用デバイスの登録アプリ開発プロジェクトの作成プログラムの実行プログラムの開発Appストア公開用情報の登録アプリアイコンの作成スクリーンショットの登録エラー対応ログ参考リンク
記事内に商品プロモーションを含む場合があります
アプリ開発・公開手順
以降では、アプリを開発してストアで公開するまでの主おな手順を紹介します。
開発環境の構築
開発に必要なツールのインストール
- flutterコマンド 公式サイトからFlutter SDKをインストールします。
- Xcode MacにXcodeをインストールします。 XcodeはiOSアプリを開発するために必要なツールで、Mac App Storeからインストールできます。
- (VSCode & Flutterプラグイン) エディタはお好きなものを使用できますが、私はVSCodeを利用しています。 VSCodeのプラグインに「flutter」があるので合わせてインストールします。
Apple Developer Programへの登録
作成したアプリをストアで公開するためにはApple Developer Programへ登録する必要があります。
年間で99ドルの登録費を支払う必要があり…けっこうお高めです。
Bundle ID・証明書の設定
Bundle IDとは、各アプリ固有の識別子で、App Storeでのアプリ識別に使用されます。
Bundle IDの設定は以下の通りです。
- Flutterプロジェクト内のファイル「ios/Runner.xcodeproj」を開き、 へ遷移し、「Bundle Identifier」に任意のIDを記入します。
- 「Automarically manage sining」にチェックし、自動署名設定を有効にします。
自動署名を利用しない場合はProvisioning Profileを設定することとなります。
Provisioning Profileの登録手順
- Flutterプロジェクト内のファイル「ios/Runner.xcodeproj」を開き、 へ遷移し、「Bundle Identifier」に任意のIDを記入します。
- Apple DeveloperサイトのCertificates, Identifiers & ProfilesよりProvisioning Profileを登録します。以下の項目を設定してください。
- Distribution: Ad Hoc
- app ID: Runner.xcodeprojの「Setting & Capabilities」から指定できるBundle Identifier
検証用デバイスの登録
登録時に必要なUDIDはXCODEの以下の個所から確認できます。
アプリ開発
プロジェクトの作成
VSCode上でプロジェクトを作成するには、「command + shift + P」でメニューから「Flutter: New Project」を選択します。
テンプレートは「Application」を選択し、プロジェクトを保存するフォルダを選択後、プロジェクト名を入力すると雛形のプロジェクトが作成されます。
ターミナルから直接プロジェクトを作成するには、以下のflutterコマンドを実行します。
プログラムの実行
以下のflutterコマンドを使ってアプリを起動します。
プログラムの開発
例えば「shared_preference」（v2.3.1）パッケージを利用したい場合、pubspec.yamlの「dependencies」に「shared_preferences: ^2.3.1」を追加します。
ターミナルで以下のコマンドを実行することでも同様の記述を加えることが可能です。
ターミナルで以下のコマンドを実行し、上記でpubspec.yamlに追加したパッケージをダウンロードします。
実際にパッケージを利用するファイルにて、インポート文を記述して利用します。
Appストア公開用情報の登録
個人でアプリを公開する場合は、開発者名としてローマ字表記の実名を公開しなければならないのでご注意ください。
参考：
アプリアイコンの作成
様々な機種に合わせて複数サイズのアイコンを登録する必要がありますが、以下に記載の手順で一括作成できるので、のアイコンのみ用意すればOKです。
以降はiOS用とAndroid用のアプリアイコンとして一括生成（変換）する手順です。
まず、pubspec.yaml に を追加します。
pubspec.yaml の「image_path」に指定したパスに用意したアイコンを置きます。
以下のコマンドを実行することで、必要が画像が一括作成されます。
作成された画像はから確認できます。
スクリーンショットの登録
Appストアのアプリ説明画像を登録する必要があります。
、、の3種類の画像セットを用意します。
エラー対応ログ
iOSシミュレータが突然起動しなくなった → CoreSimulatorにあるキャッシュの削除で解決
実機テストでProvisioning profileのエラー → Apple Developperで実機登録で解決
エラー「Using the Impeller rendering backend」→ info.plist編集で解決
以下のエラーが発生。
ios/Runner/info.plistに以下のコードを追加することで解決。
エラー「requires a higher minimum iOS deployment version」→ Podfile編集で解決
iOS機器でアプリ実行（Run> Start Debugging）すると以下のエラーが発生した。
に以下のコードを追加することで解決。
参考リンク
| https://docs.flutter.dev/ | Flutter公式サイト |
| https://flutter.github.io/samples/# | Flutter公式のサンプルソースコード集 |
| Flutter実践開発 | 分かりやすかったFlutter参考書籍 |
| https://flutter.ctrnost.com/ | 日本語によるFlutterの解説まとめサイト |