フルスクリーンビューア
Fullscreen Viewer
没入感のある視聴体験。HTMLスライドを全画面表示し、音声解説と同期再生。UX最優先の設計で、学習に集中できる環境を提供します。
Immersive viewing experience. Display HTML slides in fullscreen synchronized with audio explanations. UX-first design enables focused learning.
HTMLスライドとMP3音声解説を同期再生する、インタラクティブな教育コンテンツプラットフォーム。 フルスクリーン表示、キーボードショートカット、スワイプジェスチャーに対応し、 デスクトップからモバイルまであらゆる環境で快適な学習体験を提供します。
An interactive educational content platform that synchronizes HTML slides with MP3 audio explanations. Featuring fullscreen viewing, keyboard shortcuts, and swipe gestures, it delivers a seamless learning experience across desktop and mobile devices.
没入感のある視聴体験。HTMLスライドを全画面表示し、音声解説と同期再生。UX最優先の設計で、学習に集中できる環境を提供します。
Immersive viewing experience. Display HTML slides in fullscreen synchronized with audio explanations. UX-first design enables focused learning.
視覚的なタイムラインで音声の再生位置を把握。任意の位置にジャンプでき、学習ペースを自由にコントロールできます。
Visual timeline shows audio playback position. Jump to any point and control your learning pace freely.
Space/Kで再生・一時停止、矢印キーでシーク、F でフルスクリーン切り替え。マウス不要で全操作が可能です。
Space/K for play/pause, arrow keys for seeking, F for fullscreen toggle. Complete control without a mouse.
スワイプジェスチャーでコンテンツ間を移動。ダブルタップでフルスクリーン切り替え。PWA対応でホーム画面に追加可能。
Swipe gestures for navigation between content. Double-tap for fullscreen. PWA support for home screen installation.
Googleアカウントまたはメール/パスワードでログイン。セキュアな認証基盤で学習進捗を管理できます。
Sign in with Google or email/password. Secure authentication platform to manage your learning progress.
リアルタイムデータベースでクラスルームとコンテンツを管理。スケーラブルで高速なデータアクセスを実現。
Real-time database for classroom and content management. Scalable and fast data access.
ユーザーストーリーの作成、技術選定、アーキテクチャ設計。UX最優先の方針でフルスクリーンビューアを中心に設計。
Created user stories, selected technologies, designed architecture. UX-first approach with fullscreen viewer as the core.
React 18 + TypeScriptでコンポーネント実装。Context APIで状態管理、カスタムフックで機能を分離。コード分割で最適化。
Built components with React 18 + TypeScript. State management via Context API, custom hooks for separation of concerns. Code splitting for optimization.
Firebase Authentication、Cloud Firestoreとの統合。Google Drive APIをCloud Run経由で接続し、コンテンツ管理を実現。
Integrated Firebase Authentication and Cloud Firestore. Connected Google Drive API via Cloud Run for content management.
Vitest + Testing Libraryで単体・統合テストを実装。アクセシビリティ対応、パフォーマンス最適化を実施。
Implemented unit and integration tests with Vitest + Testing Library. Enhanced accessibility and optimized performance.