【Flutter】iOS端末（iPhone/iPad）で実機テストをする

概要

主旨

先日、Xcode16を導入したので、いよいよFlutter環境構築においてiOSのビルドに対応した。
この時点でエミレーターでのテストは出来るが、実機でないと出来ないこともある（カメラなど）。

今回は、iOS端末（iPhone/iPad）で実機テストをするための手順の備忘録を記す🛠️

FlutterでiOS端末での実機テストをしたい人は、是非とも参考にしてほしい📝

検証環境

●検証環境
macOS Sequoia 15.0
Flutter 3.22.3
Xcode 16.0
Dart 3.4.3
VSCode 1.92.1

●iOS実機端末
iPad mini 4
iOS 15.7

※ 基本的なFlutter開発環境は整っている事を前提とします

Flutter環境構築のiOSビルド

本記事ではOS端末（iPhone/iPad）で実機テストをする手順について掲載している。

それ以前に、Flutter環境構築のiOSビルド対応（シュミレーターでのテスト）については、以下の記事を参考にして欲しい。

ことの始まり

まず、ことの始まりから書いていく。

先にも述べたが「Flutter環境構築のiOSビルド」に対応したので、実機テストもしようと思い、長年の相棒である iPad mini 4 をMacにUSB接続する。

「許可」押下

・コマンドパレット(Command + Shift + P)を開き「flutter」と入力し、「Flutter: Select Device」を選択。

iOS実機端末を選択します。

実行します。

この調子なら、そのまま上手く出来るのでは❓と高を括っておりました。

ばっちりエラーになりましたね😃

No valid code signing certificates were found
You can connect to your Apple Developer account by signing in with your Apple ID
in Xcode and create an iOS Development Certificate as well as a Provisioning 
Profile for your project by:
  1- Open the Flutter project's Xcode target with
       open ios/Runner.xcworkspace
  2- Select the 'Runner' project in the navigator then the 'Runner' target
     in the project settings
  3- Make sure a 'Development Team' is selected under Signing & Capabilities > Team. 
     You may need to:
         - Log in with your Apple ID in Xcode first
         - Ensure you have a valid unique Bundle ID
         - Register your device with your Apple Developer Account
         - Let Xcode automatically provision a profile for your app
  4- Build or run your project again
  5- Trust your newly created Development Certificate on your iOS device
     via Settings > General > Device Management > [your new certificate] > Trust

For more information, please visit:
  https://developer.apple.com/library/content/documentation/IDEs/Conceptual/
  AppDistributionGuide/MaintainingCertificates/MaintainingCertificates.html

Or run on an iOS simulator without code signing
════════════════════════════════════════════════════════════════════════════════
Error: No development certificates available to code sign app for device deployment

これをGoogle翻訳で日本語に訳すと

有効なコード署名証明書が見つかりませんでした
Apple ID でサインインすると、Apple Developer アカウントに接続できます
Xcode で iOS 開発証明書とプロビジョニングを作成します。
プロジェクトのプロフィール:
1- Flutter プロジェクトの Xcode ターゲットを開きます。
ios/Runner.xcworkspace を開く
2- ナビゲータで「Runner」プロジェクトを選択し、次に「Runner」ターゲットを選択します。
プロジェクト設定で
3- [署名と機能] > [チーム] で [開発チーム] が選択されていることを確認します。
次のことが必要になる場合があります。
- 最初に Xcode で Apple ID を使用してログインします
- 有効な一意のバンドル ID を持っていることを確認してください
- Apple Developer Account にデバイスを登録します。
- Xcode がアプリのプロファイルを自動的にプロビジョニングできるようにします
4- プロジェクトを再度ビルドまたは実行する
5- iOS デバイスで新しく作成した開発証明書を信頼します
[設定] > [一般] > [デバイス管理] > [新しい証明書] > [信頼] を選択します。

詳細については、以下をご覧ください。
https://developer.apple.com/library/content/documentation/IDEs/Conceptual/
AppDistributionGuide/MaintainingCertificates/MaintainingCertificates.html

または、コード署名なしで iOS シミュレーターで実行します
═=============================== ══════════ ═===========================
エラー: デバイス展開用のコード署名アプリに使用できる開発証明書がありません

Google翻訳で日本語に訳したもの

のようになります。
面倒臭くて、泣きそうになります。

開発用証明書を作成する

開発用証明書の『Automatically manage signing』とは

”コード署名証明書を作りなさい”との事なので対応しましょう。

