初心者から始める診断系アプリの作り方（2/5）

質問の画面を作っていきます。

右下から、ViewControlerを画面上に載せていきます。

背景色を設定して、質問をいくつか載せていきます。

質問の前に、名前と性別を入力するところを作っていきましょう。

「お名前は？」ですね。

文章を入力するためには、テキストフィールドというものを使います。

このテキストフィールドを、「お名前は？」という質問の下に載せていきましょう。

次に、「性別は？」という質問を書いていきましょう。

次に、「質問１」と書いていきます。

今回は具体的な質問と回答の選択肢までは書きませんので、

診断アプリを作りたい方は、各自質問の内容と選択肢を考えてください。

選択肢は4択ぐらいにしましょう。4つを選択します。

最初の回答は「選択肢１」にしましょう。

あとは「選択肢2」「選択肢3」「選択肢4」とします。

最初の質問画面では、この質問を3つ並べたいと思います。

そしてボタンを1個置いて、「次へ」と表示させます。

ここまでが、最初の質問画面です。

次の質問の画面を作りましょう。

このViewControllerを、まるごとコピー&ペーストします。

で、これを次に並べましょう。

名前と性別の質問はもういらないので消して、

代わりに、セグメントコントロールによる、

質問の選択肢をもってきます。

質問1、2、3ときましたので、質問4、5、6、7、8を作ります。

これで質問が8つ。選択肢に合わせて、セグメントコントロールによる選択肢が各4つできました。

で、「次へ」のボタンをコピーして、「診断する」に変更します。

次に、結果表示画面を作っていきましょう。

ViewControllerを１つ、ドラッグ ＆ ドロップします。

そして、その背景色を設定していきますね。

WHITEカラーではなく、ちょっと黄色っぽいもの。これまでと同じような背景色にします。

そして、LABELを載せていきます。

「あなたは」にラベルを変更します。

「80%」ぐらいにしておきます。

ちょっと見た目を整えます。

文字の色を赤にして、フォントサイズをちょっと大きくします。

「Style Midium」くらいにします。

そして、「あなたは80%面白い！」という表示にします。

「例えるなら」というラベルの文字列にします。

「お笑い芸人級」にします。

ここの表示は、この「80%」のところと「お笑い芸人級！」というところの表示は、

結果のスコアによって、別々の表示がされることになります。

ここ（「お笑い芸人級！」）の、文字の色は青にしておきましょう。

ここも、でかいフォントを使いたいと思います。

ボタンを2個ほど配置して、それぞれ「タイトル」と「リトライ」にしましょう。

こんな感じで画面を作っていきたいと思います。

次に、この画面同士が遷移できるようにします。

まずこの「すた～と」ボタンを押すと、次の画面へ遷移するようにします。

Contorolボタンを押しながら、この「すた～と」ボタンから次の画面へ引っ張って行ってください。

「push」「modal」「custom」と表示されますので、「modal」を選択して下さい。

次も同様です。「modal」です。

次も同様です。引っ張っていって「modal」です。

各ボタンを押すと、次の画面へ遷移できるようになります。

次に、「リトライ」と「タイトル」ボタンを押すと、元の画面に戻れるようにしましょう。

そのためにはちょっと、コードを書かないといけないですね。

「ViewController.swift」に、記述を追加してください。

@IBAction func goTitle（segue: UIStoryboardSegue）

と書いてください。

こう書くことで、ストーリーボードの最後の画面から、

この画面へ戻るためのSegueをつなぐことができます。

ストーリーボードを選択し、

最後の画面の上に、3つアイコンが並んでいますが、一番右のEXITを選択して下さい。

そして、一番右側のこのいわゆる「コネクションインスペクタ」というところを選択すると、

「goTitle」という選択肢が出てきます。

この右側の白い丸を、「タイトル」というボタンまで引っ張っていって離してください。

そこで、「Action」を選択しましょう。

こうすることで、「タイトル」ボタンを実行すると、goTitleというメソッドがある画面まで戻ることができます。

ViewControllerの画面、すなわち最初の画面に戻ることができるわけですね。

ちなみに、1つの画面につき、1つのViewControllerが基本的には必要になります。

今回4つの画面がありますので、4つのViewControllerというものを用意していきましょう。

まずこの、ViewController.swiftというものを選択します。

そしてControlしながらクリックして、

「New File」-「Cocoa Touch Class」を選択して「NEXT」。

「Subclass of」のところで、「UIViewController」と表示されるように入力してください。

「Class名」は、画面ごとに違う名前を付けていきましょう。

質問画面1ですので、「Question1ViewController」という名前にしましょう。

Languageはswiftを選択してください。

ここ（also create xib file）はチェックしないでください。

「NEXT」を押して、「Create」して、

最初の質問へ遷移するためのViewControllerができました。

もう一回「New File」をクリックして、「Cocoa Touch Class」-「NEXT」。

（Classは）「Question2ViewController」を作っていきましょう。

「NEXT」を押して、「Create」。

あと、結果画面です。

「New File」＞「Cocoa Touch Class」-「NEXT」。

（Classは）「ResultViewController」ですね。

「NEXT」。を押して「Create」ですね

これでＯＫです。

Main.storyboadを選択しまして、各画面に各ViewControllerを対応させていきましょう。

Customクラスのところ。ここで設定できます。

ViewControllerを選択して、Customクラスですね。

Customクラスのところで、「Question1ViewController」。

2番目の質問画面は「Question2ViewController」。

そして、3番目の画面は「ResultViewController」を対応させていきましょう。

先ほど「タイトル」ボタンを押したら、最初のタイトル画面へ戻るようにしましたね。

同様に、リトライボタンを押したら、質問1画面に戻るようにします。

そのためには、Question1に、先ほどのIBActionを使って、

Exitに必要な記述をしていきます。

@IBAction func goQuestion（segue: UIStoryboardSegue）

ちなみにこのメソッド、中身は何も書かなくても構いません。

そして、最後の画面。

これはExitをクリックしますと、「goQuestion」という選択肢が増えているかと思います。

この「goQuestion」の右側の白い丸を「リトライ」まで引っ張って行って、

「Action」を選択しましょう。

ここまでで、画面遷移は完成になります。

実際に実行してみましょう。

今回iPhoneの5s用に画面を作りましたので、

とりあえず今は、iPhone5か5sを選択してください。

今回はMacの画面上で仮想的にiPhoneを動かすシミュレータというものを使って

動作を検証していきたいと思います。

左上の実行ボタンを押してみましょう。

ちょっと時間かかりますけど、シミュレータが立ち上がりまして、アプリが動きます。

ちょっと待ちます。

Macのパフォーマンスにもよるのですが、

長くても20秒以内には立ち上がるかなと思います。

「すた～と」ボタンをタップして、「次へ」「診断する」。

「タイトル」をタップすると、最初の画面に戻る。

また、「リトライ」で、最初の質問画面に戻ることができました。

今回は主にストーリーボードを使って、画面遷移をすること、

及び画面を作ること、画面のUI/UXを作ることまで行いました。

次回以降、コードの方をどんどん書いていきたいと思います。

・

・

・

 

次の動画に続く・・・

 

To be Continued

Tekuruプログラミングスクールでは、

動画だけでは伝わりきらない、アプリ開発の楽しさや、

気軽に質問できる雰囲気で、プログラミングを学ぶことができます。

もっと深く、プログラミングを理解したい方は、ぜひ無料体験にお越しください。