今年度の仲間うちでのPOGドラフト会議は3密回避のためリモート開催となりました。
ローカルルール
- 1~3位は入札方式。競合した場合はあみだくじで抽選
- 4位以降はウェイバー方式で順繰りに指名
入札フェーズ： GoogleFormsの利用
GoogleFormsを利用しました。 以下のようなアンケートフォームを順位ごとに予め作成しておき、URLを参加者に共有し入力してもらいました。
競合が出たときは、LINEのあみだくじ機能を使って決定しました。 グループのトークルーム上で幹事があみだくじを作って抽選します。
あみだくじ機能の使い方はコチラ guide.line.me
ウェイバーフェーズ： 独自開発アプリの利用
Vue.js + Firebaseの練習用として指名馬入力ツールを作りました。
参考にしたもの
- Vue 2 + Firebase: How to build a Vue app with Firebase authentication system in 15 minutes
- Vue.js + Firebase を使って爆速でユーザ認証を実装する - Qiita
- Vue.js＋Firebaseで認証付きチャット | 基礎から学ぶ Vue.js
グループの作成（オーナーの登録）
馬名の選択
部分一致で検索するので入力の手間はだいぶ楽でした。 すでに指名された馬は候補で出てこないように重複チェックも入れてます。
馬のマスターデータベースはnetkeiba.comからスクレイピングして（競走馬検索から年齢条件を2歳~2歳にして検索）、jsonファイルとしてもっておきそれを読み込みます。
const horse_catalogue = require("../assets/horse_catalogue.json")
指名馬のオーナーへの割当て
割当て後
登録結果のダウンロード
CSVでリストをダウンロードできます
downloadCSV: function() {
let csv = '\ufeff' + 'order_no,owner_name,name,sire,mare,id\n'
const sorted_horses = this.selected_horses.sort(function(a, b) {
...
})
sorted_horses.forEach(el => {
const line = `${el['po_order_no']},${el['po_name']},${el['name']},${el['sire']},${el['mare']},${el['id']}\n`
csv += line
})
const blob = new Blob([csv], { type: 'text/csv' })
let link = document.createElement('a')
link.href = window.URL.createObjectURL(blob)
link.download = 'pog_result.csv'
link.click()
},
ドラフトで使ってみた結果
今年度に関してはプロトタイプということでスマホ対応も含めてデザインがアレすぎますが機能面に関しては今のところ、1点を除いて問題なく使えました。
見つかった問題点（デザイン以外の改善点）
- スマホ環境で事前にテストしていたとき、通信環境の問題からか Firebaseに同じ馬がなぜか重複して登録されることがあった..
来年度は Vuetify とか使ってデザインを改善しようと思います。 Vue.jsがオワコンになってなければよいけど。。
ちなみに、アプリは コチラ からアクセスできます。
自由に試せるのでもし興味ある方がいれば使ってみてください。 そのうちクローズしますがしばらくはopenしていると思います
