Beginning iPhone Vol2

1,087 views

Published on

iPhoneアプリ開発勉強会第2回の資料です

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

  • Be the first to like this

No Downloads
Views
Total views
1,087
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Beginning iPhone Vol2

  1. 1. 第2回 iPhone勉強会13年3月17日日曜日
  2. 2. 今後の予定 ・第2回 画面遷移の実装方法 ・第3回 TableViewとデータの扱い方 ・第4回 ユーザ操作(タップなど)の      検出方法 ・第5回 MapKitを使った地図の表示方法 現在地の取得方法13年3月17日日曜日シリーズ化に当たり、今後の予定をくんでみました。地図を表示して、現在いる場所を表示するアプリを作成することをゴールとして進めていこうと考えています。一応5回としていますが、進み具合によって変更しようと思います。今回は画面遷移の実装方法を行います。
  3. 3. 今日のアジェンダ ・前回の復習 ・StoryBoardを使った画面遷移 ・MVCモデルの説明 ・サンプルアプリ作成 (今日は複数画面のアプリを作ります)13年3月17日日曜日今日のスケジュールは以下の通りです。まず、前回の復習を軽く行った後、StoryBoardを使った画面遷移の実装方法を説明いたします。MVCモデルについて説明した後に、他の部品について説明をいたします。その後、今日の課題となるサンプルアプリを作成いたします。今日も出来るだけ手を動かすようにしたいと思います。よろしくおねがいいたします。
  4. 4. 前回の復習 ∼以下を実行してみましょう∼ ・Xcodeでプロジェクトを作成 ・ボタンを押したら、HelloWorldを表示する 何のことだかさっぱりわからないという方いますか?13年3月17日日曜日まず、前回の復習をしましょう。前回受講したという前提で、まずはコードを書いてみます。iPhone上でボタンを押したらHelloWorldを表示するプログラムを作成してください。何のことだかさっぱりわからないと言う方、こっそり教えてください・・・。
  5. 5. ソースコード ・ViewController.h @property (weak, nonatomic) IBOutlet UILabel *label;  →UILabel型のインスタンス変数を定義 - (IBAction)display:(id)sender; - (IBAction)erase:(id)sender;  →displayというメソッドとeraseというメソッドを定義13年3月17日日曜日回答例のソースコードを復習がてら解説します。Objective-Cの場合、.hファイルにメソッドや定数を定義し、.mファイルでメソッドの実装を行います。ここではViewController.hというファイルにUILabel型のlabelというインスタンス変数とdisplayというメソッドとeraseというメソッドを定義します。@property (weak, nonatomic) IBOutlet UILabel *label;と記載するとUILabel型のインスタンス変数を定義することが出来ます。インスタンス変数は直接アクセスすることが出来ないので、setterとgetterを設定する必要があるのですが、@propertyをつけるとコンパイラがsetterとgetterを作成してくれます。IBOutletとつけるとstoryboard(またはxibファイル)で設定したパーツからアクセスするものであるという設定が出来ます。これをつけることによって、Storyboardにあるパーツと接続することが出来ます。IBActionとつけるとStoryBoardにあるパーツを操作した際に呼び出されるメソッドであることを定義できます。この場合UIButtonをクリックするとdisplayというメソッドが呼び出されます。senderには操作した部品そのものが渡されます
  6. 6. ソースコード ・ViewController.m - (IBAction)display:(id)sender { self.label.text = @"Hello World!"; } - (IBAction)erase:(id)sender { self.label.text = @""; } → ラベルのテキストに文字列を設定している。 → self.labelでlabelというインスタンス変数へアクセ スしている13年3月17日日曜日では、ViewController.mファイルの内容について解説します。ヘッダで設定したdisplayメソッドとeraseメソッドで実際に行われる処理を実装します。displayメソッドではlabelにhelloWorldという文字列を表示するようにします。labelはインスタンス変数なので、Objective-Cでは直接アクセスすることは出来ません。self.labelと記載するとsetterからアクセスすることが出来ます。selfというのは自分自身(オブジェクト)を表します。ラベルで表示している文字列を変更するにはラベルオブジェクトのtextというインスタンス変数を変更する必要があります。self.label.textと記載することで自分自身のインスタンス変数であるlabelのインスタンス変数textに対してアクセスすることが出来る訳です。
  7. 7. 起動時の処理シーケンス ・main.mにあるUIApplicationMainが呼ばれる  →アプリケーションデリゲートが作成される  →info.plistに記載しているStoryBoardが読み込まれる ・AppDelegate.mにあるapplication didFinishLaunchingWithOptionsというメソッドが呼 ばれる  →アプリが起動してすぐに行う処理を定義する13年3月17日日曜日エンジニア的にはどのような処理シーケンスなのか気になる所だと思いますので、ざっくりと説明します。詳細に説明しだすとこれだけで終わってしまうので大まかな流れだけ頭の片隅においておいてください。最初にmain.mにあるmainメソッドが呼ばれます。ここでUIApplicationMainというメソッドがよばれ、アプリの初期処理を行います。AppDelegateクラスおよびStoryBoardで設定しているクラス(ViewController)が作成されます。ここで、info.plistにあるMain storyboard file base nameの設定値を変更してみましょう。アプリは起動するでしょうか・・・・。
  8. 8. Objective-Cの基本文法を おさらい Objective-Cは オブジェクトに対してメッセージを送る言語 メッセージを送った結果を受け取る 例:[obj msg] 受け取った結果がオブジェクトだったら・・・。 そのオブジェクトにもメッセージを送れる。 例:[[obj msg1] msg2];13年3月17日日曜日ここでObjective-Cの基本を少しおさらいします。知っているよという方もここで復習しておきましょう。Objective-Cはあるオブジェクトに対してメッセージを送るという言語です。[obj msg];でobjという名前のオブジェクトにmsgという名前のメッセージを送ります。メッセージを送った結果を受け取ることが出来ます。結果の形式についてはobjというオブジェクトで指定しています。オブジェクトのこともありますし、void型ということもあります。メッセージを送った結果オブジェクトを受け取った場合、受け取ったオブジェクトに対してもメッセージを送ることが出来ます。
  9. 9. Objective-Cの基本文法を おさらい 実際のコード例 Hoge *hogeObj = [[Hoge alloc]init]; int num = 1; [hogeObj sendMessage:@”test” number:num]; メソッド 引数 キーワード13年3月17日日曜日実際のソースコードではこのように記載します。Hoge型のhogeObjを作成します。[Hoge alloc]と記載するとHoge型のオブジェクトが返ってきます。返ってきたオブジェクトにinitというメッセージを送ると初期化することが出来ます。作成したHoge型オブジェクトhogeObjに対してsendMessageというメッセージを送ります。この送るメッセージのことをJavaなどでもおなじみのメソッドと言います。メソッドには引数を指定できます。ここでは”test”という文字列とnumというint型の変数を引数として指定しています。2つ以上の引数がある場合は、キーワードを指定します。(無くても動きます)
  10. 10. Objective-Cの基本文法を おさらい Hoge.h(ヘッダファイル) →他のオブジェクトからアクセスする変数とメソッドを宣言 @interface Hoge:NSObject  @property(nonatomic,strong) NSString * moge;  -(void)sendMessage:(NSString *)msg number:(int)number; @end13年3月17日日曜日ではHogeクラスを作るために必要な.hファイルと.mファイルの作成方法を説明します。まず、Hoge.hというファイルを作成しましょう。.hファイルでは他のオブジェクトからアクセスする変数とメソッドを宣言します。@interface Hoge:NSObject  →このクラスはHogeという名前で、NSObjectというクラスを継承しているということを示しています。@property(nonatomic,strong) NSString * moge; →mogeというNSString型のインスタンス変数を宣言しています。インスタンス変数は直接アクセスすることが出来ません。@propertyとつけることによって、 Setter/Getterをコンパイラに作ってもらいます。-(void)sendMessege:(NSString *)msg1 number:(int)number;sendMessageというメソッドを宣言しています。NSString型のmsgとint型のnumbetという2つの引数が必要であることを示しています。sendMessageを送った結果はvoidです。
  11. 11. Objective-Cの基本文法を おさらい Hoge.m →ヘッダで宣言したメソッドの中身を実装 @implemention Hoge - (void)sendMessage:(NSString *)msg number:(int)number{ NSLog(@”message is %@ and Number is %d”,msg,number); } @end13年3月17日日曜日次にHoge.mファイルの作成方法について解説します。ここでは先ほど宣言したメソッドの中身を実装します。@implemention Hogeと記載することで、Hogeクラスの実装であることを宣言できます。先ほどのヘッダファイルで宣言したメソッドの実装をここで行います。ちなみにここでは引数として渡されたものをコンソールに出力するだけのものです。
  12. 12. StoryBoardを使った画面遷移 ・StoryBoardを使うと 画面遷移を簡単に実装することが出来ます。 ∼Xcodeでの実装を見てみましょう∼13年3月17日日曜日HelloWorldについて思い出すことは出来ましたでしょうか。今回は1つの画面だけでなく、複数の画面を表示するようにしてみましょう。前回も使用したStoryBoardを使うと画面遷移を簡単に作成することが出来ます。Xcodeでの実装方法を紹介しつつ、実際に手を動かしていきましょう。
  13. 13. ViewControllerを作成する ViewControllerを 選択してドラッグ13年3月17日日曜日まず、Xcodeを起動して、新しいプロジェクトを作成しましょう。SingleViewApplicationを選択し、「Use StoryBoard」と「Auto Reference Counting」にはチェックを入れてください。新しいプロジェクトを作成したら、MainStoryboardというファイルを開いてください。このStoryBoardというファイルを編集して画面を作成していきます。今のままでは1つの画面しか表示されないので、もう一つ画面を表示するようにします。まずStotyBoardにViewControllerを追加します。windowの右側からViewControllerを選択して、真ん中のwindowにドラッグしてください。
  14. 14. ViewController同士を接続 ボタンを押すことで、画面 遷移できるようにする ここではmodalを選択してください13年3月17日日曜日ボタンを押したら画面を変更するような仕組みにしてみましょう。作成した2つのビューにボタンを配置してください。右のwindowから「Round Rect Button」を2つのビューに対してドラッグしてください。ボタンを配置したら、ボタンを選択したあと、Controlキーを押しながらもう片方の画面まで線を延ばしてください。ボタンを離すと「Action Segue」と書かれたポップアップが表示されますので、ここでは「modal」を選択してください。これで、ボタンを押したときの遷移を定義することが出来ます。もう一方のボタンに対しても同じように行いましょう。そこまで出来たら、一度ビルドして実行してみましょう。ボタンを押したら画面が変わるようになったでしょうか。
  15. 15. ViewControllerのソースコードを作成 遷移先の ViewControllerを作成13年3月17日日曜日画面が変わるだけだと面白くないので、1つ目の画面でボタンを押したら「View1」の表示/非表示を設定、もう一つの画面でボタンを押したら「View2」の文字色を変更するようにしてみましょう。まず、2つめのViewControllerに対応するソースコードを作成します。Fileメニュ-からNew→Fileを選択してください。Class名をSecondViewController、SubClassofの箇所は「UIViewController」を選択してください。Targeted for iPad および With XIB or user interfaceのチェックは外してください。
  16. 16. ViewControllerのソースコードを作成 作成したViewController を選ぶ13年3月17日日曜日StoryBoardのViewControllerとソースコードのViewControllerを接続します。MainStoryBoardを開き、作成したViewControllerを選択し、右windowにあるCustomClassという箇所から先ほど作成したSecondViewControllerを選択してください。こうすることで、StoryBoard上で表示されているものがどのクラスに該当するかを設定できます。
  17. 17. ソースコードの編集 ・ViewController.h @property (weak, nonatomic) IBOutlet UILabel *label; - (IBAction)display:(id)sender; ・ViewController.m - (IBAction)display:(id)sender { //ラベルに文字が設定されていなかったらHelloWorldを設定 if([self.label.text isEqualToString: @""]){ self.label.text = @"Hello World!"; } else{ self.label.text = @""; } }13年3月17日日曜日ここから先はソースコードの編集を行います。最初はViewController.mとViewController.hを編集し、ボタンを押したらラベルの文字表示を設定するようにしましょう。ボタンを押したらdisplayメソッドを呼ぶようにし、ラベルに文字が設定されていない場合は文字を設定し、設定されている場合は空文字列を設定するようにしましょう。
  18. 18. ソースコードの編集 ・SecondViewController.h @property (weak, nonatomic) IBOutlet UILabel *label; - (IBAction)change:(id)sender; ・SecondViewController.m - (IBAction)change:(id)sender { //フォントサイズが16よりも大きい場合は16にする if(self.label.font.pointSize > 16.0){ self.label.font = [UIFont fontWithName:@"Helvetica" size:16.0]; } else{ self.label.font = [UIFont fontWithName:@"Helvetica" size:20.0]; } }13年3月17日日曜日次にSecondViewController.mとSecondViewController.hを編集し、ボタンを押したらフォントサイズを変更するようにします。ボタンを押したらchangeメソッドが呼ばれるように設定してください。labelのfontプロパティに設定されているfontサイズをみて、16ポイントよりも大きい場合は16ポイントに設定し、それ以外の場合は20ポイントに設定してみましょう。
  19. 19. こんな感じに動いたでしょうか13年3月17日日曜日このような感じになったでしょうか。画面ごとにそれぞれ異なる動きが実装できたかと思います。
  20. 20. まとめると・・・ •Xcodeでプロジェクトを作成 •StoryBoardにViewControllerを追加 •ViewController同士を接続 •ViewControllerのソースコードを作成 •ソースコードとStoryBoardの •ViewControllerを接続する13年3月17日日曜日ここでやり方を復習します。StoryBoardにViewControllerを追加します。ViewController同士を接続して画面遷移できるようにします。ここではmodalを選んでください。ViewControllerのソースコードを作成し、処理を実装します。ソースコードとStoryBoardのViewControllerを接続すれば完成です。
  21. 21. もう少しiPhoneらしくしたい UINavgationを使うとこんな動きを作れます。13年3月17日日曜日もう少し、iPhoneらしいアプリを作りたいと感じる方もいらっしゃるかと思います。UINavigationを使うと、このようにナビゲーションを使ったアプリを作成できます。少しiPhoneらしい感じはしませんか???これからnavigtationをつかったアプリについて説明します。
  22. 22. Xcodeの設定方法 ViewControllerを選択、 Editor→Embed in→NavigationController13年3月17日日曜日もう一度先ほどと同じようにプロジェクトを作成しましょう。SingleViewControllerを選んでください。MainStoryBoardを開いて、ViewControllerを選択してください。メニューのEditorからEmbed inを選択し、NavigationControllerを選択してください。そうすると、このViewControllerはNavigationを使うということを定義することが出来ます。
  23. 23. Xcodeの設定方法 Action Segueからpushを選 択する。13年3月17日日曜日先ほどと同じようにボタンをViewControllerに配置し、配置したボタンを選択します。選択した状態でControlキーを押しながらもう一つのViewControllerにドラッグします。先ほどはmodalを選択しましたが、今度はPushを選択してください。この状態でビルドして実行してみましょう。
  24. 24. 当たり前ですが・・・。 ある画面で設定した値を他の画面で表示したい iOSアプリではMVCモデルに基づいて設計を 行う13年3月17日日曜日ここから先は少し設計的な話になります。どのアプリでもそうだと思いますが、ある画面で設定した値を他の画面で表示するなんてことをやるかと思います。Javaなどでも画面で設定したものをデータオブジェクトに保持するなんてことを行っているかと思います。Objective-Cでも同じです。iPhoneアプリの開発ではMVCモデルに基づいて開発します。
  25. 25. MVCモデルについて確認 ・Model:データおよびデータの操作 ・View:Modelのデータを画面へ表示 ・Controller:ユーザ操作の受付、モデルの操作13年3月17日日曜日釈 に説法かも知れないですが、MVCモデルについておさらいします。Modelでデータの保持およびデータの操作を行います。ViewでModelのデータを画面に表示します。Controllerでユーザの操作の受付およびモデルの操作を行います。Viewに対するControllerということでViewControllerを使っていた訳です。
  26. 26. Modelを作成してみよう ・会員(Member)というモデルを作成 ∼モデルのデータ∼ ・会員番号 memberId int型 ・会員名 memberName NSString型 このモデルを実現するオブジェクトを作成するには?13年3月17日日曜日ViewとControllerについては既に作成しているので、今度はViewで入力したデータを保持するモデルを作成しましょう。例えば会員(Member)というモデルを作成する例を考えてみます。モデルの中身は、int型の会員番号とNSString型の会員名とします。この場合、どのようにオブジェクトを作成するにはどうしたらいいでしょうか。
  27. 27. Modelを作成してみよう 必要なもの ・.hファイル(Model.h) ・.mファイル (Model.m) ・.hファイルの中身 @property(nonatomic,strong) NSString *memberName; @property(nonatomic)int memberId;13年3月17日日曜日必要なものは.hファイルと.mファイルです。メニューのFile→New→Fileを選んで新しいファイルを作成します。Objective-C Classを選択して次に進んでください。ClassにはMember、SubClassにはNSObjectを記載して保存してください。そうすると、Model.hとModel.mが作成されます。Model.hにmemberNameとmemberIdを宣言してください。@propertyをつけるとgetterとsetterが作成されるので、特にModel.mの記載はいりません。
  28. 28. このままでもいいのですが どこからでもアクセスできるシングルトンにします。 ・Model.hに以下の記載を追加 +(Member *)sharedInstance; ・Model.mに以下の記載を追加 static Member *member = nil; @implementation Member +(Member *)sharedInstance{ if (member == nil) { member = [[super alloc]init]; } return member; }13年3月17日日曜日このままでもいいのですが、どこからでもアクセスできるようにシングルトンにします。(データを外部ファイルに保存していないので)Model.hには以下のように記載してください。+(Member *)sharedInstance;+というのは、クラスメソッドであるということです。つまり、オブジェクトではなく、クラスに対してメッセージを送るということです。ここではMemberというクラスに対してsharedInstanceというメッセージを送るとMemberがたのオブジェクトが返ってきます。Model.mファイルにはsharedInstanceメソッドの実装を行います。まず、staticをつけることにより、ファイル内だけで有効となります。(ほかのオブジェクトからアクセスできないようになります)そして sharedInstanceが呼ばれたときは、nilであるかどうかチェックをして、nilだった場合のみ初期化します。
  29. 29. 今日の課題 入力したURLのWEBサイトを表示する13年3月17日日曜日
  30. 30. ご清聴ありがとうございました13年3月17日日曜日

×