研修での講義と休憩を管理するためのタイマーアプリケーションです。 頑張って話していると、休憩を忘れがちになるので、時間を音で通知して、適切な休憩を促します。
以前の講義後アンケートで、休憩が少ないとの指摘が多かったため、作ってみました。 作成後、講義で使ってみたところ、集合研修・オンライン研修ともにアンケート結果が改善しました。
https://xpenguin.biz/l_timer/ から直接起動できます。
データはすべてブラウザのLocalStorageに保存され、サーバーへは送信されませんので、安心してお使いください。
コードはすべてClaude Codeが書いています。私は内容をほとんど見てません。
私が欲しいものを作ってもらっていて、Windows/macOSのChromeのみ動作確認しています。 あまり、リッチにすることは考えていませんが、要望などあれば検討します。
ここから下は、Claude Code が勝手に書いているのでやや大げさですが、 だいたい合っていると思います。
- 50分講義 + 10分/60分休憩 のデフォルト設定
- 1分単位での時間調整 (講義: 1-300分、休憩: 1-120分)
- オーバータイム対応: 講義終了後もカウントアップ継続
- 自動遷移: 休憩終了後に自動的に講義開始
- 終了時刻カスタマイズ: リアルタイムで終了時刻を調整（-10/-1/+1/+10分）
- 逆算タイマー: カスタム終了時刻からの残り時間自動計算
- 講義中・オーバータイム中に使用可能: ストップウォッチアイコンで起動
- 講義タイマーと独立: 演習中も講義タイマーはそのまま継続
- 演習タイトル入力: 入力済みタイトルは次回から候補として表示（最大20件）
- 時間調整: -10/-1/+1/+10 ボタンで柔軟に設定（デフォルト15分）
- 演習タイマー表示: 講義タイマーの上にオレンジ色で大きく表示
- オーバータイム対応: 次の演習未設定の場合は赤色でカウントアップ継続
- 次の演習自動スタート: 「Next」ボタンで次の演習タイトル・時間を事前設定し、現在の演習終了時に自動スタート
- 講義タイマー連動: 演習中は講義タイマーが縮小・薄表示に切り替わる
- サウンド: 講義タイマーと同じ予鈴音・終了音・経過音を使用
- 3種類の音声 × 3バリエーション:
- 警告音: 講義/演習終了前の警告（デフォルト3分前、1-10分で調整可能）
- 終了音: セッション完了時の通知
- 経過音: オーバータイム中の定期音（デフォルト60秒間隔、10-300秒で調整可能）
- 音量調整: 0-100%スライダー
- 一時消音: ミュートボタンで即座に切り替え
- 自動ミュート解除: 講義・休憩開始時に自動的にミュート解除
- テスト再生: 設定画面で各音声の確認
- レスポンシブデザイン: モバイル・デスクトップ対応
- ダークモード/ライトモード: ボタンで切り替え
- フルスクリーン対応: ⛶ ボタンでプレゼンテーション表示
- フラットデザイン: タイマー表示の枠・影を削除したシンプルなUI
- SVGアイコン: 全ボタンをSVGアイコンで統一
- カラーテーマ:
- 講義中: 青色系
- 休憩中: 緑色系
- オーバータイム: 赤色系
- 演習タイマー: オレンジ色系
- 動的レイアウト:
- 画面幅に応じてタイマーのフォントサイズが滑らかに変化
- プログレスバーが7桁の等幅フォント幅に自動調整
- エディタとの割合変更に連動してタイマーサイズが変化
- アイコンボタン: 統一されたSVGデザイン
- ▶ 講義開始
- 📖 講義開始（休憩中）
- ☕ 休憩開始（10分）
- 🍽 昼休憩開始（60分）
- ⏹ 停止
- ⏱ 演習タイマー起動
- 時間設定:
- 講義時間 (1-300分)
- 休憩時間 (1-120分)
- 昼休憩時間 (1-120分)
- 警告タイミング (1-10分)
- 経過音間隔 (10-300秒)
- 音声選択: 各音声タイプから選択
- 自動保存: 全設定をLocalStorageに保存
- 設定復元: 起動時に前回設定を復元
- WYSIWYG エディタ: Quill.js ベースのリッチテキストエディタ
- 分割画面: タイマーとエディタを左右に配置、ドラッグでサイズ調整
- 動的リサイズ: エディタとタイマーの割合を変更すると、タイマーのフォントサイズが自動調整
- ドキュメント管理: 複数のメモを保存・読込・削除
- ズーム機能: 50%-200%の範囲でエディタ表示を拡大/縮小
- 自動保存: ドキュメントはLocalStorageに保存
- タイトル自動生成: 本文の最初の行から自動でタイトルを生成
- エクスポート: 全設定とドキュメントをJSON形式でエクスポート
- インポート: バックアップからの復元機能
- 一括選択: エクスポートデータを簡単にコピー
- ストレージ消去: すべてのデータを削除して初期状態に戻す
- 初回起動時の言語選択: 初めて使用する際に日本語/英語を選択
- 言語切り替え: 設定画面でいつでも変更可能
- 全UI対応: ラベル、ボタン、ツールチップ、ダイアログすべて対応
- 自動保存: 言語設定を記憶
- 講義開始: ▶ ボタンまたはキーボード
L - 休憩開始: ☕ または 🍽 ボタン、またはキーボード
B - 停止: ⏹ ボタンまたはキーボード
S/Escape - 設定: ヘッダーの設定ボタンで設定画面を開く
- エディタ: ヘッダーのエディタボタンでエディタを表示/非表示
- 講義中にアクションボタン列のストップウォッチアイコンをクリック
- 演習タイトルを入力し、時間を -10/-1/+1/+10 で調整
- ✓ ボタンで演習スタート → 講義タイマーの上にオレンジ色で表示
- 演習中に「Next」ボタンをクリックすると次の演習を事前設定可能
- ⏹（赤）ボタンで演習を途中終了
- 講義・休憩中に終了時刻の下に表示される調整ボタンを使用
- -10: 10分早める
- -1: 1分早める
- +1: 1分遅らせる
- +10: 10分遅らせる
L: 講義開始B: 休憩開始S/Escape: タイマー停止T: テーマ切り替えF: フルスクリーン切り替え
l_timer/
├── index.html # メインHTML
├── css/
│ ├── styles.css # メインスタイルシート
│ └── quill.snow.css # Quill.js テーマ
├── js/
│ ├── app.js # タイマーアプリケーション
│ ├── editor.js # エディタマネージャー
│ ├── document.js # ドキュメント管理
│ ├── resizer.js # リサイズマネージャー
│ ├── data-manager.js # データエクスポート/インポート
│ └── i18n.js # 多言語対応
├── lib/
│ └── quill.min.js # Quill.js ライブラリ
├── audio/ # 音声ファイル
│ ├── sound1-1.wav # 警告音1
│ ├── sound1-2.wav # 警告音2
│ ├── sound1-3.wav # 警告音3
│ ├── sound2-1.wav # 終了音1
│ ├── sound2-2.wav # 終了音2
│ ├── sound2-3.wav # 終了音3
│ ├── sound3-1.wav # 経過音1
│ ├── sound3-2.wav # 経過音2
│ ├── sound3-3.wav # 経過音3
│ ├── README.md # 音声ファイル説明
│ └── generate_more_sounds.py # 音声生成スクリプト
├── images/
│ └── bmc_qr.png # Buy Me a Coffee QRコード
├── README.md # このファイル（日本語）
├── README-en.md # 英語版README
└── CLAUDE.md # 実装詳細サマリー
- HTML5 Audio API: 音声再生
- Quill.js: WYSIWYGエディタ
- CSS Custom Properties: テーマシステム
- CSS Container Queries: エディタ表示時の動的レイアウト調整
- CSS clamp(): 流動的なフォントサイズとレイアウト
- LocalStorage: 設定・ドキュメント・演習タイトル履歴の永続化
- ResizeObserver API: レスポンシブレイアウト
- Responsive Design: モバイル対応
- Offline Ready: インターネット接続不要
- 推奨ブラウザ: Chrome, Edge
- 対応ブラウザ: Firefox, Safari（一部制限あり）
- OS: Windows, macOS, Linux, iOS, Android
- 音声ファイルは Mixkit からダウンロード
- WAV形式でオフライン再生対応
- Python スクリプトでカスタム音声生成も可能
- ブラウザの音声設定を確認
- ミュートボタンがミュートになっていないか確認
- 音量スライダーが0になっていないか確認
- 設定画面の「テスト」ボタンで音声確認
- ブラウザのズーム設定を100%に設定
- フルスクリーンモード（⛶ボタン）を試用
- ブラウザのLocalStorageが有効か確認
- プライベートモードでは設定が保存されません
詳細な実装情報は CLAUDE.md を参照してください。