はじめに

NativeScript で作成したアプリのビルド手順やリリース手順について整理した。

TL;DR

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. iOS
      1. Bundle ID
      2. アプリ名
      3. アプリアイコン
      4. 起動用ファイル(起動画面、ストーリーボード)
      5. Certificates, Identifiers, Profiles の 取得/設定
      6. App Store Connect への提出
    2. Android
      1. Application ID, パッケージ名 の変更
      2. アプリ名
      3. アプリアイコン
      4. 起動画面
      5. リリース用証明書の生成
      6. Google Play Developer Console でアプリ新規作成
      7. バージョンの変更
      8. ビルド
    3. NativeScript Sidekick
  5. まとめ
  6. その他・メモ
    1. tns appstore
  7. 参考文献

環境・条件

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
ProductName:	Mac OS X
ProductVersion:	10.15.3
BuildVersion:	19D76

$ node -v
v12.7.0

$ npm -v
6.10.3

$ npm ls -g @vue/cli @vue/cli-init
/Users/foo/.nodenv/versions/12.7.0/lib
├── @vue/cli@4.2.2
└── @vue/cli-init@4.2.2

$ tns --version
6.4.0

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

$ sudo gem list --local | grep -e xcode -e cocoa
cocoapods (1.8.4)
cocoapods-core (1.8.4)
cocoapods-deintegrate (1.0.4)
cocoapods-downloader (1.3.0)
cocoapods-plugins (1.0.0)
cocoapods-search (1.0.0)
cocoapods-stats (1.1.0)
cocoapods-trunk (1.4.1)
cocoapods-try (1.1.0)
xcodeproj (1.14.0)

$ xcodebuild -version
Xcode 11.3.1
Build version 11C504

$ echo $JAVA_HOME
/Library/Java/JavaVirtualMachines/jdk1.8.0_221.jdk/Contents/Home
  • iPhone 11 Pro: iOS 13.3
  • Android HUAWEI nova lite 2: Android 9 (ビルド 9.1.0.160)

詳細

iOS

Publishing for iOS に詳細な手順が書かれている。

Bundle ID

参考: Bundle ID

package.json 内に定義されているので、必要に応じて変更。あわせて name, description なども変更しておくと良い。

1
2
3
4
5
6
7
8
9
10
11
{
  "name": "nativescript-vue-example",  // *****
  "version": "1.0.0",  // *****
  "description": "A native application built with NativeScript-Vue",  // *****
  ...
  "nativescript": {
    "id": "co.jp.example.app",  // *****
    ...
  },
  ...
}

アプリ名

参考: App name

app/App_Resources/iOS/Info.plist の CFBundleDisplayName を変更する。

1
2
3
4
5
6
7
8
...
<dict>
  ...
  <key>CFBundleDisplayName</key>
  <string>${PRODUCT_NAME}</string>  <!-- ***** -->
  ...
</dict>
...

Nativescript - iOS app name? - Stack Overflow によると、${PRODUCT_NAME} はアプリのルートディレクトリ名(をベースにしたもの)になる模様。
※some-app だと someapp という - 抜きの名前になった。

アプリアイコン

参考: App icons

NativeScript で アイコン/スプラッシュスクリーン を 生成/設定 に記載の通り、tns resources generate icons で生成する。

デフォルト命名規則で良ければ他の作業は不要。デフォルト命名規則とは異なるファイル名を利用する場合は、app/App_Resources/iOS/Info.plist の CFBundleIconFiles, CFBundleIcon を設定する。詳しくは Example 1: How to customise Info.plist.__> を参照

起動用ファイル(起動画面、ストーリーボード)

参考: Launch files

NativeScript で アイコン/スプラッシュスクリーン を 生成/設定 に記載の通り、tns resources generate splashes で生成する。

公式ガイドに注意点含む内容が色々と書かれているが、コマンドで生成しておけば問題ないはず。

アイコンと同様、app/App_Resources/iOS/Info.plist の UILaunchImageFile, UILaunchImages で設定可能。

Certificates, Identifiers, Profiles の 取得/設定

参考: Certificates, identifiers & profiles

一般的な iOS アプリリリースのルールに従って、Certificates などを 取得/設定すれば良い。公式ガイドには注意点などが書かれている。

App Store Connect への提出

参考: App Store Connect

App Store Connect でアプリ作成

参考: Creating an app

事前に App Store Connect でアプリを作成しておく。

バージョンの変更

参考: Build versioning

app/App_Resources/iOS/Info.plist の CFBundleShortVersionString, CFBundleVersion を変更。

1
2
3
4
5
6
7
8
9
10
...
<dict>
  ...
  <key>CFBundleShortVersionString</key>
  <string>1.2</string>
  <key>CFBundleVersion</key>
  <string>1.2.3</string>
  ...
</dict>
...
ビルド/リリース

