📚 プログラミングクラブ タイマー
使い方ガイド
🎯 基本の使い方
⏰タイマー機能
ページを開くと自動的にタイマーが開始されます。現在の活動と残り時間が大きく表示されます。
- 残り5分になると黄色で点滅
- 残り1分になると赤色で点滅
- プログレスバーで進捗が見える
📅予定表
今日の予定が一覧で表示されます。現在進行中の予定は青色、終了した予定は緑色で表示されます。
🖼️ルール画像の拡大
左側のルール画像をクリックすると、大きく表示できます。
- 画像をクリック → 拡大表示
- 拡大された画像をクリック → さらに1.5倍ズーム
- 背景または×ボタンをクリック → 閉じる
✏️ 予定表の編集方法
ステップ1: 予定表の右側にある✏️ 編集ボタンをクリック
ステップ2: 編集モードに切り替わると、各予定を変更できるようになります
ステップ3: 編集が終わったら✅ 完了ボタンをクリック(自動的に保存されます)
📝 予定の変更
編集モードでは、以下のことができます:
- 活動名の変更(テキスト入力フィールド)
- 開始時刻と終了時刻の変更(時間ピッカー)
- 予定の削除(🗑️ボタン)
- 新しい予定の追加(➕ 予定を追加ボタン)
📖 ルビ(ふりがな)の付け方
活動名に読み仮名(ルビ)を付ける方法は2通りあります:
✨自動ルビ振り
- ✨ 自動ボタンをクリック
- 登録されている漢字に自動的にルビが振られます
- 成功すると入力欄が緑色に光ります
💡 ヒント: 「準備時間」「自由時間」「片づけ」などの一般的な言葉は自動でルビが振られます。
📖手動ルビ振り
- 📖 手動ボタンをクリック
- ダイアログに
"漢字"よみがなの形式で入力
- OKをクリック
入力例:
"準備時間"じゅんびじかん
"片"かた づけ
"自由"じゆう"時間"じかん (複数のルビ)
⏰ "準備時間"じゅんびじかん (絵文字と組み合わせ)
💾 データの保存
編集した予定表は、ブラウザの中に自動的に保存されます(localStorage)。
- ✅ ブラウザを閉じても設定が残ります
- ✅ 次回ページを開いたときも同じ予定表が表示されます
- ✅ 各ブラウザで個別に保存されます
⚠️ 注意:
- ブラウザのキャッシュを削除すると、保存した予定表も消えてしまいます
- 別のブラウザや別のパソコンでは、それぞれ設定が必要です
🎨 タイマーの色について
- 青色: 通常の状態(残り5分以上)
- 黄色(点滅): 残り5分~1分
- 赤色(点滅): 残り1分以内
📱 推奨環境
このタイマーは以下のブラウザで動作します:
- Google Chrome(推奨)
- Microsoft Edge
- Safari
- Firefox
❓ よくある質問
Q: 予定表を初期状態に戻したい
A: ブラウザの開発者ツール(F12キー)を開き、Consoleタブで以下を実行してください:
localStorage.removeItem('scheduleActivities')
その後、ページを再読み込みしてください。
Q: 時間がずれている
A: タイマーはパソコンの時計を使用しています。パソコンの時刻設定が正しいか確認してください。
Q: 編集した内容が保存されない
A: 編集モードで変更した後、必ず「✅ 完了」ボタンをクリックしてください。このボタンをクリックすることで保存されます。
🎓 活用のヒント
- 遠くから見やすい: 文字が大きいので、教室の後ろからでも見えます
- 全画面表示: F11キーで全画面にすると、さらに見やすくなります
- 投影して使用: プロジェクターで投影すると、みんなで時間を共有できます
- 曜日ごとに変更: 月曜日と水曜日でスケジュールが違う場合も、簡単に編集できます