はじめに
YouTube や Twitch など、日々気になる動画を見つけてはブックマークしているけど、後で探すのが大変…そんな経験はありませんか？ブラウザのお気に入り機能では文字だけでしか見れないので、動画のサムネイル画像から探したい！ってこと多くないですか？
今回、様々なサイトのお気に入りの動画を URL一つで登録し、サムネイル付きで美しく整理できる Web アプリを作成しました。
🔗 デモ: お気に入り動画コレクション
主な機能
📌 URLから簡単登録
右上の ＋ボタン をクリックするだけで、モーダルが開き、動画URLを貼り付けるだけで登録完了。サムネイル画像とタイトルは自動で取得されます。
🎯 対応プラットフォーム
- YouTube (noembed 経由)
- Twitch VOD (GQL API + oEmbed + フォールバック対応)
- その他主要動画サイト（og:image によるメタ取得）
- その他アダルトサイト
🗂️ カテゴリ管理
- 既存カテゴリはプルダウンから選択
- 新しいカテゴリもその場で追加可能
- 登録後にカテゴリの付け替えもカード内で直接変更可能
- 不要なカテゴリは「カテゴリ管理」セクションから一括削除
🔍 検索・フィルター・並び替え
- キーワード検索: タイトルやURLで瞬時に絞り込み
- カテゴリフィルター: 特定ジャンルだけを表示
- 並び替え: 新しい順/古い順/タイトル昇順/降順
💾 ローカルストレージ保存
ブラウザの localStorage に保存されるため、サーバー不要で動作します。プライバシーも安心です（ただし、別ブラウザ/デバイス間での同期はありません）。
技術スタック
- フレームワーク: Next.js 16 (App Router)
- 言語: TypeScript
- スタイリング: Tailwind CSS v4
- 状態管理: React Hooks (useState / useMemo)
- データ取得:
- Twitch GQL API
- noembed API
- HTML スクレイピング (og:image / JSON-LD)
- Jina.ai プロキシ（Cloudflare 回避用）
UI/UX の工夫
ダークテーマ & ガラスモーフィズム
深みのあるダークグラデーション背景に、半透明のガラス風カードを配置。アニメーションする装飾オーブで視覚的な奥行きを演出しています。
モーダルベースの追加フロー
常に表示されるフォームは画面を圧迫するため、右上のフローティングボタン（＋）から開くモーダル形式を採用。必要な時だけ表示される設計でコレクション閲覧を最優先にしました。
ホバーエフェクト
- カードホバー時にグロー効果
- サムネイルに再生ボタンオーバーレイ
- スケールアニメーション & 影の拡大
レスポンシブ対応
スマホ（1列）、タブレット（2列）、デスクトップ（3列）で自動レイアウト変更。
使ってみた感想
実際に運用してみて、特に Twitch のアーカイブ動画 を整理するのに重宝しています。チャンネル名でカテゴリ分けし、気になった配信をサクサク登録。後で「あの配信どこだっけ？」と探す手間が激減しました。
また、YouTube のプレイリストだと公開/非公開の管理が面倒ですが、これは完全にローカルなので気兼ねなく登録できるのも良いポイントです。
今後の拡張案
- エクスポート/インポート機能（JSON形式）
- クラウド同期（Firebase / Supabase）
- 再生回数・公開日の表示
- プレビュー動画の埋め込み
- タグ機能の復活（カテゴリより細かい分類用）
まとめ
シンプルながら、動画コレクション管理に必要な機能を詰め込んだ「Favorite Video Board」。
Next.js の App Router や Tailwind CSS v4 の最新機能を活用しつつ、実用的なアプリに仕上がりました。気になった方は、ぜひ GitHub からクローンして使ってみてください！
ご質問・フィードバックは Issue や Twitter でお待ちしています 🚀
コメント