Teaprog.com

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

iPhoneアプリ作成:色当てクイズアプリ

内容

 

今回は以前の記事で紹介した簡単な計算クイズアプリを作成しました。

 

今回は複数の画面切り替えという新しい機能を実装しつつ、色当てクイズアプリを作成してみましたので、その手順を簡単に紹介していこうと思います。

 

今回のアプリのポイントは複数の画面を使用するところにあると思います。

 

今まで自身が作成してきたアプリは1つの画面で完結していましたが、正解を確認する際に2つ目の画面に推移するような仕組みになります。

 

 参考書籍

 

 

この書籍は2年ほど前に購入しました。

 

しかし、アプリ作成にMacOSが必要であるということを知り、Macbookを購入した今になって引っ張り出してきたものです。

 

ですので少々xcodeのバージョンが違うので、新しい書籍を購入することもご検討ください。

 

 実行結果

 

一つ目の画面で色を指定するRGBの数値がランダム表示されます。

 

その下に実際にその色を表示するための画面に移るための「色を見る」ボタンが設置されています。

 

f:id:tk0137:20210116192214j:plain

 

「色を見る」ボタンを押すと前の画面で示されたRGB値と同じ色が表示されます。

 

f:id:tk0137:20210116192246j:plain

 手順

 

アプリを作成した後に説明用の画像を作成しているため、若干進んだ内容が画像に反映されている場合がありますが、ご了承くださいm(_ _)m。

 

問題を表示する画面に加えて、色を表示する画面が必要ですので、右上の「+」から「View Controller」をストーリーボードにドラッグします。

 

するとメインの画面の横に新しく画面が追加されます。

 

f:id:tk0137:20210116215251p:plainf:id:tk0137:20210116215352j:plain

 

次にこの追加した「View Controller」に対して動作の記述を行うためのファイルを新しく作成します。

 

左の項目から「Main.storyboard」を右クリックし、出てきたタブから「New File...」を選択します。

 

f:id:tk0137:20210117010835p:plain

 

続いて出てくるウインドウから「Cocoa Touch Class」を選択し、「Next」をクリックします。

 

f:id:tk0137:20210117010906j:plain

 

続いて「class」名を指定します。今回は書籍にならって今回は「colorViewController」としますが、自分の好きな名前で構いません。

 

「Subclass of」を「UIViewController」とし、「Languade」を「Swift」に設定します。

 

f:id:tk0137:20210117010923j:plain

 

上の作業を終わらせた後、再び左のファイル一覧を見ると自分の設定したクラス名でファイルが追加されています。

 

f:id:tk0137:20210117011310j:plain

 

次にRGB値を表示する「Label」、色を表示する画面に遷移するための「色を見る」ボタンを初期画面に設置します。

 

遷移先の色を表示する画面には、初期画面に戻るための「戻る」ボタンを設置します。

 

f:id:tk0137:20210116202525j:plain

 

続いて、「色を見る」ボタンと「戻る」ボタンを紐づけるために、「Control」+クリックで「色を見る」ボタンから「戻る」ボタンへドラッグします。

 

f:id:tk0137:20210116235049j:plain


この状態でアプリを試しに実行すると、「色を見る」ボタンから画面が遷移する事が確認できると思います。

 

ですが、「戻る」ボタンを押しても初期画面に戻らないという一方通行の仕様になっています。

 

ですから、次の工程で「戻る」ボタンを押すと一つ目の画面に戻るようにします。

 

まず、「戻る」ボタンの遷移先を設定するために、「ViewController.swift」に以下のコードを追加します。

 

@IBAction func returnTop(segue: UIStoryboardSegue){
    }

 

f:id:tk0137:20210612194551j:plain

 

下のようにストーリーボード上でスマホ画面の上部にアイコンが3つあります。そのうちの一番右にある「Exit」というアイコンを利用します。

 

2つ目の画面で「戻る」ボタンを「control」+クリックで「Exit」アイコンへドラッグします。

 

