【Swift5/Xcode】入門編!クイズアプリを作成してみよう!参考書より丁寧に解説します。【Part2】

サトリク

前回の講座を受けていない方はこちらから

 

今の状態

サトリク

前回のPart1では、主にstoryboardをいじり、レイアウトをある程度完成させました。

こんな感じになっていると思います。

サトリク

今回の目標は、以下の2つです。

  • スタートボタンを押したら、問題画面に遷移すること。
  • 問題画面のボタンを押した時に、上から何番目のボタンを押したかを判定できること。

では、早速やっていきましょう!

 

 

スタートボタンの処理を実装

まずは、スタート画面のスタートボタンを押したら、問題画面に遷移するようにしましょう。

STEP.1
main.storyboardを選択

まずは、Main.storyboardを選択しましょう。

STEP.2
問題画面に遷移させる

スタートボタンを選択し、controlを押しながら問題画面にドラッグ&ドロップしてください。

STEP.3
Present Modallyを選択

controlを押しながらドラッグ&ドロップすると左のようなウィンドウが出てきます。

ここでは、Present Modallyを選択しましょう。

ここでは、画面遷移の仕方を決めています。

 

繋いだら、左のような矢印ができると思います。

これはsegueセグエといいます。iOSアプリ開発をやってるとよく出てくる言葉なので、今のうちに覚えておきましょう。

STEP.4
実行してみる

Xcode上でもシミュレーターというiPhoneのようなモノでアプリを起動できます。

起動してみましょう。

「iPod toouch (7th generation)」をクリック

 

①iPhone11を選択

②左上の再生ボタンをクリック

これで実行できます。少し時間がかかりますが、画面上にiPhoneのような実機が現れます。これをシミュレーターといいます。

ちなみに、左上の再生ボタンを押さなくても、command + rで実行できます。

 

スタートボタンを押すと

↓↓↓↓↓

問題画面に移動します。

たったこれだけの作業で、画面遷移ができちゃいます!

STEP.5
完全な画面遷移にする

気づいた方もいるかもしれませんが、この画面遷移は完全な画面遷移とは言えません

なぜなら上に隙間ができていて、上の部分を下に下げるとスタート画面に戻ってしまいます。

これでは、あまりカッコよくないので、完全な画面遷移にしましょう。

①問題画面の上のバーを選択する

(Show the Attributes inspector)を選択する

③「Presentation」をFull Screenにする

 

変更したら実行してみてください!これで上の隙間はなくなっているはずです。

完了
 

サトリク

さて次は、コードを書いていきましょう。

コードとStoryboardののオブジェクト紐付け

サトリク

次は、コードとstoryboardのオブジェクトの紐付けを行います。

慣れてないと意外と難しい作業なので、よく確認しながらやっていきましょう!

STEP.1
コードを画面に表示させる

Main.storyboardで、問題画面の上のバーを選択し、

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

サトリク

そうすると、このように、右側にコードの画面が現れます。

 

ですが、ウィンドウがたくさんあって見づらいですよね。そのような時は、今の作業で使わないウィンドウは非表示にしましょう。

作業に必要のない画面は、上記のように非表示にしましょう。

STEP.2
「Label」を紐付ける

「Label」を選択して、controlを押しながら、class QuizViewController:UIView~~の下にドラッグ&ドロップしましょう。

Labelの名前をつける画像

このようなウィンドウが表示されたら

「Name」に、quizNumberLabelと入力して「Connect」をクリックしてください。

STEP.3
「Text View」を紐付ける

TextViewも同じように、controlを押しながら@IBOutlet weak var quiz~~の下にドラッグ&ドロップしましょう。

TextViewをコードに紐づける画像

「Name」に、quizTextViewと入力して「Connect」をクリック

STEP.4
Buttonを紐付ける

「Button」も同じように、controlを押しながらドラッグ&ドロップしましょう。

anserBtn1と名前をつける画像

「Name」に、answerBtn1と入力し、

「Connect」を押しましょう。

同じように残りのボタンも紐付けしましょう。

