AIツール「Gemini Canvas」で作成した、タスクの開始・終了を記録し、作業時間を自動で計測するツールの作り方を紹介。ブラウザ上で動作し、CSVでデータを出力できる便利なツールです。HTMLとJavaScriptのコードも公開しています。

HTML コードビューア

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>業務時間計測ツール</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
        .timer {
            font-variant-numeric: tabular-nums;
        }
        /* モーダルのためのスタイル */
        .modal-overlay {
            transition: opacity 0.3s ease;
        }
        .modal-container {
            transition: transform 0.3s ease, opacity 0.3s ease;
        }
    </style>
</head>
<body class="bg-gray-100 text-gray-900 transition-colors duration-300">

    <div class="container mx-auto p-4 md:p-8 max-w-4xl">
        <!-- ヘッダー -->
        <header class="flex justify-between items-center mb-8">
            <h1 class="text-3xl md:text-4xl font-bold text-gray-800">業務時間計測ツール</h1>
        </header>

        <!-- 説明セクション -->
        <section class="mb-8 p-6 bg-blue-50 border border-blue-200 rounded-2xl shadow-sm">
            <p class="text-gray-700 leading-relaxed">
                このツールは、日々の業務内容と作業時間を記録・管理するためのシンプルな業務時間計測ツールです。タスクの開始・終了を記録したり、繰り返し行う業務（ルーチン）や毎週の予定（定期タスク）を登録したりすることで、作業の見える化をサポートします。記録したデータはCSVファイルとしていつでも出力できます。
            </p>
        </section>

        <main>
            <!-- タスク入力セクション -->
            <section id="task-input-section" class="mb-8 p-6 bg-white rounded-2xl shadow-lg">
                <h2 class="text-xl font-semibold mb-4">新しいタスクを開始</h2>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="taskName" class="block text-sm font-medium text-gray-600 mb-1">業務内容</label>
                        <input type="text" id="taskName" placeholder="例: 資料作成" class="w-full px-4 py-2 bg-gray-100 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none">
                    </div>
                    <div>
                        <label for="routineTasks" class="block text-sm font-medium text-gray-600 mb-1">ルーチン業務から選択</label>
                        <select id="routineTasks" class="w-full px-4 py-2 bg-gray-100 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none">
                            <option value="">選択してください</option>
                        </select>
                    </div>
                </div>
                <div class="mt-4 flex flex-col sm:flex-row gap-4 flex-wrap">
                    <button id="startTaskBtn" class="w-full sm:w-auto flex-grow px-6 py-3 bg-blue-600 text-white font-bold rounded-lg hover:bg-blue-700 transition-transform transform hover:scale-105 shadow-md">
                        業務開始
                    </button>
                    <button id="addRoutineBtn" class="w-full sm:w-auto px-4 py-2 bg-gray-200 text-gray-700 font-semibold rounded-lg hover:bg-gray-300 transition">
                        ルーチン登録
                    </button>
                    <button id="editRoutineBtn" class="w-full sm:w-auto px-4 py-2 bg-gray-200 text-gray-700 font-semibold rounded-lg hover:bg-gray-300 transition">
                        ルーチン編集
                    </button>
                    <button id="openScheduleModalBtn" class="w-full sm:w-auto px-4 py-2 bg-gray-200 text-gray-700 font-semibold rounded-lg hover:bg-gray-300 transition">
                        定期タスク設定
                    </button>
                </div>
                 <p id="error-message" class="text-red-500 text-sm mt-2 hidden"></p>
            </section>

            <!-- 進行中のタスクセクション -->
            <section id="current-task-section" class="mb-8">
                <h2 class="text-xl font-semibold mb-4">進行中のタスク</h2>
                <div id="current-task-container" class="p-6 bg-white rounded-2xl shadow-lg hidden"></div>
                <div id="no-current-task" class="text-center py-8 px-6 bg-white rounded-2xl shadow-lg">
                    <p class="text-gray-500">現在進行中のタスクはありません。</p>
                </div>
            </section>
            
            <!-- 定期タスク一覧セクション -->
            <section id="scheduled-tasks-section" class="mb-8">
                <h2 class="text-xl font-semibold mb-4">設定中の定期タスク</h2>
                <div id="scheduled-tasks-list" class="space-y-3"></div>
                <div id="no-scheduled-task" class="text-center py-8 px-6 bg-white rounded-2xl shadow-lg">
                    <p class="text-gray-500">設定されている定期タスクはありません。</p>
                </div>
            </section>

            <!-- 完了したタスクログセクション -->
            <section>
                <div class="flex justify-between items-center mb-4 flex-wrap gap-4">
                    <h2 class="text-xl font-semibold">業務ログ</h2>
                    <div class="flex gap-4">
                        <button id="exportCsvBtn" class="px-4 py-2 bg-green-600 text-white font-semibold rounded-lg hover:bg-green-700 transition shadow-md">
                            CSVエクスポート
                        </button>
                        <button id="clearLogBtn" class="px-4 py-2 bg-red-600 text-white font-semibold rounded-lg hover:bg-red-700 transition shadow-md">
                            ログ一括クリア
                        </button>
                    </div>
                </div>
                <div id="task-log" class="space-y-4"></div>
                 <div id="no-task-log" class="text-center py-8 px-6 bg-white rounded-2xl shadow-lg hidden">
                    <p class="text-gray-500">完了したタスクの記録はまだありません。</p>
                </div>
            </section>
        </main>
    </div>

    <!-- 定期タスク設定モーダル -->
    <div id="scheduleModal" class="modal-overlay fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden opacity-0">
        <div class="modal-container bg-white w-full max-w-md p-6 rounded-2xl shadow-2xl opacity-0 transform scale-95">
            <h3 class="text-lg font-bold mb-4">定期タスクを登録</h3>
            <div class="space-y-4">
                <div>
                    <label for="scheduleTaskName" class="block text-sm font-medium text-gray-600 mb-1">業務内容</label>
                    <input type="text" id="scheduleTaskName" placeholder="例: 週次定例" class="w-full px-4 py-2 bg-gray-100 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-600 mb-2">曜日</label>
                    <div id="weekdays" class="grid grid-cols-4 sm:grid-cols-7 gap-2">
                        <!-- JSで曜日ボタンを生成 -->
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label for="scheduleTime" class="block text-sm font-medium text-gray-600 mb-1">開始時刻</label>
                        <input type="time" id="scheduleTime" class="w-full px-4 py-2 bg-gray-100 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none">
                    </div>
                    <div>
                        <label for="scheduleEndTime" class="block text-sm font-medium text-gray-600 mb-1">終了時刻</label>
                        <input type="time" id="scheduleEndTime" class="w-full px-4 py-2 bg-gray-100 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:outline-none">
                    </div>
                </div>
                <p id="modal-error-message" class="text-red-500 text-sm hidden"></p>
            </div>
            <div class="mt-6 flex justify-end gap-4">
                <button id="closeScheduleModalBtn" class="px-4 py-2 bg-gray-200 rounded-lg hover:bg-gray-300 transition">キャンセル</button>
                <button id="saveScheduleBtn" class="px-4 py-2 bg-blue-600 text-white font-bold rounded-lg hover:bg-blue-700 transition">保存</button>
            </div>
        </div>
    </div>
    
    <!-- ルーチン編集モーダル -->
    <div id="routineModal" class="modal-overlay fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 hidden opacity-0">
        <div class="modal-container bg-white w-full max-w-md p-6 rounded-2xl shadow-2xl opacity-0 transform scale-95">
            <h3 class="text-lg font-bold mb-4">ルーチン業務を編集</h3>
            <div id="routine-list" class="space-y-2 max-h-60 overflow-y-auto">
                <!-- JSでリストを生成 -->
            </div>
            <div class="mt-6 flex justify-end">
                <button id="closeRoutineModalBtn" class="px-4 py-2 bg-gray-200 rounded-lg hover:bg-gray-300 transition">閉じる</button>
            </div>
        </div>
    </div>


    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Element selectors
            const taskNameInput = document.getElementById('taskName');
            const startTaskBtn = document.getElementById('startTaskBtn');
            const currentTaskContainer = document.getElementById('current-task-container');
            const noCurrentTask = document.getElementById('no-current-task');
            const taskLog = document.getElementById('task-log');
            const noTaskLog = document.getElementById('no-task-log');
            const exportCsvBtn = document.getElementById('exportCsvBtn');
            const clearLogBtn = document.getElementById('clearLogBtn');
            const errorMessage = document.getElementById('error-message');
            const routineTasksSelect = document.getElementById('routineTasks');
            const addRoutineBtn = document.getElementById('addRoutineBtn');
            const editRoutineBtn = document.getElementById('editRoutineBtn');
            // Scheduling elements
            const openScheduleModalBtn = document.getElementById('openScheduleModalBtn');
            const scheduleModal = document.getElementById('scheduleModal');
            const scheduleModalContainer = scheduleModal.querySelector('.modal-container');
            const closeScheduleModalBtn = document.getElementById('closeScheduleModalBtn');
            const saveScheduleBtn = document.getElementById('saveScheduleBtn');
            const scheduleTaskNameInput = document.getElementById('scheduleTaskName');
            const weekdaysContainer = document.getElementById('weekdays');
            const scheduleTimeInput = document.getElementById('scheduleTime');
            const scheduleEndTimeInput = document.getElementById('scheduleEndTime');
            const modalErrorMessage = document.getElementById('modal-error-message');
            const scheduledTasksList = document.getElementById('scheduled-tasks-list');
            const noScheduledTask = document.getElementById('no-scheduled-task');
            // Routine edit modal elements
            const routineModal = document.getElementById('routineModal');
            const routineModalContainer = routineModal.querySelector('.modal-container');
            const closeRoutineModalBtn = document.getElementById('closeRoutineModalBtn');
            const routineListContainer = document.getElementById('routine-list');


            // State variables
            let currentTask = null;
            let completedTasks = [];
            let routineTasks = [];
            let scheduledTasks = [];
            let timerInterval = null;
            const weekDays = ['日', '月', '火', '水', '木', '金', '土'];

            // --- LocalStorage Functions ---
            const loadData = () => {
                currentTask = JSON.parse(localStorage.getItem('currentTask')) || null;
                completedTasks = JSON.parse(localStorage.getItem('completedTasks')) || [];
                routineTasks = JSON.parse(localStorage.getItem('routineTasks')) || ['定例会議', '日報作成', 'メールチェック'];
                scheduledTasks = JSON.parse(localStorage.getItem('scheduledTasks')) || [];
            };

            const saveData = () => {
                localStorage.setItem('currentTask', JSON.stringify(currentTask));
                localStorage.setItem('completedTasks', JSON.stringify(completedTasks));
                localStorage.setItem('routineTasks', JSON.stringify(routineTasks));
                localStorage.setItem('scheduledTasks', JSON.stringify(scheduledTasks));
            };
            
            // --- Utility Functions ---
            const formatTime = (date) => new Date(date).toLocaleTimeString('ja-JP', { hour: '2-digit', minute: '2-digit' });
            const formatDate = (date) => new Date(date).toLocaleDateString('ja-JP');
            const formatDuration = (ms) => {
                if (ms < 0) ms = 0;
                const totalSeconds = Math.floor(ms / 1000);
                const hours = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');
                const minutes = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');
                const seconds = String(totalSeconds % 60).padStart(2, '0');
                return `${hours}:${minutes}:${seconds}`;
            };
            const showError = (message, isModal = false) => {
                const el = isModal ? modalErrorMessage : errorMessage;
                el.textContent = message;
                el.classList.remove('hidden');
            };
            const hideError = (isModal = false) => {
                const el = isModal ? modalErrorMessage : errorMessage;
                el.classList.add('hidden');
            };

            // --- Rendering Functions ---
            const renderCurrentTask = () => {
                if (currentTask) {
                    currentTaskContainer.classList.remove('hidden');
                    noCurrentTask.classList.add('hidden');
                    const elapsedTime = new Date().getTime() - new Date(currentTask.startTime).getTime();
                    currentTaskContainer.innerHTML = `
                        <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
                            <div>
                                <h3 class="text-lg font-bold text-blue-500">${currentTask.name}</h3>
                                <p class="text-sm text-gray-500">開始時刻: ${formatTime(currentTask.startTime)}</p>
                            </div>
                            <div class="flex items-center gap-4 w-full md:w-auto">
                                <p class="timer text-2xl font-bold flex-grow text-center">${formatDuration(elapsedTime)}</p>
                                <button id="stopTaskBtn" class="px-6 py-3 bg-red-600 text-white font-bold rounded-lg hover:bg-red-700 transition-transform transform hover:scale-105 shadow-md">業務終了</button>
                            </div>
                        </div>`;
                    document.getElementById('stopTaskBtn').addEventListener('click', stopTask);
                } else {
                    currentTaskContainer.classList.add('hidden');
                    noCurrentTask.classList.remove('hidden');
                    clearInterval(timerInterval);
                    timerInterval = null;
                }
            };

            const renderTaskLog = () => {
                taskLog.innerHTML = '';
                if (completedTasks.length === 0) {
                    noTaskLog.classList.remove('hidden');
                    exportCsvBtn.disabled = true;
                    clearLogBtn.disabled = true;
                    exportCsvBtn.classList.add('opacity-50', 'cursor-not-allowed');
                    clearLogBtn.classList.add('opacity-50', 'cursor-not-allowed');
                } else {
                    noTaskLog.classList.add('hidden');
                    exportCsvBtn.disabled = false;
                    clearLogBtn.disabled = false;
                    exportCsvBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                    clearLogBtn.classList.remove('opacity-50', 'cursor-not-allowed');
                    const sortedTasks = [...completedTasks].sort((a, b) => new Date(b.startTime) - new Date(a.startTime));
                    sortedTasks.forEach(task => {
                        const taskElement = document.createElement('div');
                        taskElement.className = 'p-4 bg-white rounded-lg shadow-md border-l-4 border-green-500';
                        taskElement.innerHTML = `
                            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
                                <div class="flex-grow">
                                    <p class="font-bold">${task.name}</p>
                                    <p class="text-sm text-gray-500">${formatDate(task.startTime)} | ${formatTime(task.startTime)} - ${formatTime(task.endTime)}</p>
                                </div>
                                <div class="flex items-center gap-4">
                                    <p class="text-lg font-semibold text-right">${formatDuration(task.duration)}</p>
                                    <button data-id="${task.id}" class="delete-log-item-btn text-gray-400 hover:text-red-500 p-1 rounded-full transition-colors">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                                    </button>
                                </div>
                            </div>`;
                        taskLog.appendChild(taskElement);
                    });
                    
                    document.querySelectorAll('.delete-log-item-btn').forEach(btn => {
                        btn.addEventListener('click', (e) => {
                            deleteLogItem(e.currentTarget.dataset.id);
                        });
                    });
                }
            };
            
            const renderRoutineTasks = () => {
                routineTasksSelect.innerHTML = '<option value="">選択してください</option>';
                routineTasks.forEach(task => {
                    const option = document.createElement('option');
                    option.value = task;
                    option.textContent = task;
                    routineTasksSelect.appendChild(option);
                });
            };

            const renderScheduledTasks = () => {
                scheduledTasksList.innerHTML = '';
                if (scheduledTasks.length === 0) {
                    noScheduledTask.classList.remove('hidden');
                } else {
                    noScheduledTask.classList.add('hidden');
                    scheduledTasks.forEach(task => {
                        const daysStr = task.days.map(d => weekDays[d]).join(', ');
                        const taskEl = document.createElement('div');
                        taskEl.className = 'p-3 bg-white rounded-lg shadow-md flex justify-between items-center';
                        taskEl.innerHTML = `
                            <div>
                                <p class="font-semibold">${task.name}</p>
                                <p class="text-sm text-gray-500">毎週 ${daysStr} ${task.time} - ${task.endTime}</p>
                            </div>
                            <button data-id="${task.id}" class="delete-schedule-btn text-red-500 hover:text-red-700 p-1 rounded-full">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                            </button>`;
                        scheduledTasksList.appendChild(taskEl);
                    });
                    document.querySelectorAll('.delete-schedule-btn').forEach(btn => {
                        btn.addEventListener('click', (e) => deleteScheduledTask(e.currentTarget.dataset.id));
                    });
                }
            };

            // --- Core Logic ---
            const startTask = (taskNameToStart, scheduledId = null) => {
                if (currentTask) {
                    showError('既に進行中のタスクがあります。先に終了してください。');
                    return;
                }
                const name = taskNameToStart || taskNameInput.value.trim();
                if (!name) {
                    showError('業務内容を入力してください。');
                    return;
                }
                hideError();
                currentTask = { id: Date.now(), name: name, startTime: new Date().toISOString(), scheduledId: scheduledId };
                if (!taskNameToStart) {
                    taskNameInput.value = '';
                    routineTasksSelect.value = '';
                }
                saveData();
                renderAll();
                if (!timerInterval) {
                    timerInterval = setInterval(renderCurrentTask, 1000);
                }
            };

            const stopTask = () => {
                if (!currentTask) return;
                const endTime = new Date();
                const startTime = new Date(currentTask.startTime);
                completedTasks.push({ ...currentTask, endTime: endTime.toISOString(), duration: endTime.getTime() - startTime.getTime() });
                currentTask = null;
                saveData();
                renderAll();
            };
            
            const addRoutineTask = () => {
                const newRoutine = prompt('登録するルーチン業務名を入力してください:');
                if (newRoutine && newRoutine.trim() !== '') {
                    if (!routineTasks.includes(newRoutine.trim())) {
                        routineTasks.push(newRoutine.trim());
                        saveData();
                        renderRoutineTasks();
                    } else {
                        alert('その業務は既に登録されています。');
                    }
                }
            };

            const exportToCSV = () => {
                if (completedTasks.length === 0) return;
                let csvContent = "業務内容,開始日,開始時刻,終了時刻,業務時間(HH:MM:SS)\n";
                completedTasks.forEach(task => {
                    const row = [`"${task.name.replace(/"/g, '""')}"`, formatDate(task.startTime), formatTime(task.startTime), formatTime(task.endTime), formatDuration(task.duration)].join(',');
                    csvContent += row + "\n";
                });
                const blob = new Blob([new Uint8Array([0xEF, 0xBB, 0xBF]), csvContent], { type: 'text/csv;charset=utf-8;' });
                const now = new Date();
                const filename = `task_log_${now.getFullYear()}${(now.getMonth()+1).toString().padStart(2, '0')}${now.getDate().toString().padStart(2, '0')}.csv`;
                saveAs(blob, filename);
            };

            const clearAllLogs = () => {
                if (completedTasks.length === 0) return;
                if (confirm('本当にすべての業務ログを削除しますか？この操作は元に戻せません。')) {
                    completedTasks = [];
                    saveData();
                    renderTaskLog();
                }
            };
            
            const deleteLogItem = (id) => {
                const taskId = parseInt(id, 10);
                const taskToDelete = completedTasks.find(task => task.id === taskId);
                if (!taskToDelete) return;

                if (confirm(`ログ「${taskToDelete.name}」を削除しますか？`)) {
                    completedTasks = completedTasks.filter(task => task.id !== taskId);
                    saveData();
                    renderTaskLog();
                }
            };

            // --- Routine Edit Modal Logic ---
            const openRoutineModal = () => {
                renderRoutineListForEdit();
                routineModal.classList.remove('hidden');
                setTimeout(() => {
                    routineModal.classList.remove('opacity-0');
                    routineModalContainer.classList.remove('opacity-0', 'scale-95');
                }, 10);
            };

            const closeRoutineModal = () => {
                routineModal.classList.add('opacity-0');
                routineModalContainer.classList.add('opacity-0', 'scale-95');
                setTimeout(() => routineModal.classList.add('hidden'), 300);
            };

            const renderRoutineListForEdit = () => {
                routineListContainer.innerHTML = '';
                if (routineTasks.length === 0) {
                    routineListContainer.innerHTML = `<p class="text-gray-500 text-center">登録済みのルーチン業務はありません。</p>`;
                    return;
                }
                routineTasks.forEach(task => {
                    const itemEl = document.createElement('div');
                    itemEl.className = 'p-2 bg-gray-100 rounded-lg flex justify-between items-center';
                    itemEl.innerHTML = `
                        <span>${task}</span>
                        <button data-task="${task}" class="delete-routine-btn text-red-500 hover:text-red-700 p-1 rounded-full">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                        </button>
                    `;
                    routineListContainer.appendChild(itemEl);
                });

                document.querySelectorAll('.delete-routine-btn').forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        const taskToDelete = e.currentTarget.dataset.task;
                        deleteRoutineTask(taskToDelete);
                    });
                });
            };

            const deleteRoutineTask = (taskName) => {
                if (confirm(`「${taskName}」をルーチン業務から削除しますか？`)) {
                    routineTasks = routineTasks.filter(task => task !== taskName);
                    saveData();
                    renderRoutineTasks();
                    renderRoutineListForEdit();
                }
            };

            // --- Schedule Modal Logic ---
            const openScheduleModal = () => {
                scheduleModal.classList.remove('hidden');
                setTimeout(() => {
                    scheduleModal.classList.remove('opacity-0');
                    scheduleModalContainer.classList.remove('opacity-0', 'scale-95');
                }, 10);
                scheduleTaskNameInput.value = '';
                scheduleTimeInput.value = '';
                scheduleEndTimeInput.value = '';
                hideError(true);
                weekdaysContainer.querySelectorAll('button').forEach(btn => {
                    btn.classList.remove('bg-blue-600', 'text-white');
                    btn.classList.add('bg-gray-200');
                });
            };

            const closeScheduleModal = () => {
                scheduleModal.classList.add('opacity-0');
                scheduleModalContainer.classList.add('opacity-0', 'scale-95');
                setTimeout(() => scheduleModal.classList.add('hidden'), 300);
            };

            const saveScheduledTask = () => {
                const name = scheduleTaskNameInput.value.trim();
                const time = scheduleTimeInput.value;
                const endTime = scheduleEndTimeInput.value;
                const selectedDays = Array.from(weekdaysContainer.querySelectorAll('button.bg-blue-600')).map(btn => parseInt(btn.dataset.day));

                if (!name) { showError('業務内容を入力してください。', true); return; }
                if (selectedDays.length === 0) { showError('曜日を1つ以上選択してください。', true); return; }
                if (!time) { showError('開始時刻を入力してください。', true); return; }
                if (!endTime) { showError('終了時刻を入力してください。', true); return; }
                if (endTime <= time) { showError('終了時刻は開始時刻より後に設定してください。', true); return; }
                
                hideError(true);
                scheduledTasks.push({ id: Date.now().toString(), name, days: selectedDays, time, endTime });
                saveData();
                renderScheduledTasks();
                closeScheduleModal();
            };

            const deleteScheduledTask = (id) => {
                if (confirm('この定期タスクを削除しますか？')) {
                    scheduledTasks = scheduledTasks.filter(task => task.id !== id);
                    saveData();
                    renderScheduledTasks();
                }
            };
            
            const checkScheduledTasks = () => {
                const now = new Date();
                const currentDay = now.getDay();
                const currentTime = `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`;
                const todayStr = now.toISOString().split('T')[0];

                if (currentTask && currentTask.scheduledId) {
                    const schedule = scheduledTasks.find(t => t.id === currentTask.scheduledId);
                    if (schedule && schedule.endTime === currentTime) {
                        console.log(`Stopping scheduled task by schedule: ${currentTask.name}`);
                        stopTask();
                        return;
                    }
                }

                if (currentTask) return; 

                for (const task of scheduledTasks) {
                    if (task.days.includes(currentDay) && task.time === currentTime) {
                        if (task.lastTriggeredDate !== todayStr) {
                            console.log(`Starting scheduled task: ${task.name}`);
                            task.lastTriggeredDate = todayStr;
                            startTask(task.name, task.id);
                            saveData();
                            break;
                        }
                    }
                }
            };
            
            // --- Event Listeners ---
            startTaskBtn.addEventListener('click', () => startTask());
            taskNameInput.addEventListener('keydown', (e) => { if (e.key === 'Enter') startTask(); });
            exportCsvBtn.addEventListener('click', exportToCSV);
            clearLogBtn.addEventListener('click', clearAllLogs);
            addRoutineBtn.addEventListener('click', addRoutineTask);
            routineTasksSelect.addEventListener('change', (e) => { if (e.target.value) taskNameInput.value = e.target.value; });
            openScheduleModalBtn.addEventListener('click', openScheduleModal);
            closeScheduleModalBtn.addEventListener('click', closeScheduleModal);
            saveScheduleBtn.addEventListener('click', saveScheduledTask);
            scheduleModal.addEventListener('click', (e) => { if (e.target === scheduleModal) closeScheduleModal(); });
            // New Listeners for Routine Modal
            editRoutineBtn.addEventListener('click', openRoutineModal);
            closeRoutineModalBtn.addEventListener('click', closeRoutineModal);
            routineModal.addEventListener('click', (e) => { if (e.target === routineModal) closeRoutineModal(); });


            // --- Initialisation ---
            const renderAll = () => {
                renderCurrentTask();
                renderTaskLog();
                renderRoutineTasks();
                renderScheduledTasks();
            };
            
            const init = () => {
                weekDays.forEach((day, index) => {
                    const button = document.createElement('button');
                    button.textContent = day;
                    button.dataset.day = index;
                    button.className = "p-2 rounded-lg bg-gray-200 transition";
                    button.addEventListener('click', () => {
                        button.classList.toggle('bg-blue-600');
                        button.classList.toggle('text-white');
                        button.classList.toggle('bg-gray-200');
                    });
                    weekdaysContainer.appendChild(button);
                });
                
                loadData();
                renderAll();

                if (currentTask && !timerInterval) {
                    timerInterval = setInterval(renderCurrentTask, 1000);
                }
                
                setInterval(checkScheduledTasks, 60000);
                checkScheduledTasks();
            };

            init();
        });
    </script>