2つの方法が利用可能

  • CLI でビルド〜リリースを実施
  • Xcode から手動でビルド〜リリースを実施
CLI 利用

※色々と試したが、自分の環境では CLI でのリリースはうまくいかなかったので、(現時点では)Xcode からのリリースを利用している。

参考: Submit from the NativeScript CLI

tns publish ios でビルド〜リリースまで実施。

1
$ tns publish ios

2FA(2要素認証, 2段階認証)を有効にしている場合は、 --appleApplicationSpecificPassword を指定する必要がある。
※Apple IDを管理 で App用パスワードを生成しておく。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ tns publish ios \
  --appleApplicationSpecificPassword abcd-efgh-ijkl-mnop # App用パスワード
? Apple ID your.apple.id@example.com
? Apple ID password [hidden]
? Please enter the 6 digit code 123456  # Apple デバイスに通知が来るので表示内容を入力
...

# 2FA 設定済みで、--appleApplicationSpecificPassword 未指定の場合は下記エラー
$ tns publish ios
? Apple ID your.apple.id@example.com
? Apple ID password [hidden]
Your account has two-factor authentication enabled but --appleApplicationSpecificPassword option is not provided.
To generate an application-specific password, please go to https://appleid.apple.com/account/manage.
This password will be used for the iTunes Transporter, which is used to upload your application.

いちいち Apple ID, Password を打つのはダルいという場合は、引数として指定することも可能。

1
2
3
$ tns publish ios \
  your.apple.id@example.com YourAppleIdPass \
  --appleApplicationSpecificPassword abcd-efgh-ijkl-mnop

Provisioning Profile や Signing Identity を指定することも可能

1
2
3
4
5
$ tns publish ios \
  your.apple.id@example.com YourAppleIdPass \
  12345678-90ab-cdef-1234-567890abcdef \  # Provisioning Profile UUID(UDID)
  'Apple Distribution' \ # Signing Identity
  --appleApplicationSpecificPassword abcd-efgh-ijkl-mnop

もしくは tns build ios --for-device --release, tns publish ios --ipa path/to/ipa の組み合わせでもリリース可能。

tns build ios --for-device --release を実行すると platforms/ios/build/Release-iphoneos/xxxx.ipa に ipa ファイルが生成される。

1
2
3
4
$ tns build ios --for-device --release
...
Project successfully built.
The build result is located at: /.../your-app/platforms/ios/build/Release-iphoneos/xxxx.ipa

--copy-to path オプションを指定すると、ビルドファイルのコピー先やファイル名を指定可能。
※platforms/ios/build/Release-iphoneos/xxxx.ipa 自体も生成(更新)される。

1
2
3
4
$ tns build ios --for-device --release --copy-to ./test.ipa
...
Project successfully built.
Copied file '/.../your-app/platforms/ios/build/Release-iphoneos/xxxx.ipa' to '/.../your-app/test.ipa'.

生成された ipa ファイルのパスを指定して tns publish ios --ipa path/to/ipa を実行する。引数設定は前述の通り。

1
2
3
4
$ tns publish ios --ipa path/to/ipa
? Apple ID your.apple.id@example.com
? Apple ID password [hidden]
...

なお、アップロード成功まで確認したかったが、Provisioning profile "xxxx" doesn't include signing certificate "xxxx". でハマってしまい確認できていない。

以下サイトなどを参考に色々と試したが、うまく解決できなかったのでここでいったん断念。

Xcode 利用

参考: Submit from Xcode

tns prepare ios で Xcode プロジェクトを作成(更新)し、以降は Xcode でアーカイブやアップロードを実施すれば良い。

1
2
3
4
5
6
7
8
$ tns prepare ios
Preparing project...
...
Project successfully prepared (ios)
...

# コマンド完了したら Xcode で作業
$ open platforms/ios/<your-app>.xcworkspace/

Android

Publishing for Android に詳細な手順が書かれている。

Application ID, パッケージ名 の変更

参考: Application Id and Package Name

package.json の nativescript.id を変更後、tns prepare android で Android 環境を再構築。

1
2
3
4
5
6
7
8
{
  ...
  "nativescript": {
    "id": "com.example.app.name",
    ...
  },
  ...
}
1
2
3
4
5
$ tns prepare android
Preparing project...
...
Project successfully prepared (android)
...

アプリ名

参考: App name

app/App_Resources/Android/src/main/res/values/strings.xml, app/App_Resources/Android/src/main/res/values-v21/strings.xml で設定。
※参考: android - What is the use of a …-v21.xml? - Stack Overflow

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">YourAppName </string>
    <string name="title_activity_kimera">YourAppName </string>
</resources>

title_activity_kimera はアクションバーに表示される名称っぽい？
参考: NativeScriptでiOSアプリのローカライズ情報を日本語のみにする方法 - Qiita

