Beginning iPhone Vol2

第2回 iPhone勉強会

13年3月17日日曜日

・第2回　画面遷移の実装方法・第3回　TableViewとデータの扱い方・第4回　ユーザ操作（タップなど）の　　　　　検出方法・第5回　MapKitを使った地図の表示方法

現在地の取得方法

今後の予定


シリーズ化に当たり、今後の予定をくんでみました。地図を表示して、現在いる場所を表示するアプリを作成することをゴールとして進めていこうと考えています。一応５回としていますが、進み具合によって変更しようと思います。

今回は画面遷移の実装方法を行います。

・前回の復習・StoryBoardを使った画面遷移・MVCモデルの説明・サンプルアプリ作成（今日は複数画面のアプリを作ります）

今日のアジェンダ


今日のスケジュールは以下の通りです。まず、前回の復習を軽く行った後、StoryBoardを使った画面遷移の実装方法を説明いたします。MVCモデルについて説明した後に、他の部品について説明をいたします。その後、今日の課題となるサンプルアプリを作成いたします。今日も出来るだけ手を動かすようにしたいと思います。よろしくおねがいいたします。

～以下を実行してみましょう～

・Xcodeでプロジェクトを作成・ボタンを押したら、HelloWorldを表示する

何のことだかさっぱりわからないという方いますか？

前回の復習


まず、前回の復習をしましょう。前回受講したという前提で、まずはコードを書いてみます。iPhone上でボタンを押したらHelloWorldを表示するプログラムを作成してください。何のことだかさっぱりわからないと言う方、こっそり教えてください・・・。

ソースコード

・ViewController.h@property (weak, nonatomic) IBOutlet UILabel *label;

　→UILabel型のインスタンス変数を定義

- (IBAction)display:(id)sender;- (IBAction)erase:(id)sender;

　→displayというメソッドとeraseというメソッドを定義


回答例のソースコードを復習がてら解説します。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には操作した部品そのものが渡されます

ソースコード・ViewController.m- (IBAction)display:(id)sender { self.label.text = @"Hello World!";}- (IBAction)erase:(id)sender { self.label.text = @"";}

→　ラベルのテキストに文字列を設定している。→　self.labelでlabelというインスタンス変数へアクセスしている


では、ViewController.mファイルの内容について解説します。ヘッダで設定したdisplayメソッドとeraseメソッドで実際に行われる処理を実装します。

displayメソッドではlabelにhelloWorldという文字列を表示するようにします。labelはインスタンス変数なので、Objective-Cでは直接アクセスすることは出来ません。self.labelと記載するとsetterからアクセスすることが出来ます。selfというのは自分自身（オブジェクト）を表します。ラベルで表示している文字列を変更するにはラベルオブジェクトのtextというインスタンス変数を変更する必要があります。self.label.textと記載することで自分自身のインスタンス変数であるlabelのインスタンス変数textに対してアクセスすることが出来る訳です。

起動時の処理シーケンス

・main.mにあるUIApplicationMainが呼ばれる　→アプリケーションデリゲートが作成される　→info.plistに記載しているStoryBoardが読み込まれる

・AppDelegate.mにあるapplication didFinishLaunchingWithOptionsというメソッドが呼ばれる　→アプリが起動してすぐに行う処理を定義する


エンジニア的にはどのような処理シーケンスなのか気になる所だと思いますので、ざっくりと説明します。詳細に説明しだすとこれだけで終わってしまうので大まかな流れだけ頭の片隅においておいてください。最初にmain.mにあるmainメソッドが呼ばれます。ここでUIApplicationMainというメソッドがよばれ、アプリの初期処理を行います。AppDelegateクラスおよびStoryBoardで設定しているクラス（ViewController）が作成されます。ここで、info.plistにあるMain storyboard file base nameの設定値を変更してみましょう。アプリは起動するでしょうか・・・・。

Objective-Cの基本文法をおさらい

Objective-Cはオブジェクトに対してメッセージを送る言語メッセージを送った結果を受け取る例：[obj msg]

受け取った結果がオブジェクトだったら・・・。そのオブジェクトにもメッセージを送れる。例：[[obj msg1] msg2];


ここでObjective-Cの基本を少しおさらいします。知っているよという方もここで復習しておきましょう。Objective-Cはあるオブジェクトに対してメッセージを送るという言語です。[obj msg];でobjという名前のオブジェクトにmsgという名前のメッセージを送ります。メッセージを送った結果を受け取ることが出来ます。結果の形式についてはobjというオブジェクトで指定しています。オブジェクトのこともありますし、void型ということもあります。メッセージを送った結果オブジェクトを受け取った場合、受け取ったオブジェクトに対してもメッセージを送ることが出来ます。


実際のコード例Hoge *hogeObj = [[Hoge alloc]init];int num = 1;

[hogeObj sendMessage:@”test” number:num];メソッド引数キーワード


実際のソースコードではこのように記載します。

