初心者からはじめるiosアプリ開発

【超入門】オブジェクティブCでカウンターアプリを作る方法

iOS、オブジェクティブCについて初歩的なことはわかってきた管理人です。
カウンターアプリを作成するのは基本的なことを学ぶには適切だと思います。

さっそく解説します。

スポンサードリンク


とりあえずXcode5を起動させましょう

とりあえずXcode5を起動させて下さい。
Xcode5を起動させると以下の画面になるはずです。

スクリーンショット 2014-01-06 2.30.10

create a new Xcode project をクリックしましょう。

click1

次にこの画面が出てきますので

スクリーンショット 2014-01-06 2.32.16

Single View Application をクリックし、Nextをクリックしましょう。

click2

次にアプリの名前を決めるんですが、とりあえずProject nameはなんでもいいです。

スクリーンショット 2014-01-06 3.17.48
Organization Name は自分の名前
Company Identiferは習慣として jp.ne.○○とドメインを逆さまにしてつけるそうです。
僕の場合は、com.app-kaihatuとつけました。

Deviceは、iPhoneにしてください。

で、Nextを押すと、こんな画面になります↓

create
Createを押してください。

Xcode5に使用する画像を取り込む

まずは、Xcode5に今回のアプリで使用する画像を取り込みましょう。
今回のアプリで使っている画像は以下です。
よかったら使って下さい。

cap

hiku

tasu

画像のようにドラッグアンドドロップして下さい

スクリーンショット 2014-07-16 14.49.43

ドラッグアンドドロップすると以下の画面が立ち上がるので、フィニッシュして下さい。

fin

念のため、Xcode上に画像が追加されていることを確認して下さい。

スクリーンショット 2014-07-16 14.54.47

取り込んだ画像のcap.pngは今回のアプリのアイコンに使用します。
画面右下の角丸でかこってある矢印をクリックして下さい。
この画面になっていなかったら、画像上部の2つの角丸がクリックされていることを確認して下さい。

kado

矢印を押すと以下画面になりますので、cap.pngをドラッグアンドドロップして下さい。

スクリーンショット 2014-07-16 14.58.19

これでアイコンの設定は完了です。

次に、画面のデザインをしていきますので、左側にあるmain.storyboardをクリックして下さい。

main

さっそく、画面をデザインしていきましょう。

今回使うオブジェクトは
Labelがひとつ
Buttonがふたつ
です。

まずはLabelをドラッグアンドドロップで配置をします。
Labelの表示はとりあえず「0」としておきましょう。
フォントサイズやインデント等は右サイドバーでいじれます。(右サイドバーの正式名称忘れた……笑)

スクリーンショット 2014-07-16 15.08.09

次はButtonの配置です。
こちらもLabelと同様にドラッグアンドドロップで配置をします。

Typeは、customとして下さい。
Title名は消して、Imageはtasu.pngです。

スクリーンショット 2014-07-16 15.09.23

マイナスボタンはImageがhiku.pngになるだけで、+ボタンのときと同じです。

スクリーンショット 2014-07-16 15.11.20

画面のデザインはこれにて終了です。

コーディング

いよいよコーディングです。

ViewController.mをクリックしましょう。

スクリーンショット 2014-07-16 15.13.21

変数、インスタンスを定義します。
場所は@implementation ViewControllerの後です。

ちなみにインスタンスとは……
まだ、上手く解説するスキル、知識は持ち合わせていません。
解説できるようになったら関連記事に追加していく予定です。

関連記事:オブジェクティブCを学ぶ初心者が絶対につまずく用語を解説できるよう努力しています

定義する変数、インスタンスは以下↓

int kazu;
NSString *kazutext;
IBOutlet UILabel *kazulabel;

スクリーンショット 2014-07-16 15.17.27

続いて、変数kazuの初期値を記述します。

kazu = 0;

スクリーンショット 2014-07-16 15.19.36

viewDidLoadは画面起動時に一度だけ呼び出されます。
なので、kazuの初期値はviewDidLoadメソッド内に記述します。

続きまして、カウント増減のメソッドを追加します。

新しいメソッドを追加する場合、「@implementation」と「@end」の間に記述します。

+ボタンを押したら実行される処理

+ボタンを押したら実行される処理を追加していきます。
コードは以下↓

– (IBAction)tasuosu:(id)sender {
kazu++;
kazutext = [NSString stringWithFormat: @”%d”, kazu];
[kazulabel setText:kazutext];
}

スクリーンショット 2014-07-16 15.23.56

−ボタンを押したら実行される処理

−ボタンを押したら実行される処理は、+とほぼ同じですが、0より小さい数字は表示されないような仕様にしています。

– (IBAction)hikuosu:(id)sender {
if (kazu > 0) {
kazu = kazu – 1;
}
kazutext = [NSString stringWithFormat: @”%d”, kazu];
[kazulabel setText:kazutext];
}

関連付け

関連付けを行います。

まずはラベルからはじめましょう。

ラベルを右クリックし、Referencing Outletsの右の○をクリックし、ViewControllerにドラッグアンドドロップ。
kazulabelを選択します。

スクリーンショット 2014-07-16 15.26.52

スクリーンショット 2014-07-16 15.27.04

次は+ボタンです。
プラスボタンを右クリックし、Touch Up Insideの右の○をクリックし、ViewControllerにドラッグアンドドロップ。

tasuosuを選択します。

スクリーンショット 2014-07-16 15.27.35

スクリーンショット 2014-07-16 15.27.58

−ボタンは基本的に同じ操作です。
マイナスボタンを右クリックし、Touch Up Insideの右の○をクリックし、ViewControllerにドラッグアンドドロップ。

hikuosuを選択します。

これで完了です。
とりあえず、ビルドしてください。

動画のように動きますか??

動けば成功です。
動かなければどこか間違っています。。


おすすめ記事 >>プログラミング中級者がTECH::CAMP(テックキャンプ)を受講した感想

スポンサードリンク
Return Top