NativeScript

NativeScript はkクロスプラットフォーム (iOS と Android) のアプリケーションを構築するフレームワーク。 HTML, CSS, JavaScript を使用して OS native の API にアクセスする。

インストール方法を含めて、ドキュメントは https://docs.nativescript.org/ にある。

NativeScript Playground

NativeScript を使い始めるための、ブラウザー上の開発環境。

モバイルデバイスと組み合わせて使う。iOSの場合、

• NativeScript Playground
• NativeScript Preview

をインストールしておく。

Tutorialで NativeScript の機能を試してみることができる。 モバイルデバイスにインストールした NativeScript Preview で見た目や動作が確認できる。

CLI (コマンドラインインターフェイス)

node.js に依存しているので、node.js をインストールする。 Mac の場合は、homebrew を使って、

$ brew install node

でOK。

CLI は npm を使って、

$ npm install --global nativescript

を実行。すると、いろいろ聞いてくるので、適当に答えると、 tns というコマンドが使えるようになる。

なお、2020/5現在、node のバージョンが新しすぎると警告がたくさん出る。nvm で v13.13.0 にセットして黙らせる。

プロジェクトの作成

新しいプロジェクトの名前を "my-project" として、新規に作成するために、次のコマンドを叩く。

$ tns create my-project

すると、２つの質問に順番に答えていく (カーソルキー上下で選ぶ。)

? First, which style of NativeScript project would you like to use:
❯ Angular           |  Learn more at https://nativescript.org/angular 
  Vue.js            |  Learn more at https://nativescript.org/vue 
  Plain TypeScript  |  Learn more at https://nativescript.org/typescript 
  Plain JavaScript  |  Use NativeScript without any framework 
? Next, which template would you like to start from:
  Hello World  |  A Hello World app 
❯ SideDrawer   |  An app with pre-built pages that uses a drawer for navigation 
  Tabs         |  An app with pre-built pages that uses tabs for navigation

ここでは、Angular と SideDrawer を選んでみた。 すると、カレントディレクトリに my-project というディレクトリができて、その中に開発環境が作られる。

この辺りのドキュメントを読みながらアプリを作成する。

Preview

プロジェクトディレクトリに移動して、開発する。

$ cd my-project

Angular を選んだので、src/app のしたに app.component.ts, app.module.ts などのソースコードが展開されている。 これらのファイルをエディットしてアプリを作っていく。

試したくなったら (というか、何も変更しなくても最初からサンプルアプリになっているので)、preview コマンドを叩く。

$ tns preview

すると、QRコードが画面表示されるので、モバイルデバイスにインストールした NativeScript Playground でスキャンする。 しばらくコンパイルに時間がかかったあと、モバイルデバイスが画面遷移して NativeScript Preview 上でアプリが実行される。

これで一応はテストができる。

Simulator/実機でのテスト

xcode のデバイスシミュレーターでテストする時は、

$ tns run ios

と叩く。

特定のデバイスで実行したいなら、

$ instruments -s devices

を実行すると、Simulator上の様々な種類のデバイスの device id のリストが表示されるので、

$ tns run ios --device <device id>

と叩く。

リアルデバイス (iPhone, iPad) を繋いでおくとその device id も表示されるので、実機でのテストも可能。

App Store に載せるまで

https://docs.nativescript.org/tooling/publishing/publishing-ios-apps を参考にやってみる。

まず Apple の Developer Member になる必要がある。https://developer.apple.com/membercenter で登録する。 年間11,800円かかる。

Bundle ID

Bundle ID を決める。Bundle ID は reverse domain name notation に従う。 例えば、com.fukudat.<application-name>のようなもの。

これを、package.json ファイルの "nativescript/id" の値に書き込む。

App name

アプリケーションの表示名を決める。アプリケーションアイコンのしたに表示される。

App_Resources/iOS/Info.plistファイルの CFBundleDisplayName key の値として設定する。

App icons

標準の名前でよければ、App_Resoures/iOS のしたにあるicon.png, icon@2x.png, icon@3x.pngを書き換える。 ファイル名を変えたい時は、App_Resources/iOS/Info.plistを以下のように書き換える。

    ...
    <key>CFBundleIconFiles</key>
    <array>
        <string>Icon@2x.png</string>
        <string>Icon.png</string>
        <string>Icon-Small@3x.png</string>
        <string>Icon-Small@2x.png</string>
        <string>Icon-Small.png</string>
        <string>Icon-Small-50@2x.png</string>
        <!-- etc -->
    </array>
   ...

Launch files

起動時に表示されるスクリーン。カッコよく作るとアプリの印象が良い。 App_Resoures/iOS/Assets.xcassets/LaunchScreen.Center.imageset のしたにある png ファイルをサイズをそのままに書き換える。