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">
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
        .task-board {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        .task-column {
            min-height: 400px;
        }
        .task-card {
            cursor: grab;
            transition: all 0.2s ease-in-out;
        }
        .task-card:active {
            cursor: grabbing;
            transform: scale(1.05);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .dragging {
            opacity: 0.5;
        }
        .drag-over {
            border-style: dashed;
            border-color: #4f46e5;
            background-color: rgba(79, 70, 229, 0.05);
        }
    </style>
</head>
<body class="bg-gray-100 text-gray-800 p-4 sm:p-6 lg:p-8">

    <div class="max-w-7xl mx-auto">
        <!-- ヘッダー -->
        <header class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900">タスク管理ツール</h1>
            <p class="text-gray-600 mt-1">日々のタスクを効率的に管理しましょう。</p>
        </header>

        <!-- 設定エリア -->
        <div class="bg-white p-6 rounded-xl shadow-md mb-8">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div>
                    <label for="work-end-time" class="block text-sm font-medium text-gray-700">退勤時間の設定</label>
                    <input type="time" id="work-end-time" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-2">
                </div>
                <div class="md:col-span-2 flex items-end">
                    <button id="save-settings-btn" class="w-full md:w-auto bg-indigo-600 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition">
                        設定を保存
                    </button>
                </div>
            </div>
            <div id="countdown-display" class="mt-4 text-center text-lg font-medium text-indigo-700"></div>
        </div>
        
        <!-- タスク追加フォーム -->
        <div class="bg-white p-6 rounded-xl shadow-md mb-8">
            <h2 class="text-xl font-semibold mb-4">新しいタスクを追加</h2>
            <form id="add-task-form" class="flex flex-col sm:flex-row gap-4">
                <input type="text" id="task-input" placeholder="タスク内容を入力..." class="flex-grow block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm p-3" required>
                <button type="submit" class="w-full sm:w-auto bg-green-500 text-white font-semibold py-3 px-6 rounded-lg shadow-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition">
                    追加
                </button>
            </form>
        </div>

        <!-- タスクボード -->
        <main class="task-board">
            <!-- 未着手カラム -->
            <div id="todo-column" class="task-column bg-white p-5 rounded-xl shadow-md" data-status="todo">
                <h2 class="text-lg font-bold mb-4 border-b pb-2 text-red-600">未着手</h2>
                <div id="todo-tasks" class="space-y-4"></div>
            </div>
            <!-- 対応中カラム -->
            <div id="inprogress-column" class="task-column bg-white p-5 rounded-xl shadow-md" data-status="inprogress">
                <h2 class="text-lg font-bold mb-4 border-b pb-2 text-blue-600">対応中</h2>
                <div id="inprogress-tasks" class="space-y-4"></div>
            </div>
            <!-- 完了カラム -->
            <div id="done-column" class="task-column bg-white p-5 rounded-xl shadow-md" data-status="done">
                <h2 class="text-lg font-bold mb-4 border-b pb-2 text-green-600">完了</h2>
                <div id="done-tasks" class="space-y-4"></div>
            </div>
        </main>
    </div>

    <!-- モーダルウィンドウ (確認用) -->
    <div id="message-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
      <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3 text-center">
          <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title"></h3>
          <div class="mt-2 px-7 py-3">
            <p class="text-sm text-gray-500" id="modal-message"></p>
          </div>
          <div class="items-center px-4 py-3">
            <button id="modal-close-btn" class="px-4 py-2 bg-indigo-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-300">
              閉じる
            </button>
          </div>
        </div>
      </div>
    </div>


    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // DOM要素の取得
            const taskInput = document.getElementById('task-input');
            const addTaskForm = document.getElementById('add-task-form');
            const todoTasks = document.getElementById('todo-tasks');
            const inprogressTasks = document.getElementById('inprogress-tasks');
            const doneTasks = document.getElementById('done-tasks');
            const columns = document.querySelectorAll('.task-column');
            const workEndTimeInput = document.getElementById('work-end-time');
            const saveSettingsBtn = document.getElementById('save-settings-btn');
            const countdownDisplay = document.getElementById('countdown-display');
            
            const messageModal = document.getElementById('message-modal');
            const modalTitle = document.getElementById('modal-title');
            const modalMessage = document.getElementById('modal-message');
            const modalCloseBtn = document.getElementById('modal-close-btn');

            // タスクと設定の状態管理
            let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
            let workEndTime = localStorage.getItem('workEndTime') || '';
            let countdownInterval;
            let liveTimerInterval; // リアルタイムタイマー用のインターバル

            // --- モーダル表示 ---
            function showModal(title, message) {
                modalTitle.textContent = title;
                modalMessage.textContent = message;
                messageModal.classList.remove('hidden');
            }
            modalCloseBtn.addEventListener('click', () => {
                messageModal.classList.add('hidden');
            });

            // --- 設定の保存と読み込み ---
            if (workEndTime) {
                workEndTimeInput.value = workEndTime;
                startCountdown();
            }

            saveSettingsBtn.addEventListener('click', () => {
                const timeValue = workEndTimeInput.value;
                if (timeValue) {
                    workEndTime = timeValue;
                    localStorage.setItem('workEndTime', workEndTime);
                    showModal('設定完了', `退勤時間を ${workEndTime} に設定しました。`);
                    startCountdown();
                } else {
                    showModal('エラー', '有効な時間を入力してください。');
                }
            });

            // --- カウントダウン処理 ---
            function startCountdown() {
                if (countdownInterval) clearInterval(countdownInterval);
                if (!workEndTime) {
                    countdownDisplay.textContent = '退勤時間を設定してください。';
                    return;
                }

                countdownInterval = setInterval(() => {
                    const now = new Date();
                    const [endHour, endMinute] = workEndTime.split(':');
                    const endTime = new Date();
                    endTime.setHours(endHour, endMinute, 0, 0);

                    if (now >= endTime) {
                        countdownDisplay.textContent = '退勤時間です！タスクをCSVでダウンロードします。';
                        downloadCSV();
                        clearInterval(countdownInterval);
                        // ダウンロード後はリセット
                        localStorage.removeItem('workEndTime'); 
                        workEndTime = '';
                        return;
                    }

                    const diff = endTime - now;
                    const hours = Math.floor(diff / (1000 * 60 * 60));
                    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                    const seconds = Math.floor((diff % (1000 * 60)) / 1000);
                    countdownDisplay.textContent = `退勤まであと ${hours}時間 ${minutes}分 ${seconds}秒`;
                }, 1000);
            }

            // --- 時間フォーマット関数 ---
            function formatTime(ms) {
                if (!ms || ms < 1000) {
                    return "0秒";
                }
                let totalSeconds = Math.floor(ms / 1000);
                let hours = Math.floor(totalSeconds / 3600);
                totalSeconds %= 3600;
                let minutes = Math.floor(totalSeconds / 60);
                let seconds = totalSeconds % 60;

                let result = '';
                if (hours > 0) result += `${hours}時間 `;
                if (minutes > 0) result += `${minutes}分 `;
                if (seconds >= 0) result += `${seconds}秒`; // 0秒も表示
                
                return result.trim();
            }

            // --- タスクの描画 ---
            const renderTasks = () => {
                // 各カラムをクリア
                todoTasks.innerHTML = '';
                inprogressTasks.innerHTML = '';
                doneTasks.innerHTML = '';

                tasks.forEach(task => {
                    const taskElement = document.createElement('div');
                    taskElement.classList.add('task-card', 'bg-gray-50', 'p-4', 'rounded-lg', 'shadow');
                    taskElement.setAttribute('draggable', 'true');
                    taskElement.dataset.id = task.id;

                    let timerHTML = '';
                    let buttonsHTML = `<button data-id="${task.id}" class="delete-btn text-red-500 hover:text-red-700 text-xs">削除</button>`;

                    if (task.status === 'inprogress') {
                        if (task.startTime) { // Timer is running
                            timerHTML = `<p class="live-timer text-sm text-blue-600 mt-2 font-semibold" data-task-id="${task.id}"></p>`;
                            buttonsHTML = `
                                <button data-id="${task.id}" class="pause-btn text-yellow-600 hover:text-yellow-800 text-xs mr-2">一時停止</button>
                                ${buttonsHTML}
                            `;
                        } else { // Timer is paused
                            timerHTML = `<p class="text-sm text-gray-500 mt-2 font-semibold">作業時間: ${formatTime(task.elapsedTime)} (一時停止中)</p>`;
                            buttonsHTML = `
                                <button data-id="${task.id}" class="resume-btn text-green-600 hover:text-green-800 text-xs mr-2">作業再開</button>
                                ${buttonsHTML}
                            `;
                        }
                    } else if (task.status === 'done' && task.elapsedTime > 0) {
                        timerHTML = `<p class="text-sm text-gray-500 mt-2 font-semibold">作業時間: ${formatTime(task.elapsedTime)}</p>`;
                    }

                    taskElement.innerHTML = `
                        <p class="font-medium">${task.text}</p>
                        ${timerHTML}
                        <div class="text-right mt-2">
                            ${buttonsHTML}
                        </div>
                    `;
                    
                    if (task.status === 'todo') {
                        todoTasks.appendChild(taskElement);
                    } else if (task.status === 'inprogress') {
                        inprogressTasks.appendChild(taskElement);
                    } else {
                        doneTasks.appendChild(taskElement);
                    }
                });
                addDragAndDropListeners();
                addDeleteListeners();
                addPauseListeners();
                addResumeListeners();
            };
            
            // --- リアルタイムタイマーの更新 ---
            function updateLiveTimers() {
                tasks.forEach(task => {
                    if (task.status === 'inprogress' && task.startTime) {
                        const timerElement = document.querySelector(`.live-timer[data-task-id='${task.id}']`);
                        if (timerElement) {
                            const currentDuration = Date.now() - task.startTime;
                            const totalElapsed = (task.elapsedTime || 0) + currentDuration;
                            timerElement.textContent = `作業中: ${formatTime(totalElapsed)}`;
                        }
                    }
                });
            }

            // --- タスクの追加 ---
            addTaskForm.addEventListener('submit', (e) => {
                e.preventDefault();
                const taskText = taskInput.value.trim();
                if (taskText) {
                    const newTask = {
                        id: Date.now(),
                        text: taskText,
                        status: 'todo',
                        startTime: null, // 計測開始時間
                        elapsedTime: 0   // 経過時間 (ミリ秒)
                    };
                    tasks.push(newTask);
                    saveAndRender();
                    taskInput.value = '';
                }
            });
            
            // --- データの保存と再描画 ---
            const saveAndRender = () => {
                localStorage.setItem('tasks', JSON.stringify(tasks));
                renderTasks();
            };

            // --- ドラッグ＆ドロップのイベントリスナー ---
            function addDragAndDropListeners() {
                const taskCards = document.querySelectorAll('.task-card');
                taskCards.forEach(card => {
                    card.addEventListener('dragstart', handleDragStart);
                    card.addEventListener('dragend', handleDragEnd);
                });
            }

            columns.forEach(column => {
                column.addEventListener('dragover', handleDragOver);
                column.addEventListener('dragleave', handleDragLeave);
                column.addEventListener('drop', handleDrop);
            });
            
            let draggedItemId = null;

            function handleDragStart(e) {
                draggedItemId = this.dataset.id;
                setTimeout(() => {
                    this.classList.add('dragging');
                }, 0);
            }

            function handleDragEnd() {
                this.classList.remove('dragging');
                draggedItemId = null;
            }

            function handleDragOver(e) {
                e.preventDefault();
                this.classList.add('drag-over');
            }
            
            function handleDragLeave() {
                this.classList.remove('drag-over');
            }

            function handleDrop(e) {
                e.preventDefault();
                this.classList.remove('drag-over');
                const newStatus = this.dataset.status;
                const task = tasks.find(t => t.id == draggedItemId);

                if (task && task.status !== newStatus) {
                    updateTaskStatus(task, newStatus);
                }
            }
            
            // --- タスクステータス更新ロジック ---
            function updateTaskStatus(task, newStatus) {
                const oldStatus = task.status;

                // 「対応中」から移動する場合、タイマーを停止・記録
                if (oldStatus === 'inprogress' && task.startTime) {
                    const duration = Date.now() - task.startTime;
                    task.elapsedTime = (task.elapsedTime || 0) + duration;
                    task.startTime = null;
                }

                // 「対応中」に移動する場合、タイマーを開始
                if (newStatus === 'inprogress') {
                    task.startTime = Date.now();
                }

                task.status = newStatus;
                saveAndRender();
            }
            
            // --- 削除ボタンのイベントリスナー ---
            function addDeleteListeners() {
                const deleteButtons = document.querySelectorAll('.delete-btn');
                deleteButtons.forEach(button => {
                    button.addEventListener('click', (e) => {
                        const idToDelete = e.target.dataset.id;
                        tasks = tasks.filter(task => task.id != idToDelete);
                        saveAndRender();
                    });
                });
            }
            
            // --- 一時停止ボタンのイベントリスナー ---
            function addPauseListeners() {
                const pauseButtons = document.querySelectorAll('.pause-btn');
                pauseButtons.forEach(button => {
                    button.addEventListener('click', (e) => {
                        const idToPause = e.target.dataset.id;
                        const task = tasks.find(t => t.id == idToPause);
                        if (task && task.status === 'inprogress' && task.startTime) {
                            const duration = Date.now() - task.startTime;
                            task.elapsedTime = (task.elapsedTime || 0) + duration;
                            task.startTime = null;
                            saveAndRender();
                        }
                    });
                });
            }

            // --- 再開ボタンのイベントリスナー ---
            function addResumeListeners() {
                const resumeButtons = document.querySelectorAll('.resume-btn');
                resumeButtons.forEach(button => {
                    button.addEventListener('click', (e) => {
                        const idToResume = e.target.dataset.id;
                        const task = tasks.find(t => t.id == idToResume);
                        if (task && task.status === 'inprogress' && !task.startTime) {
                            task.startTime = Date.now();
                            saveAndRender();
                        }
                    });
                });
            }

            // --- CSVダウンロード機能 ---
            function downloadCSV() {
                if (tasks.length === 0) {
                    showModal('情報', 'ダウンロードするタスクがありません。');
                    return;
                }

                const headers = ['ID', 'タスク内容', 'ステータス', '作業時間'];
                const statusMap = {
                    'todo': '未着手',
                    'inprogress': '対応中',
                    'done': '完了'
                };

                const rows = tasks.map(task => {
                    let finalElapsedTime = task.elapsedTime || 0;
                    // もしタスクがCSVダウンロード時に「対応中」だった場合、その時点までの時間を加算する
                    if (task.status === 'inprogress' && task.startTime) {
                        finalElapsedTime += Date.now() - task.startTime;
                    }

                    return [
                        task.id, 
                        `"${task.text.replace(/"/g, '""')}"`, 
                        statusMap[task.status],
                        finalElapsedTime > 0 ? formatTime(finalElapsedTime) : ''
                    ].join(',')
                });

                const csvContent = [headers.join(','), ...rows].join('\n');
                const blob = new Blob(["\uFEFF" + csvContent], { type: 'text/csv;charset=utf-8;' });
                
                const link = document.createElement('a');
                const url = URL.createObjectURL(blob);
                link.setAttribute('href', url);
                
                const today = new Date();
                const fileName = `tasks_${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}.csv`;
                link.setAttribute('download', fileName);
                
                link.style.visibility = 'hidden';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }

            // 初期描画とタイマー開始
            renderTasks();
            if (liveTimerInterval) clearInterval(liveTimerInterval);
            liveTimerInterval = setInterval(updateLiveTimers, 1000);
        });
    </script>
