中安拓也のブログ

プログラミングについて書くブログ

便利な「ionic cordova resources」コマンドで各種モバイル・タブレット端末のアイコン・スプラッシュスクリーンを作成する〜

Ionicだと、ionic cordova resourcesコマンドで、端末によって様々なサイズが必要になるアイコン・スプラッシュスクリーン画像を一発で作れて便利

バージョン情報

Angular(JavaScriptのWebフレームワーク)ベースの、ハイブリットモバイルアプリ用フレームワークである「Ionic」を使った。

  • Ionic Framework: ionic-angular 3.9.2

  • Node: v8.1.4

  • npm: 5.6.0

  • OS: macOS High Sierra

  • Xcode: Xcode 9.3 Build version 9E145

  • ionic (Ionic CLI) : 3.20.0

  • cordova (Cordova CLI) : 8.0.0

  • Angular: 5.2.9

事前準備

STEP1 ベース画像の用意

ionic cordova resourcesコマンドを実行する前に、アイコン・スプラッシュスクリーンを作る上で、ベースとなる画像が必要になる。具体的には、下記の画像2つをresoucesディレクトリ配下に配置する必要がある。

  • サイズが1024×1024px以上の、アイコン用の画像resources/icon.png

  • サイズが2732×2732px以上のスプラッシュスクリーン用の画像resources/splash.png

用意した画像のサイズが足りないと、ionic cordova resourcesコマンド実行時に下記のエラーが出る。

$ ionic cordova resources
✔ Collecting resource configuration and source images - done!
✔ Filtering out image resources that do not need regeneration - done!
✔ Uploading source images to prepare for transformations - done!
✖ Generating platform resources - failed!
Error: encountered bad status code (400) for https://res.ionic.io/api/v1/transform
body: {"Error":"source image 2208x2208 too small for Default-Portrait@~ipadpro.png, requires at least 2048x2732 source file"}
    at Response.res.on (/usr/local/lib/node_modules/ionic/node_modules/@ionic/cli-utils/lib/cordova/resources.js:150:32)
    at emitNone (events.js:105:13)
    at Response.emit (events.js:207:7)
    at emitNone (events.js:110:20)
    at IncomingMessage.emit (events.js:207:7)
    at endReadableNT (_stream_readable.js:1047:12)
    at _combinedTickCallback (internal/process/next_tick.js:102:11)
    at process._tickCallback (internal/process/next_tick.js:161:9)

STEP2 ionic config set backend pro -gionic loginコマンド

ionic cordova resourcesを実行すると、Ionicアカウントを作ってログインすることを求められる(無料のアカウントでOK)のだが、事前に、ionic config set backend pro -gionic loginコマンドを実行しておかないと、HTTP ステータス410のエラーが帰ってきて、そもそもアカウントの作成ができない。

  • 事前に実行が必要なコマンド
$ ionic config set backend pro -g
[OK] backend set to "pro" in ../../.ionic/config.json!
$ ionic login
Log into your Ionic account
If you don't have one yet, create yours by running: ionic signup

? Email: 

? Password: [hidden]
[OK] You are logged in!
> ionic ssh setup
Looks like you haven't configured your SSH settings yet.

? How would you like to connect to Ionic Pro? Skip for now
[WARN] Skipping for now. You can configure your SSH settings using ionic ssh setup.

ちなみに、、、STEP2を飛ばすと、ionic cordova resourcesコマンド実行時に下記のエラーが出る。

$ ionic cordova resources
[WARN] You need to be logged into your Ionic account in order to run ionic cordova resources.

Log into your Ionic account
If you don't have one yet, create yours by running: ionic signup

? Email: 

? Password: [hidden]
Request: POST https://api.ionic.io/login
Response: 410
Body:
{}

ionic cordova resourcesコマンド実行

上のSTEP1とSTEP2を実行した状態で、ionic cordova resourcesコマンドを打つと、アイコン・スプラッシュスクリーンが自動作成される🍺🍺🍺    

参考サイト

https://forum.ionicframework.com/t/ionic-cordova-resources-not-working/104921/6

ionicframework.com