ClipCrafterプロジェクトは、実際のYouTube動画のタイトルとサムネイルを表示することで、プロジェクトカードのユーザーエクスペリエンスを向上させることを目的としていました。当初、プロジェクトカードにはサムネイルがなく、「YouTube動画 (VIDEO_ID)」のような一般的なタイトルしか表示されませんでした。この情報を直接保存するには、データベースのマイグレーションとバックフィルが必要になります。
しかし、チームはインフラストラクチャの変更なしにこれを達成する方法を見つけました。動画タイトルについては、タイトルを含む動画メタデータを提供するYouTubeの無料oEmbed APIを利用しました。このAPI呼び出しはプロジェクト作成時に行われ、失敗した場合は動画IDを含むフォールバックタイトルが使用されます。取得されたタイトルはプロジェクトとともに保存されます。
サムネイルについては、動画IDのみが必要なYouTubeの予測可能なサムネイルURLパターンを活用しました。動画IDは、新しいプロジェクトの場合は保存されているYouTube URLから、古いプロジェクトの場合はタイトル形式から抽出されます。このアプローチにより、既存および新規プロジェクトのサムネイルURLが動的に生成されます。
リモート画像の表示を許可するために、YouTubeサムネイルドメインがアプリケーションの設定に追加されました。プロジェクトカードコンポーネントは、有効なソースが見つかった場合にサムネイルを条件付きでレンダリングするように更新されました。このソリューションは、データベースのマイグレーション、バックフィルスクリプト、およびAPIキーの必要性を回避します。
この記事は、より広範なパターンを強調して締めくくっています。新しいインフラストラクチャを実装する前に、必要なデータが既存のデータベースエントリ、無料のプラットフォームAPI、または予測可能なURL構造から派生できるかどうかを検討してください。このアプローチは、最小限の開発労力でユーザーエクスペリエンスを大幅に向上させることができます。
dev.to
Adding YouTube thumbnails and real titles to existing projects — without a migration
