TubeLoopPlayerとは？
TubeLoopPlayerは、YouTubeの動画やプレイリストをシームレスにループ再生するために開発したWebアプリです！勉強中や作業中、リラックスしたい時など、どんな場面でも中断されることなく、自分だけのカスタムプレイリストを楽しむことができます😌
主な機能：TubeLoopPlayerでできること
📝 簡単プレイリスト作成
YouTubeの動画やプレイリストのURLをコピー＆ペーストするだけで、簡単に自分だけのカスタムプレイリストに追加できます。
🔀 柔軟な再生モード
用途に合わせて再生体験をカスタマイズできる、複数の再生モードを提供します。「全曲ループ」でプレイリスト全体を繰り返し再生したり、「単曲ループ」で特定の動画を繰り返し再生したり、あるいは「シャッフル」で新しい発見を楽しんだりできます。
💾 プレイリストの永続保存
大切に作成したプレイリストは、ブラウザのCookieに自動的に保存されます。これにより、ブラウザを閉じても、後で再開する際に設定し直す必要がなく、中断したところからすぐに楽しめます。
👁️ 快適な視聴体験
ライトモードとダークモードの切り替えに対応しており、夜間の作業でも日中の明るい場所でも、目に優しい最適な表示で快適に利用できます。
開発の背景
私自身、作業中や勉強中にYouTubeをBGMとして利用することが多くありました。しかし、既存のYouTubeプレイリストループツールはいくつか存在しましたが、多くは機能が複雑すぎたり、最低限の機能と簡易な操作性を兼ね備えた納得のいくUIを持っていませんでした。そのため、「もっとシンプルで使いやすいツールが欲しい」という思いが、TubeLoopPlayer開発のきっかけとなりました。
技術スタック
TubeLoopPlayerは、パフォーマンスとメンテナンス性を両立させるため、モダンな技術スタックで構築されています。主要な技術は以下の通りです。
| 技術 | 説明 |
|---|---|
| React | 動的でレスポンシブなユーザーインターフェースを構築するために使用しています。 |
| React Router | ファイルシステムベースのルーティングが提供され、スムーズなシングルページアプリケーション体験を実現しています。 |
| TypeScript | 型安全性を確保し、コード品質を向上させ、開発プロセスをより信頼性が高くスケーラブルなものにしています。 |
| Tailwind CSS | 迅速かつ効率的なスタイリングを可能にし、高度にカスタマイズ可能で美しいUIを実現しています。 |
| shadcn/ui | アクセシビリティとカスタマイズ性に優れたUIコンポーネントを提供し、開発効率とデザイン品質を向上させています。 |
| Zustand | 高速でスケーラブルな状態管理ソリューションであり、動画再生の状態管理などに活用しています。 |
| Cloudflare | アプリケーションのデプロイメントに利用し、高速かつ安定したサービス提供を実現しています。 |
これらのコンポーネントを統合し、パフォーマンスを維持しながらユーザー体験を提供することに重点を置いて開発を進めました。
今後の展望
TubeLoopPlayerは、将来的にはいくつかの機能強化を検討しています。例えば、クラウドベースのプレイリスト保存と共有のためのユーザーアカウント機能、複数のプレイリスト作成機能などが挙げられます。
皆様からのフィードバックは非常に貴重です。ご提案や問題点がありましたら、お気軽にお知らせください🙇♂
