前回(No.4 小遣いアプリ2-アウトレットとアクション-)作ったアウトレットとアクションのオブジェクトを使っていよいよコーディング!

ちなみに私、仕事ではC言語を使ってミドルソフトの開発をしています。JavaやC++も使ったことあるけど、オブジェクト指向の考え方っていうのが少し苦手かもしれない。今の時代珍しいかも。

iPhoneの開発に使うのは Object-C ってやつで、C言語をベースにオブジェクト指向の考え方をプラスしたもの、ということみたいなんだけど関数の呼び方からなんか独特なんでなれるのが大変かもしれない。

と、前置きが長くなりましたがはじめます。

Xcode よりコーディングするソースを選ぶ。
ここでは「WalletSampleViewController.m」を選択。このソースに処理を追加する。追加するのは下の画像の四角で囲っている部分。今までの行程で私と全く同じオブジェクトの命名や配置をしていれば、このコードをそのまま貼付けても使えます。

$かにさんのかに鍋

---------------------------------
int kodukai = [[kekka text] intValue];
int buynow = [[nedan text] intValue];
float taxrate = 0;

/* 押されたボタンから消費税率を求める */
switch ([tax selectedSegmentIndex]) {
case 0:
taxrate = 1.05;
break;
case 1:
taxrate = 1;
break;
default:
break;
}

/* 消費税を求め現在の小遣いを算出 */
kodukai = kodukai - ( buynow * taxrate );

/* 現在の小遣いを表示 */
[kekka setText:[NSString stringWithFormat:@"%d", kodukai]];
---------------------------------

コーディングの細かいことはここでは割愛するけど(ちょろちょろ追記します)、Object-C 独特なところ(というか私がわからなかった)は、メソッドの呼び出し方。前回アウトレットでつけた名前としては次のものがあるじゃないですか。
・mono → 買い物したものの名前入力欄(インプット)
・nedan → 買い物したものの金額入力欄(インプット)
・tax → 消費税率選択ボタン(消費税あり/消費税なし)
・myAction1 → 決定ボタン
・kekka → 小遣い表示(アウトプット)

これを上記のソースで使っているわけなんですけど(あ、mono は用意しておいて使ってない・・・)、メソッドの呼び出し方が変。

例えば、tax オブジェクト の selectedSegmentIndex は、tax のどちらのボタンが選択されているかが入っている。(消費税込み:0、消費税なし:1)これを参照するには・・・

JavaとかCの構造体だとこんな感じ?:tax.selectedSegmentIndex
Object-Cだと:[tax selectedSegmentIndex]

なんじゃこりゃー初めてみる。
慣れなそう・・・

なお、「/* */」で囲まれた部分はコメント。
「//」でもコメントになるけど、C言語でUNIXの場合、「//」だとコンパイルエラーになるOSがあるんで私は「/* */」を使う。Objwct-C は GCC でもコンパイルできて、LinuxでのビルドOKってことみたいなんだけど、Linux だと「//」でも大丈夫なんだっけかな?そしたらあまり気にしないでもいいかもしれない。


なんだか余談ばっかりできちんと説明していなくて申し訳ないんですが・・・ビルドして実行してしまおう!!

Xcode の左上から、iPhone 用のシュミレーターを使うか iPad 用のシュミレーターを使うか選択する。(ここでは iPhone 用シュミレーター使う)
で、「ビルドと実行」をクリック。

$かにさんのかに鍋

で、できたーー!!!

$かにさんのかに鍋

割と簡単にできたという感想です。
みなさんはどうでしょう?

これくらいの知識でも、アイディアと見た目さえしっかりしてれば売れるアプリが作れるような気がしてきた(妄想)。
売れてるアプリ、アイディアもそうだけど、見た目もきれいだよなあ。次はそこらへん勉強していこうと思います。

ではまた。
前回(No.3 小遣いアプリ1-レイアウト-)作ったView上のボタンとかを、コーディングしたときのオブジェクトとして扱えるようにする。これがアウトレット。トリガーとするボタンなんかを設定する。これがアクション。

アウトレット:View上のオブジェクトに関連を持たせるもの
アクション:Javaのアクションと一緒か。プログラムのトリガーオブジェクト

今のところこんな解釈。なんか違うかもしれないけど、今作ってるくらいのプログラムだとそんな感じ。

ではまずアウトレットを作ろう。

■アウトレットを作る
ライブラリパネルで Classes を選択。リストの中から InterfaceBuilder を起動するときにダブルクリックした XIB 物と同じ名前のやつを選ぶ。(ここでは WalletSampleViewController)さらにプルダウンからOutletsを選択。
#まとめると→「Classes -> Library -> WalletSampleViewController -> Outlets」

ここで「+」を押してアウトレットを追加する。追加するのは、View に配置した以下の5つ分で、それぞれ名前も以下のように付ける。

