こんにちは。今回は、ストップウォッチ、カウントダウンタイマー、音声録音機能を一つのアプリケーションで統合的に操作できるWebアプリケーション「Multi-Timer Studio」を開発したので、その技術的な詳細と開発背景について詳しくご紹介したいと思います。

開発の背景と動機

日常生活や仕事において、時間管理と音声録音を同時に行いたい場面は意外と多くあります。例えば、インタビューを行う際にはタイマーで時間を管理しながら録音を行い、フィットネスでは運動時間をストップウォッチで計測しながら指導音声を録音したり、料理では複数の工程を並行してタイマー管理しながらレシピ動画用の音声を録音するといった具合です。

しかし、従来はこれらの機能を別々のアプリケーションで管理する必要があり、操作が煩雑になってしまうという課題がありました。特に、すべての機能を同時に開始・停止・リセットしたい場合には、複数のアプリを個別に操作する必要があり、タイミングのずれが生じやすいという問題もありました。

そこで、これらの機能を統合し、ワンクリックですべての機能を同時に操作できるWebアプリケーションを開発することにしました。

アプリケーションの主要機能

Multi-Timer Studioは、以下の主要機能を提供します。

統合コントロール機能

最大の特徴は、すべての機能を統合的に操作できる「統合コントロール」です。「すべて開始」ボタンを押すと、ストップウォッチのカウントアップ、タイマーのカウントダウン、マイクからの音声録音が同時に開始されます。同様に、「すべて一時停止」で全機能の一時停止、「すべてリセット」で全機能のリセットと録音の停止が行われます。

この統合コントロールにより、複雑な作業を行いながらでも、シンプルな操作で時間管理と録音を同時に行うことができます。

ストップウォッチ機能

ストップウォッチは00:00:00から上向きにカウントし、経過時間を正確に表示します。一時停止機能も搭載しており、作業の中断時にも対応できます。表示は時:分:秒の形式で、視認性を重視したデザインになっています。

カウントダウンタイマー機能

タイマー機能では、ユーザーが任意の分数と秒数を設定してカウントダウンを行うことができます。設定時間に達すると、視覚的な通知でお知らせします。料理や運動、作業時間の管理など、様々な場面で活用できます。

音声録音機能

音声録音機能は、ブラウザの MediaRecorder API を使用して実装されています。マイクからの音声をリアルタイムで録音し、録音中は波形ビジュアライザーによって音声レベルを視覚的に確認できます。録音されたファイルは .webm または .wav 形式で保存され、録音完了後にダウンロードすることができます。

リアルタイム波形ビジュアライザー

録音中は、Web Audio API を使用したリアルタイム波形ビジュアライザーが動作します。これにより、録音が正常に行われているかを視覚的に確認でき、音声レベルの調整も容易になります。波形表示は Canvas 要素を使用して滑らかにアニメーションし、直感的な操作感を提供します。

セッション永続化機能

アプリケーションの状態は localStorage に自動保存されるため、ブラウザを閉じたり、タブを間違って閉じてしまっても、再度アクセスした際に前回のセッション状態が復元されます。ストップウォッチの経過時間、タイマーの残り時間、録音済みのファイルなどが保持されるため、安心して使用できます。

技術的な実装詳細

使用技術スタック

Multi-Timer Studio は、モダンなWeb技術を組み合わせて開発されています。

フロントエンドフレームワークとしてReact 18を採用し、TypeScriptで型安全性を確保しています。これにより、開発時のバグを早期に発見でき、保守性の高いコードを実現しています。

ビルドツールにはViteを使用しており、高速な開発環境と最適化されたプロダクションビルドを提供します。スタイリングはTailwind CSSを使用し、レスポンシブデザインとコンポーネントベースの開発を効率的に行っています。

アーキテクチャ設計

アプリケーションは、コンポーネント指向のアーキテクチャで設計されています。各機能（ストップウォッチ、タイマー、音声録音、波形表示）は独立したコンポーネントとして実装されており、再利用性と保守性を重視しています。

状態管理はReactのHooksを使用し、各コンポーネント間でのデータの受け渡しは props を通じて行っています。複雑な状態の共有が必要な場合は、Context API を活用することも検討できる設計になっています。

音声処理の実装

音声録音機能の実装では、Web Audio API と MediaRecorder API を組み合わせて使用しています。

MediaRecorder API により、ユーザーのマイクからの音声ストリームを取得し、リアルタイムで録音データを生成します。録音データは Blob 形式で管理され、録音完了時にダウンロード可能なファイルとして提供されます。

波形ビジュアライザーの実装では、Web Audio API の AnalyserNode を使用して音声の周波数データを取得し、Canvas 要素上にリアルタイムで描画しています。requestAnimationFrame を使用することで、滑らかな60FPSでの波形表示を実現しています。

データ永続化の仕組み

セッションデータの永続化には、ブラウザの localStorage を使用しています。カスタムHookとして useLocalStorage を実装し、各コンポーネントから簡単にデータの保存と復元ができるようになっています。

