アプリ開発したい人にオススメのプログラミングスクール

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

サトリク

この記事は、Pert2です。前編を読んでいない方は、上記の記事から読んでください。

今の状態

サトリク

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

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

今の状態の画像

サトリク

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

 

 

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

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

STEP.1
main.storyboardを選択
Main.storyboardを選択する画像

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

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

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

controlを押しながらドラッグ&ドロップする画像

STEP.3
Present Modallyを選択
画面遷移の仕方を選択する画像

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

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

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

セグエはこれって画像

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

STEP.4
実行してみる

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

起動の仕方は、

左上のiPhone SE(2nd generation)というところをiPhone11に変更して左上のボタンを押すか、command + rです。

少し時間がかかりますが、画面上にiPhoneのような実機が現れます。

スタート画面の画像

スタートボタンを押すと

ラベルなどを配置した画像

次の画面に移動します。

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

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

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

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

PresentModallyの特徴の画像

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

完全な画面遷移にしようの画像

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

(Show the Attributes inspector)を選択する

③「Presentation」をFull Screenにする

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

完了
 

サトリク

さて次は、コードを書いていきます。

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

サトリク

次は、コードとstoryboardのオブジェクトの紐付けを行います。慣れてないと意外と難しい作業なので、よく確認しながらやっていきましょう!

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

アシスタント画面表示

Main.storyboardで、問題画面を選択し、

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

サトリク

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

コードの画面を出す画像

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

ウィンドウを表示非表示の切り替えをする画像

必要のない画面は、右上のボタンで非表示にしましょう。

こんな感じに見やすくしましょう。

STEP.2
「Label」を紐付ける

「Label」を選択して、controlを押しながら、12行目と13行目の間にドラッグ&ドロップしましょう。

Labelの名前をつける画像

このようなウィンドウが立ち上がりますので、

「Name」に、quizNumberLabelと入力し、

「Connect」をクリック

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

TectViewをドラッグ&ドロップする画像

TextViewも同じように、controlを押しながら13行目と14行目の間にドラッグ&ドロップしましょう。

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

「Name」に、quizTextViewと入力し、

「Connect」をクリック

STEP.4
Buttonを紐づける

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

anserBtn1と名前をつける画像

「Name」に、answerBtn1と入力し、

「Connect」を押しましょう。

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

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

STEP.5
ここまでのコード

ここまでのコードの画像

サトリク

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

完了

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

サトリク

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

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

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

STEP.2
Buttonを接続

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

STEP.3
全てのButtonを接続

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

STEP.4
紐付きを確認

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

Quiz View controllerを右クリック

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

STEP.5
実行して確認

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

ボタンを押すたびに、コンソールというところに「0」と表示されるはずです。

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

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

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

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

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

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

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

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

①二番目のボタンを選択

②右のウィンドウを表示

  (show the Attribute inspector)を選択

④Viewの中のTagを1に変更

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

STEP.7
実行して再確認

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

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

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

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

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

完了

サトリク

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

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

 

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