作業に没頭していると、ついつい時間が過ぎ去ってしまうことはありませんか？
今回は、指定した間隔で現在時刻を音声でお知らせするシンプルなWebアプリ「Time Call Service」を開発したので、その技術的なポイントやこだわりを紹介します。

開発の背景

リモートワークや開発作業中、時計をチラチラ見るのではなく、耳で時間を感じ取れるツールが欲しいと考えたのがきっかけです。既存のタイマーアプリは「計測」には向いていますが、日常に溶け込んで「今何時か」をさりげなく教えてくれるものは意外と少ないと感じていました。

主な機能

• 時刻の自動読み上げ: 1、5、10、15、30、60分でインターバルを設定できます。
• 音声のカスタマイズ: ブラウザ標準の音声合成エンジン（Web Speech API）を利用し、好みの声や音量を選択可能です。
• ニューモーフィズム・デザイン: 柔らかい影の表現を用いたUIを採用し、作業の邪魔にならない落ち着いた外観を目指しました。
• ダークモード対応: OSの設定に合わせて自動で切り替わります。

技術スタックと実装のポイント

1. Web Speech API の活用

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

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

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

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

3. ニューモーフィズムUIの構築

Tailwind CSS を使用し、立体感のあるボタンやパネルを実装しました。影の深さ（shadow-neuro-raised）などを微調整することで、物理的なスイッチを押しているような心地よさを提供しています。

リポジトリ

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

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

まとめと今後の展望

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

今後は、PWA（Progressive Web App）化によるオフライン対応や、通知音のバリエーション追加、バックグラウンドでの動作安定性向上などに取り組んでいきたいと考えています。