FrontPage

2010/09/18からのアクセス回数 4251

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

参考書

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

今回参考にしたのは、以下の2冊です。

  • iPhone and iPad in Action (Manning出版)
  • iPhone SDK Development (Pragmatic出版)

iPhone Simulatorを使って本の例題を動かしてみる

次に私が大切にしていることは、本の例題を自分で入力して動かしてみることです。

実際に自分が使ってみることで、

  • エラーの対処
  • 困ったときの情報の取得方法

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

開発環境の設定

iPhone/iPadの開発をするには、以下のものが必要になります。

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

私が、iPhone開発に二の足を踏んでいたのもSnow Leopardにアップグレードしないと最新のiPhone SDKを インストールできないからでした。*1

最初の一歩

iPhone SDKでは、主にXcodeとInterface Builder(以下IBと省略)を使ってアプリケーションを作成します。

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

プロジェクトの作成

XCodeを起動し、「ファイル」→「新規プロジェクト」を選択すると、「テンプレート選択」ダイアログが表示するので、ここではiPHone OSの下のApplicationを選択し、テンプレートとしてView-based Applicationを選択し、名称をCopyTextとします。これで以下のようなプロジェクト画面が表示されます。*2

proj_panel.png

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

iPhone_simulator.png

が表示されるはずです。

アプリケーション起動の仕組み

どうしてこんなに簡単にプログラムが作成され、実行するのかその仕組みをみてみましょう。

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

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

MainWindows_XBI.png

各アイコンに定義された情報をもとにiPhoneは画面を 作成するのですが、その過程は以下のようになっています。*3

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

delegate.png

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

Copy Textの実装

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

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

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

CopyTextViewController.hの変更

CopyTextViewControllerの属性として、

  • fromText : コピー元のテキストフィールド
  • toLabel : コピー先のラベル
  • copyButton : コピーを指示するボタン

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

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

入力時の補完について

  • 自動補完 : 例えばUILabelを入力する場合、UILまでを入力すると自動補完でUILabelが表示されるので、タブを押すと確定される AutoCompl.png
  • 候補選択 : 例えばUITextFieldを入力する場合、UITまで入力してESCを押すと選択候補リストが表示される selectBox.png
@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の変更

この段階では、@property宣言した属性を@synthesizeで属性へのアクセッサが生成されます。

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

@implementation CopyTextViewController

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

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

CopyTextViewController.xibの変更

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

IB.png

同様に

  • Label
  • Button

を配置します。

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

connection.png

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

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

FilesOwner.png

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

keyboard.png

copyボタンを押すとXCodeのコンソール画面には、

2010-09-18 18:56:06.300 CopyText[35867:207] copy method invoked

と出ます。

CopyTextの実装

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

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

&ref(): File not found: "description.png" at page "iPhone/最初の一歩";

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

Overviewを読んでいくと

man.png

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

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

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

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

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

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

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

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

textField_delegate.png

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

finish.png

プロジェクトのソース

今回作成したプロジェクトのソースを以下にまとめました。

コメント

この記事は、

選択肢 投票
おもしろかった 5  
そうでもない 1  
わかりずらい 4  

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


(Input image string)


*1 仕事が一段落したので、Air Book をLeopardに残し、メインをSnow Leopardにアップグレードしました。仕事でマックを使っている人は、簡単にはOSを替えられないのです!
*2 どのようなファイルが作成されるか分かるようにエディタ画面を小さくしてあります
*3 iPhone SDK Development p52から引用

添付ファイル: fileCopyText.zip 354件 [詳細] fileman.png 459件 [詳細] filefinish.png 462件 [詳細] filetextField_delegate.png 475件 [詳細] filekeyboard.png 463件 [詳細] fileFilesOwner.png 477件 [詳細] fileconnection.png 504件 [詳細] fileIB.png 453件 [詳細] fileselectBox.png 508件 [詳細] fileAutoCompl.png 534件 [詳細] filedelegate.png 475件 [詳細] fileiPhone_simulator.png 512件 [詳細] fileMainWindows_XBI.png 456件 [詳細] fileproj_panel.png 476件 [詳細]

トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2015-03-20 (金) 06:55:22 (828d)
SmartDoc