https://www.facebook.com/TonosamaLabo

1. iPhoneアプリ開発
勉強会
㉚Xcodeを覚えよう！簡単なアプリを
作ってみよう！

2. プロジェクトを作ってみよう
• XCODEでプログラムを作るときは、プロ
ジェクトを作ります。
• プロジェクトには、プログラムのソース
ファイルの他に、設定ファイルや、画像
データとかも含まれます。

3. やってみよう①
• XCODEを立ち上げよう！
• New Projectをつくろう！

4. やってみよう②
• genkimorouという名前のプロジェクトを
作ろう！

5. やってみよう③
• デスクトップに保存しよう！

6. できた！
• フォルダができた

7. ちなみに
• 次回からは、フォルダの中の青いのを開く
とXCODEが立ち上がります！

8. おおまかなかいせつ
• XCODEについて、おおまかにかいせつし
ます。

9. おおまかなかいせつ①
• 左側のパネルがファイル一覧
• 上の方がタブになってるから、注意！

10. MEMO
• フォルダ一覧と実際のフォルダの構造は違
う。
• 実フォルダの他にGROUPというのでフォ
ルダ管理されてる。
• 基本的にファイル名で管理されているので、
違うフォルダだとしても、同じ名前のファ
イルを置かないこと。（おけるけどコンパ
イル時などにおかしくなる）

11. おおまかなかいせつ②
• プログラムを入れる
フォルダ、設定ファイ
ルを入れるフォルダ
等、あらかじめ決め
られてるのでなるべ
く守ろう！（そのく
せ変な場所に追加さ
れるので注意）

12. おおまかなかいせつ③
• 左上あたりで、プロ
グラムの実行と停止
や、シミュレーター
の選択ができる

13. やってみよう
• iPhoneとiPadそれぞれのシュミレーター
で動かしてみよう！
• 実機をつないでも、設定とかいるからエ
ラーになるので、今は我慢しよう！

14. できた！
• ちょっとだけたのしい！

15. おおまかなかいせつ④
• 右の方にあるEditorは、左
が通常、真ん中が画面分割
（通称ジェントルマン）、
一番右は、押してはいけな
いボタン（差分表示）
• ストーリーボードを開いて
いる状態で、一番右のボタ
ンを押すと、戻れなくなる
ので、おさないようにしよ
う！
• ジェントルマンを押しっぱ
なしで作業をしてるとおか
しくなることがあるので、
使い終わったら左のでもと
に戻すくせをつけよう！

16. おおまかなかいせつ⑤
• 真ん中のViewは、画
面に表示するViewを
選べます。
• ここは、押しても
OK！
• なぜか、実行時だけ
デバッグログのView
が自動に閉じるとか
の変な動作になるこ
とがあるけど、根気
よく毎回おそう！

17. おおまかなかいせつ⑥
• アプリの設定をする
画面
• なんだけど、ここを
いじっても、plistっ
ていう設定ファイル
に反映されたりされ
なかったりするから
注意しよう

18. XCODEのとくちょう（独自調べ）
• 設定したら反映されるが、削除しても反映
されるとは限らない。
• 削除したものを、もとにもどせるとは限
らない。
• XCODE自体の設定画面で、エディタの色
を変えられるが、おかしな現象が起きる
かもしれないので、できればさわらないで
おこう！

19. ストーリーボード
• ストーリーボードとは、XCODEのあたら
しめの機能の一つです。
• ビジュアル的に開発ができるのでとても便
利です。

20. やってみよう
• MainStoryboard.storyboardを左側の
ディレクトリみたいなところから探して選
択してみよう

21. こんなかんじ！

22. おおまかなかいせつ①
• 左側のエリアの、わ
くと、真ん中のエリ
アの画面みたいなの
がそれぞれ１対１で
対応しています。

23. おおまかなかいせつ②
• 左側と真ん中のエリ
アは、対応している
のでどちらかを編集
すると、もう片方に
も影響が出ます。
• 右側のエリアは、詳
細を表示する場所で
す。左側か真ん中で
選択中の情報が出ま
す。

24. おおまかなかいせつ④
• 右側のエリアのうえ
のとこは、タブみた
いになっています。

25. やってみよう
• とりあえず、全部削除して、きれいにしよ
う！

26. やってみよう
• 左のを選んでdeleteキー！
• 真ん中も！
• 右も！

