https://www.facebook.com/TonosamaLabo

1. iPhoneアプリ作成 勉強会
⑬iPhoneアプリを作ってみよ
う！（超初心者向け）その１

2. 動作環境
• Mac OS X 10.7 Lion
• xcode 4.3.1

3. はじめに
• iPhoneアプリを作ってみよう！
• 超初心者向け！難しいことは置いといて、あそ
んでみよう！

4. 注意事項
• 雑に教えます。難しいこと、細かいことは
大人になってから覚えましょう！
• 適切なやり方ではなく、簡単なやり方を
教えちゃう場合もあるかもしれませ
ん。！でもまあ、ちっちゃいことは気に
しないで、まずは動かしてみましょう！

5. 写真素材について①
• 写真素材については、小林真琴（愛称：まっ
こり）様から提供していただいています。
• 今回の勉強会の資料として提供いただいてい
ますので、再配布やアプリ等での使用はでき
ません。
• フリー素材ではありませんので、ご注意くだ
さい。
• みなさん、応援してあげてください！（アプ
リや、Web、バナー広告等のモデルの仕事お
待ちしています！）

6. 写真素材について②
まっこり（小林真琴）
フリーでモデルをやっています。
秋田出身のまっこりです♪
みなさんに笑顔や感動を与えられる
モデルを目指しています！
自分だけの新しい世界観を生み出し、
日々成長して行こうと思います。
応援よろしくお願いします(^-­‐^)/
BLOG:
http://blog.crooz.jp/chery2
Twitter:
https://twitter.com/#!/maccori_1
Facebook:
https://www.facebook.com/profile.php?id=100003547711446

7. もくじ
• プロジェクトを作ってみよう
• おおまかなかいせつ
• 画面を作ってみよう！
• モーダルに挑戦！
• ナビゲーションに挑戦！
• ゲーム的なもの
• アイコンとスプラッシュ

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

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

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

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

12. できた！
• フォルダができたよー

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

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

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

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

17. おおまかなかいせつ②
• プログラムを入れる
フォルダ、設定ファイ
ルを入れるフォルダ
等、あらかじめ決め
られてるので注意し
よう！

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

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

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

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

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

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

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

25. ストーリーボード
• ストーリーボードとは、XCODEのあたら
しめの機能の一つです。
• ビジュアル的に開発ができるのでとても便
利です。
• ただ、本屋さんにいっても解説している本
が少ない＞＜

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

27. こんなかんじ！

28. おおまかなかいせつ①
• 左側のエリアの、わ
く一個が、右側のエ
リアの画面みたいな
の１個に対応してい
ます。

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

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

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

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

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

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

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

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

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

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

39. できた！
• すっきりした！
memory_01.zip

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

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

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

43. ViewControllerって？
• まあ、簡単にいうと画面

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

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

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

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

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

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

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

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

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

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

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

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

56. やってみよう
• こんな感じの画面を
つくってみよう！

57. できた！
• なんかそれっぽい！
memory_03.zip

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

59. モーダルに挑戦！
• モーダルとよばれる画面遷移をしてみよ
う！
• いまいる画面にの上に、別の画面が表示
されるやつ！

60. やってみよう
• 今の画面の隣に、もうひとつ画面を作ろ
う
• 画像を表示させてみよう

61. セグウェイをつなごう
• スタートボタンを選
択
• controlを押しながら
右の画面にドラッグ
• メニューが出るから
modalを選択

62. できた！
• ボタンを押すと遷移する！
• もどれないけどね！

63. ナビゲーションに挑戦！
• 戻れるように、ナビゲーションに挑戦しよ
う！

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

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

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

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

68. できた！
• ナビゲーションが上に出る！
• ボタンを押すと遷移する！
• もどれないけどね！
memory_05.zip

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

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

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

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

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

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

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

76. できた！
• なんかゲームみたい
memory_07.zip

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

78. ヒント①
• 画像を組み合わせて
タイトル画面を作ろ
う！
• 背景の色は、
Backgroundで変更
できる！

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

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

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

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

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

84. アプリの名前
• Bundle display nameを変更してみよう！

85. ヒント
• 設定や画像がうまく
反映されないときは、
クリーンをしよう。
• それか、アプリを一
回消してから入れ直
そう！

86. できた！
• これで完成！
memory_09.zip

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

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