vol.0 アプリを制作するための事前準備 – SwiftでiOS用のクイズアプリを作る!

top

今回から数回に渡ってSwiftでiPhone・iPadで使えるクイズアプリを作成していきたいと思います!

前提

最初に言い訳をしておきますが、本連載はこれまでたくさんのiOSアプリを作成してきた人間の書く記事ではなく、私自身はWeb出身でスマホサイトの作成経験はそれなりにあるものの、ネイティブアプリの制作は始めてなので微妙な書き方ややり方のところがあると思うのでその点にご注意ください。

あと、今回制作するアプリはストーリーボードを一切使わずにコードによるレイアウト法にて行っていきたいと思います。

ストーリーボードはわかりやすくて便利なのですが、再利用性や汎用性を考えると効率的な方法とはいえず、私のように短期間で一気に作成することを前提として仕事する人間にとっては多少の学習コストを払っても急がば回れの精神で初回からコードによるレイアウトで行っていったほうが良いだろうという判断です。

作るモノ

今回は「クイズアプリ」の作成をしながらiOSアプリの制作を勉強していきたいと思います。

クイズアプリは「ジャンル選択 → 問題レベル選択 → 問題(10問)」という流れのものを想定しています。

シンプルな流れですが、基本的な画面レイアウト方法、クイズ問題データの出力、ログデータの入力、動的なテキスト変更といった、アプリ制作においておさえるべきモノを一通り網羅したものを作っていこうと考えています。

えー、これを書いている時点ではそれらのやり方をよくわかっていないので書いていて少し不安になってきましたが(苦笑)。

では今回作成していくアプリのワイヤーフレームを作成しておいたので、ひとつひとつ画面を確認しながら予想される必要技術などについて書いていきたいと思います。

1.起動画面

アプリを起動した直後に表示される画面です。

top

起動後、数秒表示されて自動的に次の画面に遷移する画面ですが、「サンプルクイズ」というタイトル文字と「これはiOSアプリの習作です。」という解説文字の両方をグループとして画面中心(天地左右)に配置する方法を学習したいと思います。

2.ジャンル選択画面

クイズのジャンルを選択していく画面です。

genre

ここでは画面サイズに合わせて各選択項目が画面を4分割しているような感じでレイアウトする方法を学習します。

また、各項目内の文字は項目内にて天地左右に表示されるようにし、改行が入ってもそれらが維持されるようにします。

3.問題選択画面

2で選択したジャンル内で選択できる問題一覧(各10問)を表示する画面です。

select

ちょっと言い回しが面倒になりましたが、ジャンル選択画面を大カテゴリ、本画面を小カテゴリと捉えていただけると把握しやすいのではないかと思います。

この画面では予めアプリ内に用意する「問題データ」からタイトルを抜き出して一覧表示し、すでに挑戦したことのある問題に関してはデータベースに記録された解答データも各問題タイトルの下にそれらも合わせて表示されるようにしていきます。

つまり本アプリはデータベースに記録していく入出力もやろう、という欲張りな計画なわけで今から不安になっている次第です。なんとかなるでしょう(笑)。

あと、地味ではありますがジャンル選択画面へと戻るボタンも配置して一方通行を防ぎます。

4.問題スタート画面

問題の解答をはじめる前の画面です。

start

問題タイトルの動的な表示と、その下の「全10問」のところは当該問題集の問題数をカウントして動的に数値が変化するようにします。

次の画面を見るとわかりやすいのですが、画面上にクイズの進捗を示すプログレスバーも配置して解答者が現在地を把握できるようにしていきます。

また、スタートボタンをタップするとタイマーで時間がカウント開始されるようにして、解答終了後の画面で全問を解答するのにかかった時間が表示されるようにします。

5.解答画面

問題を解答していく画面です。

q

問題番号と問題文、そして四択の選択肢が動的表示されるようにします。

問題に正解すると画面中央に◯が表示されて一定秒数後 次画面へ遷移、ミスした場合は当該選択肢をブラックアウトして非選択状態にし、正答を選択することを促すような仕様にします。

問題は仮に10問あるとするとシャッフルされて挑戦するたびに出題順がランダムに変更するようにし、また、選択肢の4択も出題順がランダムに変更されるようにして出題順や選択肢配置を覚えて解答することを防ぐようにします。

各問題は表示されるときに問題文がフェードイン、フェードアウトし、選択肢は一度画面外に出てから新たな選択肢がせり上がってくるようなアニメーションを適用します。

6.解答終了画面

全問を終了した時に表示される画面です。

finish

解答中に記録しておいたミスした回数の合計と、かかった時間の合計を表示します。

「ミスした回数」という観点でのデータ表示はサービスとして正式リリースするなら避けるべき表現と思いますが、今回は習作なのでわかりやすくそう表現することにしました。


以上が本連載で作成していくアプリの概要です。

自分でワイヤーフレームから必要作業や学習項目を洗っていくだけでウンザリしてしまったのが本音ですが、なんとか頑張ってこのクイズアプリを作って仕上げていきたいと思います。