【Webアプリ】ブラウザ上で動作するルーレットアプリの紹介

悩んでいる人

イベント用にルーレットを活用したい。

入力の手間を省きつつ、挙動をある程度調整可能なものがあれば教えて欲しい。

こんなお悩みを解決します。

会社や同好会などのイベント実施時に、ルーレットを活用して盛り上げたいときがあると思います。

ただ、該当する機能をもつアプリケーションを作るのは大変です。

また、物理的に用意することも可能ですが、オンライン開催との相性はあまり良くないです。

そこで、Web上で利用できるアプリケーションを作成し、公開することにしました。

ブラウザ上で完結するので、情報漏洩を心配することなく利用できます。ぜひ、利用してみてください。

参考サイト

色の割り当てやp5.jsの使い方は、下記のサイトを参考にしました。

WEBアプリの作り方　～ルーレット～

ルーレットの機能説明

作成したツールは、以下のようになります。

以降では、本ツールの各機能について解説します。

制約条件

ルーレットアプリを利用する上での制約を以下に示します。

• 区切り文字は、正規表現を含む5種類（,、，、空白文字、;、/）の組み合わせ全31パターンの中から指定する必要があります。
• 色（背景色）の割り当ては、プログラムによる自動割り当てのため、ユーザ側で指定することはできません。
• 自動停止モードでの停止タイミングは、プログラム制御のため、ユーザ側で指定することはできません。

概要

入力情報と設定情報に基づいてルーレットを回し、停止した位置の情報を結果として出力します。

機能説明

以下の2つに大別して機能を説明します。

• 動作準備時の関連機能
• 実行時の関連機能

動作準備時の関連機能

ここで、各要素の発生確率は、各要素の存在比率に基づいて算出します。

また、存在比率が指定されていない項目は、該当するすべての要素が等確率となるように発生確率を算出します。

以下の例をもとにした算出方法を示します。

実行時の関連機能

ルーレットアプリの使い方

以降で、ルーレットアプリの使い方を解説します。

以下の手順でルーレットアプリを操作してください。

1. 「入力情報」にあるテキストエリアに項目名と存在比率を入力し、「更新」を押下する。
2. 必要に応じて「設定情報」に移動し、「自動停止モード」、「判定位置」、「区切り文字」を更新する。
3. 「詳細情報」を確認し、意図通りの発生確率が設定されていることを確認する。
4. 「スタート」を押下し、ルーレットを回す。
5. 自動停止モードがOFFの場合、停止したいタイミングで「ストップ」を押下する。

また、実際に動作させた例を以下の動画で示しています。

使用する区切り文字による違い

区切り文字は、以下の5種類の組み合わせから選択できるようになっています。

また、指定する区切り文字により、項目名と存在比率の取得方法が変わります。

違いに関しては、以下を参考にしてください。

まとめ

今回は、Web上で動作するルーレットアプリを紹介しました。

利用用途が限定されますが、html、css、javascriptの勉強の一環として、このようなWebアプリを作るのも良いと考えています。

プログラミングの勉強は、実際に手を動かして体得することが近道となるため、同じものでも良いので、興味がある方はぜひ作成してみてください。