証明書には
１．開発用証明書（開発段階での証明書）
２．配布用証明書（アプリを配布する場合の証明書）
の２種類があります。

今回はデバッグ用なので「開発用証明書」となります。
この開発用証明書では『Automatically manage signing』を有効にすると、以下のメリットがあります。

・Xcodeが自動的に開発用証明書を作成し、さらに管理もしてくれる。
・また、コード署名に必要なプロビジョニングプロファイルも更新してくれます。

早い話、手間の掛かることをXcodeに丸投げすることができるのです。

【補足：プロビジョニングプロファイルとは】
アプリ開発元やアプリ識別IDなどの情報が入っているファイルです。
コード署名証明書の作成には、こちらも必要となってきます。

Xcodeにアカウントの設定をする

●アカウントの設定
Xcodeにアカウントを設定しましょう
（「Apple ID」は取得済みを前提とします）

Xcodeを起動します

メニューの Xcode - Settings で設定画面を開きます。

「Accounts」タブ選択。
下の方にある「＋」をクリック。

「Apple ID」を選択し、「Continue」ボタン押下

「Apple ID」を入力し、「Next」ボタン押下

パスワードを入力し、「Next」ボタン押下

Xcodeに登録されます。
Teamの部分は、後で使うので、一応覚えておくと良いでしょう

※ ここで、一旦、設定画面は閉じます。

開発用証明書の作成

「開発用証明書」を作成しましょう。
とは言え、今回『Automatically manage signing』にてXcodeにお任せするので、それほど手間はかかりません。

まずは、XcodeでFlutterプロジェクトの「ios/Runner.xcworkspace」を開きます。

メニューの File - Open を選択。

Flutterプロジェクトの「ios/Runner.xcworkspace」を選択し「Open」押下

【1】プロジェクトの「TARGETS」を選択
【2】「Signing & Capabilities」タブ選択
【3】「Automatically manage signing」にチェック
（最初から入っている筈ですが、外れていたら付けます）
【4】Teamの選択欄を開く

先ほど確認したチームを選択

このようなダイアログが出たら、macOSへのログインパスワードを入力します。
（何度も出るようなら「常に許可」を選択した方が楽かと思います）

Flutterのプロジェクト画面（XcodeではなくVSCode側）の方に行き

実行します。

おそらく、ここで『 Could not launch " … " 』と言うダイアログが出ると思います。
次項の「端末側の設定 - デベロッパのAppの許可」で対応しましょう。

端末側の設定

デベロッパのAppの許可

●『 Could not launch " … " 』
『 Could not launch " … " 』
のようなダイアログが出たら、デベロッパのAppを信頼させ、許可する必要があります。

【実機側】 設定 - 一般 - VPNとデバイス管理 を開きます

デベロッパAppの箇所をタップする

該当箇所をタップする

『 … のAppをこのiPadで信頼 』のダイアログで「信頼」を押下します。

iOS15ではこのような感じで出ると思います。

パスコードの入力をします

このように出たら「OK押下」
ちなみに Local Flutter Imagepicker と表示されてますが、これはプロジェクト名からデフォルトで設定されたアプリ名です。

これで実機テストが出来るかと思います。

●インターネットには接続しておくこと

なお、インターネットには接続しておいてください。

この他にも、環境によっては色々と出てくる場合もあります。
適宜、調査し対応していってください。

デバッグモードでインストールした場合

こんな感じでアイコンが出来ているので実行してみましょう。

このようなエラーになる。

”In iOS 14+, debug mode Flutter apps can only be launched from Flutter tooling, IDEs with Flutter plugins or from Xcode.
Alternatively, build in profile or release modes to enable launching from the home screen.”

iOS14以降では「デバッグモード」でインストールした場合、端末内から直接起動させる事は出来ないようです。

（※「プロフィールモード」「リリースモード」でビルドした場合は、端末内から直接起動させる事が出来ます）

【余談】Mac側のUSB接続認識

余談としてですが、iOS端末をUSB接続した際のMac側の認識を見てみました。

●ディスクユーティリティ

「ディスクユーティリティ」では表示されず

●システムレポート

「システムレポート」では表示される

●Finder

「Finder」では表示される。
さらに、同期など色々出来そう📱

著書

『 プログラマーにおくるFlutterアプリ開発の入門書』
2024年11月時点での最新技術をぎっしりと詰め込んであるので、アプリ開発に参画するエンジニアの人は、是非ともご覧になって頂ければと思います📱

プログラマーにおくるFlutterアプリ開発の入門書