・買い物したものの名前入力欄(インプット):mono
・買い物したものの金額入力欄(インプット):nedan
・消費税率選択ボタン(消費税あり/消費税なし):tax
・決定ボタン:kettei
・小遣い表示(アウトプット):kekka

$かにさんのかに鍋

ここまでできたら次はアクション。

■アクションを作る
アウトレットと同じくライブラリパネルで作る。
「Classes -> Library -> WalletSampleViewController -> Actions」

同じく「+」を押してアクションを追加する。デフォルトの名前のままで「myAction1」としておく。

$かにさんのかに鍋

アクション作成はこれで終了。

■アウトレット、アクションを View上の部品と結びつける
「WalletSampleViewController.xib」Window(でいいのかな?名前)の中にある「File's Owner」を右クリック。先ほど作ったアウトレットとアクションが出てくるので、右っかわの丸いのと View 上の部品を結びつける。やり方は丸いところでドラッグして View 上の部品の上でドラッグ。

・mono → 買い物したものの名前入力欄(インプット)
・nedan → 買い物したものの金額入力欄(インプット)
・tax → 消費税率選択ボタン(消費税あり/消費税なし)
・myAction1 → 決定ボタン
・kekka → 小遣い表示(アウトプット)

$かにさんのかに鍋

これで結びつけ完了。
次はこれらアウトレットのオブジェクト使っていよいよコーディングだ。

次回「No.5 小遣いアプリ3-プログラミングする-」へ続く。

しがないサラリーマン向けの簡単なお小遣いアプリを作ってみる。

・小遣いは固定30000円
・買い物したものの名前と金額を入力させる
・消費税かけるかどうか選択させる
・決定ボタンを押して小遣い残額を表示

こんな感じでいってみよう。消費税機能なんて今日日必要ないけど練習のために入れてみた。
ちゃんと作る場合は、設定画面見たいのでお小遣いを設定させてアプリ起動の度に前回保存した値を表示するとか、買い物した物の名前とかを保存していかないと使い物にならないんだろうけど。今回は超簡易版ということで。

で、流れとしては・・・

(1)画面レイアウトを考えてインタフェースを作る
(2)アウトレット作る
(3)アクション作る
(4)プログラミングする

それでは早速。

(1)画面レイアウトを考えてインタフェースを作る
レイアウトというか、画面に必要な物は以下かな。
・買い物したものの名前入力欄(インプット)
・買い物したものの金額入力欄(インプット)
・消費税率選択ボタン(消費税あり/消費税なし)
・決定ボタン
・小遣い表示(アウトプット)

レイアウトが決まったら、Xcodeを起動して、新規プロジェクトを適当な名前で作る。で、InterfaceBuilder でインタフェースを配置していく。

新規プロジェクトの作成とInterfaceBuilderについては以下ご参考。
「No.2 Hello! World!」

使う部品については「No.2 Hello! World!」と同じくライブラリパネル「Object -> Library -> Cocoa Touch -> Inputs & Values」のもので、以下の物。

・買い物したものの名前入力欄(インプット):Text Field
・買い物したものの金額入力欄(インプット):Text Field
・消費税率選択ボタン(消費税あり/消費税なし):Segmented Control
・決定ボタン:Round Rect Buttom
・小遣い表示(アウトプット):Label

<Text Field>
ユーザーに入力を促すフィールド。
ここで配置したオブジェクトをタップするとソフトキーボードが出てきてユーザーに入力を促す。「買い物したものの金額入力欄」は数字だけを入力させたいので、Viewでオブジェクト配置後に、オブジェクトクリックして「Text Field Attributes」-「Text Input Traits」-「Keybord」に「Number Pad」を選択。

$かにさんのかに鍋

<Segmented Control>
ボタン。複数選択させるやつ。
ここでは「消費税あり/消費税なし」の2つのボタンなので、配置したままでいいけど、オブジェクトクリックして出てくる「Segmented Control Attributes」-「Segmented Control」-「Segmentes」の数を変更するとボタンの数が増える。
今回は「消費税込み」を選択したままで起動したいので設定そのままだが、ボタンが押されていない状態で起動したい場合は「Segmented Control Attributes」-「Segmented Control」の「selected」のチェックを外しておく。(下図参照)

$かにさんのかに鍋

<Round Rect Buttom>
ボタン。ダブルクリックして名前変えるくらいであとはそのまま。

<Label>
小遣いを表示。決定ボタンを押すとここが変わる。ダブルクリックして 30000 に変更しておく。

で、上記項目の上部に適当な説明を書いた「Label」を配置すると次のような画面になる。

$かにさんのかに鍋


次回「No.4 小遣いアプリ2-アウトレットとアクション-」へ続く。