開発基礎トレ2:アウトレットとアクションの使い方

サルでき.jp > 11.サルにもできるiPhoneアプリの作り方(旧アメブロ記事) > 開発基礎トレ2:アウトレットとアクションの使い方

2009/08/17 09:00 投稿先 11.サルにもできるiPhoneアプリの作り方(旧アメブロ記事) 投稿者 カワサキ タカシ

て、開発基礎トレシリーズ、第2弾はアウトレットとアクションの使い方です。

前回はライブラリから部品をポイポイと置いてみましたね。
開発基礎トレ1:ライブラリで見た目を作ろう!

置いただけなのに、iPhone Simulatorで触ってみると、
ボタンが押せたり、Date Pickerはくるくる回せたりします。

おおお。

でも残念ながらこれは自分でコントロールしているわけではなく、
部品が最初から持っている機能だったりします。

部品を自由自在にコントロールしようじゃないの、
ってときに使うのが「アウトレット」「アクション」です。

習うより慣れろ。
さっそく作ってみましょう。

何を作りましょうか。
なるべく簡単で見栄えがいいのが良いですね。

うーん。

そうそう、
私、今東京マラソンの抽選にエントリー中です。
当たったら走らないといけません。

この弱り切った引きこもりボディをマラソンに耐えられる身体にするためには、
当日までのコンディション調整が必要です。

ということで
(東京マラソンまで)「あと何日?カウンター」を作りましょう!

今回も使うテンプレートは「View-based Application」です。
適当な名前を付けてプロジェクトを新規保存して下さい。
私は「test1」という名前で保存しました。
開発基礎トレ2:アウトレットとアクションの使い方

Xcodeが立ち上がりましたね。
グループとファイルの中から、「test1ViewController.xib」という見た目ファイルを開いてみましょう。
開発基礎トレ2:アウトレットとアクションの使い方

Interface Builderが立ち上がって、
空っぽのViewが見えていると思います。

そこに、前回と同じ要領で「Date Picker」を置いてみましょう。
開発基礎トレ2:アウトレットとアクションの使い方

次に、「Label」を1つ。タイトルを「あと何日?」に。
開発基礎トレ2:アウトレットとアクションの使い方

次に、「Label」をもう1つ。タイトルを「12345」に。これは結果表示で使います。
開発基礎トレ2:アウトレットとアクションの使い方

ちょっとViewの背景色を変えてみましょうか。

色は自分で選ぶのが基本なのですが、
「この色と同じ色にしたい」と思うこともあると思います。

そんなときには「カラーピッカー」を使ってみましょう。
開発基礎トレ2:アウトレットとアクションの使い方

ここまでは前回と同じです。

今回は「アウトレット」と「アクション」という、2つの配線についてお話しします。

今、「Date Picker」「Label」×2の、3つの部品をViewの上に置きました。
(東京マラソンまで)「あと何日?カウンター」ってどんなことができればいいですかね?
書き出してみましょう。

・日付をくるくる回す
・止めた日付で、あと何日?の数字を計算して表示する

おっと。計算してますね。
「今日」と「対象となる日付」の引き算です。
こういう計算は、見た目ではなく、プログラムの担当になります。

まとめるとこんな感じの機能が必要、ということになります。

「Date Picker」が今何日を指しているか、プログラムに教える
プログラムが計算する
プログラムが計算した結果を、「Label」に返す

部品 ⇄ プログラム
のあいだに「往復の配線」が要りそうですね。

この「往復の配線」こそが、「アウトレット」と「アクション」です。

アウトレットは【プログラム】→【部品】へ情報を伝える配線
アクションは、【部品】→【プログラム】へ情報を伝える配線
です。

アウトレットの使い方

アウトレットを使う場合は、まず
「test1ViewController.h」、つまり「ビューコントローラーのヘッダーファイル」に、
アウトレットを使いますよ、という宣言プログラムを書くことから始めます。
開発基礎トレ2:アウトレットとアクションの使い方

ここではこんな2文を書いています。
IBOutlet UIDatePicker *datePicker;
IBOutlet UILabel *resultLabel;

Objective-Cというプログラム言語での記述になります。
まあ難しい説明はとりあえず置いておいて、ここで言っているのは、

IBOutlet : アウトレットですよ~
UIDatePicker : デイトピッカーですよ~
*datePicker : 「datePicker」って名前を付けますよ~(*を前に付けるのはお作法)

ってだけです。
名前をつけるのが目的、くらいに考えておきましょう。

で、ここで定義すると、

※2010.10.16 追記
定義について。
ここでいう定義とは「.hファイルにコードを書いて、保存する」ということを指しています。
保存をしないとXcodeが認識しませんので、忘れずに保存してくださいね!
(サル未満さんよりご指摘いただきました)

