ポモドーロタイマー的なあれです。ただ、アラームが鳴るだけというより、ちゃんと時刻を教えてくれるものが欲しいなと思って作りました。

「Time Call Service」

機能

• 時刻の自動読み上げ: 1、5、10、15、30、60分でインターバルを設定できます。
• 音声のカスタマイズ: ブラウザ標準のWeb Speech APIを利用し、好みの声や音量を選択可能です。

技術スタック

Next.jsで作って、Vercelでデプロイ。お手軽でいいですね。

Web Speech API の活用

外部のTTS（Text-to-Speech）サーバーを介さず、ブラウザ標準の window.speechSynthesis を利用しています。

カスタムフックによるロジックの分離

Next.js (App Router) をベースに、時計の管理 (useClock)、音声合成の制御 (useSpeechSynthesis)、タイマーの実行ロジック (useTimeCallTimer) をそれぞれカスタムフックとして分離しました。

// ロジックを分離することで、UIコンポーネントをシンプルに保つ
const { currentTime } = useClock();
const { playSpeech } = useSpeechSynthesis();
const { isRunning, startTimer } = useTimeCallTimer({ currentTime, playSpeech });

UIの構築

Tailwind CSS を使用し、立体感のあるボタンやパネルを実装しました。影の深さ（shadow-neuro-raised）などを微調整して、見た目の美しさを追求しています。

リポジトリ

ソースコードはGitHubで公開しています。

poko8nada/time-call-web-v1: 時報の読み上げサービス

まとめと今後の展望

非常にシンプルなツールですが、実際に使い始めると「15分経ったから一度背伸びをしよう」といったリズムが作りやすくなりました。