【iOS】 TestFlightにアプリをリリースするやり方 Flutter
今回は、TestFlightにアプリをリリースする方法を解説していきます。
TestFlightはアプリをApp storeにリリースする前に必ず踏むべきポイントです。
『ローカル→本番』ではなく、『ローカル→試験→本番』と段階を踏むことでクオリティの高いアプリにする事が可能です。最初は、TestFlightにリリースするまでの工程が長く感じますが、一度でも行なってしまえば爆速で出来ます。今回は、視覚的に分かりやすく操作手順等をまとめたので、ぜひ気軽に読んでみてください。
✅今回の内容
- 事前準備
- AppleDeveloperで証明書と識別子を登録
- 証明書の発行
- アーカイブを作成する
- アーカイブをアップロードする
- Appstoreconnectで各種設定をしてテストフライトでリリース
✅メイン内容
🛠 事前準備
1. テストフライトに載せるアプリを準備
まずは、テストフライトに載せるアプリの準備をします。
テストフライトに載せるために必要なアプリの条件は以下の通り。
- コンパイルが通る事
- Xcodeでbuildできる事
つまり、動作でエラーが起こるアプリでもコンパイルが通ってbuildできれば
テストフライトに載せる事ができます。
今回、説明用で使うアプリは以前解説をした『リアルタイムアプリ』です。
『リアルタイムアプリ』の作り方については、下記の記事を読んでもらえればと思います。
『リアルタイムアプリ』のgithubはこちら↓
🛠 AppleDeveloperで証明書と識別子を登録
1. AppleDeveloperでCertificatesを登録する
アプリの準備が完了したら、AppleDeveloperにログインします。
ログインが完了したら、『アカウント』ページに移動してください。
画面を一番下までスクロールすると下記の画面が表示されます。
赤い部分をクリックしましょう。
すると、下記の画面が表示されます。
すでに『Certificates』の登録が終えている人は、画像のようにユーザが登録されているはずです。
初めて登録される方は、『➕』を押して案内通りに作成をしていきます。
なお、最初の画面で選択するのは『Apple Development』です。
2. Identifiersを登録する
『Certificates』の登録が終わったら次に、下記の箇所をクリックします。
ここで、テストフライトにあげるアプリの識別子を登録します。
初めて登録される方は、『➕』を押します。
下記のような画面になるので、赤い部分を選択して『Continue』をクリックします。
同じく、赤い部分を選択して『Continue』をクリックします。
そうすると、以下のような画面が表示されます。
入力が必要なのは『Description』と『Bundle ID』です。
まず、『Description』から。
ここには、登録する識別子のタイトルを入れます。
次に、『Bundle ID』。
ここには、テストフライトの載せるアプリの『Bundle ID』を登録します。
アプリの『Bundle ID』は、Xcodeから確認する必要があります。
該当アプリのプロジェクトのiOS/
の中にある
『Runner.xcworkspace』をダブルクリックします。
下記の画像のように『Signing &Capabilities』を開き、『Bundle Identifier』をコピーします。
この時、デフォルトでは『com.example.プロジェクト名』となっていますが、『com.example』だと識別子の登録ができないので、任意の文字列に変更した後にコピーしてください。
(半角英数で名前とか入力すると良いかも)
コピーしてきた文字列をAppleDeveloperサイトに戻って『Bundle ID』に入力します。
そしたら、『Continue』が青くなるので、クリックします。
内容の確認画面が出てくるので、そのまま『Register』をクリックして作成します。
すると、『Identifiers』のページに先ほど登録した識別子が登録されています。
ここまでで、一旦『AppleDeveloper』の登録は完了です。🍎
🛠 証明書の発行
1. キーチェーンから認証書を発行してもらう
ここまでの登録が終わったら、Macのホーム画面で⌘command
+スペース
を押し
『キーチェーンアクセス』を起動します。
キーチェーンアクセスが起動したら、
Mac上部のタブから画像のように『認証局に証明書を要求』を押します。
無事認証局から証明書が届いたら、この作業は完了です。🍎
🛠 アーカイブを作成する
1. プロジェクトの整理
テストフライトにアプリを作成するために『アーカイブ』を作成する必要があります。
まず、『vscode』または『Android Studio』で該当のプロジェクトを起動します。
その後、ターミナルで下記のコマンドを順に実行します。
flutter clean
flutter pub get
flutter build ios
内容を簡単に解説すると、
『アプリを綺麗な状態にしてから、iosビルドを始める』という事です。
アーカイブを作成する前には、必ずこの3つを行う必要があります。
(上記のコマンドを行い忘れると、アーカイブを作成できません。)
また、flutter build ios
はしばらく時間がかかるので途中でキャンセルせずに待ちましょう。
2. アーカイブの作成
flutter build ios
が完了したら、
該当アプリの『Runner.xcworkspace』をダブルクリックしてXcodeを開きます。
ビルドするデバイスの選択で『Any iOS Device (arm64)』を選択します。
その後、Mac上部のタブから『archive』をクリックします。
アーカイブが完了すると、下記の画面が表示されます。
これでアーカイブの作成は完了です。
🛠 アーカイブをアップロードする
1. プロジェクトの整理
赤い丸部分をクリックしましょう。
基本的には、『Next』を押し続けてればOKです。
下記の項目では、『Name』と『Primary Language』を変更します。
『Name』はアプリの名前を半角英数(繋ぎ目に-
)を入れると良いと思います。
その後、また『Next』を押してを押し続けます。
しばらく押し続けるとフレームワーク等の作成が開始されます。
無事、成功すると下記の画面が表示されます。
『Upload』をクリックしてアプリをアップロードします。
無事アップロードが完了すると下記の画面が表示されます。
赤い部分をクリックして、最後の工程『Appstoreconnect』に進みましょう。
🛠 Appstoreconnectで各種設定をしてテストフライトでリリース
1. テストグループの作成
Appstoreconnectのサイトが表示されるので、『マイApp』をクリックします。
すると、先ほどアップロードしたアプリが『提出準備中』になって表示されていると思います。
赤い部分をクリックしましょう。
タブから『TestFlight』を選択します。
いよいよ終盤です。
ここでテストフライトを配布するグループを作成し、テスターを招待して、
そのメンバーにテストフライトを配布します。
内部テストをクリックします。
そしたら、テストグループの名前を入力して『作成』を押します。
すると、緑の部分にテストグループが作成されている事を確認できるので、
次は『テスター』を招待します。赤い部分をクリックしましょう。
自分のアカウントが表示されるので、チェックを押して作成します。
(右上の検索欄から他のDeveloperのメールアドレスを入力して、テスターとして招待可能です。)
2. 必要な項目を埋めて、テストフライトでリリース!
その後、下記画像の赤い丸部分をクリックして、『ベータ版Appの説明』を記述します。
入力後、右上の『保存』ボタンを押します。
あと、2項目で完了ですね。
次に『iOS』タブに切り替えた後、『管理』を押します。
何かセキュリティ対策を行なっているのであれば、該当項目を選択して『作成』を押します。
特になければ一番下を選択して、『作成』を押します。
すると、下記のようにテストフライトにアプリが作成されました。🍎
スマートフォンでAppleDeveloperに登録したメールアドレスのメールを確認してみると、
Appleからメールが届いています。
メール本文のボタンを押して、テストフライトを起動します。
『同意する』『インストール』を押して、アプリをインストールしたら起動!
【実際に端末で確認してみた】
長かったですが、これでテストフライトでアプリをリリースする事ができました。🍎
✅まとめ
長い工程でしたが、リリース出来たでしょうか?
テストフライトは、App storeにアプリをリリースする前に必ず踏んでおきたい場所です。
ローカル環境と本番環境だと全然違いますからね。
一度でも学習して、自分の手でリリースしてしまえば以降は簡単なので是非この記事を読んで
テストフライトでアプリをリリースしてみてください。
もし、この記事を読んで『テストフライトにアプリをリリースできた!』という方は
いいね❤️ボタンをよろしくお願いいたします。
今回はここまで
Discussion
ここまで、スクリーンショット付きの解説はないです!
優良な記事を書いていただきありがとうございます!
ありがとうございます🐼
文字だけの解説だとイメージつきづらいと思い、
視覚的に分かるように画像でも説明してみました!