</body>
</html>

タスク進行管理ツール

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

生成AIを使ったタスク進行管理ツールの作り方

所見のプロンプト

タスク管理ツールを作ってほしい

＃条件
勤務時間を指定できる
タスクが選択・記載できる
未着手、対応中、完了欄がありタスクをドラックで移動できる
退勤時間になったら、自動CSVでダウンロードされる

プレビュー画面を見ながら微調整していく

対応中したタスクは時間を計測、完了にしたら時間を止めて、何分かかりました。作業時間がわかるようにしてほしい
対応中はリアルタイムで作業時間が見れるようにして
対応中に明日着手ボタンを作って作業中の時間を一時的に止めれるようにしてほしい
明日着手したら時間を止めるだけで未着手には戻らないで

過程をまとめたプロンプト公開

タスク管理ツールを作ってほしい

＃条件
勤務時間を指定できる
タスクが選択・記載できる
未着手、対応中、完了欄がありタスクをドラックで移動できる
退勤時間になったら、自動CSVでダウンロードされる
対応中したタスクは時間を計測、完了にしたら時間を止めて、何分かかりました。作業時間がわかるようにしてほしい
対応中はリアルタイムで作業時間が見れるようにして
対応中に明日着手ボタンを作って作業中の時間を一時的に止めれるようにしてほしい
明日着手したら時間を止めるだけで未着手には戻らないで