[Vue.js] 生徒を重複なしにランダムで選ぶwebアプリ [Randomer]

はじめに

どうも、教育関係者と話すことが多く、教育現場で使えそうなアプリを作りたくなった人です。

今回紹介するのは、そんな教育アプリの第一号、事前に登録した生徒たちから重複なしにランダムで選出するアプリ、通称 Randomer を紹介します。

後半に技術的な話をしているので、そっちもどうぞ。

主な機能

• 生徒をランダムに選ぶ

これだけです。

使用方法

ページを開くと、こんなダイアログがでてくるので、Googleでログインします。

クラス・生徒の追加/編集

PCは上のメニューバーにある [Edit] と書かれた場所を、
スマホ版は左上にある [≡] を押し、 [Edit] をクリックし、
エディットページに移動します。

画面右下にあるこのボタンをクリック

出てくるダイアログに、追加したいクラスの名前を入力、Addを押します。

そうすると、こんなカードが出てきたと思います。

このカードの [USE THIS] をクリックします。
そうすると、このように表示が切り替わります。

初期値の [A, B, C, D]が入っているので、全部削除します。
そのご、追加したい名前を [生徒名] の中に記述し、Enterキーか [Add] ボタンを押し、追加します。

ランダム選出

メインの機能を紹介します。

Randomページに移動します。
編集の時と同じ要領で、クラスを選択します。
そうすると、このようにボタンが四つ表示されると思います。

• CHOOSE：ルーレット開始 ランダムで誰かが選ばれる
• SAVE：誰が選ばれたかの情報を保存する
• SHOW LIST：既出リストが表示される （誰が選ばれたか一目でわかる）
• HIDE LIST：既出リストを隠す

既出リストは、全員選ばれるとリセットされます。

これで、あの理不尽な選ばれ方をされなくて済みますね！

仕組み

データベース

データの保管は [Firebase Realtime Database] で行っています。
Sparkプラン(無課金プラン)なので、同時に100人までしか使えません

データベースを利用したアプリの公開経験が無いので、どれくらい使用されるか一切わかりません。
なので、リリースして少したってからBlazeプラン(課金プラン)に移行するか検討します。

ランダム選出

ランダムに重複せずに選出する方法は、選ばれていない人のリストを作成し、その中から選んでいます。
すでに選ばれた人たちは表示できるようにしようと思い、既出リストがクラスのデータの中に含まれています。
未出リストはその既出リストと生徒リストの差分を入れます。
これにより、まだ選ばれていない人たちだけを選出することができます。

const members = ['a', 'b', 'c', 'd', 'e']
const before = ['a', 'b', 'd']

const after = members.filter(
  m => before.indexOf(m) === -1
)

console.log(after)
//  ['c', 'e']

⇧このコードを使って、未出リストを作成しています。

const index = Math.floor(Math.random() * after.length)
const choose = after[index]

console.log(choose)
// c

⇧このコードで、未出リストから一人ランダムに抽出

ちょっとした演出

ただ表示されるだけじゃつまらなかったので、ちょっとした演出も＋

選出されるまでランダムで関係ない名前も表示するようにしています。
これは、生徒全体からランダムに選んでいるので、未出リストに一人だけしか入ってなくて、ずっと一人だけしか表示されないという現象が怒らないようにしています。

スタックしたこと紹介

MongoDBはVue.jsじゃ使えない

node.jsでは使用可能だったから、Vue.jsでも使えるんかなと思ったら、Vue.jsの仕様上使えなかった。
いろいろ試行錯誤して、無理やり使おうとしてたから、そのせいで超時間食った。

Firebase OAuthが使えない ?!

正確には、読み取れるはずの情報が読み取れませんでした。
これは、Firebase上で作成した認証情報のスコープが設定されていなかったのが原因でした。

[Google Cloud Platform] > [APIとサービス] > [OAuth 同意画面]
（プロジェクト名は、firebaseのプロジェクト名と同じ）
の [project-xxxxx] と書いてある場所の右側にある [アプリを編集] をクリック

[2 スコープ] の [スコープを追加または削除] を押し、
[.../auth/userinfo.email] [.../auth/userinfo.profile] [openid] を追加してあげると、認証情報を取得できるようになります。

Firebase Realtime Databaseのrule設定

これは、他の問題に比べ、あっさり解決しました。
ドキュメント を読めば大体理解できます。

こんな記事もあります。
ドキュメントを読んでもわからなかったので、自分はこれを使いました。

Firebaseのバージョンは明記してくれぇ、、、（切実）

これ、firebaseを使う上で、まじで困った
「コピペしてるだけなのになんでエラーが出るの？？？」
という問題が起きていました。

npm install --save firebase

でインストールされるのは、Ver.9で、ドキュメントで使われているのはVer.8だった。

この記事では、import文をVer.9仕様に書き換えているが、自分は

npm install --save firebase@8.10.0

として、Ver.8をインストールしました。

最後に

このアプリは素人が作ったものです。
もちろん、使いづらいのは理解しています。

気が向いたらでいいので、ご意見・ご要望を アプリ内のFeedbackページ もしくは この記事のコメント欄 でください。
修正できるものは修正し、今後のアプリ制作でも参考にします。