新年早々Vue.jsでビンゴマシンっぽいものを作りました

ご挨拶

あけましておめでとうございます、本年もよろしくお願いいたしますm(_ _)m

年末年始は実家に帰省しておりました。

毎年1月2日は親戚の集まりがあって、景品を持ち寄ってビンゴ大会をするのでビンゴマシンっぽいものを作ってみました。

画面のどこでもタップすればロールを開始して、自動的にストップします。

既に出た数字は上に列挙されるようにしました。これに関しては1〜75のパネルが並んでいて、出た数字だけ色がつくとかのほうがわかりやすかったかも？今回は時間もなかったのでご愛嬌ってことで…！

正月っぽいBGMとロール中はドラムロールのSEが流れます。

この記事の最後にお借りした素材へのリンクを掲載しております。

今回は別にWEBサーバーにデプロイする必要はなかったのでdocker上に構築しました。フレームワークはLaravel + Laravel Mix(Vue.js)で作成しています。前々からLaravel Mixについて勉強したかったのでちょうど良かった！

環境構築含めても2,3時間で作れました。dockerは偉大なのだ…

今の所サービスとして提供する予定はありませんが、時間のあるとき勉強ついでにブラッシュアップしてみようかなと思います。

見た目のショボさもなんとかしたいですね〜。取り急ぎ、リロードしてしまうと最初からになってしまうのでリジューム機能はつけようかな〜と思ったりしてます。

まぁ使うことがあるとすれば来年だと思いますし、ぼちぼちやります_(:3」∠)_

『ドラムロール』無料・フリー効果音素材/魔王魂 https://maoudamashii.jokersounds.com/archives/se_maoudamashii_instruments_drumroll.html

著作権フリーBGM配布サイト HURT RECORD : THT-015 お屠蘇 < Dec 2013 > http://www.hurtrecord.com/bgm/15/otoso.html

ビンゴカードのイラスト | かわいいフリー素材集いらすとや https://www.irasutoya.com/2018/11/blog-post_48.html

[フリーイラスト] 門松と青海波のお正月の背景でアハ体験 – GAHAG | 著作権フリー写真・イラスト素材集 http://gahag.net/003065-kadomatsu-new-year/