サービス紹介
座席数を指定して、生徒を指名できる、シンプルなアプリです。
使い方
座席数を指定して、後は指名ボタンを押すだけ!
きっかけ
きっかけは自分自身が生徒だった時に、授業を受けている際に「あれ、なんか前の席の人ばっかり当てられてるな〜」と感じたことから始まりました。
そして、実際に2年ほど教師をしていたのですが、前の席の人はやはり当てやすいのです。
出典
https://www.paylessimages.jp/detail.php?id=gf1420736473
一回一回の授業ではそこまで差は出ませんが、一年も続けると席が固定の場合、とても不公平になるかと思いました。
そこで、生徒をランダムに指名してくれるアプリを作りました!
このアプリを使えば不公平がないかつ、誰が当たるかわからない緊張感もある、楽しい授業がしやすいかなと感じます。
使用技術
- vue.js(2.0)
- Firebase
- Vuetify
ハマったところ
Vueのコンポーネント志向を活用しようと、トップページと、列と、一つ一つのセルという三つのコンポーネントを作成しました。
<v-row class="row py-0 px-0" v-for="i in changeHeight" :key="i" color="blue darken-2">
<Row :mathWidth="mathWidth" :rowId="i" :propRandomId="propRandomId"/>
</v-row>
<v-col
class="pa-0"
justify="center"
v-for="i in changeWidth"
:key="i"
>
<Cell :id="rowId + '_' + i" :ref="rowId+'_'+i">
</Cell>
</v-col>
縦横の席数を受け渡して全体を表示しています。
こちらの受け渡しはpropsを使用しているのですが、うまく受け渡せなかったり、予期せぬ挙動が生まれたりと、そこそこ大変でした。
storeを使うべきか、propsで良いのかという判断がなかなか難しいです。
また、ランダムに指定した席ひとつだけ赤くするという処理も、一つ一つのCellに
1_1 1_2 1_3
2_1 2_2 2_3
とインデックスを付ける処理ですが、
watch: {
propRandomId: function () {
for(let i = 0; i < this.mathWidth; i++){
this.$refs[this.rowId+"_"+(i+1)][0].$el.children[0].style.backgroundColor="lightgray";
}
if(!this.$refs[this.propRandomId]){
return
}
this.$refs[this.propRandomId][0].$el.children[0].style.backgroundColor="red";
},
},
$refsを使ってかなりむりやりやっています。
もっとスマートにかけたらよりいいのかなーとか思ったりします。
今後の改良点
もし反響が大きければ
- より素敵なアニメーションの実装
- 席に生徒名を設定できる機能
- 一度当たった人は除外して再抽選
あたりの機能は実装したいなと考えています。
LGTMやツイートの拡散などしていただけると本当にありがたいです、、、
おまけ
Twitterで一緒に個人開発してくれる人、一緒にプログラミングを勉強してくれる人を募集しています!
結構発信しているので、是非ともフォローをお願いいたします。
また、開発を手厚くサポートしてくれたメンターさんには本当に頭が上がりません、。
ありがとうございました。
サービス
参考