■ 何が困っていたか
試験を選ぶと科目の一覧が出る画面があります。
この画面は、「1ページ10行、2ページまで」という作りでした。
科目が11個以上ある試験では、下に進むボタンを押して2ページ目を見る必要があります。
一見ふつうに見えるのですが、内部はかなり無理をしていました。
・科目が10個ちょうどの試験では、次ページボタンを隠す特別処理
・科目が19個の試験では、合計を出す行が入りきらない
・「2ページ目の何行目か」を計算する式があちこちに散らばる
・試験の種類が増えるたびに、この例外処理が増えていく
つまり「10行で区切る」という前提そのものが、コードを複雑にしていました。
■ どう直したか
考え方はシンプルです。ページをやめて、全部を1画面に並べ、はみ出したぶんはスクロールで見てもらう。
Unity には ScrollView という、スクロールできる領域を作る仕組みが用意されています。これを使って、行を最大22行ぶん最初から画面に並べておき、必要な行だけ表示する形にしました。
なぜ22行かというと、
・科目そのもの … 最大20
・合計を出す「集計行」 … 1
・画面下に出す注意書き … 1
を足した数だからです。
これでページの概念が消えたので、「10行を超えたら」「2ページ目なら」という判定がまるごと不要になりました。削除できた例外処理は5種類ほどです。
■ データはいじらない、という縛り
学習の記録（正解数、得点、未解答の数など）は端末の中に保存されています。
この保存形式を変えてしまうと、これまでの記録が読めなくなったり、消えたりします。
それは絶対に避けたい。
そこで「画面の作りは変えるが、保存されるデータの形式は一切変えない」という方針にしました。
具体的には、内部の番号の持ち方を工夫して、旧バージョンと同じ形式のまま新しい表示ができるようにしました。
■ 合計の行が出ない試験があった
作り直している途中で、思わぬ問題が見つかりました。
科目の情報はスプレッドシートから読み込んでいるのですが、1つの試験につき20行までしか持てません。ある試験では科目が19個あり、そこに集計行が入って20行ちょうど。注意書きを入れる余白がありませんでした。
別の画面では逆に、注意書きが20行目を使っていて、集計行のほうが入っていませんでした。だから合計が表示されなかったのです。
これも、データを増やさずに解決しました。
「集計行がデータに無ければ、プログラムのほうで勝手に1行差し込む」
という仕組みにしたのです。表示する行と、データの行を別々に管理するようにしたので、データに無い行を途中に挿入できるようになりました。
■ 見た目の調整でハマったこと
機能が動いたあと、見た目の細かい問題がいくつも出ました。
ひとつは、行の背景に薄い影が出ることです。原因は、Unity が最初から用意しているボタンの画像に、影が絵として描き込まれていたことでした。
ふだんは色を薄くしているので目立たないのですが、集計行だけ真っ白にしていたため、影がそのまま出ていたのです。
画像を使うのをやめて、単色の塗りに変えたら消えました。
もうひとつは、行と行の区切り線です。画像をやめたので枠も消えてしまい、表がのっぺりしてしまいました。そこで、各行の下端に細いグレーの線を1本置くようにしました。
縦線は無しで、横線だけ。このほうがすっきりします。
■ 前に見ていた科目に戻る
最後に、使い勝手をひとつ足しました。
科目を1つ選んで問題を解き、一覧に戻ってきたとき、さっき選んだ科目に色を付けて、その行が見える位置まで自動でスクロールするようにしました。
科目が20個あると、毎回いちばん上から探すのは面倒です。続きから再開しやすくなったと思います。