ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 ＷＥＢ生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/337/room ーーーーーーーーーーーーーーーーーーーーーーー

1. デザイナーのための
Xcode入門
2014/01/16
関根元和

2. 自己紹介
•
名前：関根元和
•
iOSやAndroidアプリの開発をしています
•
ネットではCHEEBOWという名前でフリーウェア
を作ったり
•
週末は週末音楽家を名乗りライブアイドルへ楽曲提
供も

3. やること
•
Xcodeを知ろう(15分)
•
リソースについて(15分)
•
実演(15分)
•
質疑応答(15分)

4. Xcodeを知ろう

5. Xcodeってなに？
•
Appleが提供する公式の統合開発環境
•
エディタ、SDK、デバッガ、シミュレータなどなど
……全部入り
•
Mac App Storeから無料でインストールできる

6. Xcodeで出来ること
•
プロジェクト管理
•
コーディング
•
UIデザイン
•
ソースコード管理(Git、Subversion)
•
デバッグ(iOS シミュレータ)
•
AppStoreへのアプリのアップロード
•
iOSアプリ開発のほどんどがXcodeだけで行えます！

7. Xcode

8. プロジェクト管理
•
基本的に1つのアプリにつき1つのプロジェクト
•
ソースコード、ライブラリ、フレームワーク、画像、
音、UIファイルなど、アプリに必要なものをすべて
管理します

9. コーディング
•
基本的な編集機能は網羅
•
内容に合わせたカラーリング
•
途中まで入力すれば関数名を補完してくれる、コー
ド補完機能
•
入力中に誤りがあれば目立つように表示し、修正方
法も表示

10. UIデザイン
画面デザイン
画面のつながり

11. iOSシミュレータ
作ったアプリをMac上で動作確認できます

12. Xcodeを見てみよう

13. リソースについて

14. リソース
•
アプリアイコン
•
起動画面
•
画像ファイル

15. 問題
•
画像以外にどんなリソースがありますか？

16. リソースの適用
•
デザイナはボタンの画像や、画面の背景画像などを
用意
•
プログラマは、それらをプロジェクトに追加し、そ
の画像を使うようにコーディング
•
プロジェクトに追加しないと画像を使うことはでき
ません

17. Images.xcassets
•
Xcode5からは「Images.xcassets」を使った画像
管理もできる
•
しかし、大量の画像を使う場合ちょっと使いにくい
•
アイコンと起動画面の管理に使うのが良いかも

18. Images.xcassets

19. Retina
•
現在iOSデバイスには標準解像度のものと高解像度
(Retina)の2種類があります
•
標準：100 x 100、Retina：200 x 200
•
今後は、すべてのデバイスがRetinaに。現在は、ま
だ過去のデバイス(iPad mini、iPhone3GS)も考慮

20. ファイル名の付け方
•
標準解像度：image.png
•
Retina：image@2x.png
•
Retina用画像には「@2x」をつけます
•
全ての画像について、標準、Retina2種類の画像を
用意します

21. 画像フォーマット
•
iOSでは画像リソースのフォーマットとしてPNGを
使います

22. 同名ファイル
•
同じファイル名は厳禁です！
•
リソースはアプリ内に取り込まれる際にひとつのディ
レクトリの下に入れられてしまいます
•
例え、プロジェクト側で奇麗にディレクトリを作っ
て整理していたとしても！

23. 実演
•
これから実演を行います
•
ボタンに画像を適用してみます
•
実際にシミュレータで動きを確認してみます

24. まとめ
•
iOSアプリ開発はXcodeだけでほぼ行えます
•
プロジェクトで管理します
•
画像などのリソースはプロジェクトに追加して使い
ます
•
Retina画像には「@2x」をつけます

25. 質疑応答

26. 宿題
•
iOSアプリではさまざまな大きさのアイコンが使わ
れます。どのような大きさがありどのような用途で
使われるか調べてみましょう。