27. できた！
• すっきり！

28. やってみよう
• ツリーのアイコンが灰色になってる！
• セーブされてないサイン！
• command+sで保存しよう！

29. ファイルを消そう
• つかわないファイルを消そう
• さっき消した画面用のプログラムを４個消
してみよう。

30. やってみよう
• 選択して右ボタン→Delete

31. やってみよう
• 右側のボタンをおそう！

32. 注意事項
• 真ん中のボタンを間違えて押すと、ファイ
ルが消されずに、参照だけが消されます。

33. できた！
• すっきりした！

34. 画面を作ってみよう！
• まずは、画面を作ってみよう！

35. やってみよう
• 右下の黄色い感じの
とこにいろいろな
パーツがある！

36. やってみよう
• ViewControllerをえ
らんで、画面に置こ
う！

37. ちなみに
• 左側の矢印は、「こ
の画面からはじま
る！」というしるし

38. 右下のアイコン
• 左が、iPhoneの高さ変えるボタン
（3.5inchと4inchを切り替え）
• とりあえず、3.5inchの画面にしておこ
う！
• 真ん中が、auto layoutボタン。とりあえ
ずさわらない。
• 右が拡大縮小ボタン。画面を拡大縮小でき
る。

39. ViewControllerって？
• 簡単にいうとアプリの画面

40. やってみよう
• ボタンを置いてみよ
う！
• うまくいかなかった
ら、画面を拡大しよ
う。小さいままだと
パーツが置けない！

41. できた！
• ボタンを押すと青く光る！

42. プロパティを変更しよう
• ボタンを選択して、
プロパティを変更し
よう！

43. やってみよう
• スタートボタンをつ
くってみよう！

44. メモ
• フォントをヒラギノに
かえると、文字の位
置がボタンの真ん中
ではなくなります。
• 格好わるいのでボタ
ンの文字は画像にす
ることが多いです。

45. 画像を置いてみよう
• 画像をXCODEのプロジェクトに追加しよ
う
• それを画面に設定してみよう

46. やってみよう
• NewGroupで、あた
らしいGroup（フォ
ルダみたいなやつ）
をつくろう。
• 名前をimagesにしよ
う

47. やってみよう
• Finderから画像のは
いったフォルダをド
ラッグしよう
• Copyのチェックがつ
いてるのを確認して
Finishをおそう

48. できた！
• 画像が追加された！

49. やってみよう
• UIImageViewを画面
に置いてみよう
• 設定を変えると絵が
出る！

