【VibeCodingChallenge#19】音声で日記をかけるツールを作ってみた

はじめに

このVibeCodingChallengeは、AIだけでツールを作り、何がAIにできて、何ができないのか？を探る個人の企画です。

突然ですが、日記を書きたい！（Well Beingにいいらしいですし、振り返りにもなるので）でも、手で書くのはめんどくさい！ のが人の性というもの。
ですが、今なら音声で書けますよね。ChatGPTとの音声会話しかり、音声対話ツールは出てきています。

そこで、音声で日記を書けるツールを今回の目標にしてみました！

最終成果物

こんな感じになりました。（動画のサンプル音声は、吾輩は猫であるの冒頭です）
https://youtu.be/uuFISjgyREg

実際の挙動としては、

• 録音ページ

  • ワンクリックで録音開始 / 停止
  • Web Speech APIで文字起こし
  • 停止後に「要約＆明日の一歩」を生成

• 履歴ページ

  • 過去の日記をカードで一覧化
  • 詳細画面で要約と提案アクションを確認
  • 「完了」ボタンで簡単な記録も可能
    た。

• カレンダーページ

  • 投稿がある日はドット表示
  • 日付をクリックすると、その日のエントリー一覧が右側に表示
    

• 設定ページ

  • JSONエクスポート/インポートでデータ移行

シンプルながら、日々の記録とちょっとした行動提案がセットになった、習慣化にちょうどいい日記ツールになりました。

今回の学び　UI変更における沼

最後にUIを調整するタイミングで、録音停止ボタンが押下できなくなるという問題にハマりました。
　原因はUI変更の順序で状態管理のフローが崩れてしまったこと。 （機能を絶対に損なわずにと指示しても無理でした）

結果的に「UIは最後に整える」方針が裏目に出て、デバッグに余計な時間を使ってしまいました。
　学びとしては、UI構成は最初にきちんと検討しておくべきだと実感しました。
　特に録音系のアプリは「押す/止める」の操作感が最重要のような気もしたので、最初からUIを前提に実装を進めるのが良さそうです。

終わりに

今回は、「日記を書く」ハードルを少しでも下げるために、音声だけで完結できる仕組みを試しました。
今後は、少し件数が増えた時に、全体傾向とかをまとめ上げたりして、年間の君の成長率みたいなものを出せても面白いかもしれませんね。
このブログでは、AIだけでシステムを構築していく挑戦をこれからもしていくので読みものとしてお楽しみください！