【かけ出しiPhoneアプリ開発】オリジナルの電卓アプリ

【かけ出しiPhoneアプリ開発】オリジナルの電卓アプリ

【今回の目標】四則演算を行える電卓の作成

今回はシンプルな計算機能を搭載した電卓を作成。背景にはテンションが上がるネコの画像。端末の画面サイズに囚われないレイアウトに仕上げています。

一見するとなんてことないアプリの様に思えますが、この電卓アプリの作成を通じて 「UI部品のレイアウト調整」 と 「基本的なプログラム処理」 を学習できると思います。

電卓アプリのサンプル

電卓アプリの設計

「電卓」は普段からスマホで使っている方も多く、身近なアプリの一つと思います。それ故に「簡単だろう」と思っている方も多いのでは。少なくとも、私は簡単だろう、と思っていました。

しかし、作成手順を調べていくと、なかなか難しいことに気付きます。

• 数字はUI部品のボタン、全部で 20こ配置、レイアウトが難しい
• 頭の中では簡単にできる計算もコードに書くと 80行

まずレイアウトについては、

• 画面サイズ固定として、一つずつボタンを配置してレイアウト
• SnapKitというライブラリを使う

という選択肢があります。実際に SnapKit を使った電卓アプリの事例*もあるようですが、 Cocoapods を使ってライブラリをインストールするのはチョット手間です。参考書などでは、 Auto Layout を使っているものもありますが、 iPad でシミュレートするとボタンの間隔が大きすぎます。

また計算処理するプログラムについては、

• ボタンを一つずつ制御するプログラム
• NSExpression という演算補助クラスを使ったプログラム
• ボタンをタグ管理したプログラム

と複数の選択肢が。

このように 「電卓」 アプリ、と一言でいってもアプリ開発の手順や設計を考えると時間がかかります。。。今回は、比較的簡単な方法で電卓アプリを作れ、直克、 iPad でもそこそこ使えるようなレイアウトを考えました（下図参照）。

ストーリーボードの作成（20ステップ）

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

XCode起動、 「Create a New Xcode project」、 「Single View App」 そして プロジェクト名を入力し Create。通常であればストーリーボードにいくと思いますが、今回はアプリ内で画面の回転に関する設定を行っておきます。

通常であればスマホの画面が回転した際も見やすいようにレイアウトするものですが、電卓の場合はまったく違うレイアウトを用意する必要があります。 iPhone純正の電卓アプリを起動して、画面を横にしてみて下さい。縦画面にはなかった関数などのボタンがありませんか。

このように縦と横、両方の画面に対応する電卓アプリを作成するのは結構手間がかかります。

そのため今回は、ユーザーが画面を回転してもレイアウトが変わらないようにアプリ側で設定。レイアウトが変わらないことで、縦画面統一で使われると想定され、使い手の不快感を低減できると思います。

アプリでの画面回転時のレイアウト調整有無は、上図のようにプロジェクトの管理画面から設定可能。初期段階では 「Landscape Left」 「Landscape Right」 にチェックが入っていると思いますが、これらを外すことで画面回転時もレイアウトが変わらないようにアプリをセットできます。

Step.2 ストーリーボードのサイズ調整

今回は、電卓画面の数字や演算子を UI部品のボタン でセットしますので、 UI部品数が 20を超えます。こうした UI部品が多い状況では、開発時点から画面サイズを気にする必要が。まずはストーリーボードのサイズを iPhone8 から iPhone SE に変更します。

ストーリーボードの設定端末の変更は、ストーリーボード下にある 「Device」 ボタンをクリック。そして iPhone SE に変更。

参考までに画面サイズをチェックしておきましょう。

Step.3 電卓画面の数字を配置

今回は電卓画面の数字を UI部品の Button で表現。XCode画面右上の Libraryボタン から Button を検索し、ストリーボードにドラッグ＆ドロップしましょう。

Step.4 数字の大きさ

UI部品デフォルトのフォントサイズではちょっと小さいので、フォントサイズを変更。今回は 30 にしました。

Step.5 ボタンの複製

今回ボタンを 20こ 準備する必要がありますが、なるべく簡単に設置を終えたいですよね。まずは先ほどセットしたボタンを左クリックして command + C でコピーしましょう。そしてストーリーボード上で command + V で合計 4つになるよう貼付け。そして左クリックしたまま、 4つのボタンをドラッグし、 選択 モードにします。

