🎯 このツールでできること
プログラミングルーレットは、今日の授業内容をランダムに決めるツールです。
✨ 主な機能
- ルーレット抽選：ボタン1つで今日のやることをランダム選択
- リスト編集：授業内容を自由にカスタマイズ
- 自動保存：設定は次回も自動で復元
- 履歴表示：過去3回分の結果を確認
👨🎓 基本的な使い方（生徒向け）
1️⃣ ルーレットを回す
1
画面中央の 「🎲 回す！」 ボタンをクリック
2
2秒間のアニメーションが流れます（ドキドキ！）
3
今日のやることが大きく表示されます
2️⃣ やることリストを編集する
1
「✏️ 編集する」 ボタンをクリック
2
テキスト欄に新しい項目を入力して 「➕ 追加」
3
不要な項目は 「🗑 削除」 ボタンで削除
4
編集が終わったら 「✅ 完了」 で戻る
💡 便利な機能
入力欄で Enter キー を押すだけでも項目を追加できます！
入力欄で Enter キー を押すだけでも項目を追加できます！
3️⃣ リストを初期状態に戻す
編集モードで 「🗑 初期化」 ボタンを押すと、デフォルトのリストに戻ります。
初期リスト： タイピング、Scratch、自由制作、発表、復習タイム
4️⃣ 履歴を確認する
画面下部の「📋 最近の結果」に、直近3回分の当選結果が表示されます。
👨🏫 先生向け機能（八百長モード）
🕹 こっそり結果を操作する方法
生徒には「ランダム」に見えながら、実は特定の項目に当選させることができます。
授業の流れを調整したい時に便利です。
方法1：URL指定モード
授業前にあらかじめURLを仕込んでおく方法です。
| 通常URL | https://office36-5.komekomecraft.work/roulette |
|---|---|
| 固定URL | https://office36-5.komekomecraft.work/roulette?force=Scratch |
使い方：
- URLの末尾に
?force=項目名を追加 - このURLで生徒にページを開かせる
- 何度回しても、指定した項目に当選します
# 例：「タイピング」に固定したい場合
https://office36-5.komekomecraft.work/roulette?force=タイピング
# 例：「発表」に固定したい場合
https://office36-5.komekomecraft.work/roulette?force=発表
💡 ポイント
項目名は 大文字・小文字を区別しません。
項目名は 大文字・小文字を区別しません。
?force=scratch でも ?force=Scratch でもOKです。
方法2：Shift + F キー
授業中に急遽調整したい時の緊急モードです。
1
ルーレット画面で Shift + F キーを同時押し
2
次回の抽選で 「Scratch」 に必ず当選します
3
効果は 1回のみ。次は通常のランダムに戻ります
🔒 セキュリティ
八百長モードはUI上に一切表示されません。生徒からは完全にランダムに見えます。
八百長モードはUI上に一切表示されません。生徒からは完全にランダムに見えます。
💾 データの保存について
| 保存内容 | 保存先 | 説明 |
|---|---|---|
| やることリスト | ブラウザ内（localStorage） | ページを閉じても保持されます |
| 抽選履歴 | ブラウザ内（localStorage） | 最新3件まで保存 |
| 八百長設定 | 一時メモリ | ページ更新でリセット |
📱 端末ごとに保存
データは各端末のブラウザに保存されます。iPad Aで編集した内容は、iPad Bには反映されません。
データは各端末のブラウザに保存されます。iPad Aで編集した内容は、iPad Bには反映されません。
🔧 トラブルシューティング
Q. リストが保存されない
A. ブラウザの「プライベートモード」や「シークレットモード」では保存されません。通常モードでご利用ください。
Q. 履歴を削除したい
A. ブラウザの開発者ツール（F12キー）を開き、ConsoleタブでJavaScriptを実行：
localStorage.removeItem('rouletteHistory')
Q. 全てのデータをリセットしたい
A. ブラウザの開発者ツールで以下を実行：
localStorage.clear()
Q. 八百長モードが効かない
A. 以下を確認してください：
- URL指定：項目名がリストに存在するか確認
- Shift+F：1回の抽選でリセットされます（再度押す必要あり）
- 項目名の一致：大文字小文字は無視されますが、スペースや記号は正確に
📚 活用アイデア
授業での使い方例
- 導入アクティビティ：授業開始時のワクワク演出に
- 復習タイム：前回の内容を振り返る時のランダム選択
- グループ分け：「チームA」「チームB」などでグループ決め
- 発表順決定：生徒名をリストに入れて発表順をランダムに
- 休憩タイム：「ストレッチ」「目の体操」などを選択
🎨 カスタマイズのコツ
リスト作成のポイント
- 短く明確に：「Scratchでゲーム作り」より「Scratch」の方が見やすい
- 絵文字OK：「🎮 ゲーム制作」など視覚的に楽しく
- 5〜8項目：多すぎると選択肢が見づらくなります
- バランス配分：同じ項目を複数入れると当選確率UP
例：レベル別リスト
| 対象 | リスト例 |
|---|---|
| 初心者向け | タイピング、Scratch基礎、お絵かき、ゲーム体験 |
| 中級者向け | Scratchゲーム制作、micro:bit、発表準備、自由制作 |
| 上級者向け | Python学習、Webサイト作成、アルゴリズム、コンテスト準備 |
⚙️ 技術情報（開発者向け）
使用技術
- 純粋なHTML/CSS/JavaScript（フレームワーク不要）
- localStorage API（データ永続化）
- URLSearchParams API（パラメータ取得）
- CSS Animations（スピン演出）
ブラウザ対応
- Chrome / Edge（推奨）
- Safari（iPad対応）
- Firefox
📞 お問い合わせ
バグ報告・機能要望は以下まで：
- 制作者：Kei Yoneda
- サイト：komekomecraft.work