Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

㉛Xcodeを覚えよう!簡単なアプリを作ってみよう!②

3,961 views

Published on

https://www.facebook.com/TonosamaLabo

Published in: Technology
  • Be the first to comment

㉛Xcodeを覚えよう!簡単なアプリを作ってみよう!②

  1. 1. iPhoneアプリ開発勉強会㉛Xcodeを覚えよう!簡単なアプリを作ってみよう!
  2. 2. プロジェクトを作ってみよう•  XCODEでプログラムを作るときは、プロジェクトを作ります。•  プロジェクトには、プログラムのソースファイルの他に、設定ファイルや、画像データとかも含まれます。
  3. 3. やってみよう①•  XCODEを立ち上げよう!•  New Projectをつくろう!
  4. 4. やってみよう②•  nikomorouという名前のプロジェクトを作ろう!
  5. 5. やってみよう③•  デスクトップに保存しよう!
  6. 6. できた!•  フォルダができた
  7. 7. ちなみに•  次回からは、フォルダの中の青いのを開くとXCODEが立ち上がります!
  8. 8. おおまかなかいせつ•  XCODEについて、おおまかにかいせつします。
  9. 9. おおまかなかいせつ①•  左側のパネルがファイル一覧•  上の方がタブになってるから、注意!
  10. 10. MEMO•  フォルダ一覧と実際のフォルダの構造は違う。•  実フォルダの他にGROUPというのでフォルダ管理されてる。•  基本的にファイル名で管理されているので、違うフォルダだとしても、同じ名前のファイルを置かないこと。(おけるけどコンパイル時などにおかしくなる)
  11. 11. おおまかなかいせつ②•  プログラムを入れるフォルダ、設定ファイルを入れるフォルダ等、あらかじめ決められてるのでなるべく守ろう!(そのくせ変な場所に追加されるので注意)
  12. 12. おおまかなかいせつ③•  左上あたりで、プログラムの実行と停止や、シミュレーターの選択ができる
  13. 13. やってみよう•  iPhoneとiPadそれぞれのシュミレーターで動かしてみよう!•  実機をつないでも、設定とかいるからエラーになるので、今は我慢しよう!
  14. 14. できた!•  ちょっとだけたのしい!
  15. 15. おおまかなかいせつ④•  右の方にあるEditorは、左が通常、真ん中が画面分割(通称ジェントルマン)、一番右は、押してはいけないボタン(差分表示)•  ストーリーボードを開いている状態で、一番右のボタンを押すと、戻れなくなるので、おさないようにしよう!•  ジェントルマンを押しっぱなしで作業をしてるとおかしくなることがあるので、使い終わったら左のでもとに戻すくせをつけよう!
  16. 16. おおまかなかいせつ⑤•  真ん中のViewは、画面に表示するViewを選べます。•  ここは、押してもOK!•  なぜか、実行時だけデバッグログのViewが自動に閉じるとかの変な動作になることがあるけど、根気よく毎回おそう!
  17. 17. おおまかなかいせつ⑥•  アプリの設定をする画面•  なんだけど、ここをいじっても、plistっていう設定ファイルに反映されたりされなかったりするから注意しよう
  18. 18. XCODEのとくちょう(独自調べ)•  設定したら反映されるが、削除しても反映されるとは限らない。•  削除したものを、もとにもどせるとは限らない。•  XCODE自体の設定画面で、エディタの色を変えられるが、おかしな現象が起きるかもしれないので、できればさわらないでおこう!
  19. 19. ストーリーボード•  ストーリーボードとは、XCODEのあたらしめの機能の一つです。•  ビジュアル的に開発ができるのでとても便利です。
  20. 20. やってみよう•  MainStoryboard.storyboardを左側のディレクトリみたいなところから探して選択してみよう
  21. 21. こんなかんじ!
  22. 22. おおまかなかいせつ①•  左側のエリアの、わくと、真ん中のエリアの画面みたいなのがそれぞれ1対1で対応しています。
  23. 23. おおまかなかいせつ②•  左側と真ん中のエリアは、対応しているのでどちらかを編集すると、もう片方にも影響が出ます。•  右側のエリアは、詳細を表示する場所です。左側か真ん中で選択中の情報が出ます。
  24. 24. おおまかなかいせつ④•  右側のエリアのうえのとこは、タブみたいになっています。
  25. 25. やってみよう•  とりあえず、全部削除して、きれいにしよう!
  26. 26. やってみよう•  左のを選んでdeleteキー!•  真ん中も!•  右も!
  27. 27. できた!•  すっきり!
  28. 28. やってみよう•  ツリーのアイコンが灰色になってる!•  セーブされてないサイン!•  command+sで保存しよう!
  29. 29. ファイルを消そう•  つかわないファイルを消そう•  さっき消した画面用のプログラムを4個消してみよう。
  30. 30. やってみよう•  選択して右ボタン→Delete
  31. 31. やってみよう•  右側のボタンをおそう!
  32. 32. 注意事項•  真ん中のボタンを間違えて押すと、ファイルが消されずに、参照だけが消されます。
  33. 33. できた!•  すっきりした!
  34. 34. やってみよう①ViewControlerをおいてみよう!
  35. 35. やってみよう②•  リソースを追加しよう!
  36. 36. ステータスバーを消そう•  ステータスバーを消してみよう•  ストーリーボードのViewの設定も変更しよう!
  37. 37. がめんをつくってみよう①•  こんな感じで画面を作ろう!
  38. 38. がめんをつくってみよう②•  ViewControlerをとなりにおいてみよう!•  こんな感じで画面を作ろう!
  39. 39. つなごう•  よろこばせるのボタンからmodalで右のViewControlerにつなごう!
  40. 40. できた!•  ボタン押すと遷移する!
  41. 41. クラスを作ろう!•  MainViewControllerとSubViewControllerをつくってそれぞれ左右のViewControllerに設定しよう!
  42. 42. もどるぼたん•  もどるボタンを実装してみよう!
  43. 43. やってみようMainViewController.m- (IBAction)mainViewReturnActionForSegue:(UIStoryboardSegue *)segue{NSLog(@"もどってきた!");}
  44. 44. やってみよう•  controlをおしながら戻るボタンからMainViewControllerの緑のExitに線をつなげよう!•  さっき作ったMainViewReturnActionFromSegueがあるからそれを選ぼう!
  45. 45. かくにんしよう•  つなぐのに成功すると、Exitにボタンのアクションが設定されるから確認しよう
  46. 46. できた•  もどるぼたんでもどれた!•  もどるやつをUnwind Segueといいます。
  47. 47. 次の画面に値を渡す•  台詞を次の画面に渡そう!
  48. 48. segueに名前をつけよう•  IdentifierをgoSubViewSegueにしよう!
  49. 49. ふきだしをつくろう•  ふきだしの中にラベルをおこう•  textLabelでOutletしよう
  50. 50. 台詞を入れる変数•  SubViewControllerに台詞を入れる変数を作ろう•  @property NSString *text;
  51. 51. 台詞を渡そうMainViewController.m#import "SubViewController.h-(void)prepareForSegue:(UIStoryboardSegue *)seguesender:(id)sender{if([[segue identifier]isEqualToString:@"goSubViewSegue"]){SubViewController *vc = (SubViewController*)[seguedestinationViewController];vc.text = @ かっこいいね!";}}
  52. 52. かいせつ•  -(void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)senderを定義しておくと、segueで移動する前に呼び出される!•  この時点では、画面は作られていないので、SubViewControllerのtextLabelはつくられていない><。なので変数に値を入れておこう!•  SubViewControllerは自分で作ったクラスなので、プログラムの先頭で#importしないと使えない!
  53. 53. 台詞をもらおうSubViewController.m- (void)viewDidLoad{[super viewDidLoad];// Do any additional setup after loading theview.self.textLabel.text = self.text;}
  54. 54. かいせつ•  self.textに入っている文字を、ラベルに設定しよう
  55. 55. できた•  せりふがでた!
  56. 56. 台詞をふやそう•  ランダムで3種類の台詞を出そう!
  57. 57. やってみよう①-(void)prepareForSegue:(UIStoryboardSegue *)seguesender:(id)sender{if([[segue identifier]isEqualToString:@"goSubViewSegue"]){SubViewController *vc = (SubViewController*)[segue destinationViewController];int no = rand() % 3;
  58. 58. やってみよう②switch (no) {case 0:vc.text = @"はなたかいね!";break;case 1:vc.text = @"あかいのが素敵!";break;case 2:vc.text = @"かっこいいね!";break;}}}
  59. 59. できた!•  まいかいちがう!
  60. 60. 乱数の初期化- (void)viewDidLoad{[super viewDidLoad];// Do any additional setup afterloading the view.srand(time(nil));}
  61. 61. かいぞうしよう•  アプリに必要な設定をしてみよう!•  サイコロにしてみよう!1∼6まで台詞で話すようにしよう!
  62. 62. まとめ•  プログラムすこしわかった!
  63. 63. とのさまラボ! •  勉強会に参加した人どうしのコミニュティがほしい!
勉強会の開催日時の告知がほしい!

という意見をみなさまからいただいたので、
コミニュティを作成しました!

ぜひ「いいね!」をお願いします! h,ps://www.facebook.com/TonosamaLabo  
  64. 64. おわり 主催(共同開催): 株式会社 gooya
http://www.gooya.co.jp/ メドレー株式会社
http://www.medley.co.jp/ 講師:西田 寛輔 (Tonosamart)
http://www.facebook.com/tonosamart

×