埋め込みメディアタイプにTwitter追加

2021.6.1 応用編8

 APIではなくローカルで作成する。ローカルで作成することによって、処理時間の短縮を狙う。

【Twitter】埋め込み処理をAPIに投げずにローカルで行う - mizuff_diary

 

<目標>

ツイートのURLを登録して動的にツイートを埋め込めるようにする。

youtubeも同じ形で実装

 

ポリモーフィック関連付け

ある一つのモデルが他の複数のモデルに属していることを、1つの関連付けだけで表現できる。

確認ポイントも見るととてもわかりやすい。

Active Record の関連付け - Railsガイド

 

流れ

youtube

 IDのみ抽出する。

(embed.rb)

def split_id_from_youtube_url
identifier.split('/').last if youtube?
end

最初はgoogleyoutube投稿された全ての動画の全てに割り振ったURLの末尾の11桁のvideo_idと呼ばれる数字を抽出した。だが開始時間を指定したurlになると、末尾の11桁が変わってしまうので、splitを使用して「/」で区切りをつけて「last」=最後の部分のみ抽出する。

https://www.youtube.com/embed/<split_id_from_youtube_url>という感じになる。

(views/shared/_embed_youtube.html.slim)

.embed-youtube
= content_tag 'iframe', nil, width: width, height: height,
src: "https://www.youtube.com/embed/#{embed.split_id_from_youtu
be_url}", \
frameborder: 0, gesture: 'media', allow: 'encrypted-media',
allowfullscreen: true

 参照

content_tag | Railsドキュメント

 

 

twitter

(views/shared/_embed_twitter.html.slim)

script async="" charset="utf-8" src="https://platform.twitter.com/widgets.js"
.embed-twitter
blockquote.twitter-tweet
a href="#{embed.identifier}"

参照

scriptタグとは?どの位置で読み込むのが良いのかを解説します | ウェブカツ公式BLOG 

 

参照

【Rails】YoutubeとTwitterをAPIを使わずに記事に埋め込む - Ruby on Rails Learning Diary

rails学習 YouTubeとTwitterをローカルで埋め込む - Qiita

 

RSpec

js: true

JavaScriptを使用しないと操作できない処理をテストする。

Ajaxを使用した処理や、クリックイベントによるモーダル画面の表示など、JavaScriptなしては実行できない操作がある場合にこのタグをつける。

 

sleep 秒数

JavaScriptの処理が完了しないうちにテストが先に進んでしまうとテストが失敗するので、JavaScriptの処理が終わるまでテストを停止する。

参照

使えるRSpec入門・その4「どんなブラウザ操作も自由自在!逆引きCapybara大辞典」 - Qiita