14
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-02-02

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

はじめに

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

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

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

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

【超初心者向け】Visual Studio Code(VSCode)超入門 - 2020年版
[初心者向け]GitとGitHubの使い方を徹底解説
Windows10上にFlutterの開発環境を構築する。

開発環境

  • 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://codemagic.io/signup

① アプリタグへ移動して、「アプリケーションを追加する」を押下します。
codemagic_build1.png
② Gitプロバイダを選択し「次へ:統合を承認する」を押下します。
codemagic_build2.png
③ プロジェクトのタイプを選択し、「次へ:統合を承認する」を押下します。
codemagic_build3.png
④ プラットフォーム向けに構築項目でiOSを選択し、「最初のビルドを開始します」を押下します。
codemagic_build4.png
⑤ ブランチを選択し、「新しいビルドを開始します」を押下します。
codemagic_build5.png
⑥ これで初回ビルドが完了しました!
※1~2分ほどかかると思います。
codemagic_build6.png

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

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

Apple Developer Programに登録

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

参考:【iOS】 Apple Developer Program へ登録する

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

デバイスの登録

[https://developer.apple.com/account/]
(https://developer.apple.com/account/)

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

を押下し、下記項目を設定します。

  • 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
すると、

  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/

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

④ 名前を入力し、アクセスを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 & ProfilesIdentifiersタグへ移動します。

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

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

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

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

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

Cedemagicリリースビルド

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

Build triggersTrigger on pushを選択するといいです。

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

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

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

Provisioning profile typeDevelopmentを選択します。

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

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

おっと、ビルド失敗しましたね...
build_failed.png

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

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

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

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

build_scsess.png

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

.ipaファイルをタップしてインストールしてください。
S__36266005.jpg

無事に実機テストすることができました!
S__36266003.jpg

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

あとがき

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

14
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
14
9

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?