この記事を書いた人:

【超かんたん!】嘘電話アプリを開発してみよう

iPhoneアプリ開発

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

今回は「嘘電話iPhoneアプリを開発してみよう」を開発していきたいと思います。

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

《前回までの講座》


iPhoneアプリ開発の環境を整えよう
iPhoneアプリ開発に必要なこと
プログラムなしで、 レッドカードiPhoneアプリを開発してみよう
プログラムなしで、カラフルカードアプリを開発してみよう
お気に入りのサイト集アプリを開発してみよう
ノートメールアプリを開発してみよう(Part1)
ノートメールアプリを開発してみよう(Part2)
10秒で止める「ジャストタイムiPhoneアプリ」を開発してみよう(Part1)
10秒ジャストで止めるゲーム、ジャストタイムアプリを開発してみよう(Part2)


今回は、開始ボタンでタイマーがスタートし、60秒になったときに「嘘の電話が鳴り響く」という簡単なアプリです。これができるようになると、会議を抜け出したい時、ちょっと場を離れたいときなどに使えます。

今回は2回にわけて、タイマーの使い方、音の鳴らし方などを使って開発していきたいと思います。

それではさっそく作っていきましょう!

プロジェクトを作成する

プロジェクトの作成方法はこちらに記載されています。
今回はcallMeとしてプロジェクト名を決めてあげます。

まずはじめに画面中央赤い部分、「Device Orientation」と書かれた箇所があるかと思います。

これはiPhoneやiPadアプリを作る際に、画面を「縦だけに対応されたアプリなのか、横だけか、それとも両方か」などを設定する箇所になります。

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

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

左側に「Main.storyboard」という箇所があるので、そこをクリックします。

これは主に画面の遷移図(どのような順番で画面を表示していくかなど)や、パーツ(ボタンやラベルなど)を直感的に置いていく、全体図を見渡せる箇所になります。

また、Main.storyboardは実際に自分でデザインしていくことができるので、デザインしていきましょう!
xcode_call7
それではボタンをのせてください。
xcode_call9
xcode_call10
プログラムをみていきましょう。

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

まず、開始ボタンを押したときの処理をする場所を作っていきます。開始ボタンをクリックして、controlを押しながらプログラムの方へドラッグ&ドロップします。

ここでは「start」と命名します。
xcode_call12
xcode_call13

NSTimerについて

次に、タイマーを使えるように宣言します。
下記のように、


NSTimer *timer;

と記述してください。
これでタイマーが使えるようになりました。
まずは全体像をのせます。
xcode_call15
さらに、startボタンを押したときにタイマーを作動させたいので、


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


と記述します。

タイマーの仕組み

これもタイマーを作動させる際のテンプレートになっています。

重要なのは、「1.0」という箇所と、「call」と書かれた場所になります。日本語に訳すと、「1.0秒おきにcallというメソッドを呼んでください」という意味になります。

しかし、callというメソッドがありません。なので、作っていきます。

-(void)call{

}

上記のように作成してください。
ここで行いたいことは、callというメソッドが1秒ごとに呼ばれて、もし60秒になったら
電話の画面を表示するということです。
つまり、1秒おきに1ずつ増えていく数字が入る箱を準備して、その箱の中の値が60に達したらというところまでつくっていきます。

条件分岐と一緒につかう

まずは下記のように箱を準備します。


int timerCount;

xcode_call16
それから、startボタンが押されたときにtimerCountの中に0を入れておきます。
xcode_call17
次に、1秒ごとに呼ばれる際にtimerCountの値を1ずつ増やします。
xcode_call18
そして、もし箱の中身が60に達したらという条件文を記述します。
xcode_call19
さらに、60に達したら電話のダミー画面を出すということをします。
画面の上にUIImageViewをおきます。
xcode_call20
この上に、電話がかかってきたときに表示される画像を設定します。

左側のプロジェクトファイル欄に画像をドラッグ&ドロップいれて、右側のImageという箇所にその画像の名前を打ち込みます。

すると、下記のように表示されます。
xcode_call21
そして、このImageViewは画面がはじめに表示されたときは、隠しておいて、
60秒に達したときに表示するということをしなければなりません。
つまりプログラムでImageViewを使うためまずはプログラムへ読み込みます。
画面上のImageViewをクリックして、controlを押しながらドラッグ&ドロップをします。
xcode_call22
xcode_call23
ここでは、callImageViewと名づけました。

行いたいことを整理する

viewDidLoad内でこのcallImageViewを隠します。


callImageView.hidden = YES;

xcode_call24
次に60に達したら表示します。


callImageView.hidden = NO;

xcode_call25
さらに、タイマーを止めるため左端に隠しボタンを準備します。
ボタンを画面へ設置して、このように名前をなにも命名せずに
おきます。
xcode_call26
xcode_call27
xcode_call28
そして、このボタンを押したときにタイマーを止めたいので、ボタンを選択したあと、controlを押しながらドラッグ&ドロップをして、stopと名づけます。
xcode_call29
xcode_call30
その中では、タイマーをとめて、


[timer invalidate];

xcode_call31
箱の中身を0にして


timerCount = 0;

xcode_call32
電話画面が表示されているImageViewを隠す


callImageView.hidden = YES;

ことを行います。

これで完成です!

xcode_call33

最後に

いかがでしたか?

今回はタイマーの仕組み、タイマーとメソッドの使い方などを見ていきました。

タイマーが使えるようになると、いろいろなメソッドをタイマーで動かすことができたり、アニメーションなんかに使えたりします。次回もお楽しみに!

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

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

この記事を書いた人

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