【Swift/Xcode超入門】BMIを計算するアプリを作ってみよう!

サトリク

この講座では、BMIを計算するアプリを作ってみます!

 

動作環境

item Version
Swift 5.2.4
Xcode 11.5

バージョンの確認方法

この講座の完成イメージ

身長と体重を入力して計算ボタンを押すと、痩せ型か肥満かを判断するBMIを計算で割り出すという簡単なアプリを作成します。

ボディマス指数(ボディマスしすう)とは、体重と身長の関係から算出される、ヒトの肥満度を表す体格指数である。

引用元:Wikipedia – (ボディマス指数)

アプリ開発手順

プロジェクトを作成

STEP.1
Xcodeを起動

下のDockからXcodeを起動しましょう。

もし、Xcodeを開いている方は、command + shift + 1を押すと、次の画面を開けます。

STEP.1
プロジェクト新規作成

Xcode起動

「Create a new Xcode project」を選択

STEP.2
テンプレート選択

Single View Appを選択する画像

①Single View Appを選択

②Nextをクリック

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

①「Product Name」にBMICalculatorと入力

②「Language」はSwiftを選択

③「User Interface」でStoryboardを選択

④全てチェックなし

(そのほかは任意です。)

⑤「Next」をクリック

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

講座③で作ったPracticeを選択しましょう。

②Createをクリック

完了
これで、プロジェクトの作成は完了です。

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

まずは、見た目の部分を作っていきます。

STEP.1
labelを配置

①Main.storyboardを選択

②右上の+ボタンか、command + shift + LでObjectウィンドウを表示

③Labelを画面の上らへんにドラッグ&ドロップ

STEP.2
TextFieldを配置

TextFieldは、文字を入力するフォームです。今回は自分の身長と体重を入力するために使います。

①Objectsウィンドウを表示

②Text Fieldをドラッグ&ドロップ

STEP.3
広げる

TextFieldを少し横に広げてください。

STEP.4
複製

optionを押しながら、TextFieldをドラッグ&ドロップすると、複製できます。

STEP.5
ButtonとLabelを配置

新たにButtonとLabelを追加してください。

①Objectsウィンドウを表示

②Labelをドラッグ&ドロップ

③Buttonをドラッグ&ドロップ

STEP.6
Labelの文言を変更

①一番上のLabelを選択

(show the Attributes inspector)を選択

身長と体重を入力してください。と入力

STEP.7
Labelの文言を変更

①下のLabelの範囲を広げる

(show the Attributes inspector)を選択

③FontをSystem20.0に変更し、中央揃えにする

STEP.8
Buttonの文言を変更

①Buttonを選択

(show the Attributes inspector)を選択

③Titleに計算と入力、FontをSystem 25.0に変更

STEP.8
Buttonの色を変更

①計算を選択

(show the Attributes inspector)を選択

③Text ColorをWhite Colorに変更

③Backgroundを任意の色に変更

STEP.8
Buttonの範囲を変更

ボタンの範囲を広げる

STEP.9
実行して確認

iPhone11に変更して、左上の再生ボタンか、command + rで実行

このようなレイアウトになっていたら成功です。

完了

これで、BMIアプリのレイアウトが一通り完成しました。

 

コードと紐付け

STEP.1
画面を2分割

①上のバーをクリック

command + option + control + enterで2分割

STEP.2
TextFieldを紐付け

controlを押しながら、11行目と12行目の間にドラッグ&ドロップ

①身長を入力するTextFieldなので、NameにheightTextFieldと入力

②Connectをクリック

STEP.3
もう一つのTextFieldを紐付け

controlを押しながら、12行目と13行目の間にドラッグ&ドロップ

①体重を入力するTextFieldなので、NameにweightTextFieldと入力

②Connectをクリック

STEP.4
Labelを紐付け

controlを押しながら、13行目と14行目の間にドラッグ&ドロップ

①BMIを表示するLabelなので、NameにbmiLabelと入力

②Connectをクリック

STEP.5
Buttonの紐付け

controlを押しながら、20行目と21行目の間にドラッグ&ドロップ

①計算するボタンなので、NameにcalculationBtnActionと入力

②Connectをクリック

完了

 

コーディング

いよいよ、計算の処理を書いていきます。

