DIVX テックブログ

catch-img

AIと何度も会話して、自分専用のタスク管理リストを作った話

1. はじめに

divxでエンジニアをしている越川です。本記事では、「AIを用いて短時間で業務改善を進める」という内容を紹介していきます。

現在担当している証明書の更新業務は、タスクの状態は「完了」か「未完了」の二択ではありません。 「返信待ち」「担当者にて確認中」など、 中間の状態(ステータス)が存在します。

単純なチェックリストだと、この「待ち状態」のタスクが埋もれてしまい、「そういえばあの件、3日前から返信ないけど大丈夫かな?」と後から不安になることがよくあります。

そこで今回は、既存のアプリを探すのではなく、 「自分の業務に完璧にフィットする管理画面」をAIと一緒に作ってみました。 最初から完璧な指示を出したわけではなく、「ここはこうして」「次はこれを追加して」と何度か会話しながら作成しています。

2. 背景

私が欲しかったのは、以下の要件を満たしているリストです。

  1. ステータス管理: 「対応中」「送信済み」「先方待ち」などをパッと見で分かりたい。
  2. 経過時間の可視化: 最後に更新してから何時間が経過したかを表示し、放置されているタスクを炙り出したい。
  3. 会議用テキストの自動生成: 朝会の前に、タスク状況を手打ちでまとめるのが面倒なので自動化したい。
  4. 情報管理:客先情報が入るものなので、安心して使えるようローカルでのみ閲覧・保存・編集ができるようなサイトにする。

これらをブラウザ上の「HTMLファイル1つ」で完結させるのが目標です。

3. やったこと

時間をかけることは避けたかったので、プログラミングの要件定義書のようなものは書いていません。 
「こういうのが欲しいな」というふんわりしたイメージを伝え、そこから継ぎ足し建築のように機能を追加していきました。

1回目:まずは見た目を作る

まずはチケット管理システムのイメージを伝えて、土台を作ってもらいました。

自分用のタスク管理ツールを作りたいです。ブラウザで動くHTMLファイルにしてください。デザインは青っぽくて清潔感のある感じで。
機能としては、

1.タスクを追加できる(件名、タイプ、今の状態、備考)

2.下に一覧がテーブルで表示される

3.「削除」ボタンで消せる

これだけのシンプルなやつをお願いします。

この時点では、「タスクを入力して表示するだけ」の画面が出来上がります。データの保存や時間表示はありませんが、見た目の確認はできる状態です。

2回目:時間を管理したい

次に、「一定期間更新がなければ強調する」機能をつけました。
今回は、自分が最後に対応した日付から3日経ったら経過時間の項目が赤色で表示されるように編集し、更新日が変更できるようにしました。

ありがとうございます!機能を追加したいです。

テーブルの中に「最終更新日」という列を追加してください。

・タスクを追加した時や、ステータスを変更した時に、その日時が自動で入るようにしたいです。

・そこから「今、何時間が経過しているか」を計算して、隣に表示してください。

・もし更新してから「3日(72時間)以上」経過していたら、文字を赤くして目立つようにしてください。

・「最終更新日」は変更できるようにしてください。「編集」ボタンを追加し、押下するとカレンダー等がウィンドウで出るようにしてください。

3回目:保存機能

ブラウザを閉じたり更新をしてもデータが残るように、データを保持するようAIに聞いてみます。

今回はIndexedDBを用いて、オフラインでも利用できるローカル保存機能を実装します。

ブラウザを閉じても消えないように、IndexedDBを使って保存できるようにしてください。

ちなみに、似たような機能としてlocalStorageがありますが、複数データを扱える点、大量のデータを扱いやすい点を踏まえてIndexedDBを使用しています。

4回目:日報作成機能

例えば「全体で何件あって、そのうち完了しているのは何件か」「進行中のタスクはどれか」をボタン1つで作成できるようにします。

画面の下にボタンを作ってください。押したら「会議用のテキスト」を作ってほしいです。

ここまで来ると、ボタン押下でタスク全体の状態が出力されます。

必要であれば、ここからさらにデザインを変更したり、欲しい機能を1〜2行で追加できるようになります。

自分の業務に合わせた最適なリストを、より短時間で思いのままに作成できました。

また、

・複数の指示(○○と△△を追加して欲しい、□□を追加した上で××を追加して等)はなるべく避け、一度に1つずつ指示する

・1度で上手く行かない場合は、「このボタンはテキストリンクにして欲しい」などある程度明確にした状態で伝える

・エラーは一度そのまま貼り付けて共有する

等のちょっとした注意点を使用するとより精度が高く、素早く作成できます。

また、今回のプロンプト等は一例であり、AIのモデルによっては違う結果になるかもしれません。

ご了承ください。

4. 結果

リストを作成したのち、最初に出た効果は、会議準備時間の短縮でした。

それまでは記載場所がバラバラだったり、全体を改めて確認した上でまとめていたため30分〜1時間近くかかっていました。

ですがリスト上で一括してまとめるようにしたため、1分とかからず準備を終えられるようになりました。

多少当日に確認する項目があっても10〜15分でできています。

また、振り分けられた時点で「未対応」状態で登録することで「自身がどれに対応すべきか」を確認するメモのように使用することもあり、自身の業務をより効率的に行うことができています。

5. おわりに

今回AIを用いてリストを作成した際、思ったことは「もう1人でコードに悩む必要はなくなっているんだな」ということでした。

AIが世に出てくる前は、プログラムを用いて1人で何かを作る行為は負荷が高いものでした。

現在ではAIとの会話により、誰でも想像したものを作りやすくなるようになりました。

また、コードの修正・アイデア出しや何気ない疑問などをAIとすぐに壁打ちすることにより、より情報に手が届きやすくなっています。

AIと上手に向き合っていくことで、短時間で大量の情報を得られる今の時代だからこそ、共存していけるようにしていきたいと思っています。

お気軽にご相談ください


ご不明な点はお気軽に
お問い合わせください

サービス資料や
お役立ち資料はこちら

DIVXブログ

テックブログ タグ一覧

人気記事ランキング

関連記事