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

16878 ワード
nativescript-vue NativeScript macOSCatalina Vue.js iOS iOS テキストリンク

TL;DR

package.jsonに

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

を追加する

教えてくれた人

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が起動する。

しかし私はiPhoneで確認したい。

デフォルトのデバイスの設定を変更するにはどうすればよいのか？
利用可能なエミュレータデバイスの一覧を取得し、好みのデバイスの正式名称をみつけ、それをつかってpackage.jsonにnpmのコマンドを追加すればよい。

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

$ 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"の部分を使って

$ npm run serve:iphone

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

npm run serve:iphone

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