【Flutter × Codemagic】WindowsでiOSアプリを実機テストした手順

初めての投稿なので間違い等ありましたら、ご指摘いただけますと幸いです。

# はじめに
FlutterとCodemagicを組み合わせて、Macを使わずにiOSアプリを実機テストする手順を紹介します。

主に下記ページを参考にしました。

https://qiita.com/kami_teru/items/c7ed113d0ecdf7e48ff0

この記事は、
・Flutterのサンプルプログラムを作成し、GitHub（GitLabまたは、Bitbucket）にpushしてある。
・Apple Developer's Programに登録するため、「**カードで約12,000円支払える**」かつ「**支払い後、最大48時間(2営業日?)待てる余裕がある**」が、「**~~Macが買えない!!or~~Macを持っていない**」
という人向けです。

サンプルプログラムの作成、リモートリポジトリへのpushがまだの方は下記を参考にするとできると思います。

[【超初心者向け】Visual Studio Code(VSCode)超入門 - 2020年版](https://qiita.com/tarosa0001/items/5684038d225721068b03)
[[初心者向け]GitとGitHubの使い方を徹底解説](https://qiita.com/renesisu727/items/248cb9468a402c622003)
[Windows10上にFlutterの開発環境を構築する。](https://qiita.com/smiler5617/items/fbfee798b641f0352176)

# 開発環境

* Windows 11(7以降)
* PowerShell 7 (5.0以降)
* VSCode 1.63.2
* Git 2.35.1 (2.X)
* Flutter 2.8.1
* AndroidStudio 2021.1.1.20

# Codemagicで初回ビルド
参考：[Codemagicの設定手順＆ハマりそうなところをまとめてみた](https://qiita.com/yukitaka13-1110/items/2b4fb8a25c1559f3e278)


登録は下記ページからできます。
[https://codemagic.io/signup](https://codemagic.io/signup)


① アプリタグへ移動して、「アプリケーションを追加する」を押下します。
![codemagic_build1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517641/ab05b2c0-f694-7e14-0213-8184feb0e816.png)
② Gitプロバイダを選択し「次へ：統合を承認する」を押下します。
![codemagic_build2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517641/761a95ca-5b8c-61f1-ae50-cca1ac093120.png)
③ プロジェクトのタイプを選択し、「次へ：統合を承認する」を押下します。
![codemagic_build3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517641/255e13c1-00cb-6e25-d731-bfd944781a22.png)
④ プラットフォーム向けに構築項目でiOSを選択し、「最初のビルドを開始します」を押下します。
![codemagic_build4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517641/47eeeb8c-1abf-bf81-d131-f9a682cd7fe3.png)
⑤ ブランチを選択し、「新しいビルドを開始します」を押下します。
![codemagic_build5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517641/51a32c16-ac87-10e6-71a9-fc6cbdccd446.png)
⑥ これで初回ビルドが完了しました！
※1~2分ほどかかると思います。
![codemagic_build6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517641/6427de42-922d-1aee-2921-45d1ca79b5bd.png)

しかし、アプリに署名をしていないため、このままでは実機にインストールできません。
では、アプリに署名をするための登録やら設定をしていきましょう！

ちなみに、ここで作成されたファイルはエミュレータにインストールできるそうです。

# Apple Developer Programに登録
下記リンクから登録できます。
[https://developer.apple.com/jp/programs/]
(https://developer.apple.com/jp/programs/)

参考：[【iOS】 Apple Developer Program へ登録する](https://hirokuma.blog/?p=2691)

僕は木曜日に登録して、月曜日に返信着ました。

## デバイスの登録
[https://developer.apple.com/account/]
(https://developer.apple.com/account/)

① Apple Developer Programに登録出来たら、アカウントページの`Certifcates, Identifiers & Profiles` ＞ `Deveces`タグへ移動します。

② `⊕`を押下し、下記項目を設定します。
 
* Platform - iOS, tvOS, watchOS
* DeviceName - 実機の名前（判別できるもの）
* Device ID(UDID) - 下記参照

### UDID(識別番号)の確認(※iTunes for Windowsをインストールしないとデバイスが認識されないっぽいです)
1. IphoneをPCにケーブル接続します。
2. Windowsキー + Xを押し、ダイアログから`デバイスマネージャー`を選択します。
3. `ユニバーサル シリアル バス デバイス` ＞ `Apple Mobile Device USB Composite Device`を選択します。
4. 詳細タブに移動し、プロパティを`デバイス インスタンス パス`にします。
5. 値(V)の項目に表示される`USB￥～`がIphoneのUDIDなのでコピーします。

※ 使用するUDIDは「USB￥VID_~￥PID_~￥」より後の値です。

③ `continue`を押下し、次ページで`register`を押下します。

以上で、実機の登録完了です！

次はApple Developer PortalとCodemagicの接続です。

# Apple Developer Portal統合

① `ユーザ設定` ＞ `開発者ポータル 「キーを管理する（接続）」`を押下します。
![codemagic_iosreg1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517641/ffadc51a-56e8-15b4-f9df-90ad2198f58e.png)
すると、
1. App Store Connect API key name (App Store ConnectAPIキー名)
2. Issuer ID (発行者ID)
3. Key ID (キーID)
4. API key (APIキー)
の4つが必要になるのでこれらを取得したいと思います。

② 下記のApple Store Connectへ移動して`ユーザとアクセス`へ移動します。
[https://appstoreconnect.apple.com/](https://appstoreconnect.apple.com/)

③ `キー`タブへ移動し、アクティブ項目の`⊕`を押下します。

④ 名前を入力し、アクセスを`Admin`にして`生成`を押下します。
※名前はわかりやすいもの（アプリ名など）にするといいと思います。

⑤ リロードするとAPIキーのダウンロードリンクが表示されると思います。
1. 名前
2. Issuer ID
3. キーID
4. ダウンロードした.p8ファイル
 
これで4つの項目がそろったのでCodemagicの開発者ポータルで順番に入力します。
※APIキーは1度しかダウンロードできないので大切に保管してください。

接続できると、開発者ポータルの赤い部分が緑に変わります。
これで、Apple Developer Portalとの統合が完了しました！

署名に必要な設定は次でラストです！

# バンドル識別子(Bundle identifier)の取得

バンドルIDについては下記を参照してください。
[バンドルID(Bundle identifier)とは]
(https://qiita.com/miyamotok0105/items/f24a4e10a2877ae70bc4)

① またまたApple Developer Programへ移動します。
[https://developer.apple.com/account/]
(https://developer.apple.com/account/)

② アカウントページの`Certifcates, Identifiers & Profiles` ＞ `Identifiers`タグへ移動します。

③ `⊕`を押下し、`App IDs`を選択し`continue`を押下します。

④ Select a type項目は`APP`を選択し、`continue`を押下します。

⑤ `Description`項目でアプリの簡単な説明を入力し、`Bundle ID`を設定して、`continue`を押下します。

⑥ 設定内容を確認して、`register`を押下し登録完了です！

さあ！次はiOSアプリのリリースビルドを行います。

# Cedemagicリリースビルド
ビルドの設定をしていきます。
※各項目を変更したら必ず保存しましょう。

① `Build triggers`は`Trigger on push`を選択するといいです。

② `Build`項目の`Mode`は`Release`を選択してください。
※Debugを選択するとアプリが起動できません。

③ `Distribution`項目は`Automatic`を選択します。

④ `App Store Connect API key (using keys from user settings)`は先ほど作成したAPIを選択します。

⑤ `Provisioning profile type`は`Development`を選択します。

⑥ `Bundle identifier*`は自動で入力されていると思います。

これで終わりです！設定した項目を保存し、`Start new build`でビルドを開始します！

おっと、ビルド失敗しましたね...
![build_failed.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517641/98320ece-f12a-5523-f0ed-f65cf1e4ffa7.png)

理由は簡単ですね、登録したBundle IDと作成したアプリのBundle IDが違うからです。

VSCodeを開いて、Bundle IDを更新しましょう。

Flutterプロジェクトの`ios` ＞ `Runner.xcodeproj` ＞ `project.pbxproj`ファイルで`Bundle`と検索すると、3つほど見つかると思いますので、それらを登録したBundle IDに変えます。

変更したらpushしてもう一度Codemagicでビルドしましょう！

![build_scsess.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517641/650b6ed2-cf20-aa8f-7c54-55ab824abaf2.png)

ビルド成功しましたね！登録したメールアドレス宛にCodemagicからメールが届いていると思います。

`.ipa`ファイルをタップしてインストールしてください。
![S__36266005.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517641/6ef63007-f36d-f400-c7f3-4ae4f39670ba.jpeg)

無事に実機テストすることができました！
![S__36266003.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2517641/e12d9cf6-8169-3927-5a1d-a79ef23a0654.jpeg)

以上で、WindowsでiOSアプリを実機テストした手順は終わりです。

# あとがき
実際かなりの時間ハマまってしまい、Qiitaなどの技術記事にめちゃめちゃ助けられました。
この記事も誰かの助けになれば幸いです。
読んでいただきありがとうございました！