はじめに
最近怠けている時間が多いと感じ、もっと効率的に時間を使いたいと思うようになりました。気づいたら YouTube を見すぎていたり、SNS をダラダラしていたりして、やらないといけないことに時間を使えずにいました。
そこで、無駄な時間を減らし、やるべきことに集中するため、気軽に使えるタイムマネジメントアプリを作ってみることにしました。
今回は初めてアプリを作来るため、Claude AIを使ってバイブコーディングでやってみました。言語は HTML / CSS / JavaScriptを使いウェブアプリを作りました。
完成したアプリはGoogle Siteに埋め込みました。
実装した機能
-
タスクの追加・削除
シンプルなタスクリスト
タスクの名前、かかる時間、優先度を決めてチェックリストに追加可能
-
スケジュール機能
タスクを選びその日の予定に組み込める
一度予定に入れたタスクの編集
タスクの時間が過ぎても終わらなかった場合またチェックリストに戻す
-
データの保存/復元機能
データベースを使用せず複数デバイスでも使えるようにデータの保存/復元が可能
データをJSON fileとして保存（ダウンロードができない場合は手動でコピー可能）
ファイルまたはテキストでデータを復元
今後の改善点
今の所思い浮かぶのはUI全般の改善、データの保存/復元機能を使いやすくすること、タイマー機能の追加などです。データの保存/復元のために毎回ファイルをダウンロードするのは正直面倒なので改善できればなと思いました。また、タイマー機能があれば便利だなと思いました。UIに関してはところどころ見ずらい部分があるので改善したいです。
バイブコードをしてみた感想
プロンプトが具体性に欠けていると期待通りの結果が出ないことが多くあったため、注意してプロンプトを書く必要があると感じました。フォーマッティングなどの面倒な部分をAIに丸投げできるので比較的時間をかけずに作れました。また、Claudeの場合過去のバージョンが残っているためとても使いやすかったです。唯一の不満点はコードをClaude内で直接編集できないことでした。直接いじりたい場合コードをコピーしてエディターを使わないといけないのが面倒でした。
最後に
完成品はこちらです。ぜひ使ってみてください。感想などいただけるとありがたいです。