みなさん、こんにちは！
今回、私自身が日々感じていた「こんなToDoリストが欲しい！」という思いを形にし、
オリジナルのToDoリストWebサイトを作成しました。
🌱 ToDoリストがいくらあっても良い理由
世の中にはすでに数多くの優れたToDoリストサイトやアプリが存在します。
シンプルなものから高機能なもの、可愛いデザインのものまで多種多様です。
ただ、ToDoリストは「自分の使い方に合うか」がとても大切ですよね。
どれだけ高性能でも、自分の生活スタイルや作業の流れに合わないと続きません。
だからこそ、「いくらあっても困らない」と私は考えています。
Google ToDoリストは、毎回ログインし直す必要がある人にとっては使いにくい一面があります。また、世の中には多種多様なToDoリストが存在しており、自分に合ったものを見つけるのは簡単ではありません。
🛠 私流のToDoリストを作ってみました
そこで、自分が欲しかった機能を詰め込みつつ、
誰でも直感的に使えるシンプルさを意識して作ったのが今回のサイトです。
このToDoリストは次のような特徴があります。
✅ 3つのリストをタブで管理
- 「やる事リスト」
- 「後で見るリスト」
- 「アイデアリスト」
✅ リスト間の移動もワンクリック
タスク横のボタンを押すだけで、簡単に他のリストへ移動できます。
✅ ドラッグ＆ドロップで順番変更
タスクの優先順位は自由自在に入れ替え可能。
✅ タスク追加・削除・編集も簡単
追加はEnterキー対応。削除はワンクリックでOK。
✅ 保存・読み込み機能付き
タスク内容はテキストファイルとして保存でき、後から読み込み可能です。
🌟 ぜひお試しください！
使い心地を試していただけると嬉しいです。
実際に操作してみて「ここが使いにくい」「もっとこうしたら便利」などのフィードバックも大歓迎です。
みなさんの意見を元に、さらに改善していきたいと思います。
👉 サイトはこちら
📖 操作方法
- タスクの追加
- 「新しいタスク…」と書かれた入力欄に文字を入力
- Enterキーまたは「追加」ボタンでリストに追加されます
- タスクの移動
- タスク横のボタンで他のリストへ移動できます
- 例: 「やる」→「後で」など
- タスクの並び替え
- タスクをドラッグして上下に動かすだけ
- タスクの削除
- 「削除」ボタンで簡単にリストから消去
- タスクの保存と読み込み
- 「保存」ボタンで現在のリストをtxtファイルにエクスポート
- 「ファイル読み込み」で保存したtxtファイルを復元
🏁 最後に
以上、私が作成したToDoリストWebサイトの紹介でした。
あなたの毎日が少しでもスムーズになれば嬉しいです。
ぜひお気軽に試してみてくださいね。
🌟 閲覧ありがとうございました！
再掲：
👉 サイトはこちら
開発の裏側
このサイトは ChatGPT を活用して制作しました。
普段、ChatGPTでの開発では「何度修正をお願いしてもエラーが直らない」といった現象が発生し、
最終的に手動でバグを潰す作業が必要になることが少なくありません。
しかし今回は驚くことに、手動による手直しが一切不要でした。
プロンプトだけでここまで完成度の高いものができるのは、自分でも嬉しい驚きです。
そこで今回は特別に、このサイトの制作に使用したプロンプトを公開しようと思います。
Markdown形式ではありませんが、他の人のプロンプトを覗く感覚で気軽に読んでみてください。
こんなシンプルなプロンプトでも、実際にサイトが作れてしまいます。
実際に使用した内容は以下の通りです。
1. タスク管理の html を作成頂けますか？「やる事リスト」「後で見るリスト」「アイデアリスト」のタブを作って、項目にあるボタンを押すと、他のタブに移動させられるようにして下さい。リストはドラッグで上下を入れ替えられるようにして下さい。
2. タスクを追加する機能を実装頂けますか？
3. 「やる」から「後で」に移動した場合は、「後で」が「やる」に変わるなど、移動先に準じた内容にして頂けますか？
4. txt ファイルで保存・読み込みができるよう修正頂けますか？
5. 削除ボタンを実装頂けますか？
6. 追加ボタンをエンターキーで押せるようにして頂けますか？
7. 保存の際に日付＋時間を先頭に付けて頂けますか？
20250401_123000_Task.txt のようにして下さい。
8. ファイル名を決めるテキストボックスを実装頂けますか？初期値は Task で、テキストボックスの名称で保存します。読み込み時はテキストボックスはファイル名で読み込みます。
9. 試しに作成頂いた html に対して、リストに色付けして頂けますか？奇数行目と偶数行目の色を変えて下さい。
このように、ChatGPTを使えば簡単にWebサイトを作成できます。
動作確認を効率よく行うために、このサイト を活用しています。
なお、私は「html としてダウンロード」ボタンを押すとファイル名が index.html になるようにチューニングして使用しています。
さらに、GitHub Pagesを使って公開すれば、他の人にも自由に使ってもらえるようになります。
私自身、このサイトが皆さんの作業を少しでも便利にできればという思いと、ソースコードを公開する事で皆さんの開発の参考になる面があるだろうという考えがあり、Qiitaで紹介しています。
ぜひあなたも、サイト制作に挑戦してみてください！
追記
この記事は ChatGPT で添削しています。
生成 AI による添削が苦手な方は申し訳ありません。
セキュリティ面が心配な方は、こちら からダウンロードして、解析してからご利用下さい。
上位互換のサイト を作成しました。
ダウンロードしたい場合は こちら
キャッシュを消すとデータが消えます。
長期間使っていないと消える事もあります。
なので、エクスポートで定期的にバックアップして下さい。