前回はゲームの出題ができるようになりました。今回はもっと機能を充実させていきたいです。
今回できたプロダクト
あと今回から最新のモジュールはルートに格納するようにしました。以下のURLになります。
今日のアイスブレイク(最新) ※2022/3/1 URL修正
スプリントプランニング
今回は開発4件、改善1件です。トータル8ストーリーポイントです。前回は9ストーリーポイントできたので、まあいけるでしょう。
JSONの編集ツールを見つける
2~3個よさそうなツールを見つけて触ってみようと思います。「10個以上のゲームができる」というバックログでデータ作成が入るのでそこで活用できそうです。30分くらい。
選択したクイズとゲームのページに遷移できる
①サイドバーを設けて、②一覧が表示されること、③クイズやゲームのページに遷移できることができるようにします。やることが3つで各20分、トータル60分くらいですかね。
ゲームのお題を色で出題できる
いまはひらがな一文字で出題していますが、色で出題できるようにします。文字じゃなくて背景色などで出題します。10分ですね。
10個以上のゲームができる
データ作成ですね。1つ5分として40分くらいでできるでしょうか。
クイズを出題できる(複数フリー回答式)
出題自体はできるのでデータ作成ですね。10分。
その他
プランニング15分+リリース10分+リファインメント10分+レビュー10分+レトロ15分の60分見込みです。
トータル3時間30分です。
JSONの編集ツールを見つける
いくつか使ってみました。
JSON Online Editor
よさそうです。コードでもツリーでも編集できるし、並び替えの機能があったり便利です。ただ微妙に操作性がよくないことがあり、Ctrl+Zとか効いてくれませんでした。

JSONedit
ダウンロードして使うエディタです。一番JSON編集向けの機能があるように感じましたが、UTF8のテキストを読み込むと化けました。ていうかSJISでもEUCでもUnicodeでも化けました。何かやり方があるのでしょうか。

Visual Stuido Code
なんだかんだテキストとして編集するのが一番楽でした。最低限の構文チェックやフォーマッターは使えるのでそれで充分です。ということでJSONはVisual Stuido Codeで編集しようと思います。

Firebase
Firebaseのエディタも悪くなかったかもしれません。JSONをダウンロード、アップロードする必要がないですし、1~2件データを投入するくらいならFirebaseで直接編集が効率的でしょう。
選択したクイズとゲームのページに遷移できる
・・・がこの時点ですでに2時間かかりました。
原因1
選択されたゲームやクイズの番号を、親(Index.vue)から子コンポーネントに渡すのですが、子コンポーネントで値を受け取ることができませんでした。以下のページを参考にして何とか解消しましたが、一度解消してしまうと再発せず、なぜ今まで値が渡せなかったのかわからない気持ち悪い状態になりました。
【ビギナー脱却】Vue.js これであなたもPropsマスター
原因2
以下のメッセージがでました。原因は単純な変数名の誤字(×detal_no、〇detail_no)なのですが、原因1で値を受け取れないという事象と同時に起こったので、なんか受け渡しがうまくいっていないのでは?とか邪推をして時間をかけてしまいました。
Property or method "detal_no" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
ゲームのお題を色で出題できる
以下のデータを追加しました。1件だけなのでFirebase上で直接編集しました。

出来上がりはこんな感じです。「お題を表示」を押すと真ん中の〇の色が変わります。

10個以上のゲームができる
何とか10個ひねり出しました。「ひらがな」「色」というお題だけでは思いつかなかったので、「お題なし」も実装しました。やはりこの件数になるとVisual Studio Codeでの編集が楽でした。

クイズを出題できる(複数フリー回答式)
残念ながらタイムアップでここまでできませんでした。
その他
リリース
以下のサイトをリリースしました。
http://ay5399.e2.valueserver.jp/sp3/
リファインメント
例によって直近のバックログの受入基準を設けます。
・クイズを出題できる(複数フリー回答式)
出題できればOK
・クイズの答えを1つずつ見られる(複数フリー回答式)
例えば好きなカップラーメンランキングTOP10をお題として、回答者はそれを当てる。当てたパネルを空けることができる。
・3種類以上のクイズができる
「なぞなぞ」、「ラインキング当て」、「漢字クイズ」の3つとします。
・1種類当たり10個以上のクイズができる
そのままです。
レビュー
またしてもセルフレビューです。サイトとしてはできてきたのでそろそろわくわく感が生み出せるとよいのですが。
(良い点)
・ゲームのタイトルだけでどんなゲームだろう?と想像するものが多い。楽しそう。
・ナビゲーションバー適当に作ったけどそれなりにオシャレ。Vuetify標準のアイコンが手軽に使えてGood!
・レトロの改善で上げたJSON編集についてすぐに活用できた。
(悪い点)
・ゲームの説明文を簡略にしすぎて伝わらないことがありそう。
・ゲームの説明文がわくわくしない
・ナビゲーションから選ぶという操作がわくわくしない
レトロ
今回のレトロはこんな感じです。お恥ずかしいバグに悩まされたのが悔しいですが、えてしてそんなものだと割り切ろうと思います。そろそろ第三者の意見をもらわないと迷走しだしそうなので誰か見てくれる人を探そうと思います。

終わりに
今回はナビゲーションバーを作ってゲームを拡充しました。次回も機能追加よりもゲームやクイズの拡張をしたいのですが、その前に第三者に見てもらうようにしたいと思っています。ほんとはゲームの拡充する前にやっておくべきでしたね。ついでに記載している出題文で意味が通じるかも見てもらわねば。
もちろん記事を読んでくれている人からのご意見もいただけると非常にうれしいです。ぜひぜひよろしくお願いします。