すると、先ほどコーディングしたメソッド名「return Top」が表示されるので選択します。

 

f:id:tk0137:20210216085448j:plain


ここまでの作業を終えた状態でアプリを起動してみると、下の画像のように「色を見る」から推移先の画面で「戻る」ボタンを押すと最初の画面に戻ります。

 

 f:id:tk0137:20210222144317j:plain   f:id:tk0137:20210222144337j:plain

 

ここまでの作業が終わるとアプリとしての全体像が見えてきたのではないでしょうか。

 

この後の作業の流れとしては、「Label」に問題を表示し、推移先の画面で正解を表示するだけですね。

 

次に最初の画面の「Label」が表示されている箇所にRGBの数値を表示できるようにします。

 

「Label」に表示する仕組みをコーディングしたいので、「Label」をプログラムに接続します。 

 

 以下のように、「viewController.swift」の「class View Controller」の次の行にドロップします。

 

そして「Label」にRGB値を表示するためのコードを入力します。

 

//RGBの変数
var colorR:Int = 0
var colorG:Int = 0
var colorB:Int = 0

//この画面が表示されるときに呼び出されます。
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
//0~255のランダムな値を3つ作ります
colorR = Int(arc4random() % 256)
colorG = Int(arc4random() % 256)
colorB = Int(arc4random() % 256)
//3つの値を表示する
colorLabel.text = "R=\(colorR) ,G=\(colorG) ,B=\(colorB)"
}

 

f:id:tk0137:20210612194641j:plain

 

f:id:tk0137:20210506215814j:plain

 

ここまでの状態でアプリを実行すると、最初の画面でRGB値が生成されたランダム値で表示されるようになります。
 

f:id:tk0137:20210506220715p:plain

 

次に、答えの色を表示する方の画面、つまり「colorViewController.swift」にプログラムを以下のように書いていきます。

 

// RGBの変数を用意します
var colorR:Int = 0
var colorG:Int = 0
var colorB:Int = 0

override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
// RGBから色を作ります
let backColor = UIColor(_colorLiteralRed:
Float(colorR)/256.0, green:
Float(colorG)/256.0, blue:
Float(colorB)/256.0, alpha: 1.0)

// 背景色を設定します
view.backgroundColor = backColor
}

 

f:id:tk0137:20210612194717j:plain

 

この状態で実行しても一つ目の画面で生成されたRGB値が二つ目の画面に受け渡されていないので、二つの目の画面が初期値"0の"ブラックになります。

 

よってRGB値を2つ目の画面へ受け渡す作業が必要になります。

 

そのために「ViewController.swift」へ以下のようにプログラムを書きます。

 

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
//切り替わり先の画面を変数に入れます
let nextvc = segue.destination as! colorViewController
//切り替わり先の変数に、この画面の変数の値を入れて、受け渡します
nextvc.colorR = colorR
nextvc.colorG = colorG
nextvc.colorB = colorB
}

 

f:id:tk0137:20210506230306j:plain

 

以上で完成です。

 

この状態で実行すると、この記事の上の方で説明したように、2つ目の画面で正解の色を表示してくれます。

 

 まとめ

 

今回は少しプログラムが複雑で自身もコードの繋がりや役割を理解するのに苦労しました。

 

無事に動かすことはできましたが、これで終了することなく後から見直すことで構造をスッキリ頭の中へ落とし込みたいと思います。

 

そうすることで、この記事自体もう少し分かりやすく書き直すことができるかもしれません。

 

読んでくださっている方はもちろん、あとで自分で見直す時にも見やすい方がいいのは間違いありません。

 

この記事に限りませんが、投稿した記事に関しては少しづつ見直して改善していこうと思います。

 

大きな変更がある場合は、敢えて前の文章を残しておくことで、比較しやすくなると思います。

 

このあたりの細かい作業は時間をかけながらゆっくりと調整していこうと思います。