【ionic】iconとsplashとはから実装まで

# 背景
* ionicで速めにAndroidアプリとiOSアプリを実装できるそうが、その原因が共通の部分は簡単に実装できるようになった
* 今回は、初心者向けにiconとsplashの共通部分を紹介しましょう

# iconとは
* コンピュータにおけるアイコンはプログラムの内容を図や絵にして表しているもので、多くは16×16ピクセル～128×128ピクセルほどの大きさの画像で表示される。 ( [参照](https://ja.wikipedia.org/wiki/%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3)  )


# splashとは
ソフトウェアを起動した時に表示される画面である。アプリケーションにおいては、ユーザーが操作することのできない数少ない画面でもある。

# androidとiOSにiconとsplashの定義
* [Android,iOSアプリ用画像リソースとアイコンサイズのまとめ \[2017年10月更新\] \| OPTPiX Labs Blog](https://www.webtech.co.jp/blog/optpix_labs/smartphone/8961/)
* [iOS/Android アプリ開発で必要な画像のサイズ一覧 \(アイコン・スプラッシュ等\) \- 合同会社バックアップ｜iOS/Androidアプリ開発に強い制作会社](http://backapp.co.jp/blog/11573/)

# ionicに、iconとsplashの定義
* ionicでconfil.xmlにiconとsplashを定義している

iosの例

```
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon height="57" src="resources/ios/icon/icon.png" width="57" />
        <icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
        <icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
        <icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
        <icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
        <icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
        <icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
        <icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
        <icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
        <icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
        <icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
        <icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
        <icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
        <icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
        <icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
        <icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
        <icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
        <icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
        <splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
        <splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
        <splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
    </platform>
```


androidの例

```
    <platform name="android">
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    </platform>
```


# splashプラグイン
* splashの表示が各platformで実行するので、nativeを使わないといけない

splashプラグインのインストール

```
$ionic cordova plugin add cordova-plugin-splashscreen
```


# 各サイズのiconとsplashを作成
* androidやiosに対してiconとsplashサイズの種類が多い、各サイズの画像を作ることが大変である。
* 何かツールがあってオリジナルiconとsplash画像から各サイズの画像を作れるか？

### ionic cordova resources コマンド
* [ionic cordova resources \- Ionic CLI Documentation](https://ionicframework.com/docs/cli/cordova/resources/)

実行

```
$ ionic cordova resources android
✔ Collecting resource configuration and source images - done!
✔ Filtering out image resources that do not need regeneration - done!
✖ Uploading source images to prepare for transformations: 1 / 2 complete - failed!
HTTP Error 400: POST https://res.ionic.io/api/v1/upload

{"Error":"unable to read uploaded image","Width":0,"Height":0,"Type":"png","Vector":false}
```

調査
- [条件：1. the size of image should be small than 1M; 2. the suffix should be real png](https://github.com/ionic-team/ionic-cli/issues/2924)
- ちょっと厳しい条件だった

### クラウドサービスから作成
- [App Icon Maker \- Resize App Icon to all sizes for iOS/Android store](http://appiconmaker.co/)
- [MakeAppIcon \- Generate iOS and Android app icons of all sizes with a click\!](https://makeappicon.com/)

### ツールから作成
- [splashicon\-generator: Automatic icon and splash screen resizing for any Cordova based applications](https://www.npmjs.com/package/splashicon-generator)

インストール

```
$ brew install imagemagick
$ npm install splashicon-generator -g
```

実行

```
$ splashicon-generator --imagespath="resources"
```
- オリジナル画像の保存場所: resources/icon.png、 resources/splash.png
- 生成した画像の保存場所：res/*
- メリット
 - androidとios以外のplatformも対応できる: windowsやwp8

# 終わりに
* 上記の文章を読んだら、初心者もiconとsplashを理解できて自分で作成と実装できると思う。 いかかでしょうか？ 
* iosとandroidアプリを作ると、これは共通の作業である。上記の情報をうまく把握できると、作業効率が向上になって、いいんじゃないでしょうか？