【超かんたん!】10秒で止める「ジャストタイムiPhoneアプリ」を開発してみよう(Part1)

Webサービス

xcode_timer

みなさんこんにちは。Yuta Fujii(@HofuCamera)です。

今回は「ジャストタイムiPhoneアプリ」を開発していきたいと思います。

Xcodeの環境構築がまだの方はこちら

前回までの続きはこちら

【Xcode】iPhoneアプリ開発に必要なこと
【超かんたん!】初心者がxcodeでドッキリiPhoneアプリを開発するまで
【Xcode】プログラムなしで、 レッドカードiPhoneアプリを開発してみよう
【Xcode】プログラムなしで、カラフルカードアプリを開発してみよう
【Xcode】お気に入りのサイト集アプリを開発してみよう
【Xcode】ノートメールアプリを開発してみよう(Part1)
【Xcode】ノートメールアプリを開発してみよう(Part2)
【超かんたん!】写真集アプリを開発してみよう

スタートでタイマーがスタートし、10秒になったときにストップボタンを押すことができると「おめでとう」と表示されるストップウォッチアプリになります。

今回は条件分岐、タイマーの使い方などを使って開発していきたいと思います!このアプリを作成できるようになると、タイマーを自由に使いこなせ、そして自由にカスタマイズすることによってさらに理解しやすくなります。

また、実際に自分でオリジナルアプリに変更していろいろな応用アプリを作れるようになるかと思いますのでさっそく作っていきましょう!

プロジェクトを作成する

今回は「justTime」としてプロジェクト名を決めてあげましょう。

プロジェクトの作成方法はこちらに記載されています。

画面を整える

画面デザインする

まずはじめに画面中央赤い部分、「Device Orientation」と書かれた箇所があるかと思います。
これはiPhoneやiPadアプリを作る際に、画面を「縦だけに対応されたアプリなのか、横だけか、それとも両方か」などを設定する箇所になります。

今回は縦のみに対応したいと思うので、下の2つのチェックを外します。

「Portrait」のみにチェックが入っている状態を確認してください。
Xcode_timer3
Xcode_timer4
Xcode_timer5
それでは次にいきましょう。画面をデザインしていきます。

左側に「Main.storyboard」という箇所があるので、そこをクリックします。これは主に画面の遷移図(どのような順番で画面を表示していくかなど)や、パーツ(ボタンやラベルなど)を直感的に置いていく、全体図を見渡せる箇所になります。

また、Main.storyboardは実際に自分でデザインしていくことができるので、デザインしていきましょう。
赤い部分をクリックすると見やすくなるのでそこをクリックします。
Xcode_timer6

次に画面のサイズをiPhone6に合わせてみたいので、画面の上部の赤い部分をクリックして、右側にあるSizeをクリックしてください。

Xcode_timer7
するとiPhone4.7-inchが選択できるようになるのでそこをクリックします。

次にボタンを画面に設置していきます。

「ストップボタン」をつくります。右側からButtonをドラッグ&ドロップして画面の上にのせます。

次にボタンをダブルクリックしてストップと命名します。

Xcode_timer8
続いて数字を反映するためのラベルも同じようにおいていきます。

サイズを画面両幅まで広げます。

Xcode_timer9

また。右側の赤い部分を「0」と変更すると「0」とラベルに反映されるので準備してください。
文字の大きさはfontと書かれたところで調整できます。

さらに、右上の赤い部分をクリックするとプログラムがみれるようになります。

次に、赤い部分をクリックします。

Xcode_timer12
それでは、画面の上にのっているパーツをプログラムに認識させていくことをしていきます。

赤い部分の中にまずは認識させます。これを宣言するといいます。これによってパーツに名前をつける
ことでプログラム上で使用できるようになります。

まずはラベルを反映していきたいと思います。

ラベルをクリックしてcontrolを押しながらプログラムの方へドラッグ&ドロップしていきます。
Xcode_timer14
Xcode_timer16
ここでは、「timeLable」と名づけました。
Xcode_timer17

続いてストップボタンを押したときの処理を記述するためにその場所をつくります。

ストップボタンをクリックしてcontrolを押しながらプログラムの方へドラッグ&ドロップしていきます。
Xcode_timer18
ここでは、「stop」と名づけました。
Xcode_timer19
同じようにスタートボタンも画面の上へのせて、プログラムに認識させます。
Xcode_timer20

