通勤中に要件定義したら、退勤時にアプリが完成してた!
朝のルーチンをRTAしたくて、AIアシスタントとSDD(スペック駆動開発)で自分専用のタイマーアプリを1日で作った開発記。
毎朝のルーチンが終わらない!
歯磨き、洗顔、着替え、朝ごはん——やることは決まってるのに、ぼんやりスマホを触っちゃったり、気づいたら出発時間になってて焦ってる。
愛用のルーチンタイマーアプリもあるけど、かゆいところに手が届かないなーと思うところがあった。例えばこんなこと↓
タスクをグルーピングできない。 「シャワー→ドライヤー→スキンケア」をひとまとめにしたいのに、並び替える時に1タスクずつ動かさないといけない。朝と夜で同じタスクが複数ある時も、両方にそれぞれ追加修正しなきゃいけなくて面倒。
声を自由に変えられない。 読み上げ機能があったとしても、声は固定のまま。どうせなら好きな声で「次は○○だよ!」って言ってほしい。
……ということで、自分で作ることにした!
AIアシスタントに「作って」とお願いする前に#
ここで登場するのが、AIアシスタントの海音コウ。うちのMac miniに常駐してて、開発からタスク管理まで何でも手伝ってくれる敏腕凄腕パーソナルAIだ。
こうして始めたのが SDD(Spec-Driven Development / スペック駆動開発) というアプローチ。
AIにコードを書いてもらうときに陥りがちなのが「ざっくり指示→とりあえず動くものが出てくる→あれ、なんか違う→修正→またなんか違う→……」の無限ループにハマること。でも、人間同士の開発でも「仕様が曖昧なまま作り始めて手戻り発生」てあるよね。
SDDはシンプルで、コードを書く前に要件定義と設計を固めてしまうというもの。「何を作るか」を最初にカッチリ決めて、AIにはその仕様書をもとに実装してもらう。
いくつかの手法を一緒にリサーチして、自分たち向けのワークフローを組み立ててみた。
通勤電車が開発ラボになった朝#
翌朝。満員の通勤電車の中で、早速スマホからコウに話しかけてみた。
「朝のルーチンは40分、夜は90分」「タスクごとに制限時間がほしい」「曜日によってスキップするやつもある」「のんびり/標準/タイムアタックみたいなモード切り替え機能がほしい」——
コウが質問を投げてきて、それに自分がポンポン答える。 これを繰り返すだけで、電車を降りる頃には要件定義書の骨格ができあがっていた!
出社して仕事を始める前に、ちゃちゃっと最後の仕上げ。
仕事中、コウはバックグラウンドで黙々と作業を進めてくれていた。
退勤したらアプリが動いていた#
夕方、仕事を終えてスマホを開いたら——
欲しかったアプリが動いていた。
ファイルを確認してみると、25個のタスク、7つのマイルストーンをこなして、約4,500行のコードが出来上がっていた!そして何より、要件定義書に書いた機能が、ほぼそのまま動いてる!
技術スタックと主要機能#
せっかくなので、どんな構成で作ったのか紹介していくよ!
技術スタック#
| レイヤー | 技術 |
|---|---|
| フロントエンド | React + TypeScript + Vite + Tailwind CSS v4 |
| バックエンド | Hono(Node.js) |
| データベース | SQLite + Drizzle ORM |
| 構成 | pnpm workspace モノレポ + Docker Compose |
「朝起きてブラウザを開いたらすぐ使える」がコンセプトなので、PWA(Progressive Web App)として動くように設定。スマホのホーム画面に追加すれば、ネイティブアプリみたいに起動できる!
ちなみに Hono は去年 connpass の勉強会に参加した時からずっと気になってたフレームワーク。軽量で TypeScript ファーストって評判で、「いつか使ってみたいなあ」と思ってたから、今回ついに試せて嬉しかった!
コストレベル機能 ★#
念願のモード切り替え機能!ルーチンの「温度感」を3段階で切り替えられる。
- ★☆☆ のんびり — 時間に余裕があるとき。各タスクの制限時間が長め
- ★★☆ 標準 — 普段使い
- ★★★ タイムアタック — 急いでるとき。制限時間を短縮して、一部タスクは自動スキップ
朝「今日はゆっくりできるな〜」と思ったら★1、寝坊したら★3。同じルーチンなのに、その日のコンディションでサクッと切り替えられるのが気持ちいい!
タスクグループ & 共有グループ機能#
既存アプリで一番不満だった「グルーピングできない問題」もしっかり解決。
「お風呂」グループの中に「シャワー→ドライヤー→スキンケア」をまとめられる。さらに共有グループ機能があって、朝と夜のルーチンから同じグループを参照できる。もちろん、片方を編集すればもう片方にも反映されるから、二重管理ともおさらば!
グループ単位でON/OFFできるので、「昨晩お風呂に入ったし、今朝はお風呂グループはパスで!」と丸ごとスキップすることもできる。
TTS読み上げ機能(コウの声!)#
タスクが切り替わるたびに「○○完了!次は△△だよ」と声で教えてくれる。
読み上げエンジンは2種類から切り替え可能。
- Web Speech API — ブラウザ内蔵の合成音声(フォールバック)
- AivisSpeech — Style-BERT-VITS2で作った自分の声ベースの高品質TTS(コウの声 🌊)
冒頭で「好きな声で読み上げてほしい」って書いたけど、まさにこれが欲しかった!AIアシスタントの声で朝のルーチンをナビしてもらえて、めちゃくちゃテンション上がる!個人開発ならではの贅沢✨
環境音BGM#
集中用のBGMもちゃんとついてる!メトロノーム、波の音、雨音、ホワイトノイズの4種類。読み上げ中は自動でBGMの音量が下がるのもいい感じ。
なんと外部の音源ファイルを一切使わず、ブラウザ内でリアルタイム合成してるらしい。だからオフラインでも動くし、ファイルサイズもゼロ。AIに実装を任せると、自分が知らない技術を自然に使ってくれることがある。これもAI共同開発の面白いところだと思う。
その他の機能#
- 曜日スケジュール — 「平日だけ」「水曜だけ」のタスクを自動スキップ
- ドラッグで並べ替え — 編集画面でも実行中でもタスク順を柔軟に変更可能
- 実行履歴 & エクスポート — CSV/JSONで出力できる。「どのタスクをよくスキップしているか」を振り返れるし、データを渡せばAIアシスタントからアドバイスももらえる!
- 画面スリープ防止 — Wake Lock APIで実行中はスマホが消灯しない
SDDで作ってみて#
正直、要件定義に一番時間を使った。 通勤時間の30〜40分くらい。
でも、そのおかげで実装フェーズの手戻りがほぼゼロだった。「これ、なんか違うんだよなぁ」が起きない。AIも迷わない。だって仕様書に答えが書いてあるから。
「AIに全部任せれば一瞬でしょ?」って思うかもしれないけど、「何を作るか」を決めるのは、やっぱりまだ人間(特に利用者目線)の仕事だね。 そこを曖昧にしたまま「いい感じに作って」って言っても、「いい感じ」が伝わらなくて結局やり直しになっちゃう。
SDDは、その「何を作るか」を構造化してくれるフレームワーク。AIとの共同開発に限らず、普通の開発でも広く使われている一般的な考え方だと思う。
「自分専用アプリ」という贅沢!#
世の中にタイマーアプリは山ほどある。でも「自分の朝ルーチン/夜ルーチンにぴったり最適化されたアプリ」は、自分で作らないと存在しないんだよね。
グルーピングも、コストレベルも、コウの声での読み上げも、全部「自分がほしかったもの」をそのまま形にしただけ。万人向けのアプリではないかもしれないけど、自分にとっては最高のアプリになった。
今のルーチン時間アプリはまだ実験版。完全に自分仕様で、最小限の変更で次々と機能を追加しながら「本当に必要なもの」を探っているところ。ここで蓄積した知見をもとに、いつか綺麗に再設計した「製品版」も作りたいと思ってる!
AIアシスタントとの共同開発は、こういう「ちょっとした贅沢」のハードルをめちゃくちゃ下げてくれる。通勤電車で思いついたアイデアが、その日のうちに動くアプリになる。そんな時代が来てくれました。
ソースコードはただいま GitHub で公開中 ↗。実験版なので荒削りだけど、SDDの実践例として参考になれば嬉しいです!
次の機会に、SDD(スペック駆動開発)と CoDD(Coherence-Driven Development)を実際に運用してみた感想を書く予定。お楽しみに!
またねー!
— 錆架 & コウ 🌊