50. 画像の名前とか
• iPhoneの画面サイズは、320x480で、retainaだと
640x960です。(4inchのiPhoneは640x1136だけどそ
の話は後で）
• これを自動に切り替えるには、xxxx.pngと、倍の大きさ
のxxxx@2x.pngを用意します。
• プロパティで設定するファイル名には、@2xがついてな
いものを指定します。

51. かさねあわせ
• 左側のツリーみたいなところのが、パー
ツの重ね合わせ（レイヤー）になっていま
す。
• 下に行くほど、画面では上に表示されま
す。

52. やってみよう
• こんな感じの画面を
つくってみよう！
• 画像は、bgM.pngを
指定しよう！

53. できた！
• なんかそれっぽい！
• これをタイトル画面にしよう！

54. 画像のおおきさ
• 画面サイズは320x480です。
• ステータスバーがあると、20引かれるの
で、320x460になります。
• ナビゲーションバーがあるとさらに、44
引かれるので、320 416になります。
※サンプル画像は、L,M,Sがそれぞれ上記の
高さに対応しています！

55. ナビゲーションに挑戦！
• ナビゲーションを使った画面に挑戦しよ
う！

56. やってみよう①
• NavigationControlle
rを置いてみよう
• 右側の
RootViewControler
はいらないから消そ
う

57. やってみよう②
• タイトル画面の隣に
移動しよう
• タイトル画面の左に
ある矢印を
NavigationControlle
rに移動してくっつけ
よう

58. やってみよう③
• NavigationControlle
rからタイトル画面に
controlを押しながら
ドラッグしてセグ
ウェイをだそう
• セグウェイは、
RelationShipをえら
ぼう！
• くっつけると、タイ
トル画面にナビゲー
ションがついた！

59. やってみよう④
• 画像をSがついてる小
さい画像にしよう
• 画像やボタンの位置
をいい感じに直そう

60. やってみよう⑤
• タイトル画面の隣に、もう
ひとつ画面を作ろう
• 画像を表示させてみよう
• スタートボタンから、セグ
ウェイをpushでつなげよ
う！

61. やってみよう⑥
• スタートボタンからでてるセグウェイを
削除しよう
• もういっかい、セグウェイをpushでつな
げよう！
• 画像もいい感じにしよう

62. できた！
• ナビゲーションが上に出る！
• ボタンを押すともどる！

63. やってみよう
• ナビゲーションバーに
タイトルを入れてみ
よう！

64. できた！
• なんかいい感じ！

65. ラベルにちょうせん
• labelを使うと、画面
に文字を出すことが
できます。

66. やってみよう
• こんな感じのカッコ
いいラベルを作って
みよう！
• 次のページにヒント
があるよ！

67. ヒント
• Alphaは透明度で、1
が不透明、0が完全に
透明
• Linesを増やすと行を
増やせる！

68. できた！
• なんかゲームみたい

69. ゲーム的なもの
• ボタンと移動をつかったゲームを作ろう！

70. ヒント①
• 画像を組み合わせて
タイトル画面を作ろ
う！

71. ヒント②
• Viewを配置すると、フォル
ダみたいな感じで、Viewの
中に他の部品を入れられま
す。
• そのかわり、alphaを変更
すると、中にあるやつも透
明になるから注意しよう。
• あとなんか、重ねたいのに
勝手に中に入ったりして移
動が面倒になるけど我慢し
よう。
• そんなときは、左の画面の
ツリーを操作するといいか
も

72. ヒント③
• ボタンを２個置いて、
分岐させてみよう！

73. ヒント④
• pushのセグウェイを
つなげたのに、なぜ
かナビゲーションバー
がつかないときがあ
る！
• でも、実行するとナ
ビゲーションバーがつ
くっていう・・・。
• そんなときは、パラ
メータを自分で変更
しよう！

74. できた！
• なんとなく、それっぽい！

75. 設定をかえよう
• アプリ完成に向けて設定を変えよう！

76. 縦画面専用
• 黒いのがONなので、縦だけONにしてお
こう！
• 横にしたいときは、ここを変更＆ソースに
も変更が必要

77. アイコンとスプラッシュ
• アイコンとスプラッ
シュをドラッグして
定義しよう！

78. アイコンについて
• 57x57と114x114の２種類
• Prerenderedにチェックを入れると光沢が消える！
• iconのサイズには色々種類があって細かく設定できる、
ホームのアイコン以外にも検索時のアイコンとか。でも
ドラックして設定できるのはホームのやつだけ。（ほか
は設定しなくてもいいと思う。）

79. スプラッシュについて①
• 320x480,640x980,640x1136を設定する。ステータ
スバーを出す場合はその分を引いたやつを設定できる。
• 640x1136を設定すると、プロジェクト全体がiPhone5
対応（4inch対応）になる。逆に、640x1136の黒い画
像をdeleteするとiPhone5対応をやめることができる。
（2013年5月より4inch対応してないとリジェクトとの
こと）
• とりあえず今回は一番左を削除して右の２個だけ設定し
よう！

80. スプラッシュについて②
• ファイルをドラッグすると上書きされる・・・
はずなんだけど、なんだかうまくいかないこと
が多い。（実機転送時にエラーになる）
• 黒い画像を右クリックで削除で消した後、ファ
イル自体も削除してから新たにドラッグしよ
う！

81. アプリの名前
• genkimorou-Info.plistのBundle display nameを変更して
みよう！

82. できた！
• これで完成！

83. まとめ
• プログラムしてないのにできた！

84. とのさまラボ！
• 勉強会に参加した人どうしのコミニュティがほしい！
勉強会の開催日時の告知がほしい！
という意見をみなさまからいただいたので、
コミニュティを作成しました！
ぜひ「いいね！」をお願いします！
h"ps://www.facebook.com/TonosamaLabo

85. おわり
主催（共同開催）：
株式会社 gooya
http://www.gooya.co.jp/
メドレー株式会社
http://www.medley.co.jp/
講師：西田 寛輔 (Tonosamart)
http://www.facebook.com/tonosamart