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 & Splash screen

標準の名前でよければ、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>
   ...

これをやってくれる便利なコマンドがあることが判明。まずは画像を images/icon.png に用意して、

$ tns resources generate icons images/icon.png
Generating icons ...
Icons generation completed.

すると以下のファイルが生成される。

• app/App_Resources/Android/src/main/res/drawable-hdpi/icon.png
• app/App_Resources/Android/src/main/res/drawable-ldpi/icon.png
• app/App_Resources/Android/src/main/res/drawable-mdpi/icon.png
• app/App_Resources/Android/src/main/res/drawable-xhdpi/icon.png
• app/App_Resources/Android/src/main/res/drawable-xxhdpi/icon.png
• app/App_Resources/Android/src/main/res/drawable-xxxhdpi/icon.png
• app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-1024.png
• app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20.png
• app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20@2x.png
• app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-20@3x.png
• app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29.png
• app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@2x.png
• app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@3x.png
• app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40.png
• app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@2x.png
• app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@3x.png
• app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@2x.png
• app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@3x.png
• app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76.png
• app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76@2x.png
• app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-83.5@2x.png

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' をクリック。'+'ボタンを押して新規Appをクリック。

ウィンドウがポップアップしてくるので、

• プラットフォーム = iOS
• 名前 = 好きな名前を30文字以内で
• プライマリ言語 = 日本語とか英語とか
• バンドルID = 上記 Bundle ID の項目で作った ID。選択できる。
• SKU　= 重複しない名前をつける。Bundle ID と同じような reverse domain notation でも良い。
• ユーザアクセス = 制限ありかなしか

を入力して、作成をクリック。

さらにApp情報と価格を決めて入力し、保存を押す。

Build & Upload

アプリの情報を https://appstoreconnect.apple.com に登録したら、アプリケーションをビルドする。

Bundle Short Version String と Bundle Version String を設定する。

• Bundle Short Version String は外部に公開するバージョン '2.1' のような番号で、リリースごとに数字を大きくする。
• Bundle Version String は内部的なバージョン番号で、公開バージョンの下に存在する複数のリリース候補を区別するために用いる。例えば '2.1.1', '2.1.2' など。

iTune Connect は同じバージョンで２回アップロードすることはできないので、必ず Bundle Version String を毎回更新する必要がある。

Bundle Short Version String はアプリがアップロードされて、承認申請に送られて、承認されたら更新する。

どちらの値も、App_Resources/iOS/Info.plist に書き込む。

• CFBundleShortVersionString key に Bundle Short Version String を格納し
• CFBundleVersion key に Bundle Version String を格納する。

xcode のビルドツールが apple id にアクセスする。2ファクタ認証が設定されている場合、application specific password を設定しておく必要がある。 https://appleid.apple.com/account/manage にアクセスして、tns 用のパスワードを生成する。xxxx-xxxx-xxxx-xxxx のようなパスワードが手に入る。

いよいよビルドする。

$ tns publish ios --appleApplicationSpecificPassword xxxx-xxxx-xxxx-xxxx

と叩く。

これでうまくいくはずなのだが、現在の tns のバージョン (6.5.0) だと、

error: exportArchive: Provisioning profile "<distribution-provisioning-profile-name>" doesn't include signing certificate "Apple Distribution: <YOUR NAME> (<TEAM-ID>)".

（profileにcertificateが含まれていない）というエラーが出て、アプリの提出に失敗してしまう。しかし確かに profile には certificate が含まれている。

いろいろ試したが、次のようにやったらうまくいった。

$ tns publish ios --provision xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx --appleApplicationSpecificPassword xxxx-xxxx-xxxx-xxxx

ただし、--provision の引数に与えたのは distribution provisioning profile の UUIDで、ダウンロードした profile の中に埋まっている。

うまくいくと、

1 packages were uploaded successfully:
        /tmp/itms-xxxxxx-xxxxx-xxxxxxx.xxxx/mybundle.itmsp
[YYYY-MM-DD HH:mm:ss JST] <main> DBG-X: Returning 0

てなメッセージが出る。

https://appstoreconnect.apple.com/ に戻り、My App から提出準備中のアプリを開いて、提出したビルドが現れるのを待つ。しばらく(数分)時間がかかる。

あとは、必要な情報を埋めて、右上の提出ボタンを押したら完了。初回の審査には1-2週間かかるらしい。

入力を迷った項目:

• 暗号を使うか？ = REST API を https で読んでいるので、yes。ただし、https のみを使用にチェック。
• IDFAを使うか? = 広告を表示するので (自分は使わないが) 広告配信サービスが使うだろうから yes。