Step.6 ボタンのレイアウト調整

今回はボタンのレイアウトに 「Stack View」 を使います。 ストーリーボード下のレイアウト設定ボタンをクリックし、 「Stack View」 を選択。

するとバラバラだったボタンがひとくくりになりました。

この後にボタンを 16こ 足していくのですが、一旦ここで電卓の完成図を見てみましょう。

今回は 5行 4列 でボタンを配置。中心になるボタンの行を基準に、ボタンの行を増やし、基準となる行からの距離をレイアウトすれば iPad 使用時でもボタンの間隔を均一に保てます。

まずは基準となるボタン行（Stack View）のレイアウト設定から行っていきましょう。

Step.7 ボタン行（Stack View）を中央表示

まずは現在表示されている 4つのボタン群を基準のボタン行（Stack View）とします。この行を中央表示に固定するよう、レイアウトをセットしましょう。画面中央表示は、ストーリーボード下のレイアウト設定ボタンから 「Horizontally in Container」 と 「Vertical in Container」 にチェック。

Step.8 ボタンの間隔

ボタンの間隔は、XCode右サイドバーから Spacing を調整。今回は 30 を設定。これで一つのボタン群が完成しました。

Step.9 ボタン20こ配置

先ほど作成したボタン群を複製し、ボタンの配置を終えたいと思います。ボタン群の複製は、ストーリーボード左に表示されている 「Stack View」　を左クリックし、 command + C でコピー。そしてストーリーボード上で command + V で貼付け。

今度は 量産された Stack View のレイアウトを整えることで、ボタンの配置が完了となります。

Step.10 ボタン群のレイアウト

ボタン群（Stack View）のレイアウト調整は、ストーリーボード左の 「Stack View」 という文字を左クリックして、ストーリーボード下のレイアウト調整ボタンをクリック。まずは水平方向の中心設定から。 Horizontally in Container のみにチェック。

次は基準のボタン行との間隔を設定。 ストーリーボード下の |-□-| ボタンを左クリックして、 下スペース 20 をセット。

残りの Stack View も同じようにセットしていきます。

すると上図のように 20このボタンがキレイに並びます。

Step.11 ボタンの配置完了

シミュレーターを iPhone 5 SE と iPad で起動。 iPad でも使えそうなボタン配置ですね。

Step.12 ボタンを電卓ボタンに

ボタン設置したては、すべて 1 なので、これを電卓らしい値に変更します。今回は上図のように 四則演算 のみの機能としました。

Step.13 計算結果を表示する準備

計算結果は、 UI部品の Label を使って表現します。XCode右上の Libraryボタン から Label をストーリーボードにコピー＆ペーストしましょう。そして Label という文字を適当な数字に変えておきましょう。

Step.14 計算結果欄のレイアウト

計算結果欄のレイアウトはいくつかの方法があると思いますが、今回はボタンに従う形で Stack View を選択。

ボタン行をレイアウトした時と同じ作業です。

水平方向のレイアウトについては、計算結果を左寄せで表示したいので、上図のように Label の Stack View を 最上部のボタン行の Stack View と関連付け。 Label の Stack View を右クリックし、右クリックしたまま 最上部のボタン群を収める Stack View にドラッグ＆ドロップ。

すると上図のようなレイアウト設定画面が現れますので、 Trailing を選択。

電卓らしいレイアウトの出来上がりです。

電卓の背景を変更

Step.15 画像の準備

電卓の背景にする画像を XCodeプロジェクトにインポートします。まずは XCode 画面左の Assets.xcassets（青色） を左クリックし、パソコン内の画像ファイルを XCode 画面中央の空きスペースにドラッグ＆ドロップ。

Step.16 背景画像用のUI部品

背景画像を管理するために UI部品の Image View を活用。 UI部品 「Image View」 をストーリーボードにドラッグ＆ドロップしましょう。

Step.17 背景画像の設定

まず現状では数字ボタンの前に Image View がきているので、 Image View のレイヤーを後ろに下げる必要があります。この作業は、ストーリーボード左の 「Image viewアイコン」 を左クリックし、 Safe Area の下に移動。 あと Image View の表示サイズも画面一杯にしましょう。

