ちょっとカスタム可能なルーレットをJavaScriptで作ってみた
- HTML / CSS / JavaScript（vanillaJS）のフロントエンドのみの構成
- GitHubpagesでホスト
- 項目数、項目名、カラーテーマを選択可能
- 設定はブラウザに保存可能
デモ
ソース
htmlについて
html
-
<!DOCTYPE html>
→ HTML5の宣言 -
<html lang="ja">
→ 日本語のHTMLページであることを示す -
<meta charset="UTF-8">
→ 文字コード指定（UTF-8） -
<meta name="viewport"...>
→ スマホ表示最適化 -
<title>
→ ブラウザタブのタイトル -
<link rel="stylesheet" href="style.css">
→ 外部CSSファイルを読み込み -
<div id="flashMessage"...>
→ フラッシュメッセージ用。初期状態は非表示。 -
<div id="app">
→ アプリ全体のラッパー -
<div id="settings">
→ 設定画面 -
<button id="startButton">
→ ルーレット開始ボタン -
<select id="colorTheme">
→ カラーテーマ選択肢 -
<select id="itemCount">
→ 項目数選択肢（JavaScriptで2〜12が追加される） -
<div id="itemInputs">
→ 項目の入力欄（動的生成） -
<button id="clearSettings">
→ 設定初期化ボタン（localStorageを消去） -
<div id="rouletteArea" class="hidden">
→ ルーレット画面（初期は非表示） -
<canvas id="wheelCanvas">
→ ルーレット本体（Canvas描画） -
<div id="rouletteAreaButtons">
→ 「もう一回」「戻る」ボタン -
<div id="resultDisplay">
→ 結果の表示欄 -
<script src="script.js">
→ JavaScriptファイルの読み込み
cssについて
style.css の構成と役割
-
body
→ ダークテーマ、中央揃え、スマホ対応、テキスト選択禁止 -
#app
→ 横幅最大600pxで、スマホ〜PCの画面サイズに対応 -
#settings
→ 設定画面の中央寄せ＆制限幅 -
.hidden
→ 表示・非表示制御（display:none） -
#itemInputs input
→ 項目入力欄のスタイル（ダーク背景、白文字） -
canvas
→ ルーレットの描画領域（正方形、黒背景） -
button
→ 全ボタン共通の紫色ボタン -
button:hover
→ ホバー時の色変更 -
#rouletteArea button
→ ルーレット画面のボタンの余白を広めに -
#rouletteAreaButtons
→ 「もう一回」「戻る」ボタンを横並びに配置 -
#clearSettings
→ 「初期化」ボタン専用のグレーボタン -
select
→ プルダウンメニューのダークテーマ化 -
.flash
→ フラッシュメッセージの中央固定＆不透明度アニメーション -
@keyframes flashAnimation
→ フラッシュメッセージのフェードイン・アウトの動き
jsについて
jsについて
-
初期の要素取得
-
document.getElementByIdを使って、HTMLの各要素を取得 - ルーレット本体（Canvas）、ボタン、入力欄、設定画面など
-
-
項目数セレクトボックスの初期化
- 2〜12の
<option>を動的に生成して<select>に追加
- 2〜12の
-
色テーマの定義：getColors
- 原色・パステル・グレースケール・暖色・寒色の5テーマ
- 指定数だけ切り出して配列で返す
-
設定保存＆読み込み
-
localStorageを使用して、ルーレットの「項目」と「色テーマ」を保存／復元 - ユーザーが画面を再読み込みしても状態を保持できる
-
-
項目入力欄の動的生成：initItemInputs
- 選択された項目数に応じて、入力欄を増減させる
-
フラッシュメッセージ表示：showFlashMessage
- 短時間表示されるメッセージ
- CSSのアニメーションと同期して非表示に戻る
-
イベントリスナー
- 項目数変更 → 入力欄の再生成
- ルーレット開始 → 設定画面を隠して、ルーレット画面へ
- 設定初期化 → localStorageを削除し、フラッシュメッセージ後リロード
- もう一回 → 前回の設定で再抽選
- 設定に戻る → 元の画面に戻す
-
色のコントラスト計算：getContrastYIQ
- 選ばれた背景色に応じて、白か黒の文字色を返す
- 可視性を確保
-
ルーレットの描画と回転：spinWheel
- Canvasにルーレットの扇形を描画
- 項目名も配置
- 回転速度はランダムで開始し、摩擦（friction）で徐々に減速
- 停止したら、選ばれた項目を計算して表示
-
ポインター描画：drawPointer
- ルーレットの「結果判定位置」を示す三角形を右端に描画
-
ページ読み込み時の初期化
- 保存された設定があれば復元
- なければデフォルト（6項目・原色テーマ）
確率の偏り、到達不能があったので、以下に検証しました。
https://qiita.com/kubo4ka/items/a3e9521df52b8c404c56