Interface Builderの説明でさらっと飛ばした、Xibウィンドウの「File’s Owner」に
「Outlet」という項目が追加されます。

Xibウィンドウの「File’s Owner」を選択した状態で、
メニューバーの「Tools」>「Connection Inspector」をクリック。
開発基礎トレ2:アウトレットとアクションの使い方
<クリックで拡大>

ここまできたら後は簡単。
「Outlet」の中にある「datePicker」の+ボタンをクリック&ドラッグ。
ぐいーっと伸ばして、ビュー編集ウィンドウの「Picker」に貼付けましょう。

ビューコントローラーのヘッダーファイルに、アウトレットを宣言
コネクションインスペクタから、アウトレットを部品につなぐ

これで、アウトレットが設定できました。
プログラムの中で何かを計算した結果を、部品に伝達することができるようになったわけです。

※2009.10.6 追記
datePickerをつないで満足しておりました。
ラベル「12345」とアウトレット「resultLabel」もスッとつないでおいてください。スッと。
(whaisonさんよりご指摘いただきました)

アクションの使い方

アクションを使う時も、手順はアウトレットと同じです。

「test1ViewController.h」、つまり「ビューコントローラーのヘッダーファイル」に、
アクションを使いますよ、という宣言プログラムを書くことから始めます。
開発基礎トレ2:アウトレットとアクションの使い方

ここではこんな1文を書いています。
-(IBAction)calc;

calcって名前のアクションを使いますよ~。
って書いてます。

calcって何?
という説明の前に、アウトレットの時のようにつないじゃいましょう。

開発基礎トレ2:アウトレットとアクションの使い方
<クリックで拡大>

アクションもアウトレット同様、クリック&ドラッグでつなぐことができるのですが、
アクションの場合は、つなぐ時にトリガーを選択することができるようになっています。

…トリガー?

きっかけ、のことです。

例えば今回の場合、「Value Changed」というトリガーを設定しました。
これは、Date Pickerの「Value」、すなわち「日付」が、iPhoneを操作している田中君によって変更されたときに、つながってるアクションを実行しろ、ということを意味しています。

さて
ではさっきスルーした、「calc」についてお話しします。

calcはメソッドです。

終了。

…しません。

メソッドは「ひとまとまりの機能」だと思って下さい。

部品からアクションでプログラムに情報が伝達されると言いましたが、
情報が伝達された段階で動く機能が、メソッドです。

今回の「あと何日?カウンター」では、Date Pickerが止まった瞬間に、
つながっているアクションが「オレ!?呼ばれた!?」と目を覚まし、「calc」という機能を実行するのです。

ちなみに今回書いたメソッド「calc」はこんな感じ。
こっちは「test1ViewController.m」、
つまり「ビューコントローラーのソースコードファイル」に書きます。
開発基礎トレ2:アウトレットとアクションの使い方
<クリックで拡大>

まさにプログラムそのまんまです。
中身は気にしないで下さい。今日はその前のお話ですので。


※2010.8.16追記
みなさんココで書き写し間違をして、
くるっと回すとシャットダウンしてしまうパターンが頻発しているようです。
ということで、テキスト版を追記しておきますね。

-(IBAction)calc{
NSDate *targetDate = datePicker.date;
NSDate *today = [NSDate date];
NSCalendar *gregorian = [[NSCalendar alloc]initWithCalendarIdentifier:NSGregorianCalendar];

NSUInteger unitFlags;
unitFlags = NSDayCalendarUnit;

NSDateComponents *components = [gregorian components:unitFlags fromDate:today toDate:targetDate options:0];
NSInteger days;
days = [components day];

resultLabel.text = [NSString stringWithFormat:@"%d", days];

[gregorian release];
}


まとめてみましょう。

ビューコントローラーのヘッダーファイルに、アクションを宣言
コネクションインスペクタから、アクションを部品につなぐ
Xcodeのエディタで、メソッドを書く

これで、アクションが設定できました。

試しに動かしてみましょうか。へーんしん。

開発基礎トレ2:アウトレットとアクションの使い方

初期画面はこんな感じです。

くるくるっと来年の東京マラソンの開催日「2010年2月28日」を設定してみましょう。

開発基礎トレ2:アウトレットとアクションの使い方

できました。

あと194日

…涼しくなってから走るか。

さて、
今回は「アウトレット」と「アクション」についてざっとお話をしてきました。

ざっとのくせにすげぇ長く、難解な言葉がいくつも出てきましたね~…。

ですが、これはどのプログラムにもあるクセみたいなものだったりします。
決まったお作法があって、そのお作法が面倒に見えているだけなんです。

きっと今後もたびたび登場することになると思いますので、
今はよくわからなくても気楽にどんどんつないでみましょう!

関連する記事:


Advertisement