⑭iPhoneアプリを作ってみよう！（超初心者向け）その２
•
5 gostaram•4,773 visualizações
https://www.facebook.com/TonosamaLabo
Recomendados
Mais conteúdo relacionado
Mais de Nishida Kansuke
Mais de Nishida Kansuke (20)
⑭iPhoneアプリを作ってみよう！（超初心者向け）その２
- 1. iPhoneアプリ作成 勉強会 ⑭iPhoneアプリを作ってみよ う！（超初心者向け）
- 2. 動作環境 • Mac OS X 10.7 Lion • xcode 4.3.1
- 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. もくじ • まずはプロジェクトを作ろう • メイン画面を作ろう • 画像を変えよう • ヘルプ画面を作ろう • ボタンをつかおう • アニメーションに挑戦
- 10. やってみよう • TabBarControllerを 追加しよう
- 11. できた！ • タブがいれかわる！ show_01.zip
- 13. やってみよう • 下の画面を削除して、 かわりに、 TableViewController を配置しよう。 • TabBarViewControll erからRelationship のセグウェイをつな げよう
- 14. やってみよう • タブバーのアイコンと 名前を変えよう • それぞれ、右のよう にしてみよう
- 15. こんなかんじ
- 16. メイン画面を作ろう • SwipeGestureReco gnizerを画面に２個 置こう
- 17. やってみよう • それぞれ、パラメー タを変更しよう
- 19. やってみよう • Objective-C classを えらぼう
- 21. やってみよう • 保存先はそのままで ＯＫ
- 22. やってみよう • 右の画面みたいに なったら成功！
- 23. ファイルの説明 • プログラムの書いてあるファイルを、ソー スファイルといいます。 • Objective-Cのプログラムは、２個に分か れています。 • xxx.hをヘッダファイルといいます。 • ヘッダファイルには、本体の定義情報を書 きます。
- 24. ソースと画面をつなげる • ソースファイルを作っただけでは、画面と つながりません。 • ストーリーボード上で、設定をします。
- 25. やってみよう • メイン画面の下のと この黄色いのを選ぼ う • プロパティから MainViewController を設定しよう
- 26. ちょっとプログラム • MainViewControllerに以下を追加してみよ う！ - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view. NSLog(@"てすと"); }
- 27. できた！ • XCODEに字が出た！ show_02.zip
- 28. かいせつ • viewDidLoadというのは、画面がロード された後に呼ばれる関数です。 • NSLogというのは、文字をログに表示す る命令です。
- 29. やってみよう • ストーリーボードに して、右上のジェント ルメンをおそう • 画面が分割されて、 右側にヘッダファイ ルが出るのを確認
- 30. やってみよう • プロパティにRightを設定した SwipeGestureRecognizerを、 • controlをおしながら、ヘッダファイルにドラッグし よう • 吹き出しが出るので、間違えないように設定しよう
- 31. やってみよう • ヘッダとソースにプロ グラムがついかされ る！
- 32. やってみよう • ソースを変更してみよう - (IBAction)swipeRight:(id)sender { NSLog(@"シュッ！"); }
- 33. できた！ • みぎにやるとシュッてなる！ show_03.zip
- 34. 注意 • 一度たしたプログラムは、ストーリーボー ド上で消しても消えない • 二回足すと、プログラムも２個足される
- 36. 画像を変えよう • まず、UIImageViewを画面に配置をしま す。 • 次に、プログラムで使えるようにします。 • ジェスチャーにあわせて、画像を変更しま す。
- 37. やってみよう • 背景画像をおこう • その上に、 UIImageViewをおこ う
- 38. やってみよう • imageViewからヘッ ダファイルにcontrol をおしながらドラッ グしよう • mainImageViewとい うなまえにしよう
- 39. ActionとOutlet • Actionは、ボタンを押す、スワイプをす るなどのイベントに対応しています • Outletは、UIImageView,UILabelなど部 品そのものに対応しています。
- 40. やってみよう - (IBAction)swipeRight:(id)sender { self.mainImageView.image = [UIImage imageNamed:@"makoto_p_01.png"]; NSLog(@"シュッ！（みぎ）"); } - (IBAction)swipeLeft:(id)sender { self.mainImageView.image = [UIImage imageNamed:@"makoto_p_02.png"]; NSLog(@"シュッ！（ひだり）"); }
- 41. メモ • Outletで追加した部品は、 self.mainImageViewみたいな感じでプログ ラムで使えるようになります。 • self.mainImageView.image = [UIImage imageNamed:@"makoto_p_01.png"]; • これは、self.mainImageViewのimage に画像を設定するみたいな意味！
- 42. できた！ • シュッてしたら絵が出る！ show_04.zip
- 43. ヘルプ画面を作ろう • TableViewをつかって、 ヘルプ画面を作ってみ よう！
- 44. Static Cellsにしよう • TableViewには２種類 あって、プログラムか ら内容を設定する場合 は、 DynamicPrototypes • を使います。 • ストーリーボードから 設定する場合は、 StaticCellsを使います。 • 今回は、StaticCellsに します！ • Sectionsも２に変更し ます。
- 45. Sectionのプロパティ • Sectionのプロパティ を変更します。 • Rowsは、行数です。 • また、行の高さも変 更しましょう
- 46. できた！ • おしたらあおくなるのが、 微妙かなあ・・・。 show_05.zip
- 47. やってみよう • SelectionをNoneに すると、あおくなら なくなる！
- 48. やってみよう • TableViewの Scrolling Enabledを OFFにすると、スク ロールしなくなる！
- 49. やってみよう • 右の画面を参考に、 ラベル等を置いて、 ヘルプ画面を作ろ う！
- 50. できた！ • まあまあ、いいかんじ！ show_06.zip
- 52. やってみよう • とりあえず、絵が変わる部分を、コメント にしよう。 - (IBAction)swipeRight:(id)sender { // self.mainImageView.image = [UIImage imageNamed:@"makoto_p_01.png"]; NSLog(@"シュッ！（みぎ）"); } - (IBAction)swipeLeft:(id)sender { // self.mainImageView.image = [UIImage imageNamed:@"makoto_p_02.png"]; NSLog(@"シュッ！（ひだり）"); }
- 54. やってみよう • ストーリーボードに して、右上のジェント ルメンをおそう • 画面が分割されて、 右側にヘッダファイ ルが出るのを確認
- 55. やってみよう • Aのボタンからcontrolを押しながらドラッグして Actionを設定
- 56. やってみよう • 同じようにして、ボ タンＡ，Ｂ，Ｃのア クションを作ろう！
- 57. やってみよう • 関数が追加されているので、ログを入れてみよう！ - (IBAction)buttonTouchA:(id)sender { NSLog(@"ボタン:A"); } - (IBAction)buttonTouchB:(id)sender { NSLog(@"ボタン:B"); } - (IBAction)buttonTouchC:(id)sender { NSLog(@"ボタン:C"); }
- 58. できた！ • ボタンを押したらログが出 る！ show_07.zip
- 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. できた！ • ボタンを押したら写真が変 わる！
- 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. できた！ • フェードインする！
- 64. かいぞうしよう • フェードアウトして画像が消えた後に、画像を 入れ替えたい！
- 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 = [UIImage imageNamed:@"makoto_p_01.png"]; } ]; NSLog(@"ボタン:A"); }
- 66. できた！ • フェードアウトした後、す ぐでてきた！
- 67. かいぞうしよう • フェードアウトして画像が消えた後に、画像を 入れ替えて、フェードインして出てきてほし い！
- 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. できた！ • フェードアウトした後、 フェードインして出てき た！ • けど、Ａボタン連打すると 変だ＞＜
- 70. やってみよう • ストーリーボードに して、右上のジェント ルメンをおそう • 画面が分割されて、 右側にヘッダファイ ルが出るのを確認
- 71. やってみよう • Aのボタンからcontrolを押しながらドラッグして Outletを設定
- 72. やってみよう • 同じようにして、ボ タンＡ，Ｂ，Ｃのア ウトレットを作ろ う！
- 73. やってみよう • アニメーションしている間、ボタンを消そう！ • 表示の制御は、self.buttonA.hidden = YES; （YESで隠れる）
- 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:0 options:UIViewAnimationOptionCurveLinear animations:^{ self.mainImageView.alpha = 0; }
- 75. やってみよう 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){ self.buttonA.hidden = NO; self.buttonB.hidden = NO; self.buttonC.hidden = NO; } ]; } ]; NSLog(@"ボタン:A"); }
- 76. できた！ • アニメーションの間、ボタ ンが消えた！ show_08.zip
- 77. いどうさせよう • 写真を移動させて、上からおりてくるよう にしよう！ • 写真の位置は、 self.mainImageView.center = CGPointMake(x, y);で指定できる！
- 78. 真ん中を確認 • Originの赤いのを真 ん中にすると、座標 の指定の基準が中央 になる！ • self.mainImageView. centerは、中央指定 なので、この値をみ ながらやろう！
- 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"); }
- 81. 大きさを変えよう • 写真の大きさを変えてみよう • 写真のサイズは、 mainImageView.bounds = CGRectMake(0, 0, w, h);で指定できる！ • 最初に、横のサイズ（w）を０にして、そ のあと、画像を交換して、横のサイズを元 に戻してみよう！
- 82. サイズを確認 • Width,Heightをみな がらやろう！
- 83. やってみよう - (IBAction)buttonTouchC:(id)sender { self.buttonA.hidden = YES; self.buttonB.hidden = YES; self.buttonC.hidden = YES; [UIView animateWithDuration:1.0f delay:0 options:UIViewAnimationOptionCurveLinear animations:^{ mainImageView.bounds = CGRectMake(0, 0, 0, 315); }
- 84. やってみよう completion:^(BOOL finished){ self.mainImageView.image = [UIImage imageNamed:@"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. できた！ • アニメーションができた！ show_09.zip
- 87. ヒント • アイコンとスプラッ シュをドラッグして 定義しよう！
- 88. ヒント • Bundle display nameを変更してみよう！
- 89. できた！ • 完成した！ show_10.zip
- 91. おわり 主催（共同開催）： 株式会社 gooya http://www.gooya.co.jp/ メドレー株式会社 http://www.medley.co.jp/ 講師：西田 寛輔 (Tonosamart) http://www.facebook.com/tonosamart