【Swift入門】初心者必見!タイマーアプリの作り方を丁寧に解説!~誰でも簡単に作れる~

maharu

この記事は簡単なタイマーアプリを紹介する記事です。
どんなアプリなの?

haru

maharu

ストップウォッチのようなアプリで、Start,Stop,Resetの3つのボタンがあり、タイム計測ができる仕組みです。

動作環境

Item Version
Swift 5.3
Xcode 12.5
MacOS Big Sur 11.3.1

完成イメージ

[Start][Stop][Reset]ボタンがあり、100分の1秒まで計測できるストップウォッチのような簡単なアプリです。

タイマーアプリの開発手順

プロジェクトの作成

STEP.1
プロジェクト作成

Create a new Xcode projectAppでプロジェクトを作成します。

STEP.2
プロジェクトの設定

①「Product Name」に、TimerAppと入力

②「Interface」は、Storyboardを選択

③「Language」はSwiftを選択

④全てチェックなし

⑤「Next」をクリック

STEP.3
プロジェクトの保存

①保存先のフォルダを選択

②「Create」をクリック

完了
これでプロジェクト作成が完了です。

storyboard(画面レイアウト)の編集

STEP.1
ナビゲーションバーの設定

①ボードの上のバーをクリック

(Embed In)をクリック

Navigation Controllerをクリック

ナビゲーションバーの設定が完了

STEP.2
ナビゲーションバーの色の設定

①ナビゲーションバーのTitle付近をクリック

(Show the Attributes inspector)をクリック

③Bar Tintをお好みの色に設定

④Title Colorを見やすい色に設定

STEP.3
ナビゲーションバーのタイトルの設定

①ナビゲーションバーの中央をクリック

(Show the Attributes inspector)をクリック

③のタイトルに任意の名前を入力

STEP.4
storyboardにLabelとButtonを配置する

(Library)をクリック

LabelButtonstoryboardへドラッグ&ドロップ

STEP.5
LabelのTextとFontを変更

①Labelを選択(表示は上記(STEP.4)の画像の初期状態のLabel)

(Show the Attributes inspector)をクリック

③Textを00:00:00に変更

をクリック

⑤Sizeを50に変更

⑥Doneをクリック

STEP.6
Labelのレイアウトを整える

①Labelを選択

(Align)をクリック

③2箇所 ✅ を入れる

Add 2 Constraints をクリック

STEP.7
ButtonのTitle、TextColor、Backgroundを変更

①shiftを押しながらButtonを3つ選択

(Show the Attributes inspector)をクリック

③Text Colorを見やすい色に変更

④Backgroundをお好みの色に変更

⑤TitleはButtonを1個ずつ選択し、左から[Start][Stop][Reset]に変更

STEP.8
ButtonをStackViewに入れる

①shiftを押しながらButtonを3つ選択

(Embed In)をクリック

③Stack Viewを選択

STEP.9
Buttonのレイアウトを整える

①shiftを押しながらButtonを3つ選択

(Add New Constraints)をクリック

③widthとheightを50に設定

④2箇所に ✅ が入っていることを確認

Add 6 Constraints をクリック

STEP.10
StackView内のButtonのレイアウトを整える

①StackViewを選択

(Show the Attributes inspector)をクリック

③DistributionをFill Equallyに変更

STEP.11
StackViewのレイアウトを整える

①StackViewを選択

(Align)をクリック

③1箇所 ✅ を入れる

Add 1 Constraints をクリック

STEP.12
StackViewとLabelの間隔を指定する

①StackViewを選択

(Add New Constraints)をクリック

③の数字を50に変更後、数字下の縦棒が赤になっていることを確認

Add 1 Constraints をクリック

STEP.13
Buttonのスタイルを角丸にする

①Buttonを選択

(Show the identity inspector)をクリック

③ ➕ をクリック

④Key Pathにlayer.cornerRadius と記述し、TypeはNumber、Valueは15を選択

注意
※stop、resetボタンも同様にそれぞれ上記の操作を実行する

完了
これでstoryboardの編集が完了です。

コーディング

