[Flutter] VSCodeを使ってiPhone実機デバッグをする

Last updated at 2024-03-15Posted at 2024-03-15

この記事の実機デバッグの手順では、前提条件として以下を仮定しています。

この辺りの設定がまだの方は、公式チュートリアルを参考にして、設定を行なってください。

手順

USBケーブルを使ってiPhoneとPCを繋いでください。初めて繋いだときは、iPhone側にこのコンピュータを信頼しますか?と表示されるので、信頼ボタンを押してください。

XCodeを開いてナビゲーションタブから、Window -> Devices and Simulatorsを選んでください。

すると、XCodeが認識しているデバイスとシミュレーターを確認できる画面が表示されます。また、iPhoneに再びこのコンピュータを信頼しますか?と表示されるので、信頼ボタンを押してください。

これでデバイスのペアリングができます。ペアリングが正常に完了すると、XCodeの画面が以下のように変わります。念のため、表示されているデバイス名が、自身のデバイス名と同じことを確認して、XCodeを閉じてください。

iPhoneでFlutterアプリを起動させるには、アプリにiPhoneで使っているAppleアカウントを紐づける必要があります。

Flutterアプリフォルダの中にあるiosフォルダを開いて、Runner.xcworkspaceをダブルクリックして開いてください。

すると、XCodeが立ち上がるので、表示されたウィンドウのRunner -> Signing & CapabilitiesタブにあるAdd AccountボタンをクリックしてiPhoneで使っているAppleアカウントをFlutterアプリに紐づけてください。

Appleアカウントの紐付けが完了したら、先ほどのAdd Accountボタンがあったところが、チーム選択欄に変わっているので、そこから追加したAppleアカウントを選択してください。

Teamのところがxxx (Personal Team)になったらOKです。

Teamのすぐ下にあるBundle Identifierを世界で唯一の値に変更します。他のアプリ開発者と被らなければ良いだけなので、好きな値を入力して大丈夫です。

他のアプリ開発者と被っているかは、iOS欄のStatusの表示を見ればわかります。被っている場合、Failed Registering Bundle Identifierという警告が表示されます。

↓被っている場合

↓被っていない場合

VSCodeにFlutter拡張機能を入れていると、画面の下の方にアプリの実行先が表示されているはずです。下の図ではmacOS (darwin)と表示されています。

この部分をクリックすると、Select a device to useという項目が画面上部にでてきます。ここの選択肢に、iPhoneがあるので、クリックして選択します。

選択できたら、画面下部の実行先がiPhoneに変わったことを確認してください。

iPhoneの設定->プライバシーとセキュリティー->デベロッパモードからデベロッパモードをONにしてください。ONにするときに、再起動が必要かもしれません。

準備が整ったので実行しましょう。

VSCodeの画面右上にあるスタートボタンの隣にあるプルダウンメニューから、Run Without Debuggingを選んで実行してください。

すると、、、エラーが出ると思います。次の手順8に進んでください。

再びiPhoneに戻って、設定->一般->VPNとデバイス管理からアプリの実行を許可します。デベロッパアプリの欄に、先ほどアプリと紐づけたAppleアカウントが表示されているので、そこをタップしてください。

開いた画面にある、xxxを信頼と書かれたボタンを押してください。

手順7と同じ方法でアプリを実行してください。きっとiPhoneでアプリが開きます！！