Hoge型のhogeObjを作成します。[Hoge alloc]と記載するとHoge型のオブジェクトが返ってきます。返ってきたオブジェクトにinitというメッセージを送ると初期化することが出来ます。

作成したHoge型オブジェクトhogeObjに対してsendMessageというメッセージを送ります。この送るメッセージのことをJavaなどでもおなじみのメソッドと言います。メソッドには引数を指定できます。ここでは”test”という文字列とnumというint型の変数を引数として指定しています。２つ以上の引数がある場合は、キーワードを指定します。（無くても動きます）


Hoge.h(ヘッダファイル）→他のオブジェクトからアクセスする変数とメソッドを宣言

@interface Hoge:NSObject　@property(nonatomic,strong) NSString * moge;　-(void)sendMessage:(NSString *)msg number:(int)number;@end


では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という２つの引数が必要であることを示しています。sendMessageを送った結果はvoidです。


Hoge.m→ヘッダで宣言したメソッドの中身を実装

@implemention Hoge

- (void)sendMessage:(NSString *)msg number:(int)number{

NSLog(@”message is %@ and Number is %d”,msg,number);}

@end


次にHoge.mファイルの作成方法について解説します。ここでは先ほど宣言したメソッドの中身を実装します。@implemention Hogeと記載することで、Hogeクラスの実装であることを宣言できます。先ほどのヘッダファイルで宣言したメソッドの実装をここで行います。ちなみにここでは引数として渡されたものをコンソールに出力するだけのものです。

StoryBoardを使った画面遷移

・StoryBoardを使うと画面遷移を簡単に実装することが出来ます。

～Xcodeでの実装を見てみましょう～


HelloWorldについて思い出すことは出来ましたでしょうか。今回は１つの画面だけでなく、複数の画面を表示するようにしてみましょう。前回も使用したStoryBoardを使うと画面遷移を簡単に作成することが出来ます。Xcodeでの実装方法を紹介しつつ、実際に手を動かしていきましょう。

ViewControllerを選択してドラッグ

ViewControllerを作成する


まず、Xcodeを起動して、新しいプロジェクトを作成しましょう。SingleViewApplicationを選択し、「Use StoryBoard」と「Auto Reference Counting」にはチェックを入れてください。新しいプロジェクトを作成したら、MainStoryboardというファイルを開いてください。このStoryBoardというファイルを編集して画面を作成していきます。今のままでは１つの画面しか表示されないので、もう一つ画面を表示するようにします。まずStotyBoardにViewControllerを追加します。windowの右側からViewControllerを選択して、真ん中のwindowにドラッグしてください。

ViewController同士を接続

ボタンを押すことで、画面遷移できるようにするここではmodalを選択してください


ボタンを押したら画面を変更するような仕組みにしてみましょう。作成した２つのビューにボタンを配置してください。右のwindowから「Round Rect Button」を２つのビューに対してドラッグしてください。ボタンを配置したら、ボタンを選択したあと、Controlキーを押しながらもう片方の画面まで線を延ばしてください。ボタンを離すと「Action Segue」と書かれたポップアップが表示されますので、ここでは「modal」を選択してください。これで、ボタンを押したときの遷移を定義することが出来ます。もう一方のボタンに対しても同じように行いましょう。そこまで出来たら、一度ビルドして実行してみましょう。ボタンを押したら画面が変わるようになったでしょうか。

ViewControllerのソースコードを作成

遷移先のViewControllerを作成


画面が変わるだけだと面白くないので、１つ目の画面でボタンを押したら「View1」の表示／非表示を設定、もう一つの画面でボタンを押したら「View2」の文字色を変更するようにしてみましょう。まず、2つめのViewControllerに対応するソースコードを作成します。Fileメニュ-からNew→Fileを選択してください。Class名をSecondViewController、SubClassofの箇所は「UIViewController」を選択してください。Targeted for iPad および　With XIB or user interfaceのチェックは外してください。

ViewControllerのソースコードを作成

作成したViewControllerを選ぶ


StoryBoardのViewControllerとソースコードのViewControllerを接続します。MainStoryBoardを開き、作成したViewControllerを選択し、右windowにあるCustomClassという箇所から先ほど作成したSecondViewControllerを選択してください。こうすることで、StoryBoard上で表示されているものがどのクラスに該当するかを設定できます。

ソースコードの編集

・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 = @""; }}


ここから先はソースコードの編集を行います。最初はViewController.mとViewController.hを編集し、ボタンを押したらラベルの文字表示を設定するようにしましょう。ボタンを押したらdisplayメソッドを呼ぶようにし、ラベルに文字が設定されていない場合は文字を設定し、設定されている場合は空文字列を設定するようにしましょう。

ソースコードの編集

・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]; }}


