⑭iPhoneアプリを作ってみよう!(超初心者向け)その2

11,169 views
11,093 views

Published on

https://www.facebook.com/TonosamaLabo

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
11,169
On SlideShare
0
From Embeds
0
Number of Embeds
7,429
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

⑭iPhoneアプリを作ってみよう!(超初心者向け)その2

  1. 1. iPhoneアプリ作成 勉強会 ⑭iPhoneアプリを作ってみよ う!(超初心者向け)
  2. 2. 動作環境•  Mac OS X 10.7 Lion•  xcode 4.3.1
  3. 3. はじめに•  iPhoneアプリを作ってみよう!•  超初心者向け!難しいことは置いといて、あそ んでみよう!
  4. 4. 注意事項•  雑に教えます。難しいこと、細かいことは 大人になってから覚えましょう!•  適切なやり方ではなく、簡単なやり方を 教えちゃう場合もあるかもしれませ ん。!でもまあ、ちっちゃいことは気に しないで、まずは動かしてみましょう!
  5. 5. 写真素材について①•  写真素材については、小林真琴(愛称:まっ こり)様から提供していただいています。•  今回の勉強会の資料として提供いただいてい ますので、再配布やアプリ等での使用はでき ません。•  フリー素材ではありませんので、ご注意くだ さい。•  みなさん、応援してあげてください!(アプ リや、Web、バナー広告等のモデルの仕事お 待ちしています!)
  6. 6. 写真素材について②まっこり(小林真琴)    フリーでモデルをやっています。  秋田出身のまっこりです♪      みなさんに笑顔や感動を与えられる  モデルを目指しています!    自分だけの新しい世界観を生み出し、  日々成長して行こうと思います。    応援よろしくお願いします(^-­‐^)/    BLOG:  http://blog.crooz.jp/chery2  Twitter:  https://twitter.com/#!/maccori_1  Facebook:  https://www.facebook.com/profile.php?id=100003547711446
  7. 7. もくじ•  まずはプロジェクトを作ろう•  メイン画面を作ろう•  画像を変えよう•  ヘルプ画面を作ろう•  ボタンをつかおう•  アニメーションに挑戦
  8. 8. まずはプロジェクトを作ろう•  showというプロジェクトを作ろう
  9. 9. やってみよう•  いらないファイルを削除しよう•  ストーリーボードもからにしよう
  10. 10. やってみよう•  TabBarControllerを 追加しよう
  11. 11. できた!•  タブがいれかわる! show_01.zip
  12. 12. やってみよう•  リソースを追加しよう!
  13. 13. やってみよう•  下の画面を削除して、 かわりに、 TableViewController を配置しよう。•  TabBarViewControll erからRelationship のセグウェイをつな げよう
  14. 14. やってみよう•  タブバーのアイコンと 名前を変えよう•  それぞれ、右のよう にしてみよう
  15. 15. こんなかんじ
  16. 16. メイン画面を作ろう•  SwipeGestureReco gnizerを画面に2個 置こう
  17. 17. やってみよう•  それぞれ、パラメー タを変更しよう
  18. 18. やってみよう•  File->New->Fileをえらぼう
  19. 19. やってみよう•  Objective-C classを えらぼう
  20. 20. やってみよう•  MainViewControllerをえらぼう
  21. 21. やってみよう•  保存先はそのままで OK
  22. 22. やってみよう•  右の画面みたいに なったら成功!
  23. 23. ファイルの説明•  プログラムの書いてあるファイルを、ソー スファイルといいます。•  Objective-Cのプログラムは、2個に分か れています。•  xxx.hをヘッダファイルといいます。•  ヘッダファイルには、本体の定義情報を書 きます。
  24. 24. ソースと画面をつなげる•  ソースファイルを作っただけでは、画面と つながりません。•  ストーリーボード上で、設定をします。
  25. 25. やってみよう•  メイン画面の下のと この黄色いのを選ぼ う•  プロパティから MainViewController を設定しよう
  26. 26. ちょっとプログラム•  MainViewControllerに以下を追加してみよ う!- (void)viewDidLoad{ [super viewDidLoad]; // Do any additional setup after loadingthe view. NSLog(@"てすと");}
  27. 27. できた!•  XCODEに字が出た! show_02.zip
  28. 28. かいせつ•  viewDidLoadというのは、画面がロード された後に呼ばれる関数です。•  NSLogというのは、文字をログに表示す る命令です。
  29. 29. やってみよう•  ストーリーボードに して、右上のジェント ルメンをおそう•  画面が分割されて、 右側にヘッダファイ ルが出るのを確認
  30. 30. やってみよう•  プロパティにRightを設定した SwipeGestureRecognizerを、•  controlをおしながら、ヘッダファイルにドラッグし よう•  吹き出しが出るので、間違えないように設定しよう
  31. 31. やってみよう•  ヘッダとソースにプロ グラムがついかされ る!
  32. 32. やってみよう•  ソースを変更してみよう- (IBAction)swipeRight:(id)sender { NSLog(@"シュッ!");}
  33. 33. できた!•  みぎにやるとシュッてなる! show_03.zip
  34. 34. 注意•  一度たしたプログラムは、ストーリーボー ド上で消しても消えない•  二回足すと、プログラムも2個足される
  35. 35. やってみよう•  ひだりがわもやってみよう!
  36. 36. 画像を変えよう•  まず、UIImageViewを画面に配置をしま す。•  次に、プログラムで使えるようにします。•  ジェスチャーにあわせて、画像を変更しま す。
  37. 37. やってみよう•  背景画像をおこう•  その上に、 UIImageViewをおこ う
  38. 38. やってみよう•  imageViewからヘッ ダファイルにcontrol をおしながらドラッ グしよう•  mainImageViewとい うなまえにしよう
  39. 39. ActionとOutlet•  Actionは、ボタンを押す、スワイプをす るなどのイベントに対応しています•  Outletは、UIImageView,UILabelなど部 品そのものに対応しています。
  40. 40. やってみよう- (IBAction)swipeRight:(id)sender { self.mainImageView.image = [UIImageimageNamed:@"makoto_p_01.png"]; NSLog(@"シュッ!(みぎ)");}- (IBAction)swipeLeft:(id)sender { self.mainImageView.image = [UIImageimageNamed:@"makoto_p_02.png"]; NSLog(@"シュッ!(ひだり)");}
  41. 41. メモ•  Outletで追加した部品は、 self.mainImageViewみたいな感じでプログ ラムで使えるようになります。•  self.mainImageView.image = [UIImage imageNamed:@"makoto_p_01.png"];•  これは、self.mainImageViewのimage に画像を設定するみたいな意味!
  42. 42. できた!•  シュッてしたら絵が出る! show_04.zip
  43. 43. ヘルプ画面を作ろう•  TableViewをつかって、 ヘルプ画面を作ってみ よう!
  44. 44. Static Cellsにしよう•  TableViewには2種類 あって、プログラムか ら内容を設定する場合 は、 DynamicPrototypes•  を使います。•  ストーリーボードから 設定する場合は、 StaticCellsを使います。•  今回は、StaticCellsに します!•  Sectionsも2に変更し ます。
  45. 45. Sectionのプロパティ•  Sectionのプロパティ を変更します。•  Rowsは、行数です。•  また、行の高さも変 更しましょう
  46. 46. できた!•  おしたらあおくなるのが、 微妙かなあ・・・。 show_05.zip
  47. 47. やってみよう•  SelectionをNoneに すると、あおくなら なくなる!
  48. 48. やってみよう•  TableViewの Scrolling Enabledを OFFにすると、スク ロールしなくなる!
  49. 49. やってみよう•  右の画面を参考に、 ラベル等を置いて、 ヘルプ画面を作ろ う!
  50. 50. できた!•  まあまあ、いいかんじ! show_06.zip
  51. 51. ボタンをつかおう•  こんどは、ボタンをつかってみよう
  52. 52. やってみよう•  とりあえず、絵が変わる部分を、コメント にしよう。- (IBAction)swipeRight:(id)sender {// self.mainImageView.image = [UIImageimageNamed:@"makoto_p_01.png"]; NSLog(@"シュッ!(みぎ)");}- (IBAction)swipeLeft:(id)sender {// self.mainImageView.image = [UIImageimageNamed:@"makoto_p_02.png"]; NSLog(@"シュッ!(ひだり)");}
  53. 53. ボタンを置こう•  ボタンを3個おこう•  それぞれ、A,B,Cにし よう
  54. 54. やってみよう•  ストーリーボードに して、右上のジェント ルメンをおそう•  画面が分割されて、 右側にヘッダファイ ルが出るのを確認
  55. 55. やってみよう•  Aのボタンからcontrolを押しながらドラッグして Actionを設定
  56. 56. やってみよう•  同じようにして、ボ タンA,B,Cのア クションを作ろう!
  57. 57. やってみよう•  関数が追加されているので、ログを入れてみよう!- (IBAction)buttonTouchA:(id)sender { NSLog(@"ボタン:A");}- (IBAction)buttonTouchB:(id)sender { NSLog(@"ボタン:B");}- (IBAction)buttonTouchC:(id)sender { NSLog(@"ボタン:C");}
  58. 58. できた!•  ボタンを押したらログが出 る! show_07.zip
  59. 59. やってみよう•  ボタンが押されたら、画像が変わるよう にしてみよう!- (IBAction)buttonTouchA:(id)sender { self.mainImageView.image = [UIImage imageNamed:@"makoto_p_01.png"]; NSLog(@"ボタン:A");}- (IBAction)buttonTouchB:(id)sender { self.mainImageView.image = [UIImage imageNamed:@"makoto_p_02.png"]; NSLog(@"ボタン:B");}- (IBAction)buttonTouchC:(id)sender { self.mainImageView.image = [UIImage imageNamed:@"makoto_p_03.png"]; NSLog(@"ボタン:C");}
  60. 60. できた!•  ボタンを押したら写真が変 わる!
  61. 61. アニメーションに挑戦•  カッコいいアニメーションに挑戦しよ う!
  62. 62. やってみよう- (IBAction)buttonTouchA:(id)sender { self.mainImageView.image = [UIImage imageNamed:@"makoto_p_01.png"]; self.mainImageView.alpha = 0; [UIView animateWithDuration:4.0f delay:0 options:UIViewAnimationOptionCurveLinear animations:^{ self.mainImageView.alpha = 1.0f; } completion:^(BOOL finished){ NSLog(@"アニメーション終了"); } ]; NSLog(@"ボタン:A");}
  63. 63. できた!•  フェードインする!
  64. 64. かいぞうしよう•  フェードアウトして画像が消えた後に、画像を 入れ替えたい!
  65. 65. やってみよう- (IBAction)buttonTouchA:(id)sender { self.mainImageView.alpha = 1.0f; [UIView animateWithDuration:4.0f delay:0 options:UIViewAnimationOptionCurveLinear animations:^{ self.mainImageView.alpha = 0; } completion:^(BOOL finished){ self.mainImageView.alpha = 1.0f; self.mainImageView.image = [UIImageimageNamed:@"makoto_p_01.png"]; } ]; NSLog(@"ボタン:A");}
  66. 66. できた!•  フェードアウトした後、す ぐでてきた!
  67. 67. かいぞうしよう•  フェードアウトして画像が消えた後に、画像を 入れ替えて、フェードインして出てきてほし い!
  68. 68. やってみよう- (IBAction)buttonTouchA:(id)sender { self.mainImageView.alpha = 1.0f; [UIView animateWithDuration:3.0f delay:0 options:UIViewAnimationOptionCurveLinear animations:^{ self.mainImageView.alpha = 0; } completion:^(BOOL finished){ self.mainImageView.image = [UIImage imageNamed:@"makoto_p_01.png"]; [UIView animateWithDuration:3.0f delay:0 options:UIViewAnimationOptionCurveLinear animations:^{ self.mainImageView.alpha = 1.0f; } completion:^(BOOL finished){ } ]; } ]; NSLog(@"ボタン:A");}
  69. 69. できた!•  フェードアウトした後、 フェードインして出てき た!•  けど、Aボタン連打すると 変だ><
  70. 70. やってみよう•  ストーリーボードに して、右上のジェント ルメンをおそう•  画面が分割されて、 右側にヘッダファイ ルが出るのを確認
  71. 71. やってみよう•  Aのボタンからcontrolを押しながらドラッグして Outletを設定
  72. 72. やってみよう•  同じようにして、ボ タンA,B,Cのア ウトレットを作ろ う!
  73. 73. やってみよう•  アニメーションしている間、ボタンを消そう!•  表示の制御は、self.buttonA.hidden = YES; (YESで隠れる)
  74. 74. やってみよう- (IBAction)buttonTouchA:(id)sender { self.buttonA.hidden = YES; self.buttonB.hidden = YES; self.buttonC.hidden = YES; self.mainImageView.alpha = 1.0f; [UIView animateWithDuration:3.0f delay:0options:UIViewAnimationOptionCurveLinear animations:^{ self.mainImageView.alpha = 0; }
  75. 75. やってみようcompletion:^(BOOL finished){ self.mainImageView.image = [UIImageimageNamed:@"makoto_p_01.png"]; [UIView animateWithDuration:3.0f delay:0 options:UIViewAnimationOptionCurveLinear animations:^{ self.mainImageView.alpha = 1.0f; } completion:^(BOOL finished){ self.buttonA.hidden = NO; self.buttonB.hidden = NO; self.buttonC.hidden = NO; } ]; } ]; NSLog(@"ボタン:A");}
  76. 76. できた!•  アニメーションの間、ボタ ンが消えた! show_08.zip
  77. 77. いどうさせよう•  写真を移動させて、上からおりてくるよう にしよう!•  写真の位置は、 self.mainImageView.center = CGPointMake(x, y);で指定できる!
  78. 78. 真ん中を確認•  Originの赤いのを真 ん中にすると、座標 の指定の基準が中央 になる!•  self.mainImageView. centerは、中央指定 なので、この値をみ ながらやろう!
  79. 79. やってみよう- (IBAction)buttonTouchB:(id)sender { self.buttonA.hidden = YES; self.buttonB.hidden = YES; self.buttonC.hidden = YES; self.mainImageView.image = [UIImage imageNamed:@"makoto_p_02.png"]; self.mainImageView.center = CGPointMake(160, -178); [UIView animateWithDuration:2.0f delay:0 options:UIViewAnimationOptionCurveLinear animations:^{ self.mainImageView.center = CGPointMake(160, 178); } completion:^(BOOL finished){ self.buttonA.hidden = NO; self.buttonB.hidden = NO; self.buttonC.hidden = NO; } ]; NSLog(@"ボタン:B");}
  80. 80. できた!•  うえからおりてきた!
  81. 81. 大きさを変えよう•  写真の大きさを変えてみよう•  写真のサイズは、 mainImageView.bounds = CGRectMake(0, 0, w, h);で指定できる!•  最初に、横のサイズ(w)を0にして、そ のあと、画像を交換して、横のサイズを元 に戻してみよう!
  82. 82. サイズを確認•  Width,Heightをみな がらやろう!
  83. 83. やってみよう- (IBAction)buttonTouchC:(id)sender { self.buttonA.hidden = YES; self.buttonB.hidden = YES; self.buttonC.hidden = YES; [UIView animateWithDuration:1.0f delay:0options:UIViewAnimationOptionCurveLinear animations:^{ mainImageView.bounds =CGRectMake(0, 0, 0, 315); }
  84. 84. やってみようcompletion:^(BOOL finished){ self.mainImageView.image = [UIImageimageNamed:@"makoto_p_03.png"]; [UIView animateWithDuration:1.0f delay:0 options:UIViewAnimationOptionCurveLinear animations:^{ mainImageView.bounds = CGRectMake(0, 0, 246,315); } completion:^(BOOL finished){ self.buttonA.hidden = NO; self.buttonB.hidden = NO; self.buttonC.hidden = NO; } ]; } ]; NSLog(@"ボタン:C");}
  85. 85. できた!•  アニメーションができた! show_09.zip
  86. 86. アプリ的なもの•  アプリ的なものを作ってみよう!
  87. 87. ヒント•  アイコンとスプラッ シュをドラッグして 定義しよう!
  88. 88. ヒント•  Bundle display nameを変更してみよう!
  89. 89. できた!•  完成した! show_10.zip
  90. 90. まとめ•  プログラムちょっとわかった!
  91. 91. おわり主催(共同開催):株式会社 gooyahttp://www.gooya.co.jp/メドレー株式会社http://www.medley.co.jp/講師:西田 寛輔 (Tonosamart)http://www.facebook.com/tonosamart

×