</body>
</html>

業務時間計測ツール

ツールだけ利用したい方はこちら

生成AIを使った業務時間計測ツールの作り方

生成AIを活用すれば、プログラミングの知識がなくてもある程度のツールを作成することは可能です。生成AIのシステム上全く同じツールを作ることはできませんが、GeminiのCanvasなどのサイトを作成できるAIツールで「こういうサイトが作りたい」「欲しい機能」を記載し一旦作成。出来上がったプレビュー見ながらデバックや追加機能の指示をして作成していきます。

最初のプロンプト

業務時間や内容を管理できるタスク管理ツールサイトが作りたい

#入れたい機能
業務内容を記載して、開始ボタン、終了ボタンを押すとそれぞれ業務時間のストップウォッチが記録される
ルーチン業務登録機能、会議や決められた時間を毎週時間がセットできる機能
記録した業務はスプレットシートに書き出しができる

まずはどんなものが作りたいのかのイメージと必ず入れてほしい機能を記載をGeminiに伝えてCanvasをONにした状態で聞きます。

Geminiがこんな感じで作りますね。と言いながらデザインを作ってくれます。後は作られたコードのプレビューを見ながら、使い方のわからない部分をGeminiに聞いたり、動いていない機能のエラーを修正してもらったり、更に追加してほしい機能の調整をしていきます。

追加した機能のプロンプト

業務ログ個別クリアボタン
業務ログ一括クリアボタン
業務ログを個別でクリアするボタンもほしい

過程をまとめたプロンプト配布

業務時間や内容を管理できるタスク管理ツールサイトが作りたい

#入れたい機能
業務内容を記載して、開始ボタン、終了ボタンを押すとそれぞれ業務時間のストップウォッチが記録される機能
ルーチン業務登録機能、会議や決められた時間を毎週時間がセットできる機能
「定期タスク設定」ボタン実装機能
終わりの時間も設定できる機能
ルーチン業務から選択される項目は消せる機能
記録した業務はスプレットシートに書き出しができる機能
業務ログ個別クリアボタン
業務ログ一括クリアボタン
業務ログを個別でクリアするボタンもほしい