iOSアプリ開発 デジタル時計を作ってみよう 初心者向け

xcode5の環境でデジタル時計を表示する方法をひと通り解説します。
開発を始めたばかりの人がまず挑戦しやすいのが時計アプリかなということで
かなり初心者向けの解説です。

ではまずxcodeを立ち上げ、新しいプロジェクトを作成します。
スクリーンショット 2014-07-04 8.12.07

どのテンプレートを使いますか?と聞かれるので、
ここでは「Single View Application」を選択して「Next」をクリックします。

 

Product Name
この画面ではプロジェクトの名前を指定します。

「Product Name」test_project

「Organization Name」自分の名前

「Company Identifier」メールアドレスやホームページのURLなどを逆さまにしたもの。
例えば「xxxxx@gmail.com」なら「com.gmail@xxxxx」と入力するのが慣例。

「Class Prefix」これは空欄のままでOK。

「Devices」ここではiPhoneを選択します。

全て入力できたら「Next」をクリック

 

Projectの保存
プロジェクトの保存場所を聞かれるので、デスクトップなど適当な場所にフォルダを作成し、保存します。
「Create」ってボタンをクリックすると、
はいこれでプロジェクトのできあがり!

もうこれだけでもエミュレータを起動してみたりも出来るんですが、
なにも作っていないのでもちろん何も表示されません。

じゃあ早速作っていきましょう。

new Project
新しくプロジェクトを作成するとまずこのような画面が表示されていると思います。

 

この画面の左側

スクリーンショット 2014-07-04 8.44.45
「Main.StoryBoard」をクリック。

 

 

スクリーンショット 2014-07-04 8.52.47
するとこんな画面が出現。
これがアプリを実行した時のiPhoneの画面になります。
ここにいろいろな部品を追加していってアプリを作成していきます。

今回は時計を表示するだけなので「Label」という部品を使います。

スクリーンショット 2014-07-04 8.42.04
xcodeの画面の右下の方にこんな画面があると思うので、ここから「Label」という部品を探します。
ちなみに「Label」というのは文字を表示する部品です。
下の方に検索ボックスがあるのでスクロールして探すのなんかめんどくせえよ!なんて人はここに直接「Label」って打ち込めば簡単に探すことが出来ます。

見つかったら「Label」を選択して中央のiPhoneの画面にドラッグアンドドロップ!

スクリーンショット 2014-07-04 9.01.23
するとこんな感じに部品が配置されます。
「Label」の幅を適度に広げておいてください。

次にxcodeの右上
スクリーンショット 2014-07-04 9.25.55
矢印の先のボタンを押してアシスタントエディタを開きます。

スクリーンショット 2014-07-04 9.43.21
するとこんな画面が開く。

 

iPhone上に配置した「Label」を選択してキーボードのcontrolキーを押しながら上の画像の

@interface ViewController ()

@end

の間に持っていくと、

スクリーンショット 2014-07-04 9.45.13
こんな「Label」の名前を決めてくださいと言われるので

「Name」のところに「label」と入力する。
他の項目はデフォルトでOK。

スクリーンショット 2014-07-04 9.57.12
Connectボタンを押すと、自動でコードがこのように挿入される。
これでiPhoneに配置した「Label」をコード側で扱えるようになりました。

 

次はViewController.mファイルを編集します。
スクリーンショット 2014-07-04 10.23.20
左側に表示されているファイルツリーからViewController.mを選択。

スクリーンショット 2014-07-04 10.25.45
するとこんなかんじに画面の真ん中にソースコードが表示されます。
これがViewController.mの中身ですが、これを今から編集していきます。

まず11行目からのコードをこのように編集します。

@interface ViewController() {

NSTimer *timer;

}

グローバル変数を宣言しています。

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    timer = [NSTimer scheduledTimerWithTimeInterval:(1.0)
                                             target:self
                                             selector:@selector(onTimer:)
                                             userInfo:nil
                                             repeats:YES];
    
}

既に定義してあるViewDidLoadメソッドにtimerを追加します。

-(void)onTimer:(NSTimer*)timer {
    NSDate* now = [NSDate date];//現在時刻取得
    
    NSCalendar *calendar = [NSCalendar currentCalendar];
    
    NSDateComponents *dateCamponents = [calendar components:NSYearCalendarUnit |
                                   NSMonthCalendarUnit  |
                                   NSDayCalendarUnit    |
                                   NSHourCalendarUnit   |
                                   NSMinuteCalendarUnit |
                                   NSSecondCalendarUnit
                                              fromDate:now];
    
    self.tokei.text = [NSString stringWithFormat:@"%d年 %02d月 %02d日 %02d時 %02d分 %02d秒",
                     dateCamponents.year,
                     dateCamponents.month,
                     dateCamponents.day,
                     dateCamponents.hour,
                     dateCamponents.minute,
                     dateCamponents.second];
    
}

現在時間を表示し、表示するメソッドのonTimerを定義します。

…これで一応完成です。
エミュレータを起動すると動きます!
やったね!

スクリーンショット 2014-07-04 12.12.53

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

こんなかんじに表示されれば完成です。
時計が表示されました。

一応、ViewController.mの完成形を載せておきます。
確認してみてください。

ViewController.m

#import "ViewController.h"

@interface ViewController() {

    NSTimer *timer;
    
}

@property (weak, nonatomic) IBOutlet UILabel *label;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    timer = [NSTimer scheduledTimerWithTimeInterval:(1.0)
                                             target:self
                                             selector:@selector(onTimer:)
                                             userInfo:nil
                                             repeats:YES];
    
}


-(void)onTimer:(NSTimer*)timer {
    NSDate* now = [NSDate date];//現在時刻取得
    
    NSCalendar *calendar = [NSCalendar currentCalendar];
    
    NSDateComponents *dateCamponents = [calendar components:NSYearCalendarUnit |
                                   NSMonthCalendarUnit  |
                                   NSDayCalendarUnit    |
                                   NSHourCalendarUnit   |
                                   NSMinuteCalendarUnit |
                                   NSSecondCalendarUnit
                                              fromDate:now];
    
    self.label.text = [NSString stringWithFormat:@"%d年 %02d月 %02d日 %02d時 %02d分 %02d秒",
                     dateCamponents.year,
                     dateCamponents.month,
                     dateCamponents.day,
                     dateCamponents.hour,
                     dateCamponents.minute,
                     dateCamponents.second];
    
}




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

@end