ランチの候補がルーレット

「陳麻婆豆腐に行きましょう。」
基本見たままです。大した機能はないです。少しは遊んでやってください。

https://yuichisemura.github.io/lunchNoCohoGaRoulette/

更新

• ver 2.0
  • ルーレットが全画面になりました。
  • レスポンシブデザインに対応しました。iPhone 12 Pro での利用をもとに調整しています。
  • ダークモードに対応しました。

機能の説明

ほぼランダムで何かを決めたいときに使えるツールです。ルーレットとは元来そういうものですね。

• 候補リストを最大10まで設定し、ルーレットを使用してその中から1つを選びます。
• START/STOPボタンを押して、ルーレットを操作します。
  • STARTを押すと加速し、STOPを押すと減速します。
  • 速度が0になると、結果が出たことになって、アラートが出ます。
• マウスやタッチ操作を使用して、カメラ操作をすることが出来ます。
  • マウスやタッチではルーレットの結果を操作することは出来ません。
• URLにリスト情報を含めることが出来るため、URLでのリストの復元が可能です。＝他人への共有が簡単に行えます。

今後の改善案

• ダークモードにちなんだ楽しい機能
• 飲み会などの利用可能性を考え、接待モードを追加する

技術

キャンバス部分に、3Dライブラリの three.js を使用しています。

• ver 2.0 で使用技術を大幅に変更しました
  • Vue3 + Vuetify3
  • TresJS (three.js の Vue.js 用ラッパーライブラリ。素晴らしい)
  • Vite
• ver 1.0 の技術については以下の記事で説明しています。
  • three.js を使って簡単な 3D ルーレットアプリを作った

開発

vite のインストールが必要

install

npm install

run

vite
or
npm run dev

build

npm run build