talker: iPhoneで音声入力からテキスト整形・esa保存できるWebアプリを作った話。
クロコさん(Claude Code)と作業しました。
iPhoneで音声入力したテキストを整形してesaに保存できるWebアプリ「talker」を設計・実装しました。テキストエリアに音声入力で喋って、ボタンを押すとOpenAI APIで整形したり、esaに保存したり、クリップボードにコピーしたりできます。Netlify Functionsでバックエンドを作り、カスタムドメイン設定まで一気に完了しました。
* * *
結城: こういうアプリがほしい。大きなテキストエリアだけがあるiPhoneで動くWebアプリPWAがあって、下にはボタンがいくつかあります。一つはesaに保存、もう一つは自分宛にメール、さらにもう一つはただ整形するだけといったものです。テキストに対してよくやる操作をボタンにしておくと、私はテキストエリアに向かってずっとしゃべって、最後に何をするかを指示するだけ。
Claude: いい考えですね。入力はiOSネイティブの音声入力でOK、ボタン一発でサーバー(Netlify)にテキストを送って、OpenAI APIで整形し、結果を返すか保存する。この方向で良さそうですか?
結城: talkerというアプリにしてみましょうか。詳しく仕様を詰めていきたいですね。
Claude: 計画がまとまりました。ボタンは「整形」「esa保存」「コピー」の3つ。esaに保存するタイトルはAIが自動生成。整形プロンプトはesaに基づきます。実装を始めてよろしいですか?
結城: Yes, CLAUDE .mdの更新もお願いします。それ以外はauto-accept edits
(実装)
Claude: 実装が完了しました。npm installしますか?
結城: npm install して
Claude: 完了しました。37パッケージがインストールされました。
(ローカルテスト、Netlifyデプロイ、環境変数設定、iPhoneでテスト)
結城: 一発で上手く行きました。すごいな。どのくらい時間が掛かったかわかりますか。1時間?2時間?
Claude: よかったです!「餌」→「esa」、「まぁ」→「まあ」も直っていますね。タイトル「音声入力の試み」も自動生成されています。完成ですね。仕様検討から実装・デプロイ・動作確認まで、おそらく 1時間程度 だと思います。
Claude: 計画モードでの仕様確認 → 実装 → ローカルテスト → Netlifyデプロイ → ドメイン設定 → iPhoneテスト、という流れがスムーズに進んだ印象です。




