MarkdownAIのイベントが開催されるたび、1つ作成するようにしているので今回も作成してみました。
今回のテーマが「効率化と個性を活かした活用術！」ということだったので効率化というところからアイデアを得て、タスクを投げると順番を考えてくれるサイトを作成してみました。

作成したサイト

※画像は不具合でアップできなかったのでアップ出来次第載せる予定です。

以下リンクからサイトは確認することができます。
タスク管理お助けサイト

今回使用したもの

画像生成AI
model(AI)
(Mermaid)

modelや画像の挿入については過去記事で紹介しているのでよければ参考にしてみてください。

サイトのコード

scriptタグの中身をいじったりしているので気になる方は見てみてください。

コード

# PriorityPlanner
![7d0fc55d-29f7-4770-b470-55525e207709](AI生成画像のURL)
#### 勤務時間
<div style="display: flex;">
    <input class="input" type="time" id="start-time" style="width: 100px;">
    ~
    <input class="input" type="time" id="end-time" style="width: 100px;">
</div>

#### タスク
- タスク1
    - 内容<input class="input" type="text" id="task1" style="width: 200px;">優先度<select id="priority1" style="font-size:16px;">
<option>高</option>
<option>中</option>
<option>低</option>
</select>
- タスク2
    - 内容<input class="input" type="text" id="task2" style="width: 200px;">優先度<select id="priority2" style="font-size:16px;">
<option>高</option>
<option>中</option>
<option>低</option>
</select>
- タスク3
    - 内容<input class="input" type="text" id="task3" style="width: 200px;">優先度<select id="priority3" style="font-size:16px;">
<option>高</option>
<option>中</option>
<option>低</option>
</select>
- タスク4
    - 内容<input class="input" type="text" id="task4" style="width: 200px;">優先度<select id="priority4" style="font-size:16px;">
<option>高</option>
<option>中</option>
<option>低</option>
</select>
<button class="button is-info" type="button" id="button-1739274111">聞いてみる</button>

<div id="answer-1739274111"></div>

<script>
(() => {
  const button = document.getElementById('button-1739274111');
  button.addEventListener('click', async event => {
    button.classList.add('is-loading');
    button.disabled = true;
    
    // 各入力フィールドの値を取得
    const startTime = document.getElementById('start-time').value;
    const endTime = document.getElementById('end-time').value;
    
    const task1 = document.getElementById('task1').value;
    const priority1 = document.getElementById('priority1').value;
    
    const task2 = document.getElementById('task2').value;
    const priority2 = document.getElementById('priority2').value;
    
    const task3 = document.getElementById('task3').value;
    const priority3 = document.getElementById('priority3').value;
    
    const task4 = document.getElementById('task4').value;
    const priority4 = document.getElementById('priority4').value;

    // 入力内容を message 変数に格納
    const message = `
      勤務時間: ${startTime} ~ ${endTime}
      タスク1: ${task1} (優先度: ${priority1})
      タスク2: ${task2} (優先度: ${priority2})
      タスク3: ${task3} (優先度: ${priority3})
      タスク4: ${task4} (優先度: ${priority4})
    `;
    const serverAi = new ServerAI();
    const answer = await serverAi.getAnswerText('iTvwd84pFdKgywxiEhdFx6', '', message);
    
    document.getElementById('answer-1739274111').innerText = answer;
    button.classList.remove('is-loading');
    button.disabled = false;
  });
})();
</script>

プロンプト

今回はフローチャート形式で回答を作成してほしいと考えたためmermaid形式で返すようなプロンプトにしました。

model

次の条件を満たして1日のタスクを進める順番を考えてほしい。

- 勤務時間の合計時間が8時間を超える場合は1時間の休憩を入れる。
- 休憩は12時〜とする。
- 優先度が高いものから順にタスクを消化できるようにする。

出力はMermaid記法のコードブロックとして返してください。
各タスクの開始時間と終了時間を明示し、視覚的に分かりやすいフローチャートにしてください。

また、入力画面側では各inputにidをつけ、その内容をmessageとしてAIに投げるようにしています。

 // 各入力フィールドの値を取得
    const startTime = document.getElementById('start-time').value;
    const endTime = document.getElementById('end-time').value;
    
    const task1 = document.getElementById('task1').value;
    const priority1 = document.getElementById('priority1').value;
    
    const task2 = document.getElementById('task2').value;
    const priority2 = document.getElementById('priority2').value;
    
    const task3 = document.getElementById('task3').value;
    const priority3 = document.getElementById('priority3').value;
    
    const task4 = document.getElementById('task4').value;
    const priority4 = document.getElementById('priority4').value;

    // 入力内容を message 変数に格納
    const message = `
      勤務時間: ${startTime} ~ ${endTime}
      タスク1: ${task1} (優先度: ${priority1})
      タスク2: ${task2} (優先度: ${priority2})
      タスク3: ${task3} (優先度: ${priority3})
      タスク4: ${task4} (優先度: ${priority4})
    `;

今後の改良点

タスクを好きな数増やせるようにする
現状では4つ以上のタスクに対応していないので増やすボタンを押したらタスクの数を増やせるといった機能があると便利だと思いました。
mermaid記法で回答が表示できるようにする
短時間で作成したため、回答を返すことはできましたがmermaid形式がうまく表示されていないのでこれを表示できるようにしていく必要があると思いました。

最後に

ここまで読んでいただきありがとうございます。
他の方のMarkdownAIの記事も読んでみると素晴らしいアイデアが多いと感じております。
筆者もMarkdownAIを使いこなせるようになり、さまざまなアイデアで実装できるまで精進していきたい所存です。