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

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

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

この辺りの設定がまだの方は、[公式チュートリアル](https://codelabs.developers.google.com/codelabs/flutter-codelab-first?hl=ja#1)を参考にして、設定を行なってください。

![スクリーンショット 2024-03-15 14.33.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126131/02eb7a61-f571-7c9e-ca4b-0dbaf96d9a11.png)

# 手順

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

## 1. iPhoneとPCを繋ぐ

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126131/91fd3706-15e9-cb4e-ac5a-682f0f20b339.png)


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

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

![スクリーンショット 2024-03-15 10.41.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126131/64a3aa79-40b8-ad13-7ad1-67efaa3d84d9.png)

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

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

![スクリーンショット 2024-03-15 10.47.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126131/84165492-a13a-69a0-2119-d647ad734237.png)

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

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

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

![スクリーンショット 2024-03-15 10.58.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126131/5c1061fa-14e2-e865-adc5-a49fc0fa42b5.png)

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

![スクリーンショット 2024-03-15 10.57.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126131/50e02efc-dec0-c7b3-ec14-9ba356d1a6a0.png)

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

![スクリーンショット 2024-03-15 14.30.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126131/a6a7fbbc-f204-f832-4a6b-0cd99295465c.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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126131/48a57207-912c-80c7-c8ce-5a89ce034130.png)

↓被っていない場合
![スクリーンショット 2024-03-15 14.28.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126131/a154b8ca-ccd2-fb89-a678-febc750aaaff.png)

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

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

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

![スクリーンショット 2024-03-15 13.00.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126131/ff64d3bc-860a-7c13-50c9-3e6cee576c28.png)

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

![スクリーンショット 2024-03-15 13.03.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126131/31b9a74c-573a-0c7b-0941-c6a6b802952a.png)

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

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

![スクリーンショット 2024-03-15 14.16.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126131/43507649-ad51-2746-008d-476e8b4fa786.png)


## 7. 実行！！、、、と思いきや、、、

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

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

![スクリーンショット 2024-03-15 13.06.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126131/d897eedc-c7ad-1bbf-b93e-433e3e886bdd.png)

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

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

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

![スクリーンショット 2024-03-15 14.22.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126131/f96c5735-1b1c-58df-1d00-84c495b516fb.png)

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

![スクリーンショット 2024-03-15 14.23.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126131/79174be1-4562-9e8b-d18a-1fb4958380fc.png)

## 9. 実行！！

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

![スクリーンショット 2024-03-15 13.06.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/126131/d897eedc-c7ad-1bbf-b93e-433e3e886bdd.png)

## お疲れ様でした