はじめに

NativeScript(NativeScript-Vue) でプラットフォームごとにファイルやプロパティを切り替える方法。

チートシート

TL;DR

• ios, android をファイル名や、プロパティの prefix などに使う
• 詳細は チートシート や各事例を参照

目次

1. はじめに
2. TL;DR
3. 環境・条件
4. 詳細
   1. チートシート
   2. View ファイル(Vue ファイル)を分ける
   3. View ファイル(Vue ファイル)内で分岐
   4. タグ内(プロパティ)で分岐
   5. スタイルシートファイルを分ける
   6. スタイルシート内で分岐(※有料プラグイン)
   7. JS ファイルを分ける
   8. JS 内で分岐
5. まとめ
6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.5
BuildVersion:	19F101

$ node -v
v12.7.0

$ npm -v
6.14.5

$ tns --version
6.7.8

$ grep -C1 version package.json
"tns-android": {
  "version": "6.5.1"
},
"tns-ios": {
  "version": "6.5.1"
}

$ tns plugin
Dependencies:
┌───────────────────────────────┬─────────────────────┐
│ Plugin                        │ Version             │
│ @nativescript/theme           │ ^2.2.1              │
│ @vue/devtools                 │ ^5.0.6              │
│ nativescript-socketio         │ ^3.2.1              │
│ nativescript-toasty           │ ^1.3.0              │
│ nativescript-vue              │ ^2.4.0              │
│ nativescript-vue-devtools     │ ^1.2.0              │
│ tns-core-modules              │ ^6.0.0              │
└───────────────────────────────┴─────────────────────┘
Dev Dependencies:
┌────────────────────────────────────┬─────────┐
│ Plugin                             │ Version │
│ @babel/core                        │ ^7.0.0  │
│ @babel/preset-env                  │ ^7.0.0  │
│ babel-loader                       │ ^8.0.2  │
│ nativescript-dev-webpack           │ ^1.0.0  │
│ nativescript-vue-template-compiler │ ^2.0.0  │
│ nativescript-worker-loader         │ ~0.9.0  │
│ node-sass                          │ ^4.9.2  │
│ vue-loader                         │ ^15.4.0 │
└────────────────────────────────────┴─────────┘

詳細

参考: Platform-Specific Development with NativeScript - DEV

※自分の記事は NatvieScript-Vue での事例になってるけど、大本は NativeScript での話なので Angular でもいけると思う。

チートシート

View ファイル(Vue ファイル)を分ける

参考: Separate UI Views

• Hoge.ios.vue と Hoge.android.vue を作成
• import Hoge from './Hoge' とするとプラットフォームに応じたファイルが読み込まれる

以下は app/main.js での例。xxxx.vue 内でも同様のことができると思う。

1
2
3
4
5

import Hoge from './Hoge'
new Vue({
  store,
  render: h => h('frame', [h(Hoge)])
}).$start()

ちなみに Hoge.vue が存在していても、Hoge.ios.vue と Hoge.android.vue がある場合はそちらが優先される模様。

View ファイル(Vue ファイル)内で分岐

参考: Blocks of Markup Within a View

<ios></ios> タグ、<android></android> タグを使うと、表示を分岐させることができる。

1
2
3
4

<Page>
  <ios>...</ios>
  <android>...</android>
</Page>

タグ内(プロパティ)で分岐

参考: UI Element Attribute

各タグのプロパティの prefix として ios:, android: を付けると、プロパティの値を分岐させることができる。

これも ios:, android: が優先される模様。(つまり ↓ の text="common" は無視される)

1
2
3
4
5

<Label
  text="common"
  ios:text="iOS"
  android:text="Android"
/>

Vue の v-bind も問題なく使えた。

1
2
3
4

<Label
  :ios:text="'iOS'"
  :android:text="'Android'"
/>

スタイルシートファイルを分ける

参考: Separate CSS Files

app/app.ios.scss, app/app.android.scss を作成することで、個別のスタイル設定が可能になる。

※app/app.scss は無視されてしまうため、xxxx.ios.scss と xxxx.android.scss を作って、app.scss 内から @import 'xxxx'; とするのが良さそうかも。

スタイルシート内で分岐(※有料プラグイン)

参考: One CSS File, Multiple Platforms

これは有料プラグイン(@proplugins/nativescript-platform-css)が必要。

.ios, .android クラスを頭に付けると設定を分けることができるようになるらしい。

1
2

.ios Label { color: red; }
.android Label { color: green; }

JS ファイルを分ける

参考: Separate JavaScript Files

hoge.ios.js, hoge.android.js を作成することで、JS ファイルを分けることができる(らしい。未検証)。

JS 内で分岐

参考: Code Blocks

JS 内でプラットフォームを確認して分岐できる。

自分は NativeScript-Vue なので、DeviceType.js という mixin を作成して使っている。

app/mixins/DeviceType.js

1
2
3
4
5
6
7
8
9

import { isIOS, isAndroid } from "tns-core-modules/platform";
export default {
  data() {
    return {
      isIOS,
      isAndroid
    }
  },
}

app/main.js

1
2
3

import Vue from 'nativescript-vue'
import DeviceType from './mixins/DeviceType'
Vue.mixin(DeviceType);

xxxx.vue や xxxx.js で以下のように使っている。

1
2
3
4
5

if (this.isIOS) {
  // ...
} else {
  // ...
}

まとめ

• ios, android をファイル名や、プロパティの prefix などに使う
• 詳細は チートシート や各事例を参照

参考文献

• Platform-Specific Development with NativeScript - DEV
• Platform-specific CSS - Styling - NativeScript Docs

関連記事

• NativeScript, JsBarcode でバーコードを 生成/描画
• NativeScript でデバイスの輝度(明るさ)を制御する
• NativeScript で入力範囲外タップでキーボードを非表示にする
• NativeScript-Vue で次入力欄にフォーカスする方法
• NativeScript で Locale を意識した DatePicker/TimePicker
• NativeScript-Vue でページ読み込み後にページ移動やダイアログの表示
• JavaScript で URL のクエリパラメータを操作する方法
• jQuery Select2 で、初期値の設定と選択状態のクリア