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

サトリク

今回は、簡単なクイズアプリを作成していこうと思います。

初心者の方でも、簡単に作成できるように、丁寧にわかりやすく解説していきます。

以下のアプリは僕が最初に作ったアプリです。

 

こんな感じのアプリが作れるよ!

shortcut key
shortcut key
   開発元:Rikuto Sato
無料
posted withアプリーチ

 

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

クイズアプリの完成イメージ

今回作成するクイズアプリは以下の3つの画面で構成されています。

クイズのイメージ図

  1. スタート画面
  2. 問題画面
  3. 結果画面

 

簡単に説明すると、

スタート画面:クイズタイトルとスタートボタンがある画面

問題画面:問題と4つの選択肢ボタンがあり、選択すると正解か不正解のウィンドウが表示される。

結果画面:問題画面で10問ほど行うと、結果画面に遷移する。結果画面では、正解した数を表示する。

 

サトリク

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

 

 

動作環境

item Version
Swift 5.2.2
Xcode 11.4.1

バージョンの確認方法

 

プロジェクト作成する

まずは、Xcodeを起動して、プロジェクトを作成します。

STEP.1
プロジェクト作成

ここではどのプロジェクトで開発するか聞かれています。今回は、新しく作成します。

Xcodeを立ち上げプロジェクトを選択する画像

「Create a new Xcode project」を選択

STEP.2
テンプレートを選択

次は、テンプレートを選択します。

テンプレートを選択する画像

今回は、3つの画面で基本的な構造なので、真っ白なテンプレートSingle View Appを使います。

①「Single View App」を選択

②「Next」を選択

STEP.3
プロジェクトの名前などを決める

この画面では、プロジェクトの基本的な設定を行います。

プロジェクト設定の画像

以下の表のように設定しましょう。

項目名 説明 今回の設定
①Product Name プロジェクト名 SampleQuiz(任意)
②Team チーム名 自分の名前にしてます。(任意)
③Organization Name 組織名 自分の名前にしてます。(任意)
④Organization Identifier 組織ID satoriku.comの逆にしています。
大抵、ドメインを逆にします。
⑤Bundle Identifier com.satoriku.SampleQuiz 自動的に決まります。
⑥Language プログラミング言語の選択 Swift
⑦User Interface StoryboardかSwiftUIの選択 Storyboard

⑧Use Core Data
  Use CloudKit
 Include Unit Tests
 Include UI Tests

簡単なデータベースや、テストフォルダーを使うかどうか聞かれてます。 今回は全てチェックなしでOK
注意!
⑦はSwiftUIではなく、Storyboardです。
STEP.4
プロジェクトの保存先の選択

プロジェクトをどこに作るか聞かれています。

自分は、Desktopにおきましたが、どこでもいいです。

プロジェクトの格納フォルダを選択する画像

①「Desktop」を選択(任意)

②「Create」をクリック

完了

サトリク

これでプロジェクトが作成しました

次は、いよいよアプリを作っていきましょう!

スタート画面を作成する

まずは、スタート画面を作成しましょう。

スタート画面で必要な要素は、以下の2つです。

  1. アプリのタイトル(UILabel)
  2. スタートボタン(UIButton)
STEP.1
Main.storyboardを選択

まずは、画面の見た目を簡単に作成しましょう。

Main.storyboardを選択する画像

左側にファイルを選択する箇所があるので、そこからMain.storyboardというファイルを選択

〇〇.storyboardというファイルは、以下のようにiPhoneの画面に直接オブジェクトを配置して画面を作れるファイルです。

基本的に見た目を作るときは、このファイルです。

STEP.2
スタートボタンを配置する

まずは、スタート画面のスタートボタンを配置しましょう。

オブジェクトウィンドウボタンをおす画像

右上のプラスボタンをクリックするか、shift + command + Lでオブジェクトウィンドウを表示

オブジェクトウィンドウの画像

オブジェクトウィンドウというのは、このことです。

Buttonをドラッグ&ドロップの画像

オブジェクトウィンドウからButtonをボードにドラッグ&ドロップ

これで、ボタンが配置できました!

STEP.3
スタートボタンを編集する

スタートボタンのレイアウトを変更する

①ボード上の「Button」を選択

(show the Attribute inspector)を選択

②Titleを「スタート」に、FontをSystem30.0に変更

STEP.4
タイトルをつける

スタートボタンと同じように、簡単にタイトルをつけます。

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

まずは、右上のプラスボタンか、shift + command + Lでオブジェクトウィンドウを表示

表示できたら、ボードの上部に「Label」をドラッグ&ドロップ

STEP.5
タイトルを編集する

先ほどスタートボタンを編集したように、タイトルも編集しましょう。

①ボード上の「Label」を選択

(show the Attribute inspector)を選択

②Titleを任意のタイトルに、FontをSystem50.0に変更

完了
 

サトリク

これで、最低限のスタート画面が完成しました!

問題画面を作成する

次は、問題画面を作成します。

問題画面で必要な要素は、以下の6つです。

  1. 問題番号(Label)
  2. 問題文(Text View)
  3. 選択肢1(Button)
  4. 選択肢2(Button)
  5. 選択肢3(Button)
  6. 選択肢4(Button)
STEP.1
View Controllerをドラッグ&ドロップ

まずは画面を1つ追加しましょう。

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

