AI ToDo プランナーは、タスクの完了を促進するためのWebサービスです。
メインのタスクを入力するだけで、自動的にサブタスクが作成されるので、やるべきことの解像度が高まり、タスクに取り組みやすくなります。
ai.todo.planner.mov
Warning
- Renderのデータベース無料期間が90日なので、2024年4月以降は使用できない可能性があります。
- OpenAIのAPIは5ドル分しか割り当てていないので、上限を超えると動かなくなる可能性があります。
最近、ChatGPTなどのAI技術の発展が目まぐるしく、これを活用したWebサービスの作成に取り組みたいと考えていました。
また、私自身がタスク管理に苦手意識を持っていたため、AIを利用してタスク管理を助けるツールを開発することにしました。
![](https://private-user-images.githubusercontent.com/52352924/297475577-76386875-bda6-44ec-b8c9-d0435ec4c6ee.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMDE1NDQsIm5iZiI6MTcyNDEwMTI0NCwicGF0aCI6Ii81MjM1MjkyNC8yOTc0NzU1NzctNzYzODY4NzUtYmRhNi00NGVjLWI4YzktZDA0MzVlYzRjNmVlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDIxMDA0NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQ3ZDQxMzk1NzgwZjMxMjJkNmZjYWEzMTg0OWRjYjI1MGMzNDI5ZDMwODc5MGNiNDA3MDJmMDJjODBlMGU2MjMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.xv2q79gF9cTl-LHVemezLfkzr7r4yMaB3kq8jk2gxqI)
![](https://private-user-images.githubusercontent.com/52352924/297476093-7d5f72bf-65ef-42e1-9680-0efc1da89922.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMDE1NDQsIm5iZiI6MTcyNDEwMTI0NCwicGF0aCI6Ii81MjM1MjkyNC8yOTc0NzYwOTMtN2Q1ZjcyYmYtNjVlZi00MmUxLTk2ODAtMGVmYzFkYTg5OTIyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDIxMDA0NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTg1Y2U1ZjdmZGQ4YjZkZTM1MDA3MDBhOGU3NjAxNzE0YWQ2MmM2ZTk5MGU1N2RmODY1OWMzMTIwNDMxYTZiN2YmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.JmQuw1egc1YVH4PlZYfyQQYBNbDUO8c2kM5wm1z5xnc)
- タスク一覧ページから「+ タスクを作成」ボタンをクリックして、新しいタスクを追加します。
- タスクのタイトルと詳細を入力し、期限を設定します。
- 「タスクを作成」ボタンをクリックすると、タスクがリストに追加されます。
![](https://private-user-images.githubusercontent.com/52352924/297476195-747bfeaf-1502-4e05-b67e-c1a320552ae0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMDE1NDQsIm5iZiI6MTcyNDEwMTI0NCwicGF0aCI6Ii81MjM1MjkyNC8yOTc0NzYxOTUtNzQ3YmZlYWYtMTUwMi00ZTA1LWI2N2UtYzFhMzIwNTUyYWUwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDIxMDA0NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWNiZGI1YTQyY2UwZTdmZWI2MjExNjRkMzcxODQyY2IzODg2ZjU0ZjdmZDdhYjM4MzU2NzFjODk0NGQ4YTI2ZDEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.fsxyLhwRI93l2c4MLeMDwatDOAkrddXDkjSJgZe_f3E)
- タスクを作成すると、AIが自動的に関連するサブタスクを生成します。
- サブタスクもメインタスクと同様に管理できます。
![](https://private-user-images.githubusercontent.com/52352924/297476314-1982cbe1-39bc-4fdd-942e-603832859a37.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMDE1NDQsIm5iZiI6MTcyNDEwMTI0NCwicGF0aCI6Ii81MjM1MjkyNC8yOTc0NzYzMTQtMTk4MmNiZTEtMzliYy00ZmRkLTk0MmUtNjAzODMyODU5YTM3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDIxMDA0NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWIyN2ZkZDdhZDZjZDQzYzNjMGFhZGRlMmViNmMzZDA2OGQ0NWVhMWI3Y2I5MDExZDY4NTBjZTQ4MzllZWQ4MjYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.q3j0AnaX0P3-Ee6A--PVGWP_AexiMTkvYoZB7FwW4UE)
- メインページで、すべてのタスクが一覧で表示されます。
- 各タスクには、そのタスクの状態(完了/未完了)を変更するためのボタンがあります。
- タスクのタイトルをクリックすると、そのタスクの詳細ページに遷移します。
Task モデルは、ユーザーが作成するメインタスクを表します。以下の項目を持ちます。
id
: タスクの一意識別子title
: タスクのタイトル ユーザーがタスクを識別するための短い記述description
: タスクの詳細説明 タスクに関する追加情報を提供しますdue_date
: タスクの期限日 タスクを完了するための期日completed
: タスクの完了状態 タスクが完了したかどうかを示すブール値(true/false)created_at
: レコードの作成日時updated_at
: レコードの最終更新日時
SubTask モデルは、AIによって生成されるサブタスクを表します。以下の項目を持ちます。
id
: サブタスクの一意識別子content
: サブタスクの内容 AIによって提案された具体的なアクション項目completed
: サブタスクの完了状態 サブタスクが完了したかどうかを示すブール値(true/false)task_id
: 関連するメインタスク(Task)のID 外部キーとして機能し、TaskとSubTask間の関連を定義しますcreated_at
: レコードの作成日時updated_at
: レコードの最終更新日時
- URL:
/tasks
- 内容:
- 「AI ToDo プランナー」というヘッダー
- 「+ タスクを作成」: 新しいタスクを追加するためのリンク
- タスクの一覧: 各タスクには、そのタイトル、未完了のサブタスクの数、タスクの状態を変更するための「✅/🔲」ボタンが表示される
- タスクのタイトルをクリックすると、そのタスクの詳細ページに遷移する
- URL:
/tasks/new
- 内容:
- 新しいタスクを作成するためのフォーム
- タスクのタイトル、説明、期限日を入力するフィールドがある
- 「タスクを作成」ボタンをクリックすると、タスクが追加され、タスク一覧ページにリダイレクトされる
- URL:
/tasks/:id
- 内容:
- タスクのタイトル、説明、期限日が表示される
- 「編集」と「削除」のボタンがあり、タスクの編集や削除ができる
- サブタスクの一覧が表示され、各サブタスクには完了/未完了の状態を変更するボタンと、サブタスクの内容が表示される
- サブタスクの内容をクリックすると、そのサブタスクの詳細ページに遷移する
- URL:
/tasks/:id/edit
- 内容:
- タスクの編集を行うフォーム
- タイトル、説明、期限日を編集できる
- 「タスクを更新」ボタンで変更を保存し、タスク詳細ページにリダイレクトされる
- URL:
/tasks/:task_id/sub_tasks/:id
- 内容:
- 特定のサブタスクの内容が表示される
- 「完了にする/未完了にする」ボタンでサブタスクの状態を変更できる
- 「削除」ボタンでサブタスクを削除できる
- 「戻る」ボタンで関連するメインタスクの詳細ページに戻る
OpenaiClient
: OpenAI APIを利用して、メインタスクに基づいてサブタスクを自動生成します。
- アプリケーションのデータストレージとして、PostgreSQLデータベースを使用しています。
- UIはToDoアプリとして使いやすいデザインにすることを心がけました。
- AIのイメージと緑色を連想させるChatGPTのカラーを反映して、緑を基調としたアプリケーションにしました。
- 絵文字(✅や🔲)を活用することで、直感的に理解しやすいUIを実現しました。また、工数を削減することにも成功しました。
- Ruby on Railsを使用した開発は初めてで、多くの新しい概念に直面しましたが、ChatGPTと対話しながら開発することで、新しい概念もすんなりと理解することができました。
- Renderにデプロイし、Webサービスを公開する際に、エラーの解消に苦労しました。
The AI ToDo Planner is a web service designed to facilitate the completion of tasks.
Simply input a main task, and it automatically generates sub-tasks, increasing the resolution of what needs to be done and making it easier to tackle tasks.
ai.todo.planner.mov
You can try it out here. | Report
Warning
- The free period for Render's database is 90 days, so the service may become unavailable after April 2024.
- Only $5 worth of the OpenAI API has been allocated, so exceeding this limit may cause the service to stop functioning.
Recently, the rapid development of AI technologies like ChatGPT has been remarkable, and I was inspired to create a web service utilizing these advancements.
Additionally, as I've always found task management challenging, I decided to develop a tool that uses AI to assist in managing tasks.
![](https://private-user-images.githubusercontent.com/52352924/297475577-76386875-bda6-44ec-b8c9-d0435ec4c6ee.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMDE1NDQsIm5iZiI6MTcyNDEwMTI0NCwicGF0aCI6Ii81MjM1MjkyNC8yOTc0NzU1NzctNzYzODY4NzUtYmRhNi00NGVjLWI4YzktZDA0MzVlYzRjNmVlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDIxMDA0NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQ3ZDQxMzk1NzgwZjMxMjJkNmZjYWEzMTg0OWRjYjI1MGMzNDI5ZDMwODc5MGNiNDA3MDJmMDJjODBlMGU2MjMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.xv2q79gF9cTl-LHVemezLfkzr7r4yMaB3kq8jk2gxqI)
![](https://private-user-images.githubusercontent.com/52352924/297476093-7d5f72bf-65ef-42e1-9680-0efc1da89922.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMDE1NDQsIm5iZiI6MTcyNDEwMTI0NCwicGF0aCI6Ii81MjM1MjkyNC8yOTc0NzYwOTMtN2Q1ZjcyYmYtNjVlZi00MmUxLTk2ODAtMGVmYzFkYTg5OTIyLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDIxMDA0NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTg1Y2U1ZjdmZGQ4YjZkZTM1MDA3MDBhOGU3NjAxNzE0YWQ2MmM2ZTk5MGU1N2RmODY1OWMzMTIwNDMxYTZiN2YmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.JmQuw1egc1YVH4PlZYfyQQYBNbDUO8c2kM5wm1z5xnc)
- From the task list page, click the "+ Create Task" button to add a new task.
- Enter the title and details of the task and set a deadline.
- Clicking the "Create Task" button adds the task to the list.
![](https://private-user-images.githubusercontent.com/52352924/297476195-747bfeaf-1502-4e05-b67e-c1a320552ae0.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMDE1NDQsIm5iZiI6MTcyNDEwMTI0NCwicGF0aCI6Ii81MjM1MjkyNC8yOTc0NzYxOTUtNzQ3YmZlYWYtMTUwMi00ZTA1LWI2N2UtYzFhMzIwNTUyYWUwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDIxMDA0NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWNiZGI1YTQyY2UwZTdmZWI2MjExNjRkMzcxODQyY2IzODg2ZjU0ZjdmZDdhYjM4MzU2NzFjODk0NGQ4YTI2ZDEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.fsxyLhwRI93l2c4MLeMDwatDOAkrddXDkjSJgZe_f3E)
- Upon creating a task, AI automatically generates related sub-tasks.
- Sub-tasks can be managed just like main tasks.
![](https://private-user-images.githubusercontent.com/52352924/297476314-1982cbe1-39bc-4fdd-942e-603832859a37.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMDE1NDQsIm5iZiI6MTcyNDEwMTI0NCwicGF0aCI6Ii81MjM1MjkyNC8yOTc0NzYzMTQtMTk4MmNiZTEtMzliYy00ZmRkLTk0MmUtNjAzODMyODU5YTM3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDIxMDA0NFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWIyN2ZkZDdhZDZjZDQzYzNjMGFhZGRlMmViNmMzZDA2OGQ0NWVhMWI3Y2I5MDExZDY4NTBjZTQ4MzllZWQ4MjYmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.q3j0AnaX0P3-Ee6A--PVGWP_AexiMTkvYoZB7FwW4UE)
- On the main page, all tasks are displayed in a list.
- Each task has a button to change its status (completed/not completed).
- Clicking on the title of a task will take you to its detail page.
The Task model represents the main tasks created by users. It includes the following attributes:
id
: A unique identifier for the tasktitle
: The title of the task, a brief description for user identificationdescription
: Detailed description of the task, providing additional information about itdue_date
: The deadline for the task completioncompleted
: The completion status of the task, a boolean value (true/false) indicating whether the task is completedcreated_at
: The date and time the record was createdupdated_at
: The date and time the record was last updated
The SubTask model represents the sub-tasks generated by AI. It includes the following attributes:
id
: A unique identifier for the sub-taskcontent
: The content of the sub-task, specific action items proposed by AIcompleted
: The completion status of the sub-task, a boolean value (true/false) indicating whether the sub-task is completedtask_id
: The ID of the related main task (Task). Functions as a foreign key and defines the relationship between Task and SubTaskcreated_at
: The date and time the record was createdupdated_at
: The date and time the record was last updated
- URL:
/tasks
- Content:
- A header titled "AI ToDo Planner"
- A link to "+ Create Task" for adding new tasks
- A list of tasks, each displaying the title, the number of incomplete sub-tasks, and a button to change the task's status (✅/🔲)
- Clicking a task title navigates to its detail page
- URL:
/tasks/new
- Content:
- A form to create new tasks
- Fields to enter the task's title, description, and due date
- Clicking the "Create Task" button adds the task and redirects to the task list page
- URL:
/tasks/:id
- Content:
- Displays the task's title, description, and due date
- Buttons for "Edit" and "Delete" allowing task modification or deletion
- A list of sub-tasks, each with a button to change its completion status and displaying the sub-task content
- Clicking a sub-task content navigates to its detail page
- URL:
/tasks/:id/edit
- Content:
- A form for editing tasks
- Allows editing the title, description, and due date
- "Update Task" button saves changes and redirects to the task detail page
- URL:
/tasks/:task_id/sub_tasks/:id
- Content:
- Displays the content of a specific sub-task
- "Complete/Incomplete" button changes the sub-task's status
- "Delete" button removes the sub-task
- "Back" button navigates back to the related main task's detail page
OpenaiClient
: Utilizes the OpenAI API to automatically generate sub-tasks based on the main task.
- The application uses a PostgreSQL database for data storage.
- We focused on creating a user-friendly design for the UI, suitable for a ToDo application.
- Reflecting the image of AI and the green color associated with ChatGPT, we developed an application with a green color scheme.
- By utilizing emojis (✅ and 🔲), we achieved an intuitive and easy-to-understand UI. This approach also helped in reducing development efforts.
- This was my first time developing with Ruby on Rails, and I faced many new concepts. However, developing while conversing with ChatGPT allowed me to smoothly understand these new ideas.
- Deploying on Render and making the web service public was challenging, especially in resolving errors.