STEP.1
ViewControllerを選択

まずは、コードの画面を開きます。

(show the Project navigator)を選択

②ViewControllerをダブルクリック

STEP.2
プレースフォルダーに文字を入れる
override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    heightTextField.placeholder = "身長をcmで入力してください。"
    weightTextField.placeholder = "体重をkgで入力してください。"
}

16行目あたりのコードを上記のように、変更してください。

override func viewDidLoad() {の中に書いている処理は、画面を表示したときに呼ばれます。

heightTextField.placeholder = "身長をcmで入力してください。"は、heightTextFieldのplaceholderに、「身長をcmで入力してください。」という文字を入れているだけです。

placeholderとは、入力フォルダーによく書いてあるヒントのことです。

STEP.3
実行してみる

このように、入力フォームに薄く文字が表示されると思います。

これは、プレースフォルダーと言ってユーザーに入力する値のヒントを与えています。

ヒントなので、入力すると、消えます。

STEP.4
計算のロジック

次は、計算のロジックを書きます。

26行目あたりに以下のコードを記述してください。

func calculation(height: Double, weight: Double) -> String {
    let h = height / 100
    let w = weight
    var result = w / (h * h)
    result = floor(result * 10) / 10

    return result.description
}

超初心者の方は、だいたいわかっていれば大丈夫です。

上記のコードは、BMIの計算式、体重(kg)/身長(m)の2乗を表してます。

/は÷、*は×を表しています。

let h = height / 100は、cmをmに変換しています。

var result = w / (h * h)は、結果に体重(kg)/身長(m)の2乗を計算して入れています。

result = floor(result * 10) / 10は、小数点を切り捨てています。

return result.descriptionは、String型にして返しています。

STEP.5
ボタンを押した時の処理

23行目あたりのコードを以下のように変更してください。

@IBAction func calculationBtnAction(_ sender: Any) {
    let doubleH = Double(heightTextField.text!)
    let doubleW = Double(weightTextField.text!)
    bmiLabel.text = calculation(height: doubleH!, weight: doubleW!)
}

超初心者の方は、だいたいわかっていれば大丈夫です。

let doubleH = Double(heightTextField.text!)は、heightTextFieldに入っている値をDouble型に変更しています。

let doubleW = Double(weightTextField.text!)も同じく、weightTextFieldに入っている値をDouble型に変更しています。

bmiLabel.text = calculation(height: doubleH!, weight: doubleW!)は、bmiLabelの文字に、計算結果を入れています。さらにここで、先ほど書いた計算式の関数を呼び出しています。

STEP.6
確認
//
//  ViewController.swift
//  BMICalculator
//
//  Created by RikutoSato on 2020/07/03.
//  Copyright © 2020 RikutoSato. All rights reserved.
//

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var heightTextField: UITextField!
    @IBOutlet weak var weightTextField: UITextField!
    @IBOutlet weak var bmiLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        heightTextField.placeholder = "身長をcmで入力してください。"
        weightTextField.placeholder = "体重をkgで入力してください。"
    }

    @IBAction func calculationBtnAction(_ sender: Any) {
        let doubleH = Double(heightTextField.text!)
        let doubleW = Double(weightTextField.text!)
        bmiLabel.text = calculation(height: doubleH!, weight: doubleW!)
    }

    func calculation(height: Double, weight: Double) -> String {
        let h = height / 100
        let w = weight
        var result = w / (h * h)
        result = floor(result * 10) / 10

        return result.description
    }
    
}

完了

これでアプリ完成です。

実行して確認してみましょう!

 

実行

STEP.1
実行

上のTextFieldに身長をcmで入力し、下のTextFieldに体重を入力して、計算ボタンを押してみましょう。

labelというところに、BMIの数値が表示されると思います。

ちなみに、18.5未満が「低体重(やせ)」で、18.5以上25未満が「普通体重」、25以上が「肥満」です。

完了

できましたでしょうか?これでBMIアプリが完成です!

 

まとめ

うまくできましたでしょうか?

わからない部分があれば、TwitterのDMか、コメントで質問して貰えばすぐ返します。(コメントはレス遅いかも)

 

ゼロから学ぶiPhoneアプリ開発入門


もっとみる