Step.18 背景画像の選択

背景画像の選択は、 XCode右サイドバー内の Image をクリックし、画像名を選択。

Step.19 背景画像の表示を調整

恐らく画像設定した直後は、画像サイズとスマホの画面サイズがマッチしていないと思います。これをマッチさせるには、右サイドバー内の 「Content Mode」 を Aspect Fill に。

Step.20 数字ボタンのレイアウト変更

数字ボタンのレイアウトを変更したい場合は、ストーリーボード左の Bアイコンを command 押したまま左クリックで複数選択していきます。そして右サイドバーの Text Color で一括変更。

演算子もついでに変えてみましょう。

一旦ここでレイアウトの設定は終了としましょう。

電卓の計算プログラム（6ステップ）

Step.1 プログラムの概要

電卓のプログラムを始めて組まれる方は、全体的な流れを把握しておきましょう。まずは計算プロセスを上図のように可視化。 この流れをプログラム制御していきます。

ちょっとズルいかもしれませんが、先に結果を見ておきましょう。

まず①で計算プロセスに登場してくる値（プロパティ）の設定。今回登場する値としては

numberOnScreen　：　画面に表示されている数字
previousNumber　：　最初に入力した数字
performingMath　：　計算プロセスに進んでいいかの判断値（真偽値）
operation　：　演算子（+、 -、 ×、 ÷）

そしてプログラムの流れとしては、まず最初は何も入力されていないので ② で数字の入力。そして ③ で 数字入力の有無を確認されて、 ④ で演算子の選択。

そして ⑤ で 演算子が記録されて、計算プロセスに進めるかの判断値 performingMath が true に。

再びコードの最初に戻り、今度は ⑥ のブロックにプログラム処理が進行。 2番目の数字が入力されると、画面上に上書きされる形で 2番目の数字が表示。

そして =イコール が押されると、 ③ の判断で ⑦ のブロックに移動。演算子によって 最初の数字（previousNumber） と 2番目の数字（numberOnScreen） が計算。そして 結果を表示する label.text に代入されて、計算結果が表示、という流れです。

C のクリアについては、　⑧ の部分で各値のリセットを指示。

以上が計算フローの流れですが、まだ追加すべきコードはあります。例えば、計算結果後に数字が押された場合は、今までのフローをリセットするなど。今回は、コードの分かりやすさを考えて、単純計算だけのプログラムとしました。

//
//  ViewController.swift
//  myCatCalc
//
//  Created by TakayukiOshima on 2019/02/18.
//  Copyright © 2019 TakayukiOshima. All rights reserved.
//
import UIKit
//
class ViewController: UIViewController {
//
    var numberOnScreen:Double = 0; // 画面上の数字
    var previousNumber:Double = 0; // 前回表示されていた数字
    var performingMath = false  // 計算してもいい？の判断値
    var operation = 0; //  + , - , × , ÷
//
    @IBOutlet weak var label: UILabel! // 計算結果表示
//
    @IBAction func numbers(_ sender: UIButton) {   // 数字ボタンを取り扱い可能
        if performingMath == true{
            label.text = String(sender.tag-1)  // numberOnScreen の値が上書きされる
            numberOnScreen = Double(label.text!)!
            performingMath = false
        }
        else{
            label.text = label.text! + String(sender.tag-1)  // String(sender.tag-1) 数字が代入
            numberOnScreen = Double(label.text!)!  // 数字が表示
        }
    }
//
    @IBAction func buttons(_ sender: UIButton) {
        if label.text != "" && sender.tag != 11 && sender.tag != 16{   //数字が表示されていた場合の処理
            previousNumber = Double(label.text!)!
            if sender.tag == 12{ // ÷
                label.text = "÷";
            }
            else if sender.tag == 13{  // ×
                label.text = "×";
            }
            else if sender.tag == 14{  // -
                label.text = "-";
            }
            else if sender.tag == 15{  // +
                label.text = "+";
            }
            operation = sender.tag
            performingMath = true;
        }
        else if sender.tag == 16 // = が押された時の処理
        {
            if operation == 12{
                label.text = String(previousNumber / numberOnScreen)
            }
            else if operation == 13{
                label.text = String(previousNumber * numberOnScreen)
            }
            else if operation == 14{
                label.text = String(previousNumber - numberOnScreen)
            }
            else if operation == 15{
                label.text = String(previousNumber + numberOnScreen)
            }
        }
        else if sender.tag == 11{ // C が押された時の処理
            label.text = ""
            previousNumber = 0;
            numberOnScreen = 0;
            operation = 0;
        }
    }
//
//
//
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }
}

