580
回編集
差分
提供: fukudat.net
ナビゲーションに移動検索に移動
→インストール
NativeScript はkクロスプラットフォーム はクロスプラットフォーム (iOS と Android) のアプリケーションを構築するフレームワーク。
HTML, CSS, JavaScript を使用して OS native の API にアクセスする。[[Category:How-To]]
== [https://play.nativescript.org/ NativeScript Playground] ==
== CLI (コマンドラインインターフェイス) ==
=== インストール ===
Xcode に依存しているので、あらかじめ App Store から Xcode をインストールしておく。
cocoapods, xcodeproj に依存しているので、インストールする。
<pre>
$ sudo gem install cocoapods xcodeproj
</pre>
node.js に依存しているので、node.js をインストールする。
Mac の場合は、[[homebrew]] を使って、
これで一応はテストができる。
=== Simulator/実機でのテスト Simulatorでのテスト ===
xcode のデバイスシミュレーターでテストする時は、
<pre>
と叩く。
== App Store に載せるまで ==
</pre>
これをやってくれる便利なコマンドがあることが判明。まずは画像を images/icon.png に用意して、<pre>$ tns resources generate icons images/icon.pngGenerating icons ...Icons generation completed.</pre>すると以下のファイルが生成される。* 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 Splash screen ===
起動時に表示されるスクリーン。カッコよく作るとアプリの印象が良い。
<code>App_Resoures/iOS/Assets.xcassets/LaunchScreen.Center.imageset</code> のしたにある png ファイルをサイズをそのままに書き換える。
実はこれもコマンドで生成できる。
<pre>
$ tns resources generate splashes images/icon_transparent.png --background "#123456"
</pre>
ここで、<code>--background</code>の引数は背景色 (default = #FFFFFF (白))。
以下のファイルが生成される。
* app/App_Resources/Android/src/main/res/drawable-hdpi/background.png
* app/App_Resources/Android/src/main/res/drawable-hdpi/logo.png
* app/App_Resources/Android/src/main/res/drawable-ldpi/background.png
* app/App_Resources/Android/src/main/res/drawable-ldpi/logo.png
* app/App_Resources/Android/src/main/res/drawable-mdpi/background.png
* app/App_Resources/Android/src/main/res/drawable-mdpi/logo.png
* app/App_Resources/Android/src/main/res/drawable-xhdpi/background.png
* app/App_Resources/Android/src/main/res/drawable-xhdpi/logo.png
* app/App_Resources/Android/src/main/res/drawable-xxhdpi/background.png
* app/App_Resources/Android/src/main/res/drawable-xxhdpi/logo.png
* app/App_Resources/Android/src/main/res/drawable-xxxhdpi/background.png
* app/App_Resources/Android/src/main/res/drawable-xxxhdpi/logo.png
* app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-1125h.png
* app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-568h@2x.png
* app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-667h@2x.png
* app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-736h@3x.png
* app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape-X.png
* app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape-XR.png
* app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape-XS-Max.png
* app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape.png
* app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape@2x.png
* app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape@3x.png
* app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Portrait-XR.png
* app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Portrait-XS-Max.png
* app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Portrait.png
* app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Portrait@2x.png
* app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default.png
* app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default@2x.png
* app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill.png
* app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@2x.png
* app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@3x.png
* app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center.png
* app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@2x.png
* app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@3x.png
素晴らしい。
=== Development certificates ===
さらにApp情報と価格を決めて入力し、保存を押す。
=== Build & Upload ===
アプリの情報を https://appstoreconnect.apple.com に登録したら、アプリケーションをビルドする。
* <code>CFBundleShortVersionString</code> key に Bundle Short Version String を格納し
* <code>CFBundleVersion</code> key に Bundle Version String を格納する。
xcode のビルドツールが apple id にアクセスする。2ファクタ認証が設定されている場合、application specific password を設定しておく必要がある。
https://appleid.apple.com/account/manage にアクセスして、tns 用のパスワードを生成する。<code>xxxx-xxxx-xxxx-xxxx</code> のようなパスワードが手に入る。
いよいよビルドする。
<pre>
$ tns publish ios --appleApplicationSpecificPassword xxxx-xxxx-xxxx-xxxx
</pre>
と叩く。
これでうまくいくはずなのだが、現在の tns のバージョン (6.5.0) だと、
<pre>
error: exportArchive: Provisioning profile "<distribution-provisioning-profile-name>" doesn't include signing certificate "Apple Distribution: <YOUR NAME> (<TEAM-ID>)".
</pre>
（profileにcertificateが含まれていない）というエラーが出て、アプリの提出に失敗してしまう。しかし確かに profile には certificate が含まれている。
いろいろ試したが、次のようにやったらうまくいった。
App_Resources/iOS/build.xcconfig に以下の２行を追加。
<pre>
PROVISIONING_PROFILE = xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx;
PROVISIONING_PROFILE_SPECIFIER = <distribution-profile-name>;
</pre>
<pre>
$ tns publish ios --provision xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx --appleApplicationSpecificPassword xxxx-xxxx-xxxx-xxxx
</pre>
ただし、<code>--provision</code> の引数に与えたのは distribution provisioning profile の UUIDで、ダウンロードした profile の中に埋まっている。
うまくいくと、
<pre>
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
</pre>
てなメッセージが出る。
https://appstoreconnect.apple.com/ に戻り、My App から提出準備中のアプリを開いて、提出したビルドが現れるのを待つ。しばらく(数分)時間がかかる。
あとは、必要な情報を埋めて、右上の提出ボタンを押したら完了。初回の審査には1-2週間かかるらしい。
入力を迷った項目:
* 暗号を使うか？ = REST API を https で呼んでいるので、yes。ただし、https のみを使用にチェック。
* IDFAを使うか? = 広告を表示するので (自分は使わないが) 広告配信サービスが使うだろうから yes。
== Plugin ==
=== Geolocation Plugin ===
==== インストール ====
<pre>
$ tns plugin add nativescript-geolocation
</pre>
==== 使い方 ====
https://github.com/NativeScript/nativescript-geolocation 参照
=== NativeScript Plugin for Google Maps ===
==== インストール ====
<pre>
$ tns plugin add nativescript-google-maps-sdk
</pre>
==== 使い方 ====
詳細は https://www.npmjs.com/package/nativescript-google-maps-sdk を参照。
<code>app.module.ts</code>に以下のコードを追加：
<pre>
import * as platform from "platform";
declare var GMSServices: any;
....
if (platform.isIOS) {
GMSServices.provideAPIKey("PUT_API_KEY_HERE");
}
</pre>
地図を使うコンポーネント (例: <code>map.component.*</code>) に以下のようなコードを埋める。
<pre>map.component.html
<GridLayout>
<MapView
[latitude]="latitude"
[longitude]="longitude"
[zoom]="zoom"
[bearing]="bearing"
[tilt]="tilt"
[mapAnimationsEnabled]="mapAnimationsEnabled"
[padding]="padding"
(mapReady)="onMapReady($event)"
(markerSelect)="onMarkerSelect($event)"
(markerBeginDragging)="onMarkerBeginDragging()"
(markerEndDragging)="onMarkerEndDragging()"
(markerDrag)="onMarkerDrag()"
(cameraChanged)="onCameraChanged()"
(cameraMove)="onCameraMove()"></MapView>
</GridLayout>
</pre>
<pre>map.component.ts
import { MapView, Marker, Position, Polyline } from "nativescript-google-maps-sdk";
...
export class MapComonent implements OnInit {
private mapView: MapView;
onMapRead(event): void {
this.mapView = event.object;
...
}
onMarkerSelect(event): void {
const marker = event.marker;
const userData = marker.userData;
...
}
}
</pre>
=== NativeScript Plugin for Google Admob ===
[https://admob.google.com/home/ Google Admob] はモバイルアプリむけの広告配信サービス。
狭いスマホの画面で広告は邪魔だが、on/off をコントロールできたら、使える事もある (かも)。
[https://www.nsplugins.com/plugin/nativescript-admob NativeScript AdMob plugin] はこれを実現してくれる。
==== Install ====
<pre>
$ tns plugin add nativescript-admob
</pre>
==== 使い方 ====
NativeScript 4.0 以降は<code>App_Resources/iOS/Info.plist</code> にこれが必要。
<pre>
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-9517346003011652~2508636525</string>
</pre>
さらに、次のコマンドを叩いておく。
<pre>
$ pod repo update
</pre>
Banner広告の出し方。
トップレベルのコンポーネント (app.component.ts) か、Injectable なサービスに以下のコードを追加
<pre>
import * as Admob from "nativescript-admob";
import { isIOS } from "tns-core-modules/platform";
...
private testing: boolean = true;
private iosBannerId = "ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx";
private androidBannerId = "ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx";
public createBanner() {
Admob.createBanner({
testing: this.testing,
size: Admob.AD_SIZE.SMART_BANNER,
iosBannerId: this.iosBannerId,
androidBannerId: this.androidBannerId,
iosTestDeviceIds: ["4DC032A6-954E-4AE7-885F-8F32C14C5FAA"],
margins: {
// top: 50
bottom: 80
}
}).then(function() {
console.log("admob createBanner done");
}, function(error) {
console.log("admob createBanner error: " + error);
});
}
public hideBanner() {
Admob.hideBanner().then(function() {
console.log("admob hideBanner done");
}, function(error) {
console.log("admob hideBanner error: " + error);
});
}
</pre>
この createBanner() を呼び出すと広告が表示され、hideBanner() を呼び出すと消える。
<code>bottom:</code> が広告が表示される位置になる。<code>top:</code> と上からの座標を書く事もできる。
<pre>
public createInterstitial() {
admob.createInterstitial({
testing: true,
iosInterstitialId: "ca-app-pub-XXXXXX/YYYYY2", // add your own
androidInterstitialId: "ca-app-pub-AAAAAAAA/BBBBBB2", // add your own
// Android automatically adds the connected device as test device with testing:true, iOS does not
iosTestDeviceIds: ["ce97330130c9047ce0d4430d37d713b2"],
keywords: ["keyword1", "keyword2"], // add keywords for ad targeting
onAdClosed: function () { console.log("interstitial closed") }
}).then(
function() {
console.log("admob createInterstitial done");
},
function(error) {
console.log("admob createInterstitial error: " + error);
}
);
}
</pre>
これを呼び出すと interstitial (区切りの良いところで表示される全面広告) が表示される。
== Tips ==
=== スクリーンサイズを取得する ===
<pre>
import { screen } from "tns-core-modules/platform/platform";
...
some_method() {
console.log(`widthDIPs=${screen.mainScreen.widthDIPs}`);
console.log(`widthPixels=${screen.mainScreen.widthPixels}`);
console.log(`heightDIPs=${screen.mainScreen.heightDIPs}`);
console.log(`heightPixels=${screen.mainScreen.heightPixels}`);
console.log(`scale=${screen.mainScreen.scale}`);
}
</pre>
=== iconを使う ===
<pre>html
<Image src="font://" class="fas t-36">
<Label text="" class="fas t-36"/>
<Label [text]="text" class="fas t-36"/>
</pre>
iconを program から変更するには、3行目のパターン。ただし、text は <nowiki>&#xXXXX;</nowiki> は使えないので、次のように記述する。
<pre>typescript
text = String.fromCharCode(0xf5a0);
</pre>
icon のコードは https://fontawesome.com/icons?d=gallery で探す。
== 参考文献 ==
* [https://www.nativescript.org/ NativeScript.org]
* [https://www.npmjs.com/package/nativescript-google-maps-sdk NativeScript plugin for the Google Maps SDK] or https://market.nativescript.org/plugins/nativescript-google-maps-sdk
* [https://www.nativescript.org/blog/5-plugins-to-monetize-your-nativescript-app 5 Plugins to Monetize Your NativeScript App]
* [https://r17n.page/2020/02/20/nativescript-icon-and-splash-screen/ NativeScript で アイコン/スプラッシュスクリーン を 生成/設定]
* [http://examination-03.hatenablog.com/ サルでもできるiOSアプリ公開手順～App store 登録～]
