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

前回の続きなのですが、記録機能の方を実装していきたいと思います。

では、メインストーリーボードを選んでください。

ここに新しくひとつViewControllerを実装します。

ここにTableViewも追加していきます。

テーブルビューはこれになります。

これを画面上にドラッグ＆ドロップして追加してください。

で、画面の上の方にちょっと隙間を作りましょう。

これは、ステータスバーとかぶらないようにするためです。

画面下の方にちょっと隙間を空けて、ここに「戻る」ボタンを付けていきましょう。

ここに１個ボタンを追加して、ここに「戻る」と表記します。

ここにセルの方を追加していきます。

セルはこれですね。これを、ドラッグ＆ドロップで追加していきます。

このセルに、identifierというものを作ります。

これは何に使うかというと、コードの方でこれを識別するために使うんです。

今日はすごくシンプルに、「Cell」といれていきます。

ちょっと狭いので、伸ばしておきましょう。

伸ばして、背景色を設定して、いくつかLABELを分けていきましょう。

記録を表示するためなので、まず名前と性別と点数を表示するようにしていきましょう。

LABELを、ちょっと横に伸ばしましょう。

LABELを２個。LABELを３個追加していきましょう。

こんな感じですね。

で、それぞれLABELのTagというものをつけていきます。

Tagはコードの方で、このセル上のこのLABELなどのビューを識別するために使うものです。

ここのTagが「１」、ここのTagが「２」、ここのTagが「３」をつけていきます。

このTableViewを制御するためのViewControllerが必要です。

今からそれを追加していきます。

このViewControllerのあたりで、[New File]をして、新しい「Cocoa Touch Class」を

追加していきましょう。

「RecordViewController」っていうのを追加していきます。

Languageは[swift]を選択します。

「Create」で新たなファイルが追加されました。

「RecordViewController」です。

この「RecordViewController」を、ここのカスタムクラスのところで設定していきます。

CLASSのところで、今作った「RecordViewController」を設定します。

そして、この「RecordViewController」ですが、

TableViewを使うために必要ですけれども、

データソースとdelegateというものを設定していきましょう。

このViewControllerを選択しまして、「Referencing Outlets」というものがあります。

この右側の白い丸を引っ張っていって、データソース。

もう一回引っ張っていって、delegateを選択しましょう。

これは何かと言いますと、このTableViewを制御するための

メソッドがいくつかあるんですけれども、

それらが全て、この「RecordViewController」の中に実装しますという意味ですね。

では次、コードの方いきます。

今作った「RecordViewController」の方にいきましょう。

こちらの方で、いくつか記述を追加していきます。

先ほども言いました、TableViewを制御するためのメソッドをここに実装するためには、

２つプロトコルをいれないといけないです。

「UITableViewDataSource」と、「UITableViewDeledate」です。

この２つを投入します。

（エラーが発生しますが、）これはメソッド群を実際に実装しないとエラーが

起きてしまうということですね。

そのメソッドを実装すれば問題ないです。

そのTableViewを制御するためのメソッドをどんどん書いていきましょう。

tableViewのnumberOfRowsInSectionですね。

これに書いていきます。

その前に、AppDelegateの記述が必要でした。

今回は前回とはちょっと違ったAppDelegateの書き方をします。

var aD:AppDelegate!

ここでは、！だけつけて、宣言だけしておきます。

そして、viewDidLoadの中で、aDだけ変えていきます。

aD = UIApplication.sharedApplication().delegate as! AppDelegate

です。これでＯＫです。

このAppDelegateの中に、記録が入っている配列があります。

recordsでしたね。recordsの中の要素数、countの数だけ行を

表示してやるということになりますので、

こういう書き方をしてやれば大丈夫です。

もう１つ必要なメソッドがあります。

func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell 

です。

この中に、必要な記述をしていきます。

これで、先ほどのエラーが消えました。

ここにreturnです。

先ほどのnumberOfRowsInSectionは、

Tableに表示する行の数を指定するメソッドなんですけれども、

このtableView:cellForRowAtIndexPathのメソッドは、各セルの中に表示すべき内容を指定するメソッドになります。

まずはこう書きます。

cellを、TableViewの方から取ってきます。

正確には、再利用可能なcellを取ってくることになります。

var cell = tableView.dequeueReusableCellWithIdentifier

ですね。これに識別子を指定して、cellを取ってくることになります。

"Cell"という名前ですね。asでCastして（asのあとに！が必要です。）

var cell = tableView.dequeueReusableCellWithIdentifier("Cell") as! UITableViewCell

となります。

で、このcellに表示すべき内容は、LABELをこのcellから取ってきて、

そこに表示するというロジックで組んでいきます。

cellのviewWithTagで、最初のTagは１番でした。

var nameLabel = cell.viewWithTag(1) as! UILabel

になります。

そして、

nameLabel.textに表示すべき内容は、Delegateから持ってきます。

recordsの何番目か、それはTableの上から何番目かということなんですけれども、

