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

サトリク

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

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

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

 

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

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

 

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

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

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

クイズのイメージ図

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

 

簡単に説明すると、

  • スタート画面:クイズタイトルとスタートボタンがある画面
  • 問題画面:問題と4つの選択肢ボタンがあり、選択すると正解か不正解のウィンドウが表示される。
  • 結果画面:問題画面で10問ほど行うと、結果画面に遷移する。結果画面では、正解した数を表示する。

 

サトリク

Part1では、画面の見た目から作成していきます!

 

 

動作環境

Item Version
Swift 5.3
Xcode 12.0.1

バージョンの確認方法

 

プロジェクト作成する

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

STEP.1
プロジェクト作成

この画面では、どのプロジェクトを開発するかを選択する画面です。今回は新しくプロジェクトを作成します。

「Create a new Xcode project」を選択

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

この画面では、プロジェクトのテンプレートを選択します。

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

①「iOS」を選択

②「App」を選択

③「Next」を選択

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

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

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

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

⑧Use Core Data
  Host in CloudKit
 Include Tests

簡単なデータベースや、テストコードを使うかどうかの選択 今回は全てチェックなしでOK
注意!
⑤はSwiftUIではなく、Storyboardです。

全て確認してOKだったら、「Next」をクリック

STEP.4
プロジェクトの保存先の選択

この画面では、プロジェクトをどこに作るか聞かれています。

自分は、Desktopにおきましたが、自分の好きなところに作って大丈夫です。

①「Desktop」を選択(任意)

②「Create」をクリック

完了

サトリク

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

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

スタート画面を作成する

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

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

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

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

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

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

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

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

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

 

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

 

オブジェクトウィンドウから「Button」をボードにドラッグ&ドロップしてください。

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

STEP.3
Buttonを編集する

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

(Show the Attribute inspector)を選択

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

STEP.4
タイトルをつける

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

まずは、右上のプラスボタンか、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つ追加しましょう。

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

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

STEP.2
Labelを配置

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

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

STEP.3
Text Viewを配置

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

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

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

STEP.4
Buttonを配置する

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

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

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

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

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

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

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

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

Labelのレイアウトを変更します。

①Labelを選択

 (show the Attribute inspector)を選択

③FontをSystem 30.0に変更

 

次は、TextViewのレイアウトを変更します。

①TextViewを選択

 (show the Attribute inspector)を選択

③FontをSystem 25.0に変更

 

次は、ボタンのレイアウトを変更します。

①shiftを押しながらButtonを複数選択します。

 (show the Attribute inspector)を選択

③FontをSystem 25.0に変更

 

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

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

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

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

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

①「Cocoa Touch Class」を選択

②「Next」をクリック

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

①「Subclass of」が、UIViewControllerに変更

②「Class」にQuizViewControllerと入力

③「Next」をクリック

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

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

①そのまま「Create」をクリック

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

先ほど作成したファイルは問題画面の処理を書くファイルです。そのファイルをMain.storyboardのボードと紐付けしましょう。

まずは、Main.storyboardを選択してください。

 

①問題画面のバーをクリック

(show the identity inspector)を選択

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

完了

サトリク

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

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

 

スコア画面を作成する

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

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

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

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

右上のプラスボタンかcommand + shift + Lでオブジェクトウィンドウを表示させ、「ViewController」をドラッグ&ドロップ

STEP.2
Label、Buttonを配置

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

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

STEP.3
レイアウトの変更

Labelのレイアウトを変更しましょう。

①「Label」を選択

(Show the Attribute inspector)を選択

②FontをSystem30.0に変更

 

Buttonのレイアウトを変更しましょう。

①「Button」を選択

(Show the Attribute inspector)を選択

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

STEP.5
ファイル作成

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

①「Cocoa Touch Class」を選択

②「Next」をクリック

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

①「Class:」にScoreViewControllerと入力

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

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

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

そのまま「Create」をクリック

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

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

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

Main.storyboardに戻る。

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

(show the identity inspector)を選択

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

完了

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

 

ここまでの完成図

サトリク

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

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

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

 

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

 

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

RikutoSato

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

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

詳しくはこちら