[iOSアプリ開発] Eggタイマーアプリ

iPhoneで動く、「Eggタイマーアプリ」を作ってみませんか?

アプリは、3つの卵ボタン(Soft, Medium, Hard)があり、ボタンを押すとそれぞれに対応した時間のタイマーが起動し、タイマー終了時にアラームで知らせてくれます。

目次

概要

この講座で学習する内容
  • Eggタイマーアプリを作成

アプリを作成する過程で、以下の内容を学習できます。

  • 条件文(switch)の使い方
  • 辞書の使い方
  • オプショナルについて
  • カウントダウンタイマーの使い方
  • プログレスビューの使い方
  • アラームの使い方

【参考にした講座】iOS & Swift – The Complete iOS App Development Bootcamp (Udemy)
 (Section8) Intermediate Swift Programming – Control Flow and Optionals

この講座で作成するアプリの概要
  • 3つの卵ボタン(Soft,Medium,Hard)があります。
  • 卵ボタンのどれかを押すとタイマーが起動します。
  • 3つの卵ボタンは、卵の半熟度合いに応じて、それぞれ異なるタイマー時間が設定されています。
  • タイマー終了時にアラームが鳴ります。
  • 画面下部にプログレスバーを設置することにより、タイマーの進捗状況が確認できます。
アプリの開発環境
  • Xcode: Version 14.2
  • macOS: Venture: Version 13.2.1
  • iOS: 16.4.1
GitHubからプロジェクトを入手したい方はこちら
Xcodeのインストールが未了の方はこちら
GitHubからXcodeプロジェクトをクローンする方法はこちら
STEP
Xcodeプロジェクトをクローンする

GitHubにアクセスしてください。

「Code」をクリックし、赤枠で囲まれたURLをコピーします。

Xcodeを起動後、赤枠で囲まれた「Clone an existing project」をクリックします。

先ほどコピーしたURLを赤枠の中にペーストし、Cloneボタンをクリックすれば、クローン完成です。

Egg Timerアプリを作成しよう!

Mainを開くと、画面上部にタイトルラベルがあり、真ん中に卵の画像が3個あることが確認できます。

1. タイトルラベルの設定

タイトルラベルの文字数が多い場合、画面サイズが大きい場合は全ての文字が切れることなく表示できたとしても、画面サイズが小さい場合に最後の文字が切れて表示されなくなる場合が考えられます。

今、「How do you like your eggs?」と表示させたいのですが、最後の方の文字「 eggs?」が画面に収まらず切れています。

これを解決する方法を紹介します

方法1:行数を0にすることで、行数に制限をなくす方法
  • 右上にある小さいボタン①をクリック
  • Lines(行数)の数値を0にする

→これにより、スペースにおさまる限り、必要なだけ行数が作成されるようになります。

方法2:フォントサイズを自動的に小さく(指定した大きさまで)する方法
  • 右上にある小さいボタン①をクリック
  • Autoshrinkを「Minimum Font Size」に設定し、数値(最小のフォントサイズ)を入力します。

→これにより、文字が全て表示されるように、指定した数値のフォントサイズまで自動的に小さくなります。

2. UIとコードのリンク

デザインとコードをリンクさせるため、次のようなコードを書きます。

コードの内容
  • hardnessSelected」というIBActionを1つ作成します。
  • それが3つのボタン(Soft, Medium, Hard)すべてにリンクさせます。
    →それらがタッチされると、「hardnessSelectedIBActionがトリガーされるようにします
  • アプリを実行し、それぞれのボタンを押すと、押したボタンに応じて(Soft, Medium, Hard)のタイトルが表示されるようにします。

3. 押したボタン(3つ)に応じて表示を変更する

条件文を使用して、次のようなコードを書きます。

コードの内容
  • 押したボタンに応じて、コンソールに次のように出力させます。
    Softボタン → 5
    Mediumボタン → 7
    Hardボタン → 12

4. 辞書を使用して、コードの効率化をする

let softTime = 5
let mediumTime = 7
let hardTime = 12

3行を使って、定数を宣言していますが、Swift辞書を使ってコードを書き直してみます。

2つのアンラップ「!」(青マーカ)について補足します。

1つ目「sender.currentTitle!」→currentTitleがない(ボタンのタイトルがない)場合が考えられるため、オプショナルになっている。今回のアプリでは、「Soft」「Medium」「Hard」のタイトルがあるため、強制的にアンラップして問題ない。

2つ名「eggTimes[hardness]!」→hardnessの文字が辞書eggTimesのタイトルと合致しない場合が考えられるため、オプショナルになっている。今回のアプリでは、hardnessの文字は「Soft」「Medium」「Hard」のいずれかであり、辞書eggTimesのタイトルと合致しないことはないため、強制的にアンラップして問題ない。

5. カウントダウンタイマーの実装

卵のボタンを押すと、沸騰するまでの秒数が毎秒出力されるコードを記載します。

STEP
分表示(5、7、12)から秒表示(300、420、720)に修正

前回作成した辞書の値を分表示(5、7、12)から秒表示(300、420、720)に修正します。

しかし、卵のボタンを押した後、続けて別の卵のボタンを押すと、カウントダウンタイマーの秒数の減り方が倍速になるという問題が判明した。

STEP
卵のボタンを押すたびに、カウントダウンタイマーを初期化

これに対応するため、卵のボタンを押すたびに、カウントダウンタイマーが初期化されるように修正した。

STEP
終了後、スマホ画面のタイトルにDONE!が表示

次に、カウントダウン終了後、スマホ画面のタイトルにDONE!が表示されるように変更した。
(検証するために、便宜的にSoftの時間を300から3に変更しています。)

6. プログレスビューの実装

STEP
ProgressViewを格納

ProgressViewをライブラリから検索し、TimerViewの中に格納する。

STEP
ProgressViewとコードをリンク

ProgressViewに制約を追加(赤枠のConstraints)し、ViewControllerから操作するためリンクを作成します。

STEP
ProgressViewの変数の設定

ProgressViewのバーが進行割合に応じて移動するように、変数を以下のように設定する。

percentageProgress = Float(secondsPassed) / Float(totalTime)
secondsPassed: 進行に応じて、毎秒+1加算(0スタート)
totalTime: タイマーの設定値

7. アラームの実装→アプリ完成

タイマー終了後にアラームが鳴るように、コードを追加します。

アプリ完成です。

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次