LoginSignup
6

More than 5 years have passed since last update.

アプリ開発用に必要サイズの画像を生成するウェブサービスを作ってみた

Last updated at Posted at 2018-03-08

はじめに

iOS/macOSのアプリ開発中、アイコンの設定をするときに様々なサイズごとの画像ファイルが必要となり、これを用意するのが毎回面倒でした。そこで、オリジナルの画像ファイルを投げるだけで必要サイズの画像ファイルを生成してパッケージングしてくれるものを作ろうと思い至りました。
macOS向けのネイティブアプリにしてもよかったのですが、OSに関わらず使えた方が便利だろうということで、ウェブアプリを作ることにしました。結果的に自分が今まで逃げてきたサーバーサイドの勉強も一緒にできました。

使った言語/技術/環境

  • Javascript
  • shell script
  • ImageMagick
  • node.js
  • forever.js
  • AWS EC2

成果物

できたウェブサービスがこちら->ImageConverter

トップ画像.png

使い方

  • プルダウンメニューで画像ファイルを選択するか、画像ファイルをそのまま破線の内部にドラッグ&ドロップして元ファイルを指定
  • プルダウンメニューで出力形式を選択
  • 変換を押して待つとZIPファイルがダウンロードされる
  • ZIPファイルを解凍すると必要な画像ファイルが入手できる

仕様

  • 対応している入力画像ファイル形式はPNGかJPEG(出力されるのはPNG)
  • AWSの無料枠なのでどのくらい負荷に耐えられるのかは不明

出力形式

  • iOS: icon -> iPhoneとiPadアプリのアイコンに必要な画像ファイルセット
  • iOS: icon corner radius -> 1024px×1024pxの角丸画像
  • iOS: universal -> iOSプラットフォームに関わらない1倍、2倍、3倍サイズの画像ファイルセット(ベースになるのは3倍)
  • watchOS: icon -> Apple Watchアプリのアイコンに必要な画像ファイルセット
  • macOS: icon -> Macアプリのアイコンに必要な画像ファイルセット
  • Android: icon -> 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
6