iPhone開発者初心者向け資料「XcodeのStoryboardで画面を作ろう!」

38,610 views

Published on

2013/2/3の勉強会で使った資料です。
iPhone開発者初心者向けです

内容は
「XcodeのStoryboardを使って
簡単なじゃんけんゲーム」を作るです。

0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
38,610
On SlideShare
0
From Embeds
0
Number of Embeds
101
Actions
Shares
0
Downloads
59
Comments
0
Likes
18
Embeds 0
No embeds

No notes for slide

iPhone開発者初心者向け資料「XcodeのStoryboardで画面を作ろう!」

  1. 1. iPhoneアプリ開発入門 XcodeのStoryboardで画面を作ろう! 2013年2月3日(日) iPhone開発初心者向け資料 +α
  2. 2. 自己紹介twitter ID : itokami1123お昼の仕事はHTML5/CSS3/JavaScriptです。Webの仕事なんですけどクライアント側処理をメインにしてます。何かお仕事があれば是非どうぞ!!iPhoneアプリは通勤中に作ってます。
  3. 3. iPhoneアプリ作りのきっかけ最初は新しい仕事の為(転職の為)2011年まで古い技術(Java1.4とCOBOLとメーカ独自データベース製品など)しか触った事がなく段々と将来に不安になりました・・・
  4. 4. そこでHTML5とiPhone開発の勉強を 独学で始めました。
  5. 5. 福岡にはhtml5+α@福岡やiDevQ(iOS Developer Community) など素敵な勉強会があって 色々と助けてもらいました。 勉強会の検索は http://azusaar.appspot.com/ がお勧めです!
  6. 6. おかげさまで無事転職出来ました。 素敵な職場です。 感謝してます。
  7. 7. 今でもiPhoneアプリを作る理由作るのが楽しい!子供向けに学習ソフトを作っています。どうやったら子供達が楽しく苦手なものを克服出来るのかを考えるのがとても楽しいです!iPhoneさえあればどんな子にでも学習のチャンスを与える事がでます!
  8. 8. 宣伝です!http://www.itokami1123.com/soft/ で 色々ソフトを公開してます! リジェクト中
  9. 9. 少し悩みが。。福岡でもAndroidは集まって開発するグループがあるんですけどiPhoneアプリ(特に初心者向け)の集まりは少ないんです。福岡のiPhoneアプリ制作者の集まりができたらいいなぁ。。
  10. 10. そこでiPhoneアプリ開発者が少しでも増えたらいいなと思い、入門を説明したいと思います!(難しいツッコミは、ご勘弁を。。)この資料ではメニューとゲーム2画面のじゃんけんゲームを作りたいと思います。
  11. 11. まずは。。Xcodeをインストールしてください!すみません。。説明は省略しますね。
  12. 12. Xcodeを起動Xcodeのアイコンをクリックします!今日は Version 4.5.2 を使用します。
  13. 13. 新規作成Create a new Xcode projectをクリックします。なんだか英語が一杯ですね。。
  14. 14. アプリの雛形選択今回はSingle View Applicationを選んでみました。
  15. 15. 初期入力 今回のアプリに関する情報をいれます。 上二つチェックをつけて Nextを押します。めも:Company Identifierは、ドメイン名を逆さにしたものが推奨されているようです。(例:example.comの場合は、com.exampleとなる)
  16. 16. ソース管理?とりあえず気にせずチェックをはずしてCreateボタンを押します!
  17. 17. じゃ∼ん出て来ました!
  18. 18. いきなり動かす!再生ボタンをクリックすると。。
  19. 19. なにもでません。。でもiPhoneらしくものが出て来ましたね。これが iOSシミュレータです!
  20. 20. メニュー作り! さっそくメニューを作ってみましょう!Storyboardのファイルをクリックすると
  21. 21. この白い画面が最初に出てた画面みたいですね。 さっそく編集してみましょう。
  22. 22. 右下に色々あるよ 背景を作ってみます。Image Viewをドラッグします。
  23. 23. 画像を選ぶImageで画像を選べるみたいですけど 登録が必要ですね。
  24. 24. 画像を登録画像が入っているフォルダをドラッグして投げ込みます!
  25. 25. 画像が登録されます。 Copyにチェックをつけると このアプリのソースの方に png画像がコピーされます
  26. 26. 背景画像前に置いた背景に画像をつけました!
  27. 27. タイトルをつけよ∼ 背景と同じ様に Image Viewを ドラッグします png画像を指定します
  28. 28. そういえば いっつもUse Autolayoutを OFFで作ってます。(使い方が分かりません。。) そして タイトルの高さ幅、 位置を指定します
  29. 29. スタートボタンRound Rect Buttonをドラッグします!
  30. 30. ボタンを編集 Customを選ぶと 画像がつけれます。
  31. 31. メニューが出来たので続いてゲーム画面を作りましょう!
  32. 32. ゲーム画面の枠を作る ViewControllerをドラッグ!
  33. 33. 補足:拡大と縮小 右下の虫眼鏡で 切り替えます。
  34. 34. ゲーム画面の背景ゲーム画面もメニュー画面と同じ様に作ります。
  35. 35. 操作ボタン Round Rect Button をドラッグゲームの操作ボタンを置きます。ぐー、ちょき、ぱーの3つです。
  36. 36. ボタンの画像設定typeをcustomにしてImageを設定します!
  37. 37. では画面遷移を作って行きましょう!
  38. 38. 画面遷移ctlを押しながらドラッグすると線が!
  39. 39. 画面遷移2 modalを選ぶと矢印ができました。
  40. 40. 動かしてみましょう∼
  41. 41. メニュー画面の上にゲーム画面が表示されます!
  42. 42. 突然ですが 残念なお知らせです。こっから先はプログラムがないと ゲームになりません。
  43. 43. Storyboardとコード Storyboardの画面とコードは どうやってつながってるの?
  44. 44. 紐づけたいViewCotrollerを選んで Classと書いている所に指定すればOK
  45. 45. それではゲーム画面用のプログラムを 用意してみましょう!
  46. 46. File -> New -> Cocoa Touch ->Objective-C class を選んで Next!
  47. 47. ViewControllerを作成ゲーム画面用としてGameViewControllerを作成 注意:Subclass of は UIViewController
  48. 48. そのままcreateをクリック
  49. 49. ゲーム画面のViewControllerのClassに GameViewController設定します。
  50. 50. 勝ち負けの表示勝敗を表示するLabelを貼ります。
  51. 51. 最初は非表示HiddenをOnすると 非表示になります
  52. 52. 相手の手相手の手をImageViewで配置して Hiddenにしておきます
  53. 53. ここまでで動かしてみましょう!hiddenは表示されない事が確認出来ます。
  54. 54. hidden(非表示)の勝ち負けのラベルなど表示されていない事が分かりますね!
  55. 55. それではじゃんけんのボタンとプログラムを繋いでみましょう!
  56. 56. じゃんけんボタン 「Assistant」ボタン Storyboard右上に ある人の顔みたいな アイコンを押します。
  57. 57. 右側にソースが右側に設定したGameViewControllerが 出てきました!
  58. 58. 難しそうな文字がいっぱいですが気にせずじゃんけんボタンをctlを押しながら@interfaceと@endの間にドラッグします。
  59. 59. ConnectionをAction(動作)TypeをUIButton(ボタン)EventをTouch Up Inside(ボタンを触った)ArgumentsをSender(押されたボタン)NameはjankenDidPush(好きな名前)にします。
  60. 60. jankenDidPushと言う関数が出来ました!
  61. 61. 他のじゃんけんボタンはさっき作った関数名にくっつけます。どのじゃんけんボタンを押しても同じ関数を呼ぶ様になりました。
  62. 62. 相手の手 じゃんけんですので相手の手が必要ですね!
  63. 63. arc4random()%3 って書くと0から2の範囲で適当な数値を返してくれます。じゃんけんボタンを押した時の処理の先頭にかきましょう!
  64. 64. hiddenで隠していた手を表示する為には各Image Viewをプログラムと接続しないといけないです。ctlを押しながら GameViewController.hにドラッグします。
  65. 65. ConnectionをOutlet、TypeをUIImageCiew、StorageをWeakのまま変えずNameに好きな名前をつけます。上の場合はぐーなので “guu”とつけました。
  66. 66. ちょき、ぱーも入れてGameViewController.hはこんな感じになりました。
  67. 67. 相手の手を表示してみましょう!
  68. 68. if は もしも 〇〇 だったらという意味です。
  69. 69. うごかしてみましょう!
  70. 70. ボタンを押すと相手がじゃんけんを 出す様になりました!
  71. 71. そういえば、自分が押した手が何かiPhoneが分かりませんね??
  72. 72. Tag Tagを使うと区別が出来ます。ぐーは0、ちょきは1、パーは2にします。プログラムでTagの数字が拾えるんです。
  73. 73. かち!まけ!あいこ!の3つの文字も プログラムに繋いでおきます。
  74. 74. 自分の手と相手の手の組み合わせで結果を表示します。
  75. 75. 2回目おすとなんだかおかしいですね。。
  76. 76. 前の表示が残っているからです。前の表示を全部非表示にして やりなおせばOKです。
  77. 77. ゲームからメニューに戻る機能を つけましょう∼こっから画像が変わってますけど 気にしないでね
  78. 78. 前回同様、ボタンをドラッグします。
  79. 79. メニューのボタンと同様にcustomを選びボタンをImage画像を変更します
  80. 80. メニュー画面に戻るボタンをctl押しながらドラッグします。
  81. 81. 下記のように設定します Connection : Action Type : UIButton Event : Touch Up Inside Arguments : Sender Nameは好きにつけれます。今回は、 “backToMenuBtnDidPush”とつけました。
  82. 82. GameViewController.hはこんな感じになりました
  83. 83. こんどは、GameViewController.m のbackToMenuBtnDidPush関数にゲーム画面を閉じる命令を書きます。[self dismissViewControllerAnimated:YEScompletion:nil];
  84. 84. 動かしてみましょう!
  85. 85. これでおしまいです!
  86. 86. 最後まで見て頂き ありがとうございました!間違いご指摘などありましたら twitterで@itokami1123まで

×