タイマーとは

基本的な考え方

iPhoneではタイマーが使用できます。プログラムで使用する際は、「NSTimer」と呼ばれるものを使っていくことになります。

基本的に、

  • 1.タイマーを使うことをプログラムに認識させる
  • 2.何秒おきに動作をさせるかを記述する。
  • 3.その動作は何なのかを記述する

の3点になります。

また、タイマーは止めることが1行でできます。

タイマーをスタートさせてみよう

それでは上から順を追って見ていきましょう。

まず、ラベルに反映するための数字を入れる箱(変数)を準備します。

Xcode_timer21
次に、スタートボタンを押した時にタイマーを作動させたいので、

timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(upDateTimer) userInfo:nil repeats:YES];

を記述します。

これは定型文として準備してあります。重要なのは、 「1.0」という箇所と「upDateTimer」という箇所になります。

それぞれ、何秒おきにupDateTimerの中を呼ぶのかを決めています。また、upDateTimerという名前は自分で自由に決められるのでなんでもよいです。

upDateTimerというメソッドも作っておきます。
Xcode_timer23

タイマーの数字をラベルに表示してみよう

次に画面が表示されたらタイマーの数字が入る箱を0にしておきます。
upDateTimerの中に以下のように記述します。

timerCount = timerCount + 1;    
timeLable.text = [NSString stringWithFormat:@"%d",timerCount];

順をおって説明します。

Xcode_timer25
1.0秒おきに呼ばれる箇所で

timerCount = timerCount + 1;

をすることで、timerCountの値が1秒ごとに1ずつ増えていきます。
さらに

timeLable.text = [NSString stringWithFormat:@"%d",timerCount];

でタイマーの数字が入った箱の値を文字に変換してラベルに反映しています。
変換する処理は

 [NSString stringWithFormat:@"%d",timerCount];

でできます。

次にタイマーをとめます。

Xcode_timer26
Xcode_timer27
stopの中にかかれている

[timer invalidate];

が止めるという動作になります。
さらに、もしとめたときに、タイマーの数字が入った箱の中が10だったら「おめでとう」と表示するために

if (timerCount == 10) {
        
        timeLable.text = @"おめでとう!!";
    }

と記述しています。

次に、リセットボタンを作っていきます。画面の上にButtonのパーツをのせて名前をリセットとします。

Xcode_timer28
Xcode_timer29
プログラムとつなげたあと、リセットで行いたいことを括弧内に記述していきます。

リセットしたいときは、タイマーの数字が入った箱を0にしたいので、

timerCount = 0;

として、ラベルの文字も0に戻したいので

timeLable.text = @"0";

としていきます。
Xcode_timer31

シミュレーターで確認してみよう

それでは、左上でiPhone6のシミュレーターを立ち上げる準備をします。
Xcode_timer30

以下のようにシミュレーターが立ち上がったら成功です。

実際にご自身のiPhone(実機)で試す場合は、Appleの有償プログラムへ登録する必要があります。
この方法に関しても後日の記事で詳細に説明します。

どうですか?今回は10秒になったときにストップボタンを押すことができると、おめでとうと表示されたと思います。実際にご自身で値を変化させていろいろ試してみると応用の幅が広がります。

また、シミュレーターを止める場合は、左上の■ボタンをクリックするか「command + Q」で止まります。
Xcode_timer33
Xcode_timer34

最後に

いかがでしたか?

今回はタイマーの仕組みを見ていきました。

タイマーは色々な場面で使用できます。例えば目覚まし時計アプリを作る際などもタイマーを利用します。
次回は今回のアプリを踏まえて、結果をSNSへ投稿できるようにしていくため、【超かんたん!】10秒ジャストで止めるゲーム、ジャストタイムアプリを開発してみよう(Part2)を実践してみたいと思います。

この記事が気に入ったら
いいね!しよう

creiveの最新情報をお届けします

この記事を書いた人

yuta
知識ゼロからプロのInstagram風画像加工iPhoneアプリを作る 特別クーポン配布中! 詳しくはこちらから! エンジニアでプロデューサー ピーターティールが大好きです! Twitter:Yuta Fujii 質問はお気軽にどうぞ!