保存されるデータには、ストップウォッチの開始時刻と経過時間、タイマーの設定時間と残り時間、録音済みファイルの Blob URL などが含まれます。これらのデータは JSON 形式でシリアライズされ、アプリケーション起動時に自動的に復元されます。

レスポンシブデザインの実装

Multi-Timer Studio は、デスクトップ、タブレット、スマートフォンなど、様々なデバイスで快適に使用できるよう、レスポンシブデザインを採用しています。

Tailwind CSS のブレークポイントシステムを活用し、画面サイズに応じてレイアウトが最適化されます。特に、タッチデバイスでの操作性を重視し、ボタンサイズやタップターゲットの大きさを適切に設定しています。

SEO とパフォーマンス最適化

メタデータとOGP設定

検索エンジン最適化のため、適切なメタデータを設定しています。title、description、keywords などの基本的なSEOタグに加え、Open Graph Protocol に対応した OGP タグを実装し、SNSでのシェア時に適切な情報が表示されるようになっています。

構造化データとして Schema.org の WebApplication 形式でJSON-LD を埋め込み、検索エンジンがアプリケーションの機能や特徴を正しく理解できるようにしています。

PWA対応

Progressive Web App として、オフライン使用やアプリライクな体験を提供するため、Web App Manifest を実装しています。これにより、ユーザーはブラウザからアプリをホーム画面に追加し、ネイティブアプリのような感覚で使用することができます。

パフォーマンス最適化

Vite の最適化機能により、JavaScript と CSS の minify、tree shaking による不要コードの除去、モジュールの効率的なバンドリングが行われています。また、画像リソースの最適化や、必要に応じた lazy loading の実装により、初期ロード時間の短縮を図っています。

開発過程で直面した課題と解決策

ブラウザ間での音声API互換性

音声録音機能の実装において、ブラウザ間での MediaRecorder API の対応状況と動作の違いに苦労しました。特に、Safari での対応が限定的であったため、機能検出を行い、非対応ブラウザでは適切なフォールバック処理を実装しました。

リアルタイム処理のパフォーマンス

波形ビジュアライザーのリアルタイム描画では、CPU使用率の最適化が課題でした。requestAnimationFrame の適切な使用と、描画頻度の調整により、滑らかな表示とパフォーマンスのバランスを取ることができました。

状態同期の複雑性

複数の時間関連機能を同期させる際、タイマーのずれや状態の不整合が発生する可能性がありました。統一されたタイムスタンプベースの管理システムを実装することで、この問題を解決しました。

ユーザビリティとアクセシビリティ

直感的なUI設計

ユーザーインターフェースは、初見でも操作方法が理解できるよう、直感的なデザインを心がけました。大きなボタン、明確なアイコン、わかりやすい色使いにより、ストレスフリーな操作体験を提供しています。

キーボードナビゲーション対応

アクセシビリティの観点から、キーボードのみでの操作にも対応しています。Tab キーによるフォーカス移動、Enter キーやスペースキーでのボタン操作が可能で、スクリーンリーダーとの互換性も考慮しています。

エラーハンドリング

マイクへのアクセス権限が拒否された場合や、録音中にエラーが発生した場合など、様々なエラーケースに対して適切なメッセージを表示し、ユーザーが状況を理解できるようにしています。

今後の改善予定

機能拡張

今後は、複数のタイマーを同時に動作させる機能や、録音ファイルの形式選択機能、クラウドストレージとの連携などの機能追加を検討しています。また、ユーザーからのフィードバックを基に、より使いやすいUIの改善も継続して行っていく予定です。

パフォーマンス向上

長時間の録音セッションでのメモリ使用量最適化や、大量のセッションデータを扱う際のパフォーマンス改善など、技術的な改善も継続していきます。

まとめ

Multi-Timer Studio は、日常的に遭遇する時間管理と音声録音のニーズを統合的に解決するWebアプリケーションとして開発しました。モダンなWeb技術を活用することで、ブラウザ上でネイティブアプリに匹敵する体験を提供できたと考えています。

特に、統合コントロール機能により、複雑な作業を行いながらでもシンプルな操作で多機能を活用できる点が、従来のアプリケーションとの大きな差別化要素となっています。

本アプリケーションはオープンソースとして公開しており、GitHubでソースコードを確認することができます。また、GitHub Pages上でデモをお試しいただくことも可能です。

免責事項: 本記事は開発者自身によって作成されたものです。アプリケーションの使用は自己責任でお願いします。音声録音機能の使用に際しては、各地域の法律や規制に従って適切にご利用ください。マイクへのアクセスが必要な機能については、ブラウザのセキュリティ設定やプライバシー設定をご確認の上、ご利用ください。

リンク:

GitHub Repository: https://github.com/yuis-ice/multi-timer-audio-recorder
Live Demo: https://multi-timer-audio-recorder.pages.dev/

この記事が皆様の開発やアプリケーション選択の参考になれば幸いです。ご質問やフィードバックがございましたら、お気軽にコメントまたはGitHubのIssuesにお寄せください。