【Swift/Xcode超入門】ボタンを使った簡単なアプリを作成してみよう

YouTube動画で見る

前回の講座

【Swift/Xcode超入門】HelloWorldと表示させるだけのアプリを開発しよう。~Xcodeの画面構成把握~

サトリク

ボタンを使った簡単なアプリを作成してみましょう！

動作環境

item	Version
Swift	5.3
Xcode	12.0.1

バージョンの確認方法

この講座の完成イメージ

今回開発するアプリは、動物のボタンを押したら、上部のLabelにその動物の鳴き声を表示するというアプリです。

アプリ開発手順

プロジェクトを作成

まずは、プロジェクトを作成していきましょう。

STEP.1

Xcodeを起動

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

もうすでにXcodeを開いている方は、command + shift + 1を押しましょう。

STEP.1

新規作成

「Create a new Xcode project」を選択

STEP.2

テンプレート選択

①「App」を選択

②「Next」をクリック

STEP.3

プロジェクトの設定

①「Product Name」にSampleBtnAppと入力

②「Interface」でStoryboardを選択

③「Language」はSwiftを選択

④全てチェックなし

⑤「Next」をクリック

（そのほかは任意）

STEP.4

プロジェクトの保存

前回の講座で作ったPracticeフォルダを選択しましょう。

完了

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

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

まずは、アプリの見た目の部分を作っていきましょう。

STEP.1

Main.storyboardを選択

左側のメニューから、「Main.storyboard」を選択

STEP.2

Labelを配置

①右上のプラスボタンをクリックしてオブジェクトウィンドウを表示

②Labelをボードの真ん中の上らへんにドラッグ&ドロップ

Labelというのは、文字を表示させるためのオブジェクトです。

STEP.3

Buttonを配置

①右上のプラスボタンをクリックしてオブジェクトウィンドウを表示

②Buttonをボードの真ん中らへんにドラッグ&ドロップ

Buttonというのはその名の通り、押したら何かしらのアクションを起こせるオブジェクトです。

STEP.4

Buttonを複製

optionを押しながら、Buttonをドラッグ&ドロップしてボタンを3つ並べましょう。

STEP.5

LabelのX軸の位置を決定

オブジェクトはただ置いただけではいけません。他の端末(画面の比率が異なる端末)でも同じような場所に表示させるために、位置をしっかりと決めます。

①Labelを選択

② (Align)をクリック

③「Horizontally in Container」にチェックを入れる

④「Add 1 Constraint」をクリック

これで、LabelのX軸(横の位置)が決まりました。

STEP.6

LabelのY軸の位置を決定

①Labelを選択

② (Add New Constraints)をクリック

③上のところに100と入力

④「Add 1 Constraint」をクリック

これで、LabelのY軸(縦の位置)が決まりました。

STEP.7

左側のButtonの位置を決める

①左側のButtonを選択

② (Add New Constraints)をクリック

③左に50を入力

④下に200を入力

⑤「Add 2 Constraints」をクリック

これで、左側のボタンのX軸とY軸が決まりました。

STEP.8

右側のButtonの位置を決める

①右側のButtonを選択

② (Add New Constraints)をクリック

③右に50を入力

④下に200を入力

⑤「Add 2 Constraints」をクリック

これで、右側のボタンのX軸とY軸が決まりました。

STEP.9

真ん中のButtonのX軸の位置を確定

①真ん中のButtonを選択

② (Align)をクリック

③「Horizontally in Container」にチェックを入れる

④「Add 1 Constraint」をクリック

これで、ButtonのX軸の位置が決まりました。

STEP.10

真ん中のButtonのY軸の位置を確定

①真ん中のButtonを選択

② (Add New Constraints)をクリック

③下に200を入力

④「Add 1 Constraint」をクリック

これで、ButtonのY軸の位置が決まりました。

STEP.11

Labelの装飾

①Labelを選択

② (show the Attributes inspector)を選択

③Labelを鳴き声に変更

④「Font」をSystem 30.0に変更

STEP.12

左側のButtonの装飾

①左側のButtonを選択

② (show the Attributes inspector)を選択

③Buttonを🐶に変更

