tns run iosよ、あなたはなぜiPad Airを起動するのか？NativeScript-VueのiOSエミュレータの初期デバイスをiPhoneに変更する

# TL;DR

`package.json`に

```
"scripts": {
   "ios-iphone": "tns run ios --device 'iPhone 8'" 
  },
```

を追加する

# 教えてくれた人

https://www.youtube.com/watch?v=o6CALjTUNSQ


# tns run iosよ、あなたはなぜiPad Airを起動するのか

NativeScript−VueのアプリをMac OS Catalina10.15.4で開発中にiOSエミュレータを`tns run ios`（デフォルト）や`npm run serve:ios`(`vue-cli-plugin-nativescript-vue`でコードシェアリングしている場合)で起動すると、iPad AirのSimulatorが起動する。
<img width="1060" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152050/37f1c75c-5729-1177-3449-682239cb6344.png">
しかし私はiPhoneで確認したい。
<img width="559" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/152050/d8c3660a-d098-5fd6-7275-f8bea26304a1.png">
デフォルトのデバイスの設定を変更するにはどうすればよいのか？
利用可能なエミュレータデバイスの一覧を取得し、好みのデバイスの正式名称をみつけ、それをつかって`package.json`にnpmのコマンドを追加すればよい。

# デバイスの一覧を確認する

```zsh
$ tns device ios --available-devices

Available emulators
┌───────────────────────┬──────────┬─────────┬────────────────────┬────────────────────┬────────────┐
│ Device Name           │ Platform │ Version │ Device Identifier  │ Image Identifier   │ Error Help │
│ iPhone 8              │ iOS      │ 13.5    │ 77A88E1D-AE2F-4D55 │ 77A88E1D-AE2F-4D55 │            │
│                       │          │         │ -91C6-443A655EC2AF │ -91C6-443A655EC2AF │            │
│ iPhone 8 Plus         │ iOS      │ 13.5    │ 4B3BE0B3-03D6-4D65 │ 4B3BE0B3-03D6-4D65 │            │
│                       │          │         │ -997F-6EC1EAFB67BE │ -997F-6EC1EAFB67BE │            │
│ iPhone 11             │ iOS      │ 13.5    │ E42203D6-B46A-4B32 │ E42203D6-B46A-4B32 │            │
│                       │          │         │ -BC4C-E313010EC310 │ -BC4C-E313010EC310 │            │
│ iPhone 11 Pro         │ iOS      │ 13.5    │ D3C18B17-25B1-438E │ D3C18B17-25B1-438E │            │
│                       │          │         │ -ACFD-9BE0AD63A688 │ -ACFD-9BE0AD63A688 │            │
│ iPhone 11 Pro Max     │ iOS      │ 13.5    │ FB6AB7FD-F383-4279 │ FB6AB7FD-F383-4279 │            │
│                       │          │         │ -9D84-11D0C3600A07 │ -9D84-11D0C3600A07 │            │
│ iPhone SE (2nd        │ iOS      │ 13.5    │ D3C08BAB-44FF-4716 │ D3C08BAB-44FF-4716 │            │
│ generation)           │          │         │ -9155-351ACA2C0C6A │ -9155-351ACA2C0C6A │            │
│ iPad Pro (9.7-inch)   │ iOS      │ 13.5    │ A2CD1BE4-6E7C-453E │ A2CD1BE4-6E7C-453E │            │
│                       │          │         │ -834C-471AC302AB4B │ -834C-471AC302AB4B │            │
│ iPad (7th generation) │ iOS      │ 13.5    │ AD6AE69D-351F-491B │ AD6AE69D-351F-491B │            │
│                       │          │         │ -8500-275BAFEB5F24 │ -8500-275BAFEB5F24 │            │
│ iPad Pro (11-inch)    │ iOS      │ 13.5    │ 3E65C5CC-A8DE-4519 │ 3E65C5CC-A8DE-4519 │            │
│ (2nd generation)      │          │         │ -AEC7-A7D06437A6A1 │ -AEC7-A7D06437A6A1 │            │
│ iPad Pro (12.9-inch)  │ iOS      │ 13.5    │ DC3C58C4-9A3D-48F9 │ DC3C58C4-9A3D-48F9 │            │
│ (4th generation)      │          │         │ -A0CA-6F978AA4D3BD │ -A0CA-6F978AA4D3BD │            │
│ iPad Air (3rd         │ iOS      │ 13.5    │ E49C87CF-02ED-4BB1 │ E49C87CF-02ED-4BB1 │            │
│ generation)           │          │         │ -9685-88A8F612033F │ -9685-88A8F612033F │            │
└───────────────────────┴──────────┴─────────┴────────────────────┴────────────────────┴────────────┘

```