これはindexPath.rowに入っています。

indexPath.rowの配列の0番目の要素です。

そしてここはnilである可能性がありますので、

asのあとは！ではなく、ここは？にします。

そして文字列が入ってくるので、Stringです。

次です。

var genderLabel = cell.viewWithTag(2) as! UILabel

genderLabel.text = aD.records[indexPath.row][1] as? String

次はscoreLabelですね。

これはコピーして作った方が早いかなと思います。

scoreLabelですね。scoreLabelは３番目の要素ですね。

var scoreLabel = cell.viewWithTag(3) as! UILabel

これは文字列ではなく数値型のデータですので、別の書き方をします。

indexPath.rowの２番目の要素ということなんですけれども、int型にします。

let score:Int = aD.records[indexPath.row][2] as! Int

そして、このint型のscoreという変数－というか定数なんですけれども－

をLABELに文字列に変換して表示してやるという風にしていきます。

scoreLabel.text = "\(score)%"

あとは、return cellで、cellの表示内容が決定することになります。

次は画面遷移です。

記録画面への画面遷移を作っていきましょう。

ストーリーボードですね。

「すた～と」ボタンの下に、もう１つボタンを作りましょう。

「きろく」ボタンを作りましょう。

この「きろく」ボタンなんですが、特にIBActionの紐付は無いみたいです。

で、この「きろく」ボタンから、記録画面への紐付を行いましょう。

modalで画面遷移しましょう。

で、この「戻る」ボタンを押したら元の画面に戻るように設定していきましょう。

この「戻る」ボタンを、Exitを使って戻るようにしていきます。

このExitをクリックしますと、goTitleがありますね。

このgoTitleの右側の白い丸を「戻る」まで引っ張っていって、離す。

で、Actionを選択します。

これでこの「戻る」ボタンを押したら、元の画面に戻れるはずです。

はい、それでは実行して動作を確認してみます。

まだエラーがある可能性がありますけど。

エラーが発生したら、直すようにしていきましょう。

はい、アプリを起動しました。

とりあえず、「すた～と」をして、記録を作っていきましょう。

名前をいれて、名前は「Tekuru」にしましょうか。

適当な選択肢をいれて、「診断する」と。

「タイトル」に戻る。

「きろく」を見る、と。

「Tekuru 男 0%」と表示されてますね。

さっきは50%と表示されていたのに、0%と表示されている。

ですから、ここは何かおかしい、と思います。

ここはちょっと見ていきましょう。

まずは、LABELのTagが正しいか。

これは３番のTagが入っているはずです。

正しいです。３番が入っています。

となると、コードの方がどこかおかしいはずです。

コードの方のscoreLabel、ここです。

で、ここを見てみて、

cell.viewWithTag(3)

と書いています。

let score:Int = aD.records[indexPath.row][2] as! Int

scoreLabel.text = "\(score)%"

まずintで取得して、textを表示するということをやっています。

ではbreakPointで止めてみて、変な変数がないか確認してみましょう。

「きろく」。

まだこの段階では何も入っていないです。

「すた～と」して、名前が「Tekuru」で、「次へ」で選択して、

「診断する」、「タイトル」ボタンで、「きろく」ですね。

scoreLabelがちゃんと取得できてますね。

scoreがint。

ちょっとこれで見てみましょう。

…

ちょっと見れないみたいですね。

本来だったらこのボタンで表示されている要素が見れるはずなんですけど。

scoreが0になっていますね。

これはおかしいです。

ちゃんとデータが記録されていない可能性があります。

では、aDを見てみましょう。

selfのaD。

aDの中の、score。

scoreが0になっていますね。

原因がわかりました。

scoreを0にした後に記録しちゃってるんですね。

ResultViewControllerの、このscoreに0をセットするのを、

記録した後にしましょう。

これで大丈夫かなと思います。

breakPointを消去して、もう一度やってみましょう。

「すた～と」して、名前は、「Tekuru」。

適当な選択肢を選択しまして、「診断する」。

「タイトル」へ戻って、「きろく」。

6%。

えっと、これもなんかおかしいです。

ResultViewControllerにいってみましょう。

先ほど、他の方は正しく表示されたと思うので。

（診断を実施します。）

35%ですね。

で、「タイトル」に戻りまして、「きろく」。

7%になっています。

そっか。scoreを5倍して、結果画面に表示していたんです。

同様に、ここ（ResultViewController）でも5倍して表示しないといけないです。

なので、ここにscore * 5と書いておきましょう。

これで、再び実行していきます。

（診断を実施します。）

50%ですね。

「タイトル」に戻って「きろく」を見ると、今度はちゃんと

50%と出ていることがわかります。

はい、ここまではこれでうまくいったことになります。

以上で、記録機能まで実装できました。

ここまで、だいたいの今回のアプリの機能は実装できたことになります。

次回の動画では、最後の仕上げを行いたいと思います。

・

・

・

 

次の動画に続く・・・

 

To be Continued

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

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

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

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