Step.2 プログラムするための準備

ストーリーボードにセットしたボタン群とプログラム制御する ViewController.swift を接続する必要があるのですが、普通に接続していたらストレスです。

今回は、各ボタンが持つ Tag を使って接続し、ボタン制御していきます。

まずは、数字の 0 を左クリックして、右サイドバーを下にスクロールし、 Tag を探しましょう。そして 数字の0 を 「Tag 1」 にセット。

同じ要領で 数字の1 を 「Tag 2」に、同様の手順で 数字ボタン全てに Tag をセットします。

数字の9 が 「Tag 10」 となれば OK です。

ついでに演算子も Tag 設定します。今度は Cボタンからで 「Tag 11」 にセット。そして上から順番に Tag をセット。

最後 = の Tag が 16 になれば OK ですね。

Step.3 数字ボタンの接続

数字ボタンの接続作業は、数字の 0 から行います。XCodeのエディタモードを起動し、ストーリーボードの 0 を右クリックし、右クリックしたまま、上図のようにドラッグ＆ドロップ。

接続時の詳細設定はこの通り。

Connection: Action
Object: View Controller
Name: 任意（今回は numbers）
Type: UIbutton
Event: Touch Up Inside
Arguments: Sender

そして他の数字は、 ViewController.swift の

@IBAction func numbers(_ sender: UIButton) {


}

の {}カッコ 内にドラッグ＆ドロップ。数字ボタンの 1から 9 まで同様の作業で接続します。

Step.4 計算結果欄の接続

計算結果欄の Label 部品を上図のように接続。そして以下のコードを追加してみましょう。

label.text = String(sender.tag-1)

そしてシミュレーター起動。

数字ボタンを押すと画面に数字が表示されることを確認できます。

Step.5 演算子ボタンの接続

上図のように C ボタンを ViewController.swift に接続しましょう。

接続時の詳細設定はこのとおりです。

Connection: Action
Object: View Controller
Name: 任意（今回は button）
Type: UIbutton
Event: Touch Up Inside
Arguments: Sender

数字ボタンを接続した時と同じように演算子ボタンも

@IBAction func buttons(_ sender: UIButton) {

}    

の {}カッコ 内にドラッグ＆ドロップ。 C 、 ÷ 、 × 、 - 、 + 、 = とすべてドロップしましょう。

あとはプログラムですが、内容は 『Step.1 プログラムの概要』 でご紹介したとおりになりますので、説明は割愛させて頂きます。プログラムを読んで、プロセスを確認してみて下さい。

Step.6 シミュレーター

エラーなく Swift 4.2 で動くオリジナルの電卓アプリが作成できました。お疲れ様でした。

電卓アプリのサンプル

まとめ

電卓アプリのプログラム自体は、 クラスやプロトコル、配列も登場してきませんので比較的分かりやすいコードと思います。

これの応用をイメージすると、単位の換算アプリや通貨の換算アプリなど 「計算」 を使ったアプリケーションが作れそうですね。

「早くアプリを完成させたい」「こんなアプリは作れるのかな？」と モヤモヤっ とされている方、 Swiftの基本はお済みでしょうか？ iPhone のアプリ開発は、やはりネイティブ言語の Siwft が一番ではないでしょうか？

「Swiftの基礎かぁ・・・・」と思っているあなた。本やネットではなく、短期集中型のプログラミング・スクールはどうでしょうか？ 中でもオンライン型のプログラミング・スクールなら 「時間」 と 「場所」 の制約を減らし、今の生活に馴染む形でプログラミング学習ができると思います。

東証一部上場企業のグループ傘下で活動する CodeCamp では、オンライン学習をあまり良く知らない方向けに 「無料体験」 や 「無料相談」 を実施中。 中々前に進めない方、とりあえず 「無料体験」 やってみませんか？