名前は、answerBtn2answerBtn3answerBtn4にしましょう。

STEP.5
ここまでのコード

以下のようになっていると思います。

//
//  QuizViewController.swift
//  SampleQuiz
//
//  Created by RikutoSato on 2020/10/22.
//

import UIKit

class QuizViewController: UIViewController {
    
    @IBOutlet weak var quizNumberLabel: UILabel!
    @IBOutlet weak var quizTextView: UITextView!
    @IBOutlet weak var answerBtn1: UIButton!
    @IBOutlet weak var answerBtn2: UIButton!
    @IBOutlet weak var answerBtn3: UIButton!
    @IBOutlet weak var answerBtn4: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()

        // Do any additional setup after loading the view.
    }
    
    @IBAction func btnAction(sender: UIButton) {
        //ボタンを押したときに呼ばれる
        print(sender.tag)
    }
    

    /*
    // MARK: - Navigation

    // In a storyboard-based application, you will often want to do a little preparation before navigation
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Get the new view controller using segue.destination.
        // Pass the selected object to the new view controller.
    }
    */

}

サトリク

QuizViewControllerのファイルがこのこのようになってたら、OKです。

完了

 

ボタンをタップした時の判定の実装

サトリク

次は、どの選択肢がタップされたかを判定するためのコードを書きます。

STEP.1
ボタンを押したときの記述

 

画像通りの場所に、以下の3行を記述してください。

@IBAction func btnAction(sender: UIButton) {
    //ボタンを押したときに呼ばれる
	print(sender.tag)
}

 

STEP.2
Buttonを紐付け

controlを押しながら、先ほど記述した3行にドラッグ&ドロップ

STEP.3
全てのButtonを紐付け

先ほどのように、全てのButtonを接続してください。

STEP.4
紐付きを確認

念のため、紐づいているかどうか確認します。

Quiz View controllerを右クリック

②btnActionに4つ紐付いていることを確認

STEP.5
実行して確認

左上の再生ボタンを押すか、command + rで実行しましょう。

 

ボタンを押すたびに、右下(コンソール)に「0」と表示されるはずです。

もし0と表示されない場合は、右下のウィンドウ(コンソール)が非表示になっている可能性があります。一番右下のボタンを押してください。

STEP.6
ボタンにタグをつける。

先ほどどのボタンを押しても「0」と表示されましたが、今度は、

一番上のボタンを押したら、「0」

二番目のボタンを押したら「1」

三番目のボタンを押したら「2」

四番目のボタンを押したら「3」

と表示されるようにしましょう。

一番目は0でいいのでそのままにします。

①二番目のボタンを選択

②右のウィンドウを表示

 (show the Attribute inspector)を選択

④Viewの中のTagを1に変更

同じ手順で、三番目のボタンは「2」、四番目のボタンは「3」にtagを変更してください。

STEP.7
実行して再確認

左上のボタンを押すか、command + rで実行して確認しましょう。

一番目のボタンを押すと「0」と表示され、

二番目のボタンを押すと「1」

三番目のボタンを押すと「2」

四番目のボタンを押すと「3」となるはずです。

完了

サトリク

これで、どのボタンを押したかの判定ができました!

Part2はこれで以上です!

 

クイズアプリを作ろうPert2まとめ

 

ここまでのまとめ
  • controlを押しながら、隣のボードにドラッグ&ドロップすると画面遷移ができる
  • 接続されたときに画面と画面の間にできる矢印をSegueという
  • command + rで実行できる
  • controlを押しながら、コードにドラッグ&ドロップすると紐付けができる

 

一緒に楽しく雑談しながらアプリ開発しませんか?

RikutoSato

satorikublogの筆者がアプリ開発をマンツーマンでサポートします。

あなたのクイズアプリをAppStoreにリリースするまで、チャットや、ビデオ通話で楽しく雑談でもしながらサポートします。エラーで先に進まない方や、アイデアはあるけど、そのアイデアをアプリに実現できない方など、気軽にご相談ください!

詳しくはこちら