「NativeScript」の版間の差分
128行目: | 128行目: | ||
起動時に表示されるスクリーン。カッコよく作るとアプリの印象が良い。 | 起動時に表示されるスクリーン。カッコよく作るとアプリの印象が良い。 | ||
<code>App_Resoures/iOS/Assets.xcassets/LaunchScreen.Center.imageset</code> のしたにある png ファイルをサイズをそのままに書き換える。 | <code>App_Resoures/iOS/Assets.xcassets/LaunchScreen.Center.imageset</code> のしたにある png ファイルをサイズをそのままに書き換える。 | ||
+ | |||
+ | === Development certificates === | ||
+ | Development certificate は iOS app を開発者が誰かわかるようにサインするために用いられる。 | ||
+ | |||
+ | https://developer.apple.com/account/ios/certificate/certificateList.action?type=development を開いて '+' ボタンをクリック。指示に従って 'iOS App Development' certificate を作成する。 | ||
+ | ダウンロードした certificate file をダブルクリックすると、keychain に格納される。 | ||
+ | |||
+ | === Distribution certificate === | ||
+ | Distribution certificate は iTune Connect への申請が誰のものか分かるように、application binary (IPA file) にサインするために用いられる。 | ||
+ | |||
+ | https://developer.apple.com/account/ios/certificate/certificateList.action?type=development を開いて '+' ボタンをクリック。指示に従って 'iOS Distribution' certificate を作成する。 | ||
+ | ダウンロードした certificate file をダブルクリックすると、keychain に格納される。 |
2020年5月30日 (土) 19:27時点における版
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
すると、2つの質問に順番に答えていく (カーソルキー上下で選ぶ。)
? 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/ios/certificate/certificateList.action?type=development を開いて '+' ボタンをクリック。指示に従って 'iOS App Development' certificate を作成する。 ダウンロードした certificate file をダブルクリックすると、keychain に格納される。
Distribution certificate
Distribution certificate は iTune Connect への申請が誰のものか分かるように、application binary (IPA file) にサインするために用いられる。
https://developer.apple.com/account/ios/certificate/certificateList.action?type=development を開いて '+' ボタンをクリック。指示に従って 'iOS Distribution' certificate を作成する。 ダウンロードした certificate file をダブルクリックすると、keychain に格納される。