アプリアイコン

参考: App icons

NativeScript で アイコン/スプラッシュスクリーン を 生成/設定 に記載の通り、tns resources generate icons で生成する。

デフォルト命名規則で良ければ他の作業は不要。デフォルト命名規則とは異なるファイル名を利用する場合は、app/App_Resources/Android/src/main/AndroidManifest.xml の android:icon="@drawable/icon" を設定する。

起動画面

参考: Launch files

NativeScript で アイコン/スプラッシュスクリーン を 生成/設定 に記載の通り、tns resources generate splashes で生成する。

※Android そのものには起動画面の機能はないらしい、詳しくは Creating Launch Screen and App Icons for Android を参照

リリース用証明書の生成

参考: Release certificate

keytool -genkey を実行。
※1度リリースに使用したものを、紛失や上書きするとアプリの更新ができなくなるので注意。

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
$ keytool -genkey -v \
  -keystore <my-release-key>.keystore \
  -alias <alias_name> \
  -keyalg RSA \
  -keysize 2048 -validity 36500
# 以降は各環境に合わせて設定
キーストアのパスワードを入力してください:
新規パスワードを再入力してください:
姓名は何ですか。
  [Unknown]:
組織単位名は何ですか。
  [Unknown]:
組織名は何ですか。
  [Unknown]:
都市名または地域名は何ですか。
  [Unknown]:
都道府県名または州名は何ですか。
  [Unknown]:
この単位に該当する2文字の国コードは何ですか。
  [Unknown]:
CN=Unknown, OU=Unknown, O=Unknown, L=Unknown, ST=Unknown, C=Unknownでよろしいですか。
  [いいえ]:  Y

36,500日間有効な2,048ビットのRSAのキー・ペアと自己署名型証明書(SHA256withRSA)を生成しています
	ディレクトリ名: CN=Unknown, OU=Unknown, O=Unknown, L=Unknown, ST=Unknown, C=Unknown
<alias_name>のキー・パスワードを入力してください
	(キーストアのパスワードと同じ場合はRETURNを押してください):
[my-release-key.keystoreを格納中]

Warning:
JKSキーストアは独自の形式を使用しています。"keytool -importkeystore -srckeystore android-release.keystore -destkeystore android-release.keystore -deststoretype pkcs12"を使用する業界標準の形式であるPKCS12に移行することをお薦めします。

Google Play Developer Console でアプリ新規作成

参考: Google Play Developer Console

Google Play Developer Console でアプリの新規作成などを実施。

バージョンの変更

参考: Build versioning

app/App_Resources/Android/src/main/AndroidManifest.xml の android:versionCode, android:versionName を変更。

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  package="__PACKAGE__"
  android:versionCode="10000"
  android:versionName="1.0">

ビルド

参考: Build signed release APK

tns build android --release で .apk ファイルを生成。

1
2
3
4
5
6
7
8
9
10
$ tns build android --release \
  --key-store-path <path-to-your-keystore> \
  --key-store-password <your-key-store-password> \
  --key-store-alias <your-alias-name> \
  --key-store-alias-password <your-alias-password> \
  --copy-to <apk-location>.apk
Preparing project...
...
Project successfully built.
Copied file '/.../platforms/android/app/build/outputs/apk/release/app-release.apk' to '/.../xxxx.apk'.

--aab オプションを指定することで、ユーザーがダウンロードする際のファイルサイズを小さくできる(らしい)。
詳細:

1
2
3
4
5
6
7
8
9
10
11
$ tns build android --release \
  --key-store-path <path-to-your-keystore> \
  --key-store-password <your-key-store-password> \
  --key-store-alias <your-alias-name> \
  --key-store-alias-password <your-alias-password> \
  --aab \ # *****
  --copy-to <aab-location>.aab # .aab にする
Preparing project...
...
Project successfully built.
Copied file '/.../platforms/android/app/build/outputs/bundle/release/app.aab' to '/.../xxxx.aab'.

あとは作成したリリースファイルを Google Play にアップロードすれば OK。

Android には tns publish ios のような CLI は用意されていないので、以下の手段でアップロードする。
参考: Submission automation

NativeScript Sidekick

NativeScript Sidekick というツールもあるらしいが未確認。

まとめ

その他・メモ

tns appstore

tns appstore で iOS アプリ一覧が確認できる

1
2
3
4
5
6
7
$ tns appstore your.apple.id@example.com YourAppleIdPassword --team-id 1234567890
? Please enter the 6 digit code 359393
┌────────────────────────────┬───────────────────────────────────┬───────────────────┐
│ Application Name           │ Bundle Identifier                 │ In Flight Version │
│ My-App                     │ com.example.app                   │ 1.0.0             │
│ ...                        │ ...                               │ ...               │
└────────────────────────────┴───────────────────────────────────┴───────────────────┘

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list