はじめに

NativeScript でアイコン/スプラッシュスクリーンを生成する方法を調べた。

NativeScript 関連記事まとめ

TL;DR

tns resources generate icons でアイコン生成
tns resources generate splashes でスプラッシュスクリーン生成
その他細かい設定は不要

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

$ sw_vers
ProductName:	Mac OS X
ProductVersion:	10.15.3
BuildVersion:	19D76

$ node -v
v12.7.0

$ npm -v
6.10.3

$ tns --version
6.4.0

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

$ tns plugin
Dependencies:
┌───────────────────────────────┬─────────┐
│ Plugin                        │ Version │
│ @nativescript/theme           │ ^2.2.1  │
│ @vue/devtools                 │ ^5.0.6  │
│ nativescript-barcodescanner   │ ^3.4.1  │
│ nativescript-fingerprint-auth │ ^7.0.2  │
│ nativescript-plugin-firebase  │ ^10.4.0 │
│ nativescript-socketio         │ ^3.2.1  │
│ nativescript-toasty           │ ^1.3.0  │
│ nativescript-vue              │ ^2.4.0  │
│ nativescript-vue-devtools     │ ^1.2.0  │
│ tns-core-modules              │ ^6.0.0  │
│ vue-router                    │ ^3.1.5  │
└───────────────────────────────┴─────────┘
Dev Dependencies:
┌────────────────────────────────────┬─────────┐
│ Plugin                             │ Version │
│ @babel/core                        │ ^7.0.0  │
│ @babel/preset-env                  │ ^7.0.0  │
│ babel-loader                       │ ^8.0.2  │
│ nativescript-dev-webpack           │ ^1.0.0  │
│ nativescript-vue-template-compiler │ ^2.0.0  │
│ nativescript-worker-loader         │ ~0.9.0  │
│ node-sass                          │ ^4.9.2  │
│ vue-loader                         │ ^15.4.0 │
└────────────────────────────────────┴─────────┘

iPhone 11 Pro: iOS 13.3
Android HUAWEI nova lite 2: Android 9 (ビルド 9.1.0.160)

詳細

事前準備

Canva からアイコンを拝借

WEBブラウザ上で簡単に透過PNG画像を作成できるツールで背景を透過

DL/生成した画像を assets/images/ に配置。
※これが適切な配置箇所かどうかは不明なので注意

アイコンの生成

tns resources generate icons でアイコンを生成できる。

1
2
3

$ tns resources generate icons assets/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

この状態でデバイスにアプリをデプロイ(tns run など)すると、新しいアイコンに置き換わっている(はず)。

iOS

変更前(デフォルトアイコン)

変更後

Android

変更前(デフォルトアイコン)

変更後

※角丸のアイコンにしたい場合は、事前にオリジナル画像を編集しておく必要がありそう。

スプラッシュスクリーンの生成

tns resources generate splashes でスプラッシュスクリーンを生成できる。

1	$ tns resources generate splashes assets/images/icon.png

オプションで背景色を指定することも可能、未指定時は白(#FFFFFF)が採用される。

1	$ tns resources generate splashes assets/images/icon_transparent.png --background "#123456"

スプラッシュスクリーン生成が完了すると、以下のファイルが生成(置換)される。

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

iOS

変更前(デフォルトアイコン)

変更後(背景色未指定)

変更後(背景色指定: #eeffff)

※スクショ撮ってもなぜか反映されなかったので画像なし(起動時のスプラッシュスクリーン自体には反映されている)

Android

変更前(デフォルトアイコン)

変更後(背景色未指定)

変更後(背景色指定: #eeffff)

※今回は透過画像を適当に作ったので汚く見えるが、適切に作成すれば問題ないはず

Tips

iOS, Android で違うアイコン/スプラッシュスクリーンを利用

実際にそのようなシーンがあるかは不明だが、iOS, Android で違うアイコンやスプラッシュスクリーンを使いたい場合の話。

残念ながら tns resources generate icons, tns resources generate splashes にプラットフォーム指定のオプションは無い。

なので、以下のようにする。

# まずは iOS 向けを生成(実際には iOS, Android 両方向けが作られる)
$ tns resources generate icons path/to/icon_ios.png

# iOS 向けファイルを一時退避
$ mkdir app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/tmp
$ mv app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/*.png app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/tmp/

# android 向けを生成(実際には iOS, Android 両方向けが作られる)
$ tns resources generate icons path/to/icon_android.png

# iOS 向けファイルを上書き
$ mv -f app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/tmp/*.png app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset

# 一時退避先を削除
$ rmdir app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/tmp

まとめ

tns resources generate icons でアイコン生成
tns resources generate splashes でスプラッシュスクリーン生成
その他細かい設定は不要

NativeScript でアイコン/スプラッシュスクリーンを生成/設定

はじめに

TL;DR

目次

環境・条件

詳細

事前準備

アイコンの生成

iOS

Android

スプラッシュスクリーンの生成

iOS

Android

Tips

iOS, Android で違うアイコン/スプラッシュスクリーンを利用

まとめ

参考文献

関連記事

r17n

NativeScript で アイコン/スプラッシュスクリーン を 生成/設定

はじめに

TL;DR

目次

環境・条件

詳細

事前準備

アイコンの生成

iOS

Android

スプラッシュスクリーンの生成

iOS

Android

Tips

iOS, Android で違う アイコン/スプラッシュスクリーン を利用

まとめ

参考文献

関連記事

r17n

Hexo でブログを作成して Netlify で公開するまで

はじめに

TL;DR

目的・やったこと

Python で MySQL の操作が可能な ORM peewee

はじめに

Git で#から始まるコミットメッセージを登録

はじめに

TL;DR

目的・やったこと

Python requests で画像をダウンロードして保存する方法

はじめに

TL;DR

目的・やったこと

Rails で既存の DB を利用するアプリケーションの作成方法(DB 参照のみ)

はじめに

TL;DR

目的・やったこと

Python boto3 で AWS S3 を操作する

はじめに

TL;DR

目的・やったこと

Python requests + boto3 で AWS S3 に画像を直接アップロード

はじめに

TL;DR

目的・やったこと

Node.js で BTC の単位変換する satoshi-bitcoin

はじめに

TL;DR

目的・やったこと

JavaScript で setTimeout や addEventListener のコールバック関数に引数を渡す方法

はじめに

TL;DR

目的・やったこと

Node.js でディレクトリごとにバージョンを変更する nodenv

はじめに

TL;DR

目的・やったこと

NativeScript でアイコン/スプラッシュスクリーンを生成/設定

iOS, Android で違うアイコン/スプラッシュスクリーンを利用