Teaprog.com

とあるエンジニアの日々の記録。エンジニアと関係のないようなことも書きます。

iPhoneアプリ作成:簡単なクイズアプリ

目次 

はじめに

 

簡単なクイズアプリを実装してみました。

 

簡単な足し算の問題を表示します。その答えを入力すると正誤判定を行い、次の問題を表示してくれる、、、という流れを繰り返すといった仕様になっています。

 

仕様やデザインは凝っていないのですぐに公開できるようなクオリティーにはなっていません。

 

しかし、何か一つ自身の手で制作物を作ってみたい方、アプリ作成を始めたばかりの方などには、アプリ制作の足掛かりとしてはもってこいだと思いますので、是非ご参考までに!

 

 参考書籍

 

 

参考書籍の最新版↓

 

 

アプリ作成の準備についてはこちらから↓

 

teaprog.com

実装結果

 

表示された問題の答えを入力し、ボタンを押すと正誤判定をアラートで表示してくれます。

 

正解すると「Correct」不正解なら「Fault」と表示してくれます。

 

f:id:tk0137:20201001224819p:plain

 

正解すると次の問題に進みます。

 

なお不正解だった場合は正解するまで同じ問題が表示され続けます。

 

f:id:tk0137:20201001225534p:plain 

簡単な実装手順

 1.UIkitの配置

 

今回必要なUIkitは

・Label

・Text Field

・Button

 

この3つです。

 

まず「Label」の配置です。

 

ここには問題文が表示されます。

 

ですので画面上部に横に広くスペースをとります。

 

f:id:tk0137:20201001231713j:plain

 

「Label」の制約は上、左右の距離を一定に保つようにし、高さも一定になるように設定します。

 

上、左右の制約については値は20に設定してあります。

 

「Height」にチェックを入れることで高さを一定に保つことができます。

 

制約がつけ終わったら「Add 4 Constraints」をクリックし、制約をつけます。

 

今回は4つの制約をつけたのでAdd 4 Constraintsとなっています。

 

f:id:tk0137:20201001232343j:plain

 


次にこのサイトの中では初登場の「Text Field」を設置します。

 

ここにはユーザが問題の回答を入力するフィールドになります。

 

f:id:tk0137:20201001234008j:plain

 

テキストフィールドの制約については「Label」の時と同様に「Add New Constraints」に加えて「Add New Alignment Constraints」の方でも制約を設定します。

 

詳しくは下の2枚の画像を参考にしていただければお分かりかと思いますが、上方向と幅と高さにの3つとそれに加えて「Horizontally in Container」という制約をつけています。

 

これを設定することで「Text Field」の中心と画面の中心を自動で合わせてくれます。

 

f:id:tk0137:20201001234539j:plain f:id:tk0137:20201001235031j:plain

 


最後に「Button」を設置していきます。

 

これはユーザーが入力した回答をアプリの内部に送るためのボタンです。

先ほど貼った「Text Field」の横に貼ります。

 

f:id:tk0137:20201002001144j:plain

 

「Button」はアプリ内での表示名を変えられます。

 

私は「入力する」にしていますが、「決定」だったり「回答を送信」だったり役割が伝わりやすいような名前に変更すると良いと思います。 

f:id:tk0137:20201002001757j:plain

 

「Button」の制約は上は「Label」との距離、左は「Text Field」との距離を一定に保つために設定します。

 

また、高さと幅も制約をつけることで大きさがブレずに表示されます。

 

f:id:tk0137:20201002002442j:plain

 

以上でアプリの骨組みとなるUIkitの設置が終了しました!

 

試しに画面を横向きにしてみると設置したUIkitの配置のバランスが綺麗に保たれていることが分かります。

 

f:id:tk0137:20201002003637j:plain

 2.コーディング

 

コーディングと言っても実装しなければならないことが複数あるので、一つずつ確認してみます。

 

大きく分けて以下の機能を揃える必要があります。

 

・前準備

・問題を生成

・正解を生成

・問題を表示

・ユーザからの回答を受け取る

・正誤判定

・結果を表示

 

前準備

 

今回触るプログラムファイルは「ViewControler.swift」と言うファイルです。

 

右側に出しておいて左側のスマホ画面を見ながら編集できるようにするとやりやすいです。

 

f:id:tk0137:20201002010214j:plain

 

もう一つの前準備としてはUIkitをプログラムとして編集できるようにすると言うことです。

 

UIkitをプログラムの方へドラッグしてプログラム中での名前を入力します。

 

下の画像の場合ではUIkitとプログラム中の名前は以下の対応となっています。

 

・「Label」→「Label_question」

・「Text Field」→「TextField_answer」

・「Button」→「tapButton」

 

f:id:tk0137:20210612194924j:plain

 

プログラミングするための前準備が終わったのでいよいよコードを書いていきます。

 

・問題の生成

・正解の生成

・問題を表示

 

上の2つの機能はユーザに回答を入力してもらう前の処理です。

 

この2つの機能を実装するために「@IBOutlet weak var TextField_answer~」の行の下に以下のコードを書き込みます。

 

//問題に使用する変数を用意
var l = 0
var r = 0
var answer = 0 //出題する関数
func question(){
l = Int(arc4random() % 100)
r = Int(arc4random() % 100) answer = l + r
Label_question.text = "(l) + (r) = ?"
TextField_answer.text = ""
}
 

 

f:id:tk0137:20201002011117j:plain

 

アプリ完成の終わりへの道が見えてきました。最後にユーザから回答を受け取ってからの動作を書き込んでいきます。

 

・ユーザからの回答を受け取る

・正誤判定

・結果を表示

 

以下のコードを「@IBAction func tapButton(_ sender: Any)〜」の2重括弧{}の中に以下のコードを書き込みます。 

 

//整数が入力されているかチェック
guard let users_answer = Int(TextField_answer.text!) else {
return
}

//答え合わせ
var check = "Fault"
if users_answer == answer {
check = "Correct"
}

//ダイアログ作り
let alert = UIAlertController(title: "Quiz", message:check, preferredStyle: .alert)
let defaultAction = UIAlertAction(title: "OK", style: .default, handler: {action in

//正解なら次の問題を出題
if users_answer == self.answer {
self.question()
}

})
alert.addAction(defaultAction)

//ダイアログを表示
present(alert, animated: true, completion: nil)

 

f:id:tk0137:20201002013508j:plain

 

 これでコーディング完了!

 

実行ボタンを押して実行してみてください。 

 

ページの一番上で紹介したように足し算クイズが表示され、正誤判定が正しく行われるこ確かめてみてください。

 

最後に

 

今回の内容は難易度が少し高かったような気がしますが、細かいことは気にせずコピペして自分の手で実装してみると言う体験をするだけでも新しい発見があるはずです。

 

私は足し算だけでは物足りなく、引き算、掛け算まで実装し、動作させることができました。

 

その時に利用したテクニックやコードなども後々紹介できれなと思います。

 

また、Githubと言うコードファイルを公開できるツールがあるのですが、創作物が増えてきたらそれにあげることも考えております。

 

以上、最後までありがとうございました!