iPhone/最初の一歩の変更点

追加された行はこの色です。
削除された行はこの色です。
iPhone/最初の一歩へ行く。
iPhone/最初の一歩の差分を削除
#freeze
[[FrontPage]]

2010/09/18からのアクセス回数 &counter;

#contents

iPadを買ってから、これなら自分の欲しいソフトを作ってもいいなぁと感じ、iPhone/iPadのプログラム
開発の勉強をすることにしました。

** 参考書 [#t4ae32e5]
私は昔のプログラマーなので、まずは本を読んでどのように開発するかを勉強するところから
はじめます。

今回参考にしたのは、以下の2冊です。
- iPhone and iPad in Action (Manning出版)
- iPhone SDK Development (Pragmatic出版)

*** iPhone Simulatorを使って本の例題を動かしてみる [#h2b1c594]
次に私が大切にしていることは、本の例題を自分で入力して動かしてみることです。

実際に自分が使ってみることで、
- エラーの対処
- 困ったときの情報の取得方法

など、本には書いてないことが見えてきます。

** 開発環境の設定 [#w03686e9]
iPhone/iPadの開発をするには、以下のものが必要になります。

- 最新のMac OS/X (Snow Leopard)
- iPhone SDK（「Apple Developer」への登録が必要）

私が、iPhone開発に二の足を踏んでいたのもSnow Leopardにアップグレードしないと最新のiPhone SDKを
インストールできないからでした。((仕事が一段落したので、Air Book をLeopardに残し、メインをSnow Leopardにアップグレードしました。仕事でマックを使っている人は、簡単にはOSを替えられないのです！))

** 最初の一歩 [#nadb3d41]
iPhone SDKでは、主にXcodeとInterface Builder(以下IBと省略)を使ってアプリケーションを作成します。

ここでは、入力したテキストをもう一方のラベルコピーするCopyTextという例題を作成しながら、
開発手順を説明します。

*** プロジェクトの作成 [#td996dbc]
XCodeを起動し、「ファイル」→「新規プロジェクト」を選択すると、「テンプレート選択」ダイアログが表示するので、ここではiPHone OSの下のApplicationを選択し、テンプレートとしてView-based Applicationを選択し、名称をCopyTextとします。これで以下のようなプロジェクト画面が表示されます。((どのようなファイルが作成されるか分かるようにエディタ画面を小さくしてあります))

&ref(proj_panel.png);


たったこれだけで、実際の動作するアプリケーションのひな形ができあがります。
試しに、「ビルドと実行」のボタンを押してiPhone Simulatorを実行してみると、

&ref(iPhone_simulator.png);

が表示されるはずです。

*** アプリケーション起動の仕組み [#b3c290cc]
どうしてこんなに簡単にプログラムが作成され、実行するのかその仕組みをみてみましょう。

iPhoneアプリケーションの特徴は、「delegate」プロトコルとIBを使ったGUIの定義に
あります。

プロジェクト画面でMainWindow.xibをダブルクリックするとIBが起動し、MainWIndow.xib画面に
なにやら見慣れないアイコンが並んでいます。

&ref(MainWindows_XBI.png);

各アイコンに定義された情報をもとにiPhoneは画面を
作成するのですが、その過程は以下のようになっています。((iPhone SDK Development p52から引用))

+ File's OwnerのUIApplicationに定義されているdelegate(プログラムではCopyTextAppDelegate)にDidFinshLauching:メソッドを送る
+ delegateは、viewContoller（プログラムではCopy Text ViewController）のviewをwindowのサブビューとし、windowにmakeKeyAndVisibleメソッドを送ります

&ref(delegate.png);

このようにIBを使ったプログラミングでは、viewControllerが制御のメインとなります。

** Copy Textの実装 [#c21146a5]
IBの生成するXIBファイルとプログラム内のオブジェクトの橋渡しになっているが、IBOutletとIBActionです。

- IBOutletは、オブジェクトの属性がIBによって定義されることを示し
- IBActionは、IBの定義によってメソッドが呼び出されることを示します

これから、Copy Text ViewControllerを編集しながら、IBOutletとIBActionの使い方を説明します。

*** CopyTextViewController.hの変更 [#dd03354c]
CopyTextViewControllerの属性として、
- fromText : コピー元のテキストフィールド
- toLabel : コピー先のラベル
- copyButton : コピーを指示するボタン

を定義し、@properyにIBOutletキーワードを付けて定義します。

copyボタンが押されたときのアクションとして、copyを定義します。

入力時の補完について
- 自動補完 : 例えばUILabelを入力する場合、UILまでを入力すると自動補完でUILabelが表示されるので、タブを押すと確定される
&ref(AutoCompl.png);

- 候補選択 : 例えばUITextFieldを入力する場合、UITまで入力してESCを押すと選択候補リストが表示される
&ref(selectBox.png);

#pre{{
@interface CopyTextViewController : UIViewController {
	UILabel		*toLabel;
	UITextField	*fromText;
	UIButton	*copyButton;
}

@property(nonatomic, retain) IBOutlet UILabel		*toLabel;	
@property(nonatomic, retain) IBOutlet UITextField	*fromText;
@property(nonatomic, retain) IBOutlet UIButton		*copyButton;

- (IBAction)copy;
@end

}}

@propertyで、属性へのアクセッサ（getter/setter）が自動生成されることを示します。

*** CopyTextViewController.mの変更 [#m5b416fc]
この段階では、@property宣言した属性を@synthesizeで属性へのアクセッサが生成されます。

copyアクションはコンソールへの出力を定義します。NSLogは、Cのprintfのようなものです。

#pre{{
@implementation CopyTextViewController

@synthesize	toLabel;
@synthesize	fromText;
@synthesize	copyButton;

- (IBAction)copy {
	NSLog(@"copy method invoked");
}

}}

*** CopyTextViewController.xibの変更 [#l4e27638]
プロジェクト画面でCopyTextViewController.xibをダブルクリックするとIBが起動します。
コマンド-シフト-Lでライブラリウィンドウが表示しますので、検索フィールドにfieと入力すると
一覧からTextFieldが選択されます。このTextFieldwをライブラリからviewにドラッグしたのが
以下の図です。

&ref(IB.png);

同様に
- Label
- Button

を配置します。

次にFile's Ownerを選択し、コマンド-2でconnectionタブに切り替え、先ほど定義したIBOutletのcopyButtonとcopyボタンを線で結びます。

&ref(connection.png);

同様にRecived Actionsのcopyとボタンを結び、Touch Up Insideイベントでアクションを送るように定義します。

すべて定義したときのConnectinsは以下のようになります。

&ref(FilesOwner.png);

すべてを保存し、実行メニューから「ビルドと実行」を選択すると、iPhone Simulatorが起動し、テキストフィールドを選択するとキーボードが表示されます。

&ref(keyboard.png);


copyボタンを押すとXCodeのコンソール画面には、
#pre{{
2010-09-18 18:56:06.300 CopyText[35867:207] copy method invoked
}}
と出ます。

** CopyTextの実装 [#yf5b315c]
最後の画面は、一見上手くいっているように見えますが、TextFieldをタップするとキーボードが表示され、その後どうしても消えません。

そこで、困ったときのマニュアルです。CopyTextViewController.hのUITextFieldをオプション-ダブルクリックすると以下のような説明がでます。

&ref(description.png);

この右上の本のアイコンを押すとUITextFieldのマニュアルが表示します。

Overviewを読んでいくと

&ref(man.png);

とあり、UITextFieldDelegateプロトコルが入力の振る舞いをカスタマイズするメソッドを提供することが分かります。

UITextFieldDelegateのメソッドを見ていくとリターンボタンが押されたときの動作をカスタマイズするtextFieldShouldReturnが見つかります。

マニュアルには、textFieldShouldReturnの例題が無かったので、Googleで検索すると最初に以下のような用例が見つかります。

#pre{{
// テキストフィールドにフォーカスがあたっていて，入力が完了した時にキーボードを消すには，
// UITextFieldDelegateプロトコルtextFieldShouldReturnメソッドを定義してあげればいい．
- (BOOL)textFieldShouldReturn:(UITextField *)theTextField1 {
	[textField1 resignFirstResponder];		
	return YES;
}
}}

上記のtextFieldShouldReturnを追加した後、copyを以下のように変更します。

#pre{{
- (IBAction)copy {
	NSLog(@"copy method invoked");
	toLabel.text = fromText.text;
}
}}

これで完成！と思いきや、copyボタンを押すとテキストがLabelにコピーされますが、キーボードが消えません。

そうです、textFieldのdelegateプロトコルを使っているの、textFieldのdelegateとしてFile's Ownerを結ぶ必要があったのです。

&ref(textField_delegate.png);

最終版の起動後、testと入力し、copyボタンを押した時のスナップショットです。

#ref(finish.png);

** プロジェクトのソース [#re8d095d]
今回作成したプロジェクトのソースを以下にまとめました。
- &ref(CopyText.zip);

** コメント [#m1f474a6]
この記事は、

#vote(おもしろかった[5],そうでもない[1],わかりずらい[4])

皆様のご意見、ご希望をお待ちしております。

#comment_kcaptcha
iPhone/最初の一歩 の変更点

iPhone/最初の一歩の変更点
