社員ブログ
HOME  社員ブログ
ホーム > Interface Builder, Objective-C, Xcode, 社員:cobra > イチから学ぶiPhone/iPadアプリ開発 第8回 「アイコンと起動時画面を設定したい!」

イチから学ぶiPhone/iPadアプリ開発 第8回 「アイコンと起動時画面を設定したい!」

2012年06月3日 12時34分37秒

こんにちは、コブラです。

 

さてさて、今回は誰しもテンションが上がること間違いなし!の内容です。

アイコンと起動画面を設定しちゃいましょう!

シミュレータ起動後、ホームボタン押すと真っ白いアイコンがありますが、さびしいですよね。

というわけでまずはアイコンから!

作れる人は作って、作れない人はこんなサイトもあるので活用しましょう!

iCone

サイズは57px×57pxで!拡張子はpngがいいです。

私はとりあえずiConeでこんなアイコンを用意しました。

上部の反射?はiOSがやってくれるので、「TOP GLARE ALPHA」は0にしました。

イチから学ぶiPhone/iPadアプリ開発 第8回 「アイコンと起動時画面を設定したい!」

 

さて、ではこれをhelloworldプロジェクトのアイコンに設定していきます!

まずは、ファイル名を「Icon.png」としてください。

そしてこれをプロジェクトに追加します。

Xcodeのツールバー「File」→「New」→「Group」で、

『Images』というフォルダを作りましょう。

そして、そのフォルダを選択状態(青い背景)にして、

「File」→「Add Files to …」を選びます。

イチから学ぶiPhone/iPadアプリ開発 第8回 「アイコンと起動時画面を設定したい!」

ファイルを選択し、「Copy items into …」にチェックを入れて「Add」です。

イチから学ぶiPhone/iPadアプリ開発 第8回 「アイコンと起動時画面を設定したい!」

 

するとこんな感じになりましたか?

イチから学ぶiPhone/iPadアプリ開発 第8回 「アイコンと起動時画面を設定したい!」

 

以上!

え?これだけ?はい、そうです。

ではいつも通りシミュレータを起動してみましょう。

あ、書いてませんでしたが、シミュレータ起動時にビルドが走っています。

ビルドとは、文字通り「構築」のことで、

プロジェクトのクラスを、アプリ用に変換する作業をいいます。

ビルドしないと、アプリとして形にならないわけです。

まあこれは、Xcodeが勝手にやってくれるので。

話を戻して、シミュレータのホームボタンを押してみましょう。

イチから学ぶiPhone/iPadアプリ開発 第8回 「アイコンと起動時画面を設定したい!」

 

おお!ちゃんとアイコンになってますね!

ちなみに、57px×57pxはiPhone3GSまで。

iPhone4からはRetinaディスプレイというものが搭載され、

もっとクリアに表示されるようになりました。

iPhone4で見ると、なんとなーくアイコンが荒くなっているのが分かります。

なので、114px×114pxのサイズで作成して、

今度はIcon@2x.pngという名前で同じように追加しましょう!

これでOKです!

 

 

続いて起動画面です。

アプリ起動時に、社名ロゴが表示されたりするアプリありますよね。

あれです!

今度は320px×480pxのpngファイルを用意してください。

Retinaディスプレイには、640px×960pxです。

これをDefault.pngという名前でImagesフォルダに追加しましょう!

Retinaの場合は、Default@2x.pngですよ!

私はこんな画像を用意しました。

イチから学ぶiPhone/iPadアプリ開発 第8回 「アイコンと起動時画面を設定したい!」

 

そしてこれをImagesに追加して…

イチから学ぶiPhone/iPadアプリ開発 第8回 「アイコンと起動時画面を設定したい!」

 

「Run」ボタンで再びシミュレータ実行!

イチから学ぶiPhone/iPadアプリ開発 第8回 「アイコンと起動時画面を設定したい!」

 

おお!かなりアプリっぽくなりましたね!

次回は、第7回の復習を交えつつ、プログラムに焦点を当てていきます!

 

 

 

シリーズ記事一覧

イチから学ぶiPhone/iPadアプリ開発 第1回 「Macって何?」

イチから学ぶiPhone/iPadアプリ開発 第2回 「Xcodeって何?」

イチから学ぶiPhone/iPadアプリ開発 第3回 「プロジェクトって何?」

イチから学ぶiPhone/iPadアプリ開発 第4回 「計画を形にしよう!」

イチから学ぶiPhone/iPadアプリ開発 第5回 「ドキドキのシミュレータ!」

イチから学ぶiPhone/iPadアプリ開発 第5.5回 「実機でテストしたい!」

イチから学ぶiPhone/iPadアプリ開発 第6回 「Interface Builderを使ってみる!前篇」

イチから学ぶiPhone/iPadアプリ開発 第6回 「Interface Builderを使ってみる!後篇」

イチから学ぶiPhone/iPadアプリ開発 第7回 「XcodeとInterface Builderの怪しい関係!?」

イチから学ぶiPhone/iPadアプリ開発 第8回 「アイコンと起動時画面を設定したい!」

イチから学ぶiPhone/iPadアプリ開発 第9回 「イベントを知ろう!」

イチから学ぶiPhone/iPadアプリ開発 第10回 「オリジナルの画像を設定したい!」

イチから学ぶiPhone/iPadアプリ開発 第11回 「画面を切り替えよう!」

イチから学ぶiPhone/iPadアプリ開発 第12回 「BGMや効果音を付けよう!」

イチから学ぶiPhone/iPadアプリ開発 最終回 「アプリよ、永遠に~つまり、まとめ~」

Interface Builder, Objective-C, Xcode, 社員:cobra

  1. コメントはまだありません
  1. トラックバックはまだありません