SwiftによるiOSアプリ開発基本講座

iOS 8のアプリアイコンを追加する

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
自作のアプリにアイコン画像を設定する方法を紹介します。アプリ画像のサイズをしっかりと把握して作成しておくことが重要です。
講師:
06:54

字幕

このレッスンでは自作のアプリにアイコン画像を設定する方法を紹介します。まずこちらのシミュレータの画像をご覧いただきますといくつもの自作のアプリがインストールされている状態ですが、どれも白いキャンバス地にグレーの線が書かれているだけのシンプルなアイコンが表示されています。このように アプリアイコンが設定されていないアプリに対しては、この白地に線が書いてあるだけのこのアイコンが表示されるようになっています。今回はここに独自のアイコン画像を設定したいと 思います。それでは Xcode のプロジェクトで作業していきましょう。アイコン画像を設定するときにはImages.xcassets という中のAppIcon を選択します。このプロジェクトはiPhone 用に作ったものですので、iPhone 用に使うアイコン画像を設定する部分が三ヶ所あります。そしてここで利用するためのアプリケーションのアイコン画像を用意する必要があるのですが、ここにありますようにアプリケーション用のアイコン画像はですね、全部で最低でもこの七種類用意する必要があります。後ろのほうには 六つしかスペースがないのに対してなんで七つなのかと思われるかもしれませんが、実は App Store にアップロードするときに、自分のアプリ画像を iTunesの上で 表示してもらうために、かなり大きなサイズのアイコンを登録する必要があります。 それがこいつなんですね。この 1024*1024 ピクセルというかなり大きなサイズのアイコン画像を実はApp Store のために登録しなければいけません。ですのでおそらくこのアイコン画像を作るときには、Illustrator であるとかPhotoshop であるとかそういった画像制作用のツールを使うと思うのですが、まず最初にこの 1024 ピクセルの状態で作るということを意識した上で、それを縮めた画像を用意していくというのが実際の手順になるかと思います。ここでサイズをですね確認していきたいと思うのですが、こちらに戻って見ていくとですね、29pt*29ptのアプリアイコンに対して2 倍の画像と 3 倍の画像を用意する部分があります。現在の iPhone はRetina の画面Retina の解像度を持った 画面のiPhone しか 残っていませんので、従来のサイズの 2 倍以上の解像度をすべてのデバイスが もっていますから、2 倍か 3 倍かこの解像度の画像を用意するだけでいいということになります。これは 29pt の2倍のサイズの画像を用意することに なりますから合計で 29*2 の58 ピクセルの画像そして 29*3 の87 ピクセルの画像をここの Settings と Spotlight のアイコン画像に用意することになります。 Spotlight のiOS7 とそれ以降の40pt の画像に対しては2 倍は 80 ピクセルで3 倍は 120 ピクセル、そしてiOS7 以降のアプリアイコンの画像に関しては60pt の 2 倍ですから120 ピクセルとそれの 3 倍の 180 ピクセルのアイコンを用意することになります。ということでそれをすべて考慮した上で、こちらにはアプリアイコンの 2 倍のものこれを実際に見てみますと120 ピクセル *120 ピクセルとなっていますが、こちらがこの 60ptの2 倍のサイズのこちらの画像ですね。これをすべて用意した上でこれらの画像を登録していきます。2 倍のところに 2 倍のアイコンを追加していきましょう。AppIconの 2 倍のところに 2 倍3 倍のところに 3 倍そして Settings の @2x を2 倍のところに追加して@3x を 3 倍のところに追加します。そしてSpotlight 用の画像ですね。Spotlight@2x こちらを2 倍と @3x を 3 倍のところこのようにして追加しました。アイコン画像を用意する上で最も重要なのがこちらのApple の Human InterfaceGuideline という文書です。 この Human InterfaceGuideline はオンライン上で無料で公開されていますので、apple higHuman Interface Guideline というふうに入力して検索するとトップに引っかかりますので、この iOS Human Interface Guidelinesというのをクリックすれば見ることが出来ますが、この中のこのIcon and Image Designの中のこのIcon and Image Sizesここのところのこの Icon Size を必ず毎回チェックするようにしてください。Apple のデバイスが新しく登場するたびに必要なアイコンサイズが必ずと言っていいほど変わっていきます。ですので自分のアプリアイコンを指定するたびに必ずこの Human InterfaceGuideline をチェックしていただくのがいいかと思います。例えば Spotlight のサーチリザルトアイコンというところであればここに書いてありますし、Settings アイコンはここのところに書いてあります。それでは実際にXcode に戻って設定されたアイコンがどのように表示されているかということを確認しておきましょう。 アプリケーションをシミュレータ上で実行しました。そしてこの Hardware の メニューからHome を押して ホームに戻ります。そうするとこのように自分のアプリに対して新しくアプリアイコンが設定されていることがわかります。それからこの画面をですね下の方にドラッグしてやるとSpotlight の画面がでます。この Spotlight 検索のところで自分のアプリケーションの名前iconsDemo ですねこれだけで今回は出てきてますけど、icons とこれだけ打てばでてきますからiconsDemo というのをこのように選択すると、これで Spotlight の検索のところに表示されるアイコンがしっかりと設定されていることが確認できます。なおこのアプリアイコンは自分でいま作っているのがiPhone のアプリケーションであればこれだけでよいのですが、インスペクタに移ってですね、インスペクタのこの AttributeInspector を 開いてやりますと、ここにさらに追加できる項目があるということがわかります。例えば iOS6.1 and Prior Sizesというところをチェックすると、さらに細くこの 1 倍の画像まで設定できるようになりますし、さらに Apple Watch 用のものであるとかCar Play 用のものであるとかこういういろんなアイコンをここで選択して追加できるようになっています。 このレッスンでは自作のアプリにアイコン画像を設定する方法を紹介しました。

SwiftによるiOSアプリ開発基本講座

このコースではiPhoneやiPadのアプリを作ってみたい方に向けて、簡単なiOSアプリを作りながらSwiftを使ったXcodeでの開発手順をひとつずつ丁寧に解説していきます。各レッスンではiOSのフレームワークの機能を確認しながら、アウトレットやアクション、MVCモデルやDelegateといったアプリ開発に必要な知識を説明します。

5時間10分 (53 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年10月15日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。