クイズアプリ開発入門書を書きました。

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

サトリク

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

 

クイズアプリPert2の作業の流れ

今の状態

サトリク

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

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

サトリク

今回のPartでやることは2つです。

  • スタート画面の「スタート」ボタンを押したらクイズ画面に遷移させる
  • 問題画面の選択肢を押した時、上から何番目のボタンなのかを判定する

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

 

 

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

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

STEP.1
実行して現状確認

実行して現在の状態を確認しましょう。

①起動する端末をiPhone11に変更

②再生ボタンをクリック

実行すると、このようにiPhoneのような画面が立ち上がると思います。

ちなみに、現状ではスタートボタンを押しても何も変わりません。

STEP.2
Main.storyoboard

Main.storyboardを選択してください。

STEP.3
スタートボタンを押したら問題画面に遷移させる

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

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

「Present Modally」を選択

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

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

STEP.4
実行して確認

左上の再生ボタンをクリックして実行してみましょう。

このようにスタートボタンを押すと問題画面に遷移すると思います。

STEP.5
隙間ができてしまっている

遷移はできましたが、上に隙間ができていて、完全な遷移とは言えません。

上部に隙間ができています。

上から下へスワイプすると画面が戻ってしまう。

STEP.6
完全な遷移にする

完全な遷移にしましょう。

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

②  (Show the Attribute inspector)を選択

③presentationを「Full Screen」に変更

STEP.7
実行して確認

完全な遷移になっているか確認しましょう。

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

上に隙間がなくなっているはずです。

完了

これでスタートボタンを押したら画面遷移できるようになりました。

 

ボタンタップ判定の実装

今回作るクイズアプリでは、選択肢ボタンを押したら正解かどうかを判定する機能を作らなければなりません。

なので、まずこのパートでは、ボタンを押したときに、どのボタンが押されたのかを判定していきたいと思います。

STEP.1
QuizViewController.swiftを選択

QuizViewController.swiftを選択

STEP.2
ボタンを押した時のブロックを記述

viewDidLoad()ブロックの下に以下のコードを記述してください。

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

ボタンを押したら、このブロックが呼ばれるようにしていきたいと思います。

STEP.3
Main.storyboardを選択

Main.storyboardを選択してください。

STEP.4
コード画面と二分割

Main.storyboardとコードを紐づけるために画面を二分割で表示します。

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

command + option + control + enter

STEP.5
使わないウィンドウを非表示

画面が狭い場合は、使わないウィンドウを非表示にしましょう。

STEP.6
ボタンをコードに紐づける

ボタンをコードに紐付けていきましょう。

controlを押しながら、一番上のボタンを先ほど記述したブロックの上にドラッグ&ドロップしてください。

STEP.7
2番目以降のボタンの紐付け

2番目以降のボタンも同じようにコードに紐付けしてください。

STEP.8
実行して確認

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

以下のように、ボタンを押すたびに、Xcodeの画面のコンソールと呼ばれるところ(右下)に「0」と表示されるようになります。

※コンソールが表示されない場合は右下のマークを押してください。

STEP.9
どのボタンを押したかの判定をつける

現状どのボタンを押しても0と表示されてしまいます。なので、どのボタンを押されたのかを判定できません。

そのため、

1番目のボタンを押したら「1」と表示

2番目のボタンを押したら「2」と表示

3番目のボタンを押したら「3」と表示

4番目のボタンを押したら「4」と表示

するようにしましょう。

①一番上のボタンを選択

  (show the Attribute inspector)を選択

③tagを1に変更

STEP.10
2番目以降のボタンのtagを変更

1番目以外のボタンも同じようにtagに番号ををつけてあげましょう。

STEP.10
実行して確認

左上の再生ボタンを押して、実行してみましょう。

押したボタンのtagが表示されるようになっているはずです。

完了

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

 

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

 

ここまでのまとめ
  • controlを押しながら、隣のボードにドラッグ&ドロップすると画面遷移ができる
  • 接続されたときに画面と画面の間にできる矢印をSegueという
  • 完全な遷移にするには、Full Screenにする必要がある

 

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

RikutoSato

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

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

詳しくはこちら