【たのしいCocoa】02_Hello World!: はじめてのCocoaアプリケーション
「たのしいCocoaプログラミング[Leopard対応版]
チュートリアル: Hello World!
Cocoa バージョンの Hello World
ウィンドウにはテキストフィールドと Say Hello というボタンがあり、ボタンを押すと Hello World! とテキストフィールドに表示する。
開発の手順
- 【1】Xcode を起動する
- 【2】プロジェクトを作成する 「ファイル > 新規プロジェクト」から、Mac OS X の Application カテゴリにある Cocoa Application を選択する。
クラスの作成
- 【3】クラスを作成する 「ファイル > 新規ファイル」から、Mac OS X
カテゴリの下にある、 Object-C class を選択する。ファイル名として AppController と入力する。その下に「同時に AppController.h も作成」チェックボックスがあるので、これがオンになっていることを確認する。この2つのファイルはグループとファイルにある Classes のグループに移動しておく。
■ クラスの宣言
AppController の宣言を行う。AppController.h ファイルを開いて、インスタンス変数とメソッドを1つづつ追加する。
- 【4】クラスの宣言
1 2 3 4 5
@interface AppController : NSObject { IBOutlet id textField; } - (IBAction)sayHello:(id)sender; @end
このように、textField というインスタンス変数、sayHello: というメソッドを追加する。編集が終わったら保存する。textField の方には IBOutlet、sayHello: の方には、返り値が IBAction というものになっているのは、ここで追加したインスタンス変数をアウトレット、メソッドをアクションと呼ばれるものにしているため。アウトレットは Interface Builder で追加した部品を指し示すもの、アクションはユーザがボタンを押したときの通知を受け取るものになる。
Interface Builder でのユーザインタフェースデザイン
■ xibファイル
Interface Builder で作成した書類は、2.0までは .nib、3.0からは .xib という拡張子がつく。それぞれ nib（ニブ）ファイル、xib（ジブ）ファイルと呼ぶ。
- 【5】xib ファイルを開く プロジェクトウィンドウの「グループとファイル」で、Resource フォルダの中にある MainMenu.xib ファイルを開く。
Interface Builder のウィンドウ
■ xib ウィンドウ
xib ファイルの内容を表示するもの。Interface Builder での作業は、このウィンドウが中心になる。
■ アプリケーションのメインウィンドウ
このウィンドウの中にユーザインタフェースをデザインしていく。このウィンドウは、xib ウィンドウにある Window というファイルを開いたものになる。
■ メニューウィンドウ
アプリケーションのメニューを表示するもの。xib ウィンドウの MeinMenu を開いたものになる。
■ ライブラリ
ユーザインタフェースをデザインするための部品を提供するためのパネル。アプリケーションのメインウィンドウにドラッグすることで、ユーザインタフェースをデザインしていく。このパネルは「Tools > Library」メニューから表示できる。
■ インスペクタ
選択した項目の詳しい情報を表示するパネル。「Tools > inspector」メニューから表示できる。パレットから追加した部品のさまざまな設定を行うことができる。
■ ユーザインタフェースのデザイン
- 【6】ユーザインタフェースをデザインする メインウィンドウにユーザインタフェースの部品を並べていく。ライブラリで「Cocoa > View&Cells > Inputs&Values」を選択して、テキストフィールドをウィンドウにドラッグする。次に、「Cocoa > View&Cells > Buttons」のタブを表示して、ボタンをドラッグして追加する。ダブルクリックするとタイトルを入力できるので、Say Hello と書いておく。テキストフィールドとボタンの大きさを調整して、ウィンドウの大きさも調整しておく。
クラスのインスタンス化
次に、AppController クラスをインスタンス化する。
クラスのインスタンス化
- 【7】クラスをインスタンス化する ライブラリの「Cocoa > Object&Controllers > Controllers」を選択する。
Object という名前の青いキューブを、xib ウィンドウにドラッグして追加する。続いて、追加した Object を選択したままインスペクタを表示する。左から6番目にある Identiy のタブを選択する。ここで、先ほど追加した Object を任意のクラスに変更することができる。いま行いたいのは AppController のインスタンス化なので、このタブにある Class コンボボックスから AppController クラスを選ぶと、AppController がインスタンス化される。 ※ドラッグして追加しようとしたとき、カギのアイコンが表示されて追加できない場合がある。そのときはxib ウィンドウのツールバーの info ボタンを押して、Document Locking をNothing にしてロックを解除する。
アウトレットとアクションの接続
クラスを作成したら、次はそこからウィンドウ上のテキストフィールドに文字を入力できるようにする必要がある。さらに、ボタンを押したら、クラスに何かの通知を送るようにする。そのため使うのがアウトレットとアクション。
■ アウトレットとアクションの接続
アウトレットとアクションを、ウィンドウ上の実際のテキストフィールドやボタンと関連づけることを、アウトレットやアクションの接続と呼ぶ。
-
【8】アウトレットとアクションを接続する まず、textField を接続する。AppController のインスタンスを選択して、コンロトールキーを押しながらメインウィンドウのテキストフィールドまでドラッグする。アウトレットを表示する黒いウィンドウが開くので、textField アウトレットを選択する。次に、ウィンドウ上にあるボタンを選択して、同じようにコントロールキーを押しながら AppController のインスタンスまでドラッグする。sayHello: を選択する。
接続がきちんと行われたかを確認するには、AppController のインスタンスをコントロールキーを押しながらクリックする。
AppController の実装
Xcode で、AppController のためのソースコードを書く。ソースコードの内容は、テキストフィールドに Hello World! という文字を表示するもの。
■ アクションの実装
- 【9】AppController.m を編集する
1 2 3 4 5 6
@implementation AppController - (IBAction)sayHello:(id)sender { [textField setStringValue:@"Hello World!"]; } @end
編集が終わったら保存する。
ビルドと実行
- 【10】ビルドと実行をする 「ビルド > ビルドして進行」メニューを選択するか、ツールバーから「ビルドして進行」をクリック。
モデル・ビュー・コントローラアーキテクチャ
MVC アーキテクチャとは
MVC（モデル・ビュー・コントローラアーキテクチャ）は、アプリケーションを作るときに、どこからクラスを作っていけばいのかという疑問に答えてくれるもの。MVCアーキテクチャでは、作成するクラスを3つの種類に分類することになる。名前にあるように、モデル、ビュー、コントローラの３つ。
■ モデル
モデルは、アプリケーションのデータを表すためのクラス。たとえばワープロのようなアプリケーションの目的は文章を作ること。作った文章を保存したり印刷したりすることになる。この作った文章を担当するクラスがモデル。モデルクラスの中身はテキストということになり、仕事としては、ファイルへの保存や読み込みといったものになる。
■ ビュー
ビューはアプリケーションの概観にあたる。たとえばウィンドウ、ボタン、スライダー、スクロールバーといったもの。こういったユーザインタフェースの部品が、ビューに属するクラスになる。ビューの仕事は主に2つ。1つは、ユーザに見えるようにデータを表示すること。テキストフィールドいはテキストを表示するし、テーブルにはデータを並べる。もう1つは、ユーザからの操作を受け付けること。ユーザはマウスやキーボードを介してビューを操作する。ボタンはクリックするし、テキストビューには文字を打ち込む。
■ コントローラー
モデルとビューをつなぐもの。モデルはアプリケーションのデータ、ビューはそのデータを表示するもの。その間に位置してデータをやり取りすりものがコントローラ。モデルとビューの両方にアクセスするもの。
MVC の例
■ iTunes のモデル
iTunes が扱うデータは曲なので、これをモデルにする。曲を表すクラスとして Tracks というクラスを作り、曲のデータを管理する。たとえば、曲名、アーティスト名、アルバム名、再生時間、リリースされた年など。
■ iTunes のビュー
iTunes のユーザインタフェース。iTunes には Tracks をテーブルで表示するビューがある。また、ブラウザスタイルで表示するビューもあるし、Cover Flow で表示するビューもある。これらを実現するための部品が、ビューのクラスとなる。
■ iTunes のコントローラ
Tracks クラスと先ほどのさまざまなスタイルのビューの間に位置することになる。たとえばテーブルスタイルのビューでは、ユーザの絞り込み条件にあった曲をテーブルに配置して並べることになっている。この仕事を行うのがコントローラ。これを TableController というクラスにやらせることにする。同様に、 ブラウザスタイルの BrowserController、Cover Flow のための CoverFlowController などを作る。
MVC にもとづくアプリケーションの作り方
■ ビューは Cocoa が提供
Interface Builder のパレットにあるたくさんの部品が、Cocoa が提供するビュー。しかし、Cover Flow を実現するようなビューは Cocoa にはないので、自分でビューを作る。その場合、Cocoa のビューの流儀に則って作ることになる。
■ ビューとモデルは互いに独立
ビューはビューだけで動くようにして、モデルはモデルだけで動くようにする。ビューはある特定のアプリケーションのためにデザインされているのではなく、汎用的に利用できるようになっている。モデルも同様に、あくまでデータの形だけをみて設計する。どのビューを使ってもモデルは同じにしたい。つまり、モデルはビューから独立した形でデザインする。こうすることで、再利用性が高まる。
■ アプリケーション特有の機能を受け持つのがコントローラ
そのアプリケーション特有の機能は、コントローラに入れる。モデルである Tracks は曲情報を持っている。ビューであるテーブルビューは、データをテーブルに表示することができる。Tracks の情報をどのようにテーブルに並べるかという仕事を受け持つクラスが、コントローラである TableController ということになる。
■ モデルとコントローラのクラスを作る
アプリケーションを作るときは、モデルとコントローラのためのクラスを作る。まず、アプリケーションで扱うデータをきちっと定義する。iTunes ならが曲情報だし、テキストエディタならテキストデータということになる。それを管理するモデルクラスをデザインする。モデルが決まったら、Cocoa が提供するビューを使ってユーザインタフェースをデザインする。そして、モデルとビューをつなぐために、コントローラクラスを作る。このコントローラクラスの実装が、プログラミングの中心になる。Hello World で作ったクラスに AppCortroller という名前をつけたのは、このクラスがコントローラになるため。
アウトレットとアクション
ビューとコントローラのやり取り
モデルはアプリケーションのデータ、ビューはデータの表示、コントローラはモデルとビューの間に位置するもの。このコントローラの仕事をもう少し突っ込んででみると、2種類に分けることができる。1つはモデルからデータを取得してビューに設定するというもの。もう1つはユーザがビューを操作したときビューからの通知を受けてモデルの値を変更するというもの。この2つの対応を繰り返し行っていくことでアプリケーションが出来上がっていく。
アウトレットとアクション
■ アウトレットとは
アウトレットとはコンセントの穴という意味。あの感覚で、ビューとコントローラの間に関連を作る。
アウトレットはコントローラに付けることになる。Hello World の場合、コントローラとして AppController というクラスを作った。これがビューを接続するための穴。コントローラの仕事の1つは、ビューに値を設定すること。そのためにアウトレットを経由してビューへアクセスできるようにしている。ということは、コントローラがアクセスする必要があるビューの分だけアウトレットを作ることになる。だから新しいビューオブジェクトを追加したらアウトレットも追加すること。
アウトレットの実体はインスタンス変数。アウトレットを追加すると、コントローラのクラスにはインスタンス変数として追加される。Hello World で作ったコントローラクラスのファイル、AppController.h の
1 | { IBOutlet id textField; } |
が、アウトレットのためのインスタンス変数。
■ アクションとは
ビューの操作を受け付けるのがアクション。アウトレットがビューを参照するのに対して、アクションはビューからの通知を受け付けるもの。これで、ユーザの操作を受け取ることもできる。まず、ビューにアクションを登録する。そして、ユーザからの操作があると、登録したアクションが呼び出される。
アクションの実体はメソッド。Hello World で作ったコントローラクラスのファイル、AppController.h の
1 | - (IBAction)sayHello:(id)sender; |
が、アクションのためのメソッド。Say ボタンを押すと、IBAction が呼び出されることになる。
アウトレットとアクションの接続
■ アウトレットとアクションの追加
まず該当するクラスにアウトレットとアクションを追加する。この作業は原則として Xcode で行う。ここは、Interface Builder が 3.0 にバージョンアップしたときに大きく変更されたところ。ということで、アウトレットやアクションを追加したいときは、Xcode でクラスの編集をする。アウトレットの実体はインスタンス変数、アクションの実体はメソッド。それぞれ先頭に、IBOutlet、IBAction を書くようにする。
Xcode 側でソースコードを編集すると、自動的にその変更が Interface Builder に反映さえることになる。
■ アウトレットの接続
接続をするときは、対象となるクラスのインスタンスを作っておく必要がある。まずインスタンスを選択して、そこからコントロールキーを押しながらターゲットとなるユーザインタフェースにドロップする。小さい黒いウィンドウが現れるので、ここから接続するアウトレットを選ぶ。
接続できる対象はウィンドウ上の部品だけではなく、ウィンドウそのものや、他のインスタンス化したオブジェクトも接続できる。xib ウィンドウにあるインスタンスなら、どれでも接続できる。
■ アクションの接続
こちらの場合は、ユーザインタフェースの方からドラッグすることになる。まずアクションを送るユーザインタフェースを選択、コントロールキーを押しながらアクションを送るインスタンスにドロップ。小さい黒いウィンドウが開くので、そこからアクションを選択する。アクションはウィンドウ上のユーザインタフェースの他に、メニューからも接続できる。その場合、メニューを選択するとそのアクションが呼び出されることになる。
■ 接続の確認
接続を一覧表示したい場合には、対象となるインスタンスをコントロールキーを押しながらクリックする。この黒い半透明のウィンドウからも接続や解除ができる。
外部リンク
- »連載：目指せ！iPhoneアプリ開発エキスパート｜gihyo.jp … 技術評論社
- »iPhoneネイティブアプリ開発の必読リンク5本 | iPhone 3G Wiki blog
- »【特集】iPhoneアプリケーション開発入門 | エンタープライズ | マイコミジャーナル
- »自作アプリをApp Storeで世界に向けて販売できる!! iPhone SDKプログラミング大全
こちらの関連記事もあわせてどうぞ
- »【たのしいCocoa】01_開発環境の設定と、アプリケーションのプログラミング
- »【たのしいCocoa】08_コレクション
- »【たのしいCocoa】05_RSSリーダ
- »【たのしいCocoa】06_メモリ管理
- »【たのしいCocoa】07_文字列
- »【たのしいCocoa】04_Objective-Cの文法
- »【たのしいCocoa】03_C言語の文法
- »iPhoneアプリケーション
- »【iPhone】プロビジョニングプロファイルを削除する方法
- »【iPhone】マルチタッチディスプレイのひ・み・つ
