TL;DR
- VueとCanvasでルーレットを作ったよ
- ルーレットの各要素のウェイトを変えると確率を調整できるよ
- レスポンシブなのでモバイルでも使えるよ
#こだわりとか
カラーテーマ
バンドリの25人のキャラのイメージカラーがルーレットの各要素に割り振られます
これがやりたかったために作ったと言っても過言ではないです
そのためルーレットの要素は25個までしか設定できません
バグではなく仕様です
ちなみにBanG RoulletというタイトルはBanG Dreamからです
UIをシンプルにした
結果の表示や、ルーレットの初期化の確認メッセージ等を除き、UIから文字を廃して直感的に操作できるようにしました
操作できるボタンはカラーにして、操作できないものはグレーにすることで視覚的なわかりやすさも意識しました
ルーレットの減速時の挙動
停止ボタンを押すと徐々に減速するようにしました
停止するのが遅すぎるとイライラするし、早すぎると抽選してる感がないので、いい塩梅に減速させるのに苦労しました
結果としてなかなかリアルな動きになったのではないかと思います
レスポンシブにしてモバイルにも対応
ルーレットを使いたいときに目の前にPCがあることって稀だと思うんです
通常はモバイルで使いたいと思うので、頑張ってCanvasの描画を維持したままリサイズできるようにしました
addEventListenerでウィンドウのリサイズされるとCanvasの幅を更新するようにしています
使った技術とかライブラリ
- Vue.js
- Canvas
- Bootstrap
- Element UI
- Firebase
できるだけライブラリは利用せずに作りました（リファレンスを読むのがめんどくさかった）
setIntervalでルーレットの描画処理をかなりの回数呼び出すことになるので、その処理を重くしたくなかったというのもあります
円グラフの描画ライブラリとかを使えば、見た目をもっとよくできるかもしれませんが…
CSSフレームワークはElement UIを使用していますが、レスポンシブデザインには対応してないっぽいので結局Bootstrapも導入しました
正直Bootstrapだけで完結できる気がするので、Element UIはそのうちはがすかもしれません
デプロイ先としてFirebaseを初めて利用しましたが、サーバー側の機能はまったく使ってないので活用できてない感がすごいです
認証などの機能を利用するアプリを開発する際は使ってみたいですね
できなかったこと
本当はルーレットの針も一緒に動くようにしたかったのですが諦めました
ルーレットの低速時には、要素の境界が針に差し掛かったときに針が動くようにしないと視覚的に違和感があるため、針は止めたままにしました
単純にルーレットの減速に合わせて針の動作頻度を落とすだけならできるのですが、境界に合わせて動作させるとなるとかなり難しいです
まとめ
なかなか使いやすい操作性にできたんじゃないかと思います
要素の編集、削除、確率調整、ルーレットのリセット、リロードの機能もあるので、総じて満足いく作りにできました
ただ、要素を25個を超えて追加しようとしたときのアラートのデザインがデフォルトのままなので、UIはもう少し詰めようと思います
使った感想や、こういう機能が欲しいという要望があればコメントしてもらえると嬉しいです！
最後に、バンドリはいいぞ。
ソースコード
GitHub
https://github.com/rootsuke/BanG-Roullet
参考
こちらの記事でCanvasでルーレットを描画する着想を得ることができました
ありがとうございました
https://tech-blog.s-yoshiki.com/2019/01/1024/