ルーレット決定ツール

選択肢を打ち込んで回すと、ルーレットが5〜7回転して1つを指し示すツールです。候補は自動保存されるので、昼食のメニューのように何度も同じ顔ぶれで迷う場面では、次からは開いて回すだけになります。話し合いで決着がつかないときの、最後のひと押しに使っています。

こんなときに使う

• 昼に何を食べるかを、3人で5分議論して決まらないとき
• カスタムマッチのマップやルールを、全員が納得する形で選びたいとき
• 掃除当番や買い出し役など、誰がやるかを角の立たない方法で決めたいとき
• やることリストの中から、着手する1件を機械的に選びたいとき

使い方

1. 右側の入力欄に選択肢を打ち、Enter か「追加」ボタンで登録します。初期状態ではラーメン・カレー・寿司・ピザ・焼肉・そばの6件が入っています。
2. 不要な候補は一覧の ✕ で消します。全部入れ替えたいときは「全削除」、初期の6件に戻したいときは「初期化」を押します。
3. 「ルーレットを回す」を押します。回転中はボタンが押せなくなります。
4. 約4.2秒で減速して止まり、上部のポインターが指した項目が結果として表示されます。

仕様と機能

項目	内容
描画方式	HTML canvas に等分割の円を描画。端末の解像度に合わせて拡大
分割	選択肢の数で360度を等分。件数の上限は設けていない
色	10色を順番に割り当て、11件目以降は先頭の色に戻る
回転	5〜7回転をランダムに加算し、4,200ミリ秒かけて三次関数で減速
当選の決め方	先に当選項目を乱数で選び、その中心が真上のポインターに来るよう回転量を逆算
ラベル	10文字を超えると9文字＋「…」で省略
保存先	選択肢の配列を localStorage(roulette-decision-items-v1)に保存

一覧の各項目には、ホイール上のその項目と同じ色の丸が付きます。結果が出たとき、どの色のどこが当たったのかを目で追えるようにするためです。

作るときに決めたこと

見た目の抽選と実際の抽選が食い違わないよう、当選を先に決めて回転量を逆算する方式にしました。「回して、止まった位置を読む」実装だと、境界に止まったときにどちらの項目か曖昧になります。先に決めてから、その中心が真上に来る角度まで回すので、止まった絵と結果が必ず一致します。

回転時間の4.2秒は、短くすると味気なく、6秒を超えると二回目以降が待ち遠しくなる、その間で落ち着いた値です。減速は三次関数で、最後にじりじり近づく感じを残しています。

重み付け(当たりやすさの調整)はあえて入れていません。このツールが役に立つのは「全員が結果を受け入れる」からで、重みを付けられると分かった瞬間に、その前提が崩れます。等分割であることが機能そのものだと考えました。ラベルを10文字で切っているのは、扇形の中に読める大きさで収まる限界がそのあたりだったためです。

注意点

• 抽選にはブラウザの乱数を使っています。暗号学的な公平性が要求される用途には向きません。
• 選択肢はこの端末のブラウザ内(localStorage)にのみ保存されます。外部への送信はなく、別の端末とは共有されません。ブラウザのデータを消すと初期の6件に戻ります。
• 選択肢が極端に多いと、扇形が細くなりラベルが読み取りにくくなります。20件程度までを目安にしてください。