次にSecondViewController.mとSecondViewController.hを編集し、ボタンを押したらフォントサイズを変更するようにします。ボタンを押したらchangeメソッドが呼ばれるように設定してください。labelのfontプロパティに設定されているfontサイズをみて、１６ポイントよりも大きい場合は１６ポイントに設定し、それ以外の場合は２０ポイントに設定してみましょう。

こんな感じに動いたでしょうか


このような感じになったでしょうか。画面ごとにそれぞれ異なる動きが実装できたかと思います。

まとめると・・・

•Xcodeでプロジェクトを作成•StoryBoardにViewControllerを追加•ViewController同士を接続•ViewControllerのソースコードを作成•ソースコードとStoryBoardの•ViewControllerを接続する


ここでやり方を復習します。StoryBoardにViewControllerを追加します。ViewController同士を接続して画面遷移できるようにします。ここではmodalを選んでください。ViewControllerのソースコードを作成し、処理を実装します。ソースコードとStoryBoardのViewControllerを接続すれば完成です。

もう少しiPhoneらしくしたい

UINavgationを使うとこんな動きを作れます。


もう少し、iPhoneらしいアプリを作りたいと感じる方もいらっしゃるかと思います。UINavigationを使うと、このようにナビゲーションを使ったアプリを作成できます。少しiPhoneらしい感じはしませんか？？？これからnavigtationをつかったアプリについて説明します。

Xcodeの設定方法

ViewControllerを選択、Editor→Embed in→NavigationController


もう一度先ほどと同じようにプロジェクトを作成しましょう。SingleViewControllerを選んでください。MainStoryBoardを開いて、ViewControllerを選択してください。メニューのEditorからEmbed inを選択し、NavigationControllerを選択してください。そうすると、このViewControllerはNavigationを使うということを定義することが出来ます。

Xcodeの設定方法

Action Segueからpushを選択する。


先ほどと同じようにボタンをViewControllerに配置し、配置したボタンを選択します。選択した状態でControlキーを押しながらもう一つのViewControllerにドラッグします。先ほどはmodalを選択しましたが、今度はPushを選択してください。この状態でビルドして実行してみましょう。

iOSアプリではMVCモデルに基づいて設計を行う

ある画面で設定した値を他の画面で表示したい

当たり前ですが・・・。


ここから先は少し設計的な話になります。どのアプリでもそうだと思いますが、ある画面で設定した値を他の画面で表示するなんてことをやるかと思います。Javaなどでも画面で設定したものをデータオブジェクトに保持するなんてことを行っているかと思います。Objective-Cでも同じです。iPhoneアプリの開発ではMVCモデルに基づいて開発します。

・Model：データおよびデータの操作

・View：Modelのデータを画面へ表示

・Controller：ユーザ操作の受付、モデルの操作

MVCモデルについて確認


釈迦に説法かも知れないですが、MVCモデルについておさらいします。Modelでデータの保持およびデータの操作を行います。ViewでModelのデータを画面に表示します。Controllerでユーザの操作の受付およびモデルの操作を行います。Viewに対するControllerということでViewControllerを使っていた訳です。

Modelを作成してみよう

・会員（Member)というモデルを作成

～モデルのデータ～・会員番号　memberId　int型・会員名 memberName　NSString型

このモデルを実現するオブジェクトを作成するには？


ViewとControllerについては既に作成しているので、今度はViewで入力したデータを保持するモデルを作成しましょう。例えば会員(Member)というモデルを作成する例を考えてみます。モデルの中身は、int型の会員番号とNSString型の会員名とします。この場合、どのようにオブジェクトを作成するにはどうしたらいいでしょうか。

Modelを作成してみよう必要なもの・.hファイル（Model.h）・.mファイル (Model.m)

・.hファイルの中身@property(nonatomic,strong) NSString *memberName;@property(nonatomic)int memberId;


必要なものは.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の記載はいりません。

このままでもいいのですがどこからでもアクセスできるシングルトンにします。

・Model.hに以下の記載を追加+(Member *)sharedInstance;

・Model.mに以下の記載を追加static Member *member = nil;

@implementation Member

+(Member *)sharedInstance{ if (member == nil) { member = [[super alloc]init]; } return member;}


このままでもいいのですが、どこからでもアクセスできるようにシングルトンにします。（データを外部ファイルに保存していないので）Model.hには以下のように記載してください。+(Member *)sharedInstance;+というのは、クラスメソッドであるということです。つまり、オブジェクトではなく、クラスに対してメッセージを送るということです。ここではMemberというクラスに対してsharedInstanceというメッセージを送るとMemberがたのオブジェクトが返ってきます。Model.mファイルにはsharedInstanceメソッドの実装を行います。まず、staticをつけることにより、ファイル内だけで有効となります。（ほかのオブジェクトからアクセスできないようになります）そして sharedInstanceが呼ばれたときは、nilであるかどうかチェックをして、nilだった場合のみ初期化します。

今日の課題

入力したURLのWEBサイトを表示する


ご清聴ありがとうございました


Documents

Beginning iPhone Vol2