100日後にアプリエンジニアになるウサギ【5日目】

おつかれさまです！Ninomaeです
今日はガイドプロジェクトでゲームを実際に作ってきました！

今回はゲームの内容や実際の開発プロセスを写真を交えてお伝えできればと思います。

今日やったこと

参考書: Development in Swift Fundamentals
■ ガイドプロジェクト
- Apple Pie

ガイドプロジェクトのお題

今回のガイドプロジェクトでは、ここまで学んできた知識をもとに簡単な単語の推測ゲーム(アプリ)を作るというものでした！

アプリの完成画面はこのような感じになっていて、プレイヤーは画面に表示されているキーボード(ボタン)を使って、単語を推測していくというものです。実際のプレイ動画はこんな感じです！と貼りたかったのですが、gif画像がうまくアップロードできませんでした、、、(汗)
次回までにはなんとかします。

間違った文字を選択すると、りんごの木からりんごが1つ落ちます。すべてのりんごが落ちる前に正解にたどり着ければ、プレイヤーの勝ちになります！
ガイドプロジェクトどおりに実装したら、単語リストに見たこともないような単語が入っていて、正解するのが地味に難しい、、、笑

TODO

では、実際にどのようなプロセスを経て、このアプリは実装されているのでしょうか？今回のガイドプロジェクトのToDoをざっくりまとめてみました！

■ 新規プロジェクトの作成
- Xcodeを使って新規プロジェクトを作成
- アプリのターゲットをiPadのみに指定する
■ UIの作成
- 先程の画像を参考に、アプリの画面を作成する
- UIImageViewやVertical Stack View, Horizontal Stack View, Button, Labelなどを配置して画面を構成する
- 先程配置したUI要素に対してAuto Layout(異なる画面サイズでもきれいにUIを表示してくれる機能)を適用する
- UI要素とプログラムを紐付けるために、OutletやActionを定義する
■ ゲームのロジックの作成
- ゲームを管理する基本的な変数などについて定義する(ユーザーが推測する単語のリストや勝利回数・敗北回数など)
- ゲームを開始する処理
- ゲームの状態を更新する処理
- 画面上のUI要素を操作する処理
- ゲームのルールを実現する処理

かなりざっくりですが、以上のような工程を踏むことで今回のゲームを作ることができました！

作業画面

以上のTodoの中から、いくつかピックアップして画像付きで紹介してみます。

UIの作成

インターフェイスビルダーを使用して、UI要素を使って画面を構築しました。今回のポイントはStack ViewとAuto Layoutを使いこなせるかという点にあたったと思います。Stack Viewは複数のUI要素をグループ化する機能で、そこにAuto Layoutを使用することで、異なる画面サイズのデバイスにもうまく画面を調整して表示するために、なくてはならない機能です。

Stack Viewとその中身(ボタンやLabel)に対して適切にAuto Layoutを設定することで以上のようなきれいな画面を作ることができます。

UIとプログラムの紐付け

UI要素を配置できたら、プログラムとUI要素を紐付けます。画像はすべてのボタンの紐付けが完了したときのものです。ボタン1個1個に対して、ドラッグ・アンド・ドロップしてアウトレットを作成するのはなかなか骨が折れました笑

ゲームのロジックの作成

ゲームの状態を管理するための変数や定数を定義している部分です。これらの値を設定したり、参照したりすることで、ゲームの状態を管理します。
ゲームの状態を保持するプロパティのところで、Game!というものがありますが、これがStructure(構造体)です。Game構造体は別ファイルで定義されています。

それぞれのラウンドごとに、問題として出題される単語や、ユーザーが間違えても良い回数の残り、ユーザー入力した単語などを保管しておき、UIの更新やゲームの勝利・敗北判定などに使用します。

最後にその他のメソッドたちです。たった5つ程度のメソッドを定義するだけで、先程のゲームが機能していると思うと驚きですよね。

まとめ

今回はガイドプロジェクトの内容を中心に紹介しましたが、ここまで学んだ知識をもとにガイドを見ながら1つのアプリを作れたというのは個人的にはすごく自信になりました。

簡単なアプリだとしても、ガイドを見ながらだとしても自分のMacやiPadで自分の書いたアプリが動くのはやはり嬉しいです(笑)

明日以降は新しいチャプターに入りますが、引き続き頑張って勉強と投稿を続けていければと思います！
ここまでお付き合いくださりありがとうございました。いいねやフォローなども励みになりますので、よかったらお願いします！

では、また✋