はじめに

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

TL;DR

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 事前準備
    2. アイコンの生成
      1. iOS
      2. Android
    3. スプラッシュスクリーンの生成
      1. iOS
      2. Android
  5. まとめ
  6. 参考文献

環境・条件

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
45
46
47
48
49
50
$ 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.

アイコン生成が完了すると、以下のファイルが生成(置換)される。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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"

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

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
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)

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

まとめ

参考文献

関連記事