iPhoneでのサンプルアプリケーション作成

この文章は、iPhone Dev Centerの日本語ドキュメントの「iPhone アプリケーション チュートリアル」の内容をベースに、私自身が後で読んでわかるように書いています。なお、Xcode 3.2.3とiOS SDKは導入済みであるとします。

新規プロジェクト作成

メニュー→[File]→[New Project…]を選択します (初回起動直後ならする必要はないでしょう)。そして、新規プロジェクトウィンドウで[Window-based Application]を選択して[Choose…]をクリック。

プロジェクト名をHelloWorldにして、[Save]をクリック。これでウィンドウベースアプリケーションの雛形が作成されます。

ルートコントローラの作成

メニュー→[File]→[Classes]を選択して、新規ファイルウィンドウで[UIViewController subclass]を選択して[with XIB for user interface]をチェックしてから、[Next]をクリック。

[File Name]をMyViewController.mにして[Finish]をクリック。

3つのファイルMyViewController.m, MyViewController.h, MyViewController.xibが作成されました。

HelloWorldAppDelegate.hの修正

次のようにHelloWorldAppDelegate.hを修正します。

  #import <UIKit/UIKit.h>
+ @class MyViewController;
  @interface HelloWorldAppDelegate : NSObject <UIApplicationDelegate> {
      UIWindow *window;
+     MyViewController *myViewController;
  }
  @property (nonatomic, retain) IBOutlet UIWindow *window;
+ @property (nonatomic, retain) MyViewController *myViewController;
  @end

ちなみに、@propertyは変数がそのクラスのプロパティ(アクセッサを持つ)であることを指定するものです。修正が終わったら、とりあえずこの時点でコンパイルしてみましょう。いくつかの警告がでますがコンパイルは成功するはずです。

HelloWorldAppDelegate.mの修正

次のように、HelloWorldAppDelegate.mを修正します。

+ #import "MyViewController.h"
  #import "HelloWorldAppDelegate.h"

  @implementation HelloWorldAppDelegate
  @synthesize window;
+ @synthesize myViewController;

  #pragma mark -
  #pragma mark Application lifecycle
  - (BOOL)application:(UIApplication *)application
        didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
+       MyViewController *aViewController = [[MyViewController alloc]
+               initWithNibName:@"MyViewController"
+               bundle:[NSBundle mainBundle]];
+       [self setMyViewController:aViewController];
+       [aViewController release];
+       UIView *controllersView = [myViewController view];
+       [window addSubview:controllersView];
        [window makeKeyAndVisible];
        return YES;
  }

      (中略)

  - (void)dealloc {
+    [myViewController release];
     [window release];
     [super dealloc];
  }

なお、@synthesizeはアクセッサメソッドを自動作成させるためのキーワードで、これがない場合には自分でmyViewControllerとsetMyViewController:を実装しなければなりません。

Interface Builder

Xcode上の[Overview]の[Resource]フォルダ内にあるMyViewController.xibをダブルクリックします。

Interface Builderが起動します。

ここで試しにMyViewController.xibウィンドウ内のViewの属性であるBackgroundを紫に変更してみましょう。変更したらメニュー→[File]→[Save]でnibファイルを保存します。

そして、Xcodeで[Build and Run]アイコンをクリックして、コンパイルしてエミュレータ上で実行してみます。背景が紫になっていることを確認したら、Interface Builderで背景を元の白色に戻しましょう。

ウィジェットの追加

Interface Builderの[Library]ウィンドウから[Round Rect Button]をドラッグして[View]ウィンドウにドロップします。

続いて[Text Field]と[Label]も同様に配置。文字などを修正するとずれるので適当に配置して構いません。

TextFieldの[PlaceHolder]を「ユーザ名」に、Labelの[Text]を空に、Buttonの[Title]を「こんにちは」にします(真ん中にLabelがありますが空なので見えない)。ここらはウィジェットをダブルクリックで直接編集することができます。

さらに、Labelの属性[Drawing]の[Clear Context Before Drawing]にチェックがあることを確認します(これがないと再描画するときに画面がグチャグチャになる)。そしてTextFieldの[Text Input Traits]において、[Captalize]をWordsに、[Return Key]をDoneに変更して、ファイルを保存します。

