サービス紹介

座席数を指定して、生徒を指名できる、シンプルなアプリです。

使い方

座席数を指定して、後は指名ボタンを押すだけ！

きっかけ

きっかけは自分自身が生徒だった時に、授業を受けている際に「あれ、なんか前の席の人ばっかり当てられてるな〜」と感じたことから始まりました。
そして、実際に２年ほど教師をしていたのですが、前の席の人はやはり当てやすいのです。

出典
https://www.paylessimages.jp/detail.php?id=gf1420736473

一回一回の授業ではそこまで差は出ませんが、一年も続けると席が固定の場合、とても不公平になるかと思いました。
そこで、生徒をランダムに指名してくれるアプリを作りました！

このアプリを使えば不公平がないかつ、誰が当たるかわからない緊張感もある、楽しい授業がしやすいかなと感じます。

使用技術

vue.js(2.0)
Firebase
Vuetify

ハマったところ

Vueのコンポーネント志向を活用しようと、トップページと、列と、一つ一つのセルという三つのコンポーネントを作成しました。

HelloWorld.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>

Row.vue

      <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

とインデックスを付ける処理ですが、

Row.vue

    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で一緒に個人開発してくれる人、一緒にプログラミングを勉強してくれる人を募集しています！
結構発信しているので、是非ともフォローをお願いいたします。

また、開発を手厚くサポートしてくれたメンターさんには本当に頭が上がりません、。
ありがとうございました。

サービス

参考