STEP.13

真ん中のButtonの装飾

①真ん中のButtonを選択

② (show the Attributes inspector)を選択

③Buttonを🐱変更

STEP.14

右側のButtonの装飾

①右側のButtonを選択

② (show the Attributes inspector)を選択

③Buttonを🐸変更

STEP.15

ButtonのFontを変更

①shiftを押しながら、ボタンを複数選択

② (show the Attributes inspector)を選択

③「Font」をSystem50.0に変更

STEP.16

実行して確認

①iPhone11に変更

②左上の再生ボタンで実行

このようなレイアウトになっているはずです。

完了

ストーリーボード(画面レイアウト)の編集はこれで終わりです。

では、次はプログラムファイルと、オブジェクトを紐づけていきましょう。

プログラムファイルと紐付け

画面は通常、storyboardファイルと、プログラムファイルの2つのファイルで構成されます。

・storyboardファイルは、レイアウトを作成するためのファイルです。

・プログラムファイルは、プログラムを書くためのファイルです。

先ほど、Storyboardでオブジェクトを配置しました。そのオブジェクトをプログラムファイルと紐づける作業をします。

STEP.1

画面を2分割

①画面の上のバーをクリック

②command + option + control + enterを押してください。

そうすると、プログラムファイルとStoryboardファイルが二分割で表示されると思います。

STEP.2

鳴き声の紐付け

鳴き声を選択しcontrolを押しながら、10行目と11行目の間にドラッグ&ドロップ

①「Name」にlabelと入力

②「Connect」をクリック

これで、鳴き声の紐付けが完了しました。

STEP.3

犬ボタンの紐付け

次は同じように、Buttonも紐付けしていきましょう。

犬ボタンを選択し、controlを押しながら、17行目と18行目の間にドラッグ&ドロップ

①「Name」にdogButtonと入力

②「Connect」をクリック

これで、犬ボタンの紐付けも完了しました。

同じように全てのボタンを紐づけていきます。

STEP.4

猫ボタンの紐付け

猫ボタンを選択し、controlを押しながら、20行目と21行目の間にドラッグ&ドロップ

①「Name」にcatButtonと入力

②「Connect」をクリック

STEP.5

カエルボタンの紐付け

スペースがないので、22行目の下に改行を2つ入れてください。

カエルボタンを選択し、controlを押しながら、23行目と24行目の間にドラッグ&ドロップ

①「Name」にfrogButtonと入力

②「Connect」をクリック

完了

これで全てのオブジェクトをコードと結び付けました。

コーディング

では、次は、ボタンを押した時に鳴き声が表示されるように処理を書いていきましょう。

STEP.1

ワンワンと表示するプログラム

19行目あたり、@IBAction fuc dogButtonと}の中を、以下のようにコードを追記してください。

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var label: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func dogButton(_ sender: Any) {
        label.text = "ワンワン"
    }
    
    @IBAction func catButton(_ sender: Any) {
    }
    
    @IBAction func frogButton(_ sender: Any) {
    }
    
}

コードを追加する場所

@IBAction func dogButton(_ sender: Any) {（犬のボタンを押したら）
label（鳴き声）.text（の文字に） =（代入） “ワンワン”（「ワンワン」という文字）
}
@IBAction func catButton(_ sender: Any) {（猫ボタンを押したら）
}
@IBAction func frogButton(_ sender: Any) {（カエルボタンを押したら）
}

つまり、このプログラムは「鳴き声」の文字を「ワンワン」に書き換えるという簡単なプログラムです。

STEP.2

実行して確認

左上の再生ボタンで実行してください。

犬のボタンを押すと鳴き声の文字がワンワンに変更されると思います。

STEP.3

他のボタンの処理を追記

同じように、他のボタンにも処理を追記していきましょう。

23行目、27行目に以下のように追記しましょう。

@IBAction func dogButton(_ sender: Any) {
    label.text = "ワンワン"
}

@IBAction func catButton(_ sender: Any) {
    label.text = "ニャーニャー"
}

@IBAction func frogButton(_ sender: Any) {
    label.text = "ゲロゲロ"
}

コードを追加する場所