UIのためのコード追加

MyViewController.hに次のコードを追加します。

  @interface MyViewController : UIViewController {
+    UITextField *textField;
+    UILabel *label;
+    NSString *string;
  }

+ @property (nonatomic, retain) IBOutlet UITextField *textField;
+ @property (nonatomic, retain) IBOutlet UILabel *label;
+ @property (nonatomic, copy) NSString *string;
+ - (IBAction)changeGreeting:(id)sender;

なお、IBOutletはキーワードであり、Interface Builderでoutletとして表示させるためのものです。IBActionも同様でInterface Builderにアクションとして表示させるためのものです(実はvoidにdefineしているだけらしい)。

そして、MyViewController.mに次のコードを追加します。

  @implementation MyViewController
+ (IBAction)changeGreeting:(id)sender {
+     // 後でコードを追加していく
+ }

コネクションの作成

Interface BuilderのFile's owner(ここではMyViewControllerになる)が持っている、Interface Builder用の変数(ここでは先ほどキーワードIBOutletを付けたtextFieldとlabelと、IBActionを付けたchangeGreeting:)を、UIデザイナ上のオブジェクトと結び付けます。

MyViewController.xibウィンドウ内のFile's ownerを、controlキーを押しながらクリックして、ウィンドウFile's Ownerを表示させます。

そして、labelの右の丸をドラッグしてウィンドウViewのLabelにドラッグします。

textFieldも同様にします。

次にウィンドウViewのButtonを選択してからcontrol+クリック[Touch Up Inside]の丸をドラッグして、MyViewController.xibのFile's Ownerにドロップします。

選択可能なアクションの候補が表示されます(ここではchangeGreeting:のみ表示される)ので、これを選択します。

同様の操作で、textFieldのdelegateをFile's ownerにします。こうすることで、各種イベントがMyViewControllerに渡されて、そこで処理できるようになります。

File's ownerウィンドウが次のようになっていればよいでしょう。

この時点でコンパイルするといくつかの警告がでるがとりあえず無視してください。また、エミュレータ上で実行するとテキストフィールドなどは動作するが、入力後にキーボードを消すことができないでしょう。これについては後ほど修正します。

View Controllerの実装

まず、MyViewController.mのアクセッサメソッドの同期設定を追加して、メモリマネジメント部分を修正します。

  @implementation MyViewController
+ @synthesize textField;
+ @synthesize label;
+ @synthesize string;

  - (void)dealloc {
+     [textField release];
+     [label release];
+     [string release];
      [super dealloc];
  }

メソッドchangeGreetingl:の実装を追加します。

  - (IBAction)changeGreeting:(id)sender {
+     self.string = textField.text;
+     NSString *nameString = string;
+     if ([nameString length] == 0) {
+         nameString = @"World";
+     }
+     NSString *greeting = [[NSString alloc] initWithFormat:@"Hello, %@!", nameString];
+     label.text = greeting;
+     [greeting release];
  }

委譲用のコードを追加してキーボードが閉じるようにします。キーボードを閉じるにはtextFieldをFirstResponderでなくせばよいので、そのようにします。

+ - (BOOL)textFieldShouldReturn:(UITextField *)theTextField {
+     if (theTextField == textField) {
+          [textField resignFirstResponder];
+     }
+     return YES;
+ }

これで、シミュレータ上で実行すれば動作するはずです。

おまけ

• Interface Builder上のTextFieldの[Editing Did End]をchangeGreetingに接続すると入力直後にメッセージが変わるようになります。
• 自分でUIを追加するコードを書くときには、viewDidLoad:をオーバライドします。
• @propertyのretain, assign, copyなどの属性は代入に伴なう操作(所有権を変更するのかなど)に関する属性です
• #pragma markはXcode上を指定すると、それ以降の文字列がXcode上のFunction menuに表示されるようになります(-でセパレータ)。また、コメント中のTODO:やFIXME:もFunction Menuに表示されます。

まとめ

XcodeとInterface Builderを用いたiPhoneアプリケーション作成の手順について紹介しました。

関連項目

• safx: iOSアプリ開発記事一覧
• safx: Xcode 3.2.5にiOS 4.0 SDKを導入する方法について