AI君が労ってくれるTodo管理アプリを作成しました。 #ChatGPT – Qiita

DOCTYPE html>
html lang="ja">
head>
  meta charset="UTF-8">
  title>シンプルToDoリスト/title>
  tyle>
/head>

  h1>
  div class="todo-inputs">
    input type="text" id="content" placeholder="ToDo内容">
    input type="date" id="deadline">
    select id="priority">
      option value="高">高/option>
      中ption>
      option value="低">低/option>
    lect>
    button id="addBtn" onclick="addOrUpdateTodo()">追加/button>
    キャンセルbutton>
  /div>

  

    並び替え: 
    
      優先度順ption>
      option value="created">登録日順/option>
      締切順ption>
    /select>
  div>

  div class="todo-list" id="todoList">/div>

  
  

    
      指示してAIくん
    button>
    div id="aiSummary">/div>
  div>

  script>
    // localStorageからデータ読み込み
    let todos = JSON.parse(localStorage.getItem("todos") || "[]");
    let editingIndex = null; // 編集中のインデックス

    function saveTodos() {
      localStorage.setItem("todos", JSON.stringify(todos));
    }

    function addOrUpdateTodo() {
      const content = document.getElementById('content').value.trim();
      const deadline = document.getElementById('deadline').value;
      const priority = document.getElementById('priority').value;
      if (!content) {
        alert('内容を入力してください');
        return;
      }
      if (editingIndex === null) {
        // 新規追加
        const createdAt = new Date().toISOString();
        todos.push({
          content,
          deadline,
          priority,
          createdAt,
          done: false
        });
      } else {
        // 編集
        todos[editingIndex].content = content;
        todos[editingIndex].deadline = deadline;
        todos[editingIndex].priority = priority;
        editingIndex = null;
        document.getElementById("addBtn").innerText = "追加";
        document.getElementById("cancelEditBtn").style.display = "none";
      }
      saveTodos();
      document.getElementById('content').value = '';
      document.getElementById('deadline').value = '';
      document.getElementById('priority').value = '中';
      renderTodos();
    }

    function toggleDone(index) {
      todos[index].done = !todos[index].done;
      saveTodos();
      renderTodos();
    }

    function deleteTodo(index) {
      if (confirm("本当に削除しますか？")) {
        todos.splice(index, 1);
        saveTodos();
        renderTodos();
        cancelEdit();
      }
    }

    function editTodo(index) {
      document.getElementById('content').value = todos[index].content;
      document.getElementById('deadline').value = todos[index].deadline;
      document.getElementById('priority').value = todos[index].priority;
      editingIndex = index;
      document.getElementById("addBtn").innerText = "更新";
      document.getElementById("cancelEditBtn").style.display = "";
    }

    function cancelEdit() {
      editingIndex = null;
      document.getElementById('content').value = '';
      document.getElementById('deadline').value = '';
      document.getElementById('priority').value = '中';
      document.getElementById("addBtn").innerText = "追加";
      document.getElementById("cancelEditBtn").style.display = "none";
    }

    function getPriorityValue(p) {
      return p === "高" ? 1 : (p === "中" ? 2 : 3);
    }

    // 締切が3日以内なら赤く
    function getDeadlineStyle(deadline, done) {
      if (!deadline || done) return "";
      const today = new Date();
      const end = new Date(deadline);
      today.setHours(0,0,0,0);
      end.setHours(0,0,0,0);
      const diffDays = Math.ceil((end - today) / (1000 * 60 * 60 * 24));
      if (diffDays >= 0 && diffDays  3) {
        return "color:red; font-weight:bold;";
      }
      return "";
    }

    function renderTodos() {
      const sortBy = document.getElementById('sortBy').value;
      let sorted = [...todos];
      if (sortBy === 'priority') {
        sorted.sort((a, b) => getPriorityValue(a.priority) - getPriorityValue(b.priority));
      } else if (sortBy === 'created') {
        sorted.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
      } else if (sortBy === 'deadline') {
        sorted.sort((a, b) => {
          if (!a.deadline) return 1;
          if (!b.deadline) return -1;
          return new Date(a.deadline) - new Date(b.deadline);
        });
      }
      const list = sorted.map((todo, i) => {
        const originalIndex = todos.indexOf(todo);
        return `
        

          
            ${todo.done ? '未完了' : '完了'}
          
          

            
${todo.content}
            

              締切: ${todo.deadline || 'なし'}
              | 優先度: ${todo.priority}
              | 登録日: ${todo.createdAt.slice(0, 10)}
            
          
          編集
          削除
        
      `;
      }).join('');
      document.getElementById('todoList').innerHTML = list || "
ToDoがありません
";
    }

    // --- Dify AI連携：指示してAIくん ---
    async function instructAi() {
      const todos = JSON.parse(localStorage.getItem("todos") || "[]");
      const notDoneTodos = todos.filter(t => !t.done);
      if (notDoneTodos.length === 0) {
        document.getElementById('aiSummary').innerText = "未完了のタスクがありません！";
        return;
      }

      const apiKey = "YOUR_DIFY_API_KEY"; // ←ここにDify APIキーを入れてね
      const url = "https://api.dify.ai/v1/chat-messages";
      document.getElementById('aiSummary').innerText = "AIくんが考え中...";

      // todo_listをJSON文字列で送る！
      const todoListText = JSON.stringify(notDoneTodos);

      const prompt =
        "todo_listには未完了ToDo項目のJSON文字列が入っています。内容・締切・優先度を考慮して「今やるべき上位5件と理由」を日本語で指示してください。必ず以下のフォーマットで出力してください：\n1. タスク内容（理由: ～）\n2. ...\ntodo_list:";

      try {
        const res = await fetch(url, {
          method: "POST",
          headers: {
            "Authorization": `Bearer ${apiKey}`,
            "Content-Type": "application/json"
          },
          body: JSON.stringify({
            inputs: { todo_list: todoListText },  // JSON文字列として送る！
            query: prompt,
            user: "user1"   // 
          })
        });
        const data = await res.json();
        document.getElementById('aiSummary').innerText =
          data.answer || data.message || "AIの指示が取得できませんでした";
      } catch (e) {
        document.getElementById('aiSummary').innerText = "AIへの接続に失敗しました";
      }
    }

    // 初期表示
    renderTodos();
  /script>
