スケジュール調整 日時文字生成ツール

カレンダー上のドラッグ操作で候補日時を選択し、コピー&ペースト可能な文字列として出力するWebアプリケーションです。

機能

基本機能

• カレンダー表示: 週表示（月曜〜日曜）、9:00〜18:00の時間範囲
• ドラッグ選択: 15分刻みでの時間帯選択（シングルクリックで15分枠選択も可能）
• リアルタイム時間表示: ドラッグ中にマウス近くに時間範囲を表示
• 自動フォーマット: M月D日（曜） HH:MM〜HH:MM 形式で出力（年なし）
• クリップボードコピー: ワンクリックでコピー、通知表示付き

UI/UX機能

• 今週ボタン: ワンクリックで今週に戻る
• 週間ナビゲーション: 前週・次週への移動
• 今日ハイライト: 今日の日付を緑色で強調表示
• 土日祝日の色分け: 土曜（薄赤）、日曜・祝日（赤）で表示
• 選択候補の個別削除: 不要な候補を個別に削除可能
• リセット機能: 全選択をクリア

デザイン

• Windows 11対応フォント: Segoe UI Variable Display使用
• 視認性向上: 大きめの日付・時間表示
• レスポンシブデザイン: デスクトップ・タブレット対応

使用方法

1. ローカルサーバーの起動

# Pythonを使用する場合
python -m http.server 8000

# Node.jsを使用する場合  
npx serve .

2. ブラウザでアクセス

http://localhost:8000

3. 操作手順

1. 週選択: ヘッダーの矢印ボタンで目的の週を表示（「今週」ボタンで現在の週に戻る）
2. 日時選択:
   • ドラッグ: 開始時刻から終了時刻へドラッグして範囲選択
   • シングルクリック: 1つのセルをクリックして15分枠を選択
   • リアルタイム表示: ドラッグ中に時間範囲がマウス近くに表示される
3. 自動追加: 選択完了と同時に候補リストに追加（時系列順で自動ソート）
4. 複数選択: 必要に応じて他の日時も同様に選択
5. 候補管理: 不要な候補は個別の「削除」ボタンで削除可能
6. 出力: 「文字をコピー」ボタンでクリップボードにコピー
7. 利用: メールやチャットにペースト（例：3月4日（火） 9:00〜10:30）

ファイル構造

/
├── index.html          # メインエントリーポイント
├── css/
│   └── style.css      # スタイルシート
├── js/
│   ├── main.js        # メインロジック
│   ├── scheduler.js   # スケジュール管理
│   └── textGenerator.js # テキスト生成
├── test.html          # 動作テスト画面
└── CLAUDE.md          # 開発者向けガイド

技術仕様

• フロントエンドのみ: サーバー不要
• Vanilla JavaScript: フレームワーク不使用
• ES6+対応: モダンブラウザ必須
• レスポンシブCSS: Grid Layout使用

制約事項

• 同日選択のみ: 複数日にまたがる選択は非対応
• 時間範囲限定: 9:00〜18:00の9時間表示
• 15分刻み: 時間選択は15分単位のみ

ブラウザ対応

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

開発・デバッグ

テスト実行

# ブラウザで以下にアクセス
http://localhost:8000/test.html

主要クラス

• ScheduleApp: メインアプリケーションクラス
• Scheduler: カレンダー管理とナビゲーション
• TextGenerator: 候補データのフォーマット処理

デバッグ

ブラウザの開発者ツールで以下のコマンドを実行：

// スケジューラーの状態確認
app.scheduler.getDebugInfo()

// テキスト生成の状態確認  
app.textGenerator.getDebugInfo(app.selectedCandidates)

ライセンス

MIT License

---

作成日: 2025年8月29日
最終更新: 2025年8月29日
バージョン: 1.2

更新履歴

v1.2 (2025-08-29)

• リアルタイム時間表示機能追加
• 年表示を削除してシンプル化
• Windows 11フォント対応
• UI/UXの改善とバグ修正

v1.1 (2025-08-29)

• ドラッグ選択機能の改善
• 土日祝日の色分け表示
• 今日の日付ハイライト表示

v1.0 (2025-08-29)

• 初回リリース