前回は実際にプロダクトを開発し、リリースするところまでできました。といってもSprint1は環境にもプロダクトにも慣れていないからまだまだしょぼいものですが、Sprint2からペースを上げていきたいと思います。
今回できたプロダクト
スプリントプランニング
今回のスプリントでやるのは開発４つ、改善１つでストーリーポイントとしては９です。全スプリントが６だったのですが、感覚的にはいけそうな気がしているのでチャレンジしようかと思います。
なお「よりよい稼働環境を探す」はレトロから上がってきた改善なので最優先で行うべきという話もあるでしょうが、個人的にはレトロの取り組みを必ず最優先にしなきゃいけないとは思っていません。ただ継続的に改善を図ること、改善するマインドを持つことは非常に大事なので優先度を言い訳に改善ができないことは避ける必要があるかと思っています。
ライトなテーマに変える
受入条件は明るい背景になることです。ボタンのカラーとかは悪くなので背景だけでいいです。10分ですね。
前のクイズを表示できる
10分ですね。
クイズの答えを表示できる（単一フリー回答式）
受入条件はクイズの答えを非表示の状態で初期表示され、ボタンを押すと回答が表示されることです。30分ですね。
ゲームのお題を出題できる
受入条件はお題が非表示の状態で初期表示され、ボタンを押すとお題がランダムに表示されること、繰り返しランダムにお題を出題できることです。これはクイズとコンポーネント分ける必要ありますし、共通化も必要になりますね。60分。
よりよい稼働環境を探す
受入条件は新しい稼働環境を見つけてデプロイを試してみるところまでです。60分くらいですかね。
その他
プランニング15分＋リリース10分＋リファインメント10分＋レビュー10分＋レトロ15分の60分見込みです。
トータル3時間50分
開発（ライトなテーマ、前のクイズ、クイズの答え）
すぐに終わりそうな3件を片付けます。
なおテーマについてはnuxt.config.jsでdark: falseを指定して、lightを作るとできました。
// Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
vuetify: {
customVariables: ["~/assets/variables.scss"],
theme: {
dark: false,
themes: {
dark: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3,
},
light: {
primary: colors.blue.lighten2,
accent: colors.deepPurple.lighten2,
secondary: colors.amber.lighten3,
info: colors.teal.lighten4,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3,
},
},
/*以下追加*/
options: {
customProperties: true,
},
},
},
出来上がりはこんな感じです。
開発（ゲームのお題）
以下のような感じになりました。今回の対応によって「クイズ」と「ゲーム」ができるようになったのですが、今のところトップページがありません。そのため双方を行き来する方法がないです。仕方ないので遷移したときにランダムで「クイズ」か「ゲーム」を表示するということにしました。
構造としてはお題（「わ」の部分）より上は共通でindex.vueに実装しています。お題以下はクイズとゲームでコンポーネントを分けています。以下の3ファイルです。
かなり苦労した点
Quiz.vueやGame.vueで値を取得して、共通部分の表示ついてはindex.vueに値を受け渡して表示していたのですが、画像がどうしても表示されずに悩みました。調べてみるとVue.jsは変数の変更を検知してくれますが、オブジェクトの変更を検知してくれないようです。以下のソースがindex.vueで子から値を受け取っている部分ですが、上のコードでは画像が表示されず、下のコードだとうまく動きます。いまだにわからないのが、json_dataに格納されたタイトルはちゃんと表示されるのですが、画像だけが表示される点です。理由がわかる方いたら教えてください。
methods: {
getJsonData(data) {
// これだと画像だけ表示されない
this.json_data = data
// これだとうまくいく
this.json_data = Object.assign({}, data, { data })
},
},
参考にしたページ
https://jp.vuejs.org/v2/guide/reactivity.html#オブジェクトに関して
よりよい稼働環境を探す
とりあえず適当に調べてみるといくつも参考になりそうなページがでてきます。今回Firebaseを使っているので一番下のページを参考にしようと思います。Pipelineとかはもう少し余裕があるときにやろうかと思います。
【Nuxt.js】Nuxtはどこにデプロイするべきなのか
Bitbucket Pipelinesを使ってCIでNuxt.jsのページをFirebase Hostingへ公開するはなし
Nuxt.js プロジェクトを Firebase Hosting にデプロイして公開する方法
デプロイしてみる
Firebaseのプロジェクトはすでに作ってあるので簡単にできました。ただ、普段はスプリント毎にフォルダを切っているのですが、サブフォルダを指定しているとうまく動かなかったため、ルートフォルダを使用するようにしました。
SFTPソフト使わずにコマンドだけで完結するし、使い始める手間も低くてかなり良かったです。10GBまでは無料枠で使えるみたいですし。ただ今回の開発ではスプリント毎に作ったものを動く状態で残しておきたいです。その要望に応えてくれるものではなかったので、これまで通りレンタルサーバを使おうと思います。というか正直結論は調べる前から想定していましたが、勉強のために調べてみた感じです。
その他
バックログリファインメント
全スプリント同様、直近のバックログについては受入基準を簡単に考えておきます。
・選択したクイズとゲームのページに遷移できる
サイドバーを設けて、一覧が表示されること、クイズやゲームのページに遷移できることが受入条件です。
・ゲームのお題を色で出題できる
いまはひらがな一文字で出題していますが、色で出題できるようにします。文字じゃなくて背景色などで表現します。
・10個以上のゲームができる
いまは2個なので最低8個増やします。
・クイズを出題できる(複数フリー回答式)
出題できればOK
・クイズの答えを１つずつ見られる（複数フリー回答式）
1つずつ答えを表示できること（全部一気に開くのはできなくてよい）
リリース
以下のサイトをリリースしました。
http://ay5399.e2.valueserver.jp/sp2/
スプリントレビュー
・・・忘れてました。スプリントレビューやる人がいないんでした。すみませんが、今回もセルフレビューにします。
前回はとりあえず動いた！ということで盲目的なレビューになっていた気がしましたが、そろそろ使い勝手が気になるようになってきました。
（良い点）
・お題をすぐに出題しなおせるのがいい。アイスブレイク中に止まってしまうと微妙の空気が流れるので、すぐにお題を出題しなおせる機能は便利
（悪い点）
・ランダムにクイズとゲームが表示されるのがユーザにはわからない
・出題されるクイズやゲームの順番が固定なので一度しか使う気にならない。
・クイズもゲームも種類が少ない。そのため利用イメージがしづらい。
・ボタンの文字が小さくて見えづらい。
レトロスペクティブ
今回のレトロはYWTで行いました。やはりこっちのほうが書き出し安かったです。
レトロの中では3点つぎにやることを上げましたが、JSONの編集ツールと探すのをやってみようかと思います。ちなみにレトロではあがった改善はすべて取り組もうとするのはやめた方がいいです。すぐにできる改善はいいのですが、工数が発生する改善は１～２つくらいにしておかないと全部中途半端に取り組んでどれも片付かないということが起こりがちです。少しずつでいいので改善を続けていくというスタンスでやった方が欲張るよりもチームとして成長すると思います。
終わりに
今回は2回目の開発スプリントを終え、ゲームの出題、デプロイ先の検討を行いました。シンプルにクイズを出題するだけのサイトだったのが、ゲームの要素が増えたことでアイスブレイク感が強くなった気がします。ただそれに伴って粗が目立ってきた気もします。あと１～２スプリントもすると実際に使ってみたいと思えるようなサービスになってくるのではないかという感触です。
