LoginSignup
4

More than 5 years have passed since last update.

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

Posted at

背景

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

iconとは

  • コンピュータにおけるアイコンはプログラムの内容を図や絵にして表しているもので、多くは16×16ピクセル~128×128ピクセルほどの大きさの画像で表示される。 ( 参照 )

splashとは

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

androidとiOSにiconとsplashの定義

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 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
- ちょっと厳しい条件だった

クラウドサービスから作成

ツールから作成

インストール

$ 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アプリを作ると、これは共通の作業である。上記の情報をうまく把握できると、作業効率が向上になって、いいんじゃないでしょうか?

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4