現状

記事の埋め込みコンテンツとして選択できるのは、youtubeのみ（IDを入力）となっています。

改修後

twitterのツイートを埋め込みコンテンツとして選択できるようにしてください(タイムラインではありません)。twitterが選択され、適切なURLが入力されたら、ツイートが表示されるようにしてください。youtubeに関しても、IDではなくURL(https://youtu.be/dZ2dcC4OnQE のような形式)を入力したら動画を表示できるようにしてください。

• カラム名は現状のままで構いません。

• 入力項目のラベル名も本来はURLに変えるべきではありますが、自動テストの制約上IDのままにしてください。貼り付けるべきURLはyoutube再生画面の「共有」を押した後に表示されるものとします。ブロックヘッダーのアイコンもYoutube/Twitterと適切に切り替わるようにしてください。ブロック追加画面のアイコンはYoutubeとTwitterの二つが表示されるようにしてください。

  

  

  

完成形

実装の流れ

現在、埋め込みタイプとして選択できるのは、YouTubeの一択です。

ここに、

• Twitterという項目を追加
• Twitterが選択された場合とYouTubeが選択された場合で処理を分岐
• 選ばれた適切な埋め込みメディアを表示

という実装を施さなければなりません。また、Youtubeは改修前ですとIDを指定するようになっていますが、修正しYoutube/TwitterどちらもURLでカードが表示されるように実装していきましょう。

もしかしたらカラムの追加が必要になるかもしれないですし、他に考慮すべき事柄が発生するかもしれません。

YouTubeやTwitterなど、外部サービスを利用する場合、そのサービス独自の仕様に従って実装をしていくケースがほとんどなので、しっかりと必要な箇所の仕様を読み込むようにしていきましょう。

やり方は色々あるとは思います。一番簡単なのはTwitter公式の「埋め込み」のメニューから埋め込み用のHTMLタグをコピーして貼り付ける方法でしょう。

ですが、今回はツイートのURLを登録して動的にツイートを埋め込みたいのでこの手法が使えません。今回のような場合は以下のリンクのような方法で実装してみましょう！！