iPhoneアプリの作成 1
今回は自分のつぶやきを記録できるiPhoneアプリ「ひとりったー ローカル版」を作成します。
![](http://cz-cdn.shoeisha.jp/static/images/article/5126/01.png)
プロジェクトの作成
- Xcodeを起動し、メニューの「ファイル」→「新規プロジェクト」を選択。
- 新規プロジェクトのテンプレートを選択画面でiPhone OSの「Application」→「View-based Application」とクリックし、選択ボタンをクリック(Productは iPhoneを選択)。
- ファイル選択ダイアログが表示されるので、適当なフォルダを選択、名前欄に「Hitoritter」と入力し、保存ボタンをクリック。
- いくつかのファイルが作成されIDEが表示されます。
- 左カラムのClassesとResourcesの三角マークをクリックし、コードとリソースを表示します。
![](http://cz-cdn.shoeisha.jp/static/images/article/5126/02.png)
画面の作成
Interface Builderを使い画面を作成します。Resourcesにある「HitoritterViewController.xib」をダブルクリックすると以下のように3つのウィンドウが表示されます。
![](http://cz-cdn.shoeisha.jp/static/images/article/5126/03.png)
- 右に表示されているLibraryからViewに「TableView」「TextField」「Round Rect Button」を下図のように配置します。
- Round Rect Buttonをダブルクリックして「つぶやく」とボタン名を設定します。
- メニューの「File」→「Save」またはコマンドキー+Sを押して保存します。
![](http://cz-cdn.shoeisha.jp/static/images/article/5126/04.png)
画面と関連付け
HitoritterViewController.hの作成
Interface Builderで構築したGUIパーツをプログラムからアクセスするための変数、イベントを受け取るメソッドをHitoritterViewController.hに準備します。
#import <UIKit/UIKit.h> @interface HitoritterViewController : UIViewController <UITableViewDelegate, UITableViewDataSource> { UITextField *talkText; UITableView *talksTable; NSMutableArray *talks; } @property (nonatomic, retain) IBOutlet UITextField *talkText; @property (nonatomic, retain) IBOutlet UITableView *talksTable; @property (nonatomic, retain) NSMutableArray *talks; - (IBAction)pushOnTalk:(id)sender; @end
- talkTextはつぶやきを入力するテキストフィールドです。
- talksTableはつぶやきを表示するテーブルビューです。
- talksはつぶやきをプログラムで保存するための配列です、ちなみにNSArrayは作成後変更できない配列ですが、NSMutableArrayは変更できる配列です。
- pushOnTalk:はつぶやくボタンが押された時に実行されるメソッドです。
GUIパーツとの関連付け
HitoritterViewController.hを保存してから、HitoritterViewController.xibウィンドウでFile's Ownerを選択します。メニューの「Tools」→「Inspector」を選択すると下図のようなInspectorウィンドウが表示されます。
ここで、Inspectorウィンドウに表示されている上で定義した変数、メソッドとの関連をひも付けします。変数名等の右に表示されている○をクリックすると線が表示されるので、その先をGUIパーツに置きます。下の図では既にtextFieldは関連付け済みで、talksTableとTableViewを結び付けているところです。
![](http://cz-cdn.shoeisha.jp/static/images/article/5126/05.png)
pushOnTalk:メソッドとつぶやくボタンの関連付けは下図のようにRound Rect ButtonのTouchDownに結び付けます。
![](http://cz-cdn.shoeisha.jp/static/images/article/5126/06.png)
結果としてInspectorウィンドウに下図のように表示されていればOKです。
![](http://cz-cdn.shoeisha.jp/static/images/article/5126/07.png)
テーブルとの関連付け
テーブルにデータ設定や操作するオブジェクトの関連付けも行います。View上でテーブルを選択し、Inspectorに表示されたdataSource、delegateをFile's Ownerと関連付けます。下の画像はdataSourceの関連付けは終わり、delegateの関連付けを行っているところです。
![](http://cz-cdn.shoeisha.jp/static/images/article/5126/08.png)
結果としてInspectorウィンドウに下図のように表示されていればOKです。
![](http://cz-cdn.shoeisha.jp/static/images/article/5126/09.png)