LoginSignup
3
2

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

Last updated at Posted at 2024-03-15

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

  • MacOSを使っている
  • Flutterツールがインストールされている
  • VSCodeにFlutter拡張機能がインストールされている
  • XCodeがインストールされている
  • flutter create MyAppでflutterアプリフォルダを作成した

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

スクリーンショット 2024-03-15 14.33.28.png

手順

  1. iPhoneとPCを繋ぐ
  2. XCodeからデバイスのペアリング設定を行う
  3. アプリの開発者アカウントを登録する
  4. Bundle Identifierを変更する
  5. VSCodeでアプリのデプロイ先を変更する
  6. iPhoneのデベロッパモードをONにする
  7. 実行!!、、、と思いきや、、、
  8. iPhoneでアプリの実行を許可する
  9. 実行!!
  10. お疲れ様でした

1. iPhoneとPCを繋ぐ

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

image.png

2. XCodeからデバイスのペアリング設定を行う

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

スクリーンショット 2024-03-15 10.41.00.png

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

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

スクリーンショット 2024-03-15 10.47.49.png

3. アプリの開発者アカウントを登録する

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

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

スクリーンショット 2024-03-15 10.58.54.png

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

スクリーンショット 2024-03-15 10.57.14.png

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

スクリーンショット 2024-03-15 14.30.29.png

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

4. Bundle Identifierを変更する

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

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

↓被っている場合
スクリーンショット 2024-03-15 12.52.55.png

↓被っていない場合
スクリーンショット 2024-03-15 14.28.26.png

5. VSCodeでアプリのデプロイ先を変更する

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

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

スクリーンショット 2024-03-15 13.00.15.png

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

スクリーンショット 2024-03-15 13.03.34.png

6. iPhoneのデベロッパモードをONにする

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

スクリーンショット 2024-03-15 14.16.29.png

7. 実行!!、、、と思いきや、、、

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

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

スクリーンショット 2024-03-15 13.06.45.png

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

8. iPhoneでアプリの実行を許可する

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

スクリーンショット 2024-03-15 14.22.10.png

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

スクリーンショット 2024-03-15 14.23.53.png

9. 実行!!

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

スクリーンショット 2024-03-15 13.06.45.png

お疲れ様でした

3
2
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
3
2