「NativeScript」の版間の差分

2020年5月30日 (土) 22:05時点における版

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

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

NativeScript Playground

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

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

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

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 ファイルをサイズをそのままに書き換える。

Development certificates

Development certificate は iOS app を開発者が誰かわかるようにサインするために用いられる。

https://developer.apple.com/account/resources/certificates/list を開いて '+' ボタンをクリック。指示に従って 'iOS App Development' certificate を作成する。ダウンロードした certificate file をダブルクリックすると、keychain に格納される。

Distribution certificate

Distribution certificate は iTune Connect への申請が誰のものか分かるように、application binary　（IPA file) にサインするために用いられる。

https://developer.apple.com/account/resources/certificates/list を開いて '+' ボタンをクリック。指示に従って 'iOS Distribution' certificate を作成する。ダウンロードした certificate file をダブルクリックすると、keychain に格納される。

Identifiers - App ID

アプリケーションをデバイス上でテストしたり、App Store に申請するには、App ID が必要となる。 App ID は Apple が生成した prefix (Team IDとも呼ばれる) と、自分で決めた Bundle ID とマッチする文字列との組み合わせからなる。例えば、com.fukudat.* を App ID に選ぶと、com.fukudat. で始まる全ての Bundle ID のアプリケーションとマッチする。

この App ID はあとで provisioning profiles で使用する。

Device

テストで使うデバイスは、https://developer.apple.com/account/resources/devices/list　で登録しておく必要がある。

デバイスが接続されている Mac で、

$ instruments -s devices

と叩くと、device の UDID が表示されるので、それを使って登録する。

Development provisioning profile

Development provisioning profile は開発者 (の development certificate) と、App ID と device ID を関連づける。

https://developer.apple.com/account/resources/profiles/list を開いて、'+' ボタンをクリックし、'Development/iOS App Development' を選び、指示に従って新しい development provisioning profile を作成する。これは、app store への申請には必要ないが、実デバイスでのテストに必要となる。

Distribution provisioning profile

Distribution provisioning profile には複数の種類がある。App Store での申請に必要な種類は 'App Store Distribution Provisioning Profile' である。 Development provisioning profile と同様に、distribution certificate, App ID を関連付ける。

https://developer.apple.com/account/resources/profiles/list を開いて '+' ボタンをクリックし、'Distribution/App Store' を選び、指示に従って新しい distribution provisioning profile を作成する。

App Store Connect

https://appstoreconnect.apple.com/　を開いて、'My App' をクリック。