LoginSignup
12

More than 5 years have passed since last update.

はじめてのiOS ~Counterアプリの作り方~

Last updated at Posted at 2014-09-19

今回はXcode5を使用して、カウンターアプリを作成しました。
完成系はこちら。シンプルの極みです。
iOSシミュレータのスクリーンショット 2014.09.19 15.32.13.png

今更感が否めないですが、はじめてのiOSアプリケーションなのでその手順を記していきます。笑

1.Xcode起動

スクリーンショット_2014-09-19_13_37_03.jpg
1. Single View Applicationを選択
2. Nextを選択
3. Product Name/Organization Name/Company Identiferを入力し、Nextを選択

*今回、私はProduct Nameをcounterとしました。

2. View Controllerの編集

View Controllerってなんぞや?

iOS View Controllerプログラミングガイドによると

View Controllerはアプリケーションのデータとその外観を結びつける重要な役割を果たします。
iOSアプリケーションがユーザインターフェイスを表示する際、その内容はView Controllerが単独で、またはそのグループが連携して管理します。

つまりは、アプリケーションの骨組みです。
RailsのようなMVCのフレームワークでいうControllerに相当します。

ViewController.hとViewController.mの違い

ViewController.hの.hはヘッダーを意味しています。
ヘッダーではボタン等でのアクション情報や、各プログラムに処理結果を渡したり受け取ったりと、プログラムを管理する働きをします。
対して、ViewController.mはViewController.hから渡された値を基に実際に処理を行う働きをします。

1.ViewController.hの編集

実際に書いていきましょう。
今回は、カウントを増やす/減らす/削除する機能を実装します。
コードは以下の通りです。

ViewController.h
#import <UIKit/UIKit.h>

@interface ViewController : UIViewController
{
    NSInteger total;
    IBOutlet UILabel *screen;
}

-(IBAction)increment:(id)sender; #カウントを増やす
-(IBAction)decrement:(id)sender; #カウントを減らす
-(IBAction)clear:(id)sender; #カウントをクリアにする

@end

IBActionのIBとは、Interface Builderの略で、マウスなどで直感的に機能を配置できるようにしてくれるソフト(?)のようなものだそうです。

2.ViewController.mの編集

ViewController.m
#import "ViewController.h"

@interface ViewController ()
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

-(IBAction)increment:(id)sender
{
    total++;
    [screen setText:[NSString stringWithFormat:@"Total: %d", total]];; #カウントを増やす処理
}

-(IBAction)decrement:(id)sender![スクリーンショット_2014-09-19_15_13_10.jpg](https://qiita-image-store.s3.amazonaws.com/0/39342/0265dffc-2312-3f50-d7b9-ff6a05db619c.jpeg "スクリーンショット_2014-09-19_15_13_10.jpg")

{
    total--;
    [screen setText:[NSString stringWithFormat:@"Total: %d", total]];; #カウントを減らす処理 
}

-(IBAction)clear:(id)sender
{
    total = 0;
    [screen setText:[NSString stringWithFormat:@"Total: %d", total]];;
#カウントをクリアにする処理
}

@end

total++;total--;toral = 0;は見てそのまま、totalという変数にカウントの増減の処理を行います。
[screen setText:[NSString stringWithFormat:@"Total: %d", total]];;では、totalの値を文字列で表示するという処理を行います。

3. 関連づけ

Main StoryboardでViewのパーツとViewControllerのメソッドを関連づけます。

1. パーツの配置

スクリーンショット_2014-09-19_15_13_10.jpg

2. パーツとメソッドの関連づけ

スクリーンショット_2014-09-19_15_35_13.jpg

1.関連づけたいパーツを右クリック。
2.右に表示されている黒いウィンドウのNew Referencing OutletをViewControllerにドラッグ

これで、Label - TotalViewControllerと関連づけられ、カウント数を表示できるようになりました。

Button - incrementdecrementも同じ要領です。
今回はボタンをタップした時にカウントをされるようにしたいので、Touch Downを選択し、関連づけます。
スクリーンショット_2014-09-19_15_44_00.jpg

4. ビルド

以上で完了です。最後にiOSシミュレーターでポチポチできるようにビルドしてみてください。

プログラミング経歴が浅い上にはじめてのiOSということで、何がなんだかちゃんと理解は出来てませんが、やってみて非常に良い経験になりました。次は、Xcode6 + Swiftで簡単なアプリを作ってみようと思います。

参考にしたリンク

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12