body>
/html>



指示してAIくんボタンが追加されました！

続いてDify側の設定を行います。
Difyの概要や下準備などはこちらの記事を参考にしてください！


Difyの全体像

シンプル！
まずDifyトップ画面からスタジオタブでアプリを作成→最初から作成
アプリタイプはチャットフローを選択しを名前入力して作成します。

続いてノードの設定です。
開始ノードで入力フィールドを追加します。
変数名はアプリから送るデータのキー名と同じものを入力（ここではtodo_list）フィールドタイプは大量のテキストを受け取ることができる「段落」を設定します。最大長はアプリから送るデータの文字数に対応できるように調整します。

続いてLLMノードの設定です。
今回、AIモデルはGemini.2.0 Flashを選択しました。
プロンプト内容は画像の通りです。
応答がTodoリストだけでは寂しかったため、労ってくれるようにしました。

回答ノードの設定はこれだけです！

各ノードの設定が終わったら、画面右上の公開するボタンを押しアプリをデプロイします。
最後に、サイドバーにあるAPIアクセスを押した後、右上にある鍵マークがついたAPIキーボタンを押し、そこでAPIキー発行を発行します。
そこで発行したAPIキーをWebアプリのコードに入力し完成！
アプリの仕様画面

未完了の業務のみを抽出し、優先度順にTodoを表示してくれます。
しっかり労ってもくれています。

まとめ

今回はChatGPTやDifyを活用しTodo管理アプリを作成してみました。
ChatGPTにアプリの概要を伝えるだけで、最初のコードをスピーディに作成でき、さらに修正依頼も即座に反映してもらえるなんて驚きしました。
また、Difyと組み合わせることで、ただのTodo管理アプリを超え「AIが指示をくれるアプリ」にできたのも、今までの自分では絶対にできなかったことですし、次のステップに進めた感じがしてテンションが上がりました。
もちろん、まだ見栄えや操作性の向上、そしてDifyで使うプロンプトのブラッシュアップなど課題も残っていますが、最低限実用できるレベルのものができたと感じています。
これからは、より高度な指示をAIから引き出すためのプロンプト設計の精査や、UIの改善をしていきたいと考えています。
「アプリ作成なんて自分だけでは絶対にできない」 と思っていましたが、ChatGPTをうまく活用すればあっという間に形にできちゃうことを知り、新たな可能性が生まれた気がします！今後もいろんなアイデアを試しながら、さらに面白いツールを作っていきたいと思います！