暮らしtop»Webサービス»【超かんたん!】10秒で止める「ジャストタイムiPhoneアプリ」を開発してみよう(Part1)【超かんたん!】10秒で止める「ジャストタイムiPhoneアプリ」を開発してみよう(Part1)2016/03/14|Webサービスツイートみなさんこんにちは。Fujii(@HofuCamera)です。今回は「ジャストタイムiPhoneアプリ」を開発していきたいと思います。レッドカードiPhoneアプリを開発してみよう・【Xcode】プログラムなしで、カラフルカードアプリを開発してみよう・【Xcode】お気に入りのサイト集アプリを開発してみよう・【Xcode】ノートメールアプリを開発してみよう(Part1)・【Xcode】ノートメールアプリを開発してみよう(Part2)・【超かんたん!】写真集アプリを開発してみようスタートでタイマーがスタートし、10秒になったときにストップボタンを押すことができると「おめでとう」と表示されるストップウォッチアプリになります。今回は条件分岐、タイマーの使い方などを使って開発していきたいと思います!このアプリを作成できるようになると、タイマーを自由に使いこなせ、そして自由にカスタマイズすることによってさらに理解しやすくなります。最後にプロジェクトを作成する今回は「justTime」としてプロジェクト名を決めてあげましょう。プロジェクトの作成方法はこちらに記載されています。Orientation」と書かれた箇所があるかと思います。これはiPhoneやiPadアプリを作る際に、画面を「縦だけに対応されたアプリなのか、横だけか、それとも両方か」などを設定する箇所になります。今回は縦のみに対応したいと思うので、下の2つのチェックを外します。「Portrait」のみにチェックが入っている状態を確認してください。それでは次にいきましょう。画面をデザインしていきます。左側に「Main.storyboard」という箇所があるので、そこをクリックします。これは主に画面の遷移図(どのような順番で画面を表示していくかなど)や、パーツ(ボタンやラベルなど)を直感的に置いていく、全体図を見渡せる箇所になります。Main.storyboardは実際に自分でデザインしていくことができるので、デザインしていきましょう。赤い部分をクリックすると見やすくなるのでそこをクリックします。次に画面のサイズをiPhone6に合わせてみたいので、画面の上部の赤い部分をクリックして、右側にあるSizeをクリックしてください。するとiPhone4.7-inchが選択できるようになるのでそこをクリックします。次にボタンを画面に設置していきます。「ストップボタン」をつくります。右側からButtonをドラッグ&ドロップして画面の上にのせます。次にボタンをダブルクリックしてストップと命名します。続いて数字を反映するためのラベルも同じようにおいていきます。サイズを画面両幅まで広げます。右側の赤い部分を「0」と変更すると「0」とラベルに反映されるので準備してください。文字の大きさはfontと書かれたところで調整できます。右上の赤い部分をクリックするとプログラムがみれるようになります。次に、赤い部分をクリックします。それでは、画面の上にのっているパーツをプログラムに認識させていくことをしていきます。赤い部分の中にまずは認識させます。これを宣言するといいます。これによってパーツに名前をつけることでプログラム上で使用できるようになります。ラベルを反映していきたいと思います。ラベルをクリックしてcontrolを押しながらプログラムの方へドラッグ&ドロップしていきます。ここでは、「timeLable」と名づけました。続いてストップボタンを押したときの処理を記述するためにその場所をつくります。ストップボタンをクリックしてcontrolを押しながらプログラムの方へドラッグ&ドロップしていきます。ここでは、「stop」と名づけました。同じようにスタートボタンも画面の上へのせて、プログラムに認識させます。タイマーとは基本的な考え方iPhoneではタイマーが使用できます。プログラムで使用する際は、「NSTimer」と呼ばれるものを使っていくことになります。基本的に、1.タイマーを使うことをプログラムに認識させる2.何秒おきに動作をさせるかを記述する。3.その動作は何なのかを記述するの3点になります。タイマーは止めることが1行でできます。タイマーをスタートさせてみようそれでは上から順を追って見ていきましょう。ラベルに反映するための数字を入れる箱(変数)を準備します。repeats:YES];を記述します。これは定型文として準備してあります。「1.0」という箇所と「upDateTimer」という箇所になります。それぞれ、何秒おきにupDateTimerの中を呼ぶのかを決めています。upDateTimerという名前は自分で自由に決められるのでなんでもよいです。upDateTimerというメソッドも作っておきます。タイマーの数字をラベルに表示してみよう次に画面が表示されたらタイマーの数字が入る箱を0にしておきます。upDateTimerの中に以下のように記述します。stringWithFormat:@&quot;%d&quot;,timerCount];順をおって説明します。1;をすることで、timerCountの値が1秒ごとに1ずつ増えていきます。stringWithFormat:@&quot;%d&quot;,timerCount];でタイマーの数字が入った箱の値を文字に変換してラベルに反映しています。stringWithFormat:@&quot;%d&quot;,timerCount];でできます。次にタイマーをとめます。invalidate];が止めるという動作になります。次に、リセットボタンを作っていきます。画面の上にButtonのパーツをのせて名前をリセットとします。プログラムとつなげたあと、リセットで行いたいことを括弧内に記述していきます。@&quot;0&quot;;としていきます。シミュレーターで確認してみようそれでは、左上でiPhone6のシミュレーターを立ち上げる準備をします。以下のようにシミュレーターが立ち上がったら成功です。実際にご自身のiPhone(実機)で試す場合は、Appleの有償プログラムへ登録する必要があります。この方法に関しても後日の記事で詳細に説明します。?今回は10秒になったときにストップボタンを押すことができると、おめでとうと表示されたと思います。実際にご自身で値を変化させていろいろ試してみると応用の幅が広がります。最後にいかがでしたか?今回はタイマーの仕組みを見ていきました。タイマーは色々な場面で使用できます。目覚まし時計アプリを作る際などもタイマーを利用します。次回は今回のアプリを踏まえて、結果をSNSへ投稿できるようにしていくため、【超かんたん!】10秒ジャストで止めるゲーム、ジャストタイムアプリを開発してみよう(Part2)を実践してみたいと思います。Uscreive(クリーブ)は、クリエイターのための情報を発信しているメディアです。クリエイティブなことをするにあたり、少しでも皆様に役立つような情報をアーカイブしています。