自分の好みのデバイスをひとつ`Device Name`から選ぶ。ここでは`iPhone 8`を使うことにしよう。


# package.jsonを編集する

つぎに、自分のNativeScript-Vueプロジェクト配下の`package.json`をテキストエディタで開く。scriptsのセクションがなければ追加する。あればそこに次の行を追加する。デバイス名は上述の通り`'iPhone 8'`になる。`"serve:iphone"`の部分は実際にコマンドラインで打ち込む際のオプションであり、好きなように変えてよい。

```
"scripts": {
   "serve:iphone": "tns run ios --device 'iPhone 8'" 
  },
```

全文は例えばこうなる

```package.json
{
  "nativescript": {
    "id": "org.nativescript.radsidenavigator",
    "tns-android": {
      "version": "6.5.0"
    },
    "tns-ios": {
      "version": "6.5.0"
    }
  },
  "scripts": {
   "serve:iphone": "tns run ios --device 'iPhone 8'" 　← added!
  },
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "dependencies": {
    "@nativescript/theme": "~2.3.3",
    "eslint": "^7.1.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-prettier": "^3.1.3",
    "eslint-plugin-vue": "^6.2.2",
    "nativescript-ui-sidedrawer": "~8.0.0",
    "nativescript-vue": "~2.5.0",
    "nativescript-vue-navigator": "^1.2.0",
    "prettier": "^2.0.5",
    "rxjs": "^6.4.0",
    "tns-core-modules": "~6.5.0"
  },
  "devDependencies": {
    "@babel/core": "~7.1.0",
    "@babel/preset-env": "~7.1.0",
    "babel-loader": "~8.0.0",
    "nativescript-dev-webpack": "~1.5.1",
    "nativescript-vue-template-compiler": "~2.5.0",
    "node-sass": "^4.7.1",
    "vue-loader": "~15.9.0"
  },
  "gitHead": "2250137db8c1e0bd0eb543e8e4563cb71480c00d",
  "readme": "NativeScript Application"
}
```

Vue-CLIのコードシェアリング機能を使ってプロジェクトをはじめた場合は

```
"serve:iphone": "npm run setup-webpack-config && tns run ios --device 'iPhone 8' && npx vue-devtools",
```
を追加すればよい。その場合、scriptsのセクションは次のようになる。

```package.json
"scripts": {
    "lint": "vue-cli-service lint",
    "build:android": "npm run setup-webpack-config && tns build android --env.production && npm run remove-webpack-config",
    "build:ios": "npm run setup-webpack-config && tns build ios --env.production && npm run remove-webpack-config",
    "build:web": "vue-cli-service build --mode production.web",
    "clean:android": "rimraf platforms/android",
    "clean:ios": "rimraf platforms/ios",
    "clean:platforms": "rimraf platforms",
    "debug:android": "npm run setup-webpack-config && tns debug android --env.development",
    "debug:ios": "npm run setup-webpack-config && tns debug ios --env.development",
    "preview:android": "npm run setup-webpack-config && tns preview --env.development --env.android",
    "preview:ios": "npm run setup-webpack-config && tns preview --env.development --env.ios",
    "remove-webpack-config": "node ./node_modules/vue-cli-plugin-nativescript-vue/lib/scripts/webpack-maintenance post",
    "serve:android": "npm run setup-webpack-config && tns run android --env.development",
    "serve:ios": "npm run setup-webpack-config && tns run ios --env.development",
    "serve:iphone": "npm run setup-webpack-config && tns run ios --device 'iPhone 8' && npx vue-devtools",
    "serve:web": "vue-cli-service serve --mode development.web",
    "setup-webpack-config": "node ./node_modules/vue-cli-plugin-nativescript-vue/lib/scripts/webpack-maintenance pre"
  },
```

# 実際にiPhoneエミュレータで起動してみる

以降は、`tns run ios`ではなく先述の`"serve:iphone"`の部分を使って

```zsh
$ npm run serve:iphone
```
などとすればiPhone 8のエミュレータが起動する（iPad Airは起動しない）。
コードシェアリング機能を使って上記のように設定した場合も同様に

```
npm run serve:iphone
```
とすればよい。コマンド名は自分に馴染むものであればなんでもよいと思うが、チームでやっている場合は共通でひとつ決めてしまえばよいと思う。