右上のプラスボタンか、shift + command + Lを押してオブジェクトウィンドウを表示

「ViewController」を選んで、スタート画面の横にドラッグ&ドロップ

STEP.2
Labelを配置

問題数を表示する「Label」を配置します。

Labelをドラッグ&ドロップ

オブジェクトウィンドウを出して、「Label」をボードにドラッグ&ドロップ

STEP.3
Text Viewを配置

次に、問題を表示する「Text View」を配置します。

オブジェクトウィンドウを出して、「Text View」をドラッグ&ドロップ

複数行で表示するときは、「Label」ではなく、「Text View」を使います。

STEP.4
Buttonを配置する

選択肢のボタンを配置します。

Buttonをドラッグ&ドロップ

オブジェクトウィンドウを出して、「Button」をドラッグ&ドロップ

STEP.5
残り3つのButtonを配置する

選択肢は、4つあるのでボタンを4つ配置します。しかし、いちいちオブジェクトウィンドウから出すのはめんどくさいです。

Optionを押しながらドラッグ&ドロップ

配置した「Button」をoptionを押しながらドラッグ&ドロップすると、複製できます。

「Button」を4つになるように配置しましょう。

STEP.6
レイアウトを整える

LabelやButtonが少し小さくて見えづらいので、大きさを変えましょう。

オブジェクト Font
Label system 30.0
Text View system 25.0(TextViewの枠を少し広げる)
Button(4つ) system 25.0

こんな感じになるはずです。

STEP.7
次は、コードを書くファイルを用意する

問題画面の処理を記述するファイルを作成します。

基本的に1つのボードに1つの処理を書くファイルを紐づけるようにします。

command + nでファイル追加ウィンドウを表示

①「Cocoa Touch Class」を選択

②「Next」をクリック

STEP.8
ファイル名をつける

ファイル名を決める画像

①「Class:」にQuizViewControllerと入力

②「Subclass of」が、UIViewControllerになっていることを確認して、「Next」をクリック

STEP.9
保存先フォルダーを選択する

作成したプロジェクトの中に保存しましょう。

保存先のフォルダを選択

①作成したプロジェクト名のフォルダを選択

②「Create」をクリック

STEP.10
ボードとファイルを紐づける

先ほど作成したファイルは問題画面の処理を書くファイルです。

そのため、問題画面のボードと、処理を書くファイルを紐付けしなければなりません。

先ほど作成したQuizViewControllerを選択

Main.storyboardに戻る。

①問題画面のバーの左のアイコンをクリック

(show the identity inspector)を選択

③「Class」を先ほど作成したファイルQuizViewControllerにする

完了

サトリク

これで問題画面は完了です。

次は、スコア画面を作成しましょう!

スコア画面を作成する

次は、スコア画面を作成します。

スコア画面で必要な要素は、以下の2つです。

  1. 問題の正解数(Label)
  2. トップに戻るボタン(Button)
STEP.1
View Controllerをドラッグ&ドロップ

まずは、スコア画面のViewControllerを配置します。

オブジェクトウィンドウを表示させ、「ViewController」をドラッグ&ドロップ

STEP.2
Label、Buttonを配置

LabelとButtonを配置しましょう。

LabelとButtonをドラッグ&ドロップの画像

オブジェクトウィンドウを表示し、「Label」と「Button」をドラッグ&ドロップ

STEP.3
LabelのFontを大きくする
Labelのフォントサイズを大きくする

①「Label」を選択

(show the Attribute inspector)を選択

②FontをSystem30.0に変更

わかりやすいように、1つ目のボタンのTitleをシェアボタンに、fontを30.0にしましょう。

STEP.4
Buttonのレイアウトを変更

トップに戻るボタンの画像

①「Button」を選択

(show the Attribute inspector)を選択

②Titleを「トップに戻る」にし、FontをSystem30.0に変更

STEP.5
ファイル作成

CocoaTouchClassを選択肢、Nextボタンをクリック

command + nでファイル追加ウィンドウを表示

①「Cocoa Touch Class」を選択

②「Next」をクリック

STEP.6
ファイル名をつける

ScoreViewControllerと入力する画像

①「Class:」にScoreViewControllerと入力

②「Subclass of」が、UIViewControllerになっていることを確認して、「Next」をクリック

STEP.7
保存先フォルダーを選択する

作成したプロジェクトの中に保存しましょう。

①作成したプロジェクト名のフォルダを選択

②「Create」をクリック

STEP.8
ボードとファイルを紐づける

ボードと紐付けをしましょう。

スコア画面にクラスファイルを紐付ける画像

Main.storyboardに戻る。

①スコア画面のバーの左のアイコンをクリック

 (show the identity inspector)を選択

③「Class」を先ほど作成したファイルScoreViewControllerにする

完了

お疲れ様でした!これでストーリーボード編は終わりです。

ここまでの完成図

サトリク

こんな感じになれば完成です。

次は、本格的にプログラミングしていきましょう。

完成図

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

 

ここまでのまとめ
  • 〇〇.storyboardは画面のレイアウト作るファイル
  • Labelは文字を表示するためのオブジェクト
  • Text Viewは複数行の文字を表示するためのオブジェクト
  • Buttonはタップすると処理が行われるボタン
  • 基本的に、1画面につき、1つの処理を記述するファイルを紐づける