STEP.1
LabelをstoryboardのViewControllerに接続する

①controlを押しながらLabelをクリックし、override func viewDidLoad()の上にドラッグ&ドロップ

②のNameにtimerLabelと記述

③connectをクリック

下記画像のようにLabelが接続されます

STEP.2
ButtonをstoryboardのViewControllerに接続する

①controlを押しながらButtonをクリックし、override func viewDidLoad()の下の } と一番下の } の間にドラッグ&ドロップ

②NameにstartButtonActonと記述

③connectをクリック

注意
※stop、resetボタンも同様にそれぞれstopButtonActonresetButtonActonと記述し、上記の操作を実行する

上記画像の手順を他の2つのボタンにも適用することによって、下記画像のようにLabelが接続されます

STEP.3
変数の宣言

class ViewController: UIViewControllerの下に2つの変数を宣言する

import UIKit

class ViewController: UIViewController {
    
    var startTime: TimeInterval? = nil
    var timer = Timer()
    
    @IBOutlet weak var timerLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
STEP.4
startButtonAction内のコーディング

@IBAction func startButtonAction(_ sender: Any)内に下記のコードを記述

@IBAction func startButtonAction(_ sender: Any) {
    timer.invalidate()
    self.startTime = Date.timeIntervalSinceReferenceDate
    self.timer = Timer.scheduledTimer(timeInterval: 0.01, target: self, selector: #selector(timerCounter), userInfo: nil, repeats: true)
}

上記コードのTimer.scheduledTimerには必須の関数があるので、このコードの下に下記コードを記述

@objc func timerCounter() {
    guard let startTime = self.startTime else { return }
    let time = Date.timeIntervalSinceReferenceDate - startTime
    let min = Int(time / 60)
    let sec = Int(time) % 60
    let msec = Int((time - Double(sec)) * 100.0)
    self.timerLabel.text = String(format: "%02d:%02d:%02d", min, sec, msec)
}
STEP.5
stopButtonAction内のコーディング

@IBAction func stopButtonAction(_ sender: Any)内に下記のコードを記述

@IBAction func stopButtonAction(_ sender: Any) {
    timer.invalidate()
}
STEP.6
resetButtonAction内のコーディング

@IBAction func resetButtonAction(_ sender: Any)内に下記のコードを記述

@IBAction func resetButtonAction(_ sender: Any) {
    self.startTime = nil
    self.timerLabel.text = "00:00:00"
}
STEP.7
全体のコード

下記に全体のコードを載せておきます。⌘Rで実行し、記事の前段の完成イメージと比較してみて下さい。

import UIKit

class ViewController: UIViewController {
    
    var startTime: TimeInterval? = nil
    var timer = Timer()
    
    @IBOutlet weak var timerLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func startButtonAction(_ sender: Any) {
        timer.invalidate()
        self.startTime = Date.timeIntervalSinceReferenceDate
        self.timer = Timer.scheduledTimer(timeInterval: 0.01, target: self, selector: #selector(timerCounter), userInfo: nil, repeats: true)
    }
    
    @objc func timerCounter() {
        guard let startTime = self.startTime else { return }
        let time = Date.timeIntervalSinceReferenceDate - startTime
        let min = Int(time / 60)
        let sec = Int(time) % 60
        let msec = Int((time - Double(sec)) * 100.0)
        self.timerLabel.text = String(format: "%02d:%02d:%02d", min, sec, msec)
    }
    
    @IBAction func stopButtonAction(_ sender: Any) {
        timer.invalidate()
    }
    
    @IBAction func resetButtonAction(_ sender: Any) {
        self.startTime = nil
        self.timerLabel.text = "00:00:00"
    }
    
}
完成!

まとめ

今回は簡単に作れるタイマーアプリの作り方について解説してきました。タイマーの作り方はアプリ開発に興味を持った時に、なかなか調べても参考になる良い記事を見つけられなかったので、参考にしていただけたら嬉しいです。

コードについては複数の記述方法がありますので、ご自身で調べてみるのも面白いと思います。

コメントを残す

メールアドレスが公開されることはありません。