サトリクのこだわりのモノ紹介

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

サトリク

この記事通りやると、簡単なクイズアプリを作成することができます!

初心者の方もできるように、超丁寧に解説するので、みんなも自分の得意分野のクイズアプリを作成してみましょう!

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

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

 

クイズアプリの概要

今回作成するクイズアプリは、以下の3つの画面だけで作成できます。

クイズのイメージ図

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

の3つです。

サトリク

では早速開発していきましょう!

プロジェクト作成する

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

STEP.1
プロジェクト作成

Xcodeを立ち上げて以下のような画面になったら、Create a new Xcode projectを選択しましょう。

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

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

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

今回は、3つの画面で基本的な構造なので、Single View Appを選択し、Nextをクリックしましょう。

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

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

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

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

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

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

簡単なデータベースや、テストフォルダーを使うかどうか聞かれてます。 今回は全てチェックなしでOK

プロジェクトの設定画面

STEP.4
プロジェクト作成先の選択

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

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

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

完了

サトリク

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

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

この記事では、storyboard上の工程を解説していきます。

スタート画面を作成する

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

スコア画面で表示するのは、以下の2つです。

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

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

Main.storyboardを選択する画像

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

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

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

shift + command + Lでオブジェクトウィンドウを出しましょう。

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

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

オブジェクトウィンドウからButtonをstoryboard(iPhoneの画面みたいなやつ)にドラッグ&ドロップしましょう。

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

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

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

Storyboard上のButtonを選択し、(show the Attribute inspector)を開きます。

Titleをスタートに、FontをSystem30.0に変更しましょう。

右の項目が出てこない場合は、command + option + 0で項目を出せます。

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

STEP.4
タイトルをつける

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

まずは、shift + command + Lでオブジェクトウィンドウを出しましょう。

出したら、storyboardにLabelをドラッグ&ドロップしましょう。

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

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

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

Labelを選択し、をクリックして、Textに任意のタイトル、Fontを50に編集しましょう。

完了

サトリク

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

問題画面を作成しよう!

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

問題画面で表示するのは、以下の3つです。

  1. 問題番号
  2. 問題文
  3. 選択肢
STEP.1
Main.storyboardを開く
Main.storyboardを開く画像

まずは、Main.storyboardを開いてください。

STEP.2
View Controllerをドラッグ&ドロップ

shift + command + Lを押してオブジェクトウィンドウと立ち上げてください。

ViewControllerを選んで、スタート画面の横にドラッグ&ドロップしてください。

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

STEP.3
Labelを配置

オブジェクトウィンドウを出して、Labelを配置します。

このLabelは、問題数を表示するために使います。

Labelをドラッグ&ドロップ

STEP.4
Text Viewを配置

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

このText Viewは、問題文を表示するために使います。

STEP.5
Buttonを配置する

オブジェクトウィンドウを出して、Buttonを1つ配置します。

これは、選択肢のボタンを表示するためのボタンです。

Buttonをドラッグ&ドロップ

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

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

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

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

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

STEP.6
レイアウトを整える
編集前の画像

少し、ボタンやラベルが小さいので、見やすいように適当に編集しましょう。

編集後の画像

LabelやButtonのサイズを大きくしただけです。

あとあと、しっかりとレイアウトを整えるので、ここではわかりやすく大きくするだけでいいです。

STEP.6
次は、コードを書くファイルを用意します。

基本的に1画面に1ファイル紐付けをします。

問題画面用のファイルを作成します。

command + nを押して、以下のように、Cocoa Touch Classを選択し、Nextを押してください。

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

Classの所にQuizViewControllerと入力してください。

Subclass ofは、UIViewController

Also create XIB fileはチェックなし、

Languageは、Swift

にしたらNextを押してください。

ファイル名を決める画像

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

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

作成したプロジェクトを選択

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

Main.storyboardに戻り、問題画面のバーの左側を選択し、のClassを先ほど作成したQuizViewControllerにしましょう。

先ほど作成したQuizViewControllerを選択

完了

サトリク

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

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

スコア画面を作成する

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

スコア画面で表示するのは、以下の3つです。

  1. 問題の正解数
  2. シェアボタン
  3. トップに戻るボタン
STEP.1
View Controllerをドラッグ&ドロップ

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

STEP.2
タイトル2

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

LabelとButtonを配置の画像

STEP.3
タイトル3
シェアボタンのTitleを変える画像

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

STEP.4
タイトル4
トップに戻るボタンの作成の画像

2つ目ののボタンのTitleをシェアボタンに、fontを30.0にしましょう。

STEP.4
タイトル4

command + nを押して、以下のように、Cocoa Touch Classを選択し、Nextを押してください。

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

STEP.4
タイトル4

Class名にScoreViewControllerと入力し、そのほかが同じであれば、Nextを押してください。

ScoreViewControllerと入力する画像

STEP.4
タイトル4

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

プロジェクトの選択の画像

STEP.4
タイトル4

Main.storyboardに戻り、問題画面のバーの左側を選択し、のClassを先ほど作成したScoreViewControllerにしましょう。

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

完了

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

完成図

サトリク

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

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

完成図