Help us understand the problem. What is going on with this article?

YouTube・ツイートの埋め込み

ブログアプリなどで、記事投稿時に、ツイートを埋め込んだり、YouTubeの動画を埋め込む機能をつける事は多いと思います。
今回、これらメディアの埋め込み機能を実装しましたが、意外と記事が少なかったので、書くことにしました。

実際は、ブログアプリなので、ポリモーフィックなど他の概念が絡んでいるのですが、色々省略しているので、実際に動かす場合は手元の環境に合わせてアレンジする必要はあると思いますので、あくまで導入部分の参考程度に考えてください!

埋め込むための構造

YouTubeの埋め込みについては注意が必要で、やり方としては2つパターンがあります

そもそもyoutubeを埋め込むためのURLの構造としては、下記の図の下線で引いている部分が埋め込みのためのIDになっていて、それ以外の部分は全ての動画で共通のURLになっています。ID部分がそれぞれの動画ごとに振られていて、その部分で動画を識別しています。
view側には埋め込み用のURLを打ち込めばそのまま埋め込まれる仕様になっています。
Image from Gyazo

方法

  • 入力フォームからIDを入力させ、IDをDBに保存して、view側で呼び出し
  • 入力フォームからURLを入力させ、URLをDBに保存して、view側でID部分だけ抜き出してきて呼び出し

UI的には、IDを入力させるより、URLをそのまま入力させた方が、簡単だし、視覚的にもわかりやすいので、今回は後者の方で実装しました。

model

私の場合、埋め込むためのmodelを作りました。このmodelに紐付くテーブルに、埋め込みのタイプ分けや、URLに関する情報を格納するためのカラムを作りました。
テーブルはこんな感じ。カラムに直でURLとかが入ってくるイメージです。
Image from Gyazo

embed.rb
class Embed < ApplicationRecord

  enum embed_type: { youtube: 0, twitter: 1 }

  validates :identifier, length: { maximum: 200 }

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

マイグレーションファイルはこんな感じ

class CreateEmbeds < ActiveRecord::Migration[5.2]
  def change
    create_table :embeds do |t|
      t.integer :embed_type, default: 0, null: false
      t.string :identifier
      t.timestamps
    end
  end
end
  • enumを使って入力されたURLがyoutubeなのか、ツイートなのか分岐するための定義をします
  • バリデーションもつけます
  • 自分でsplit_id_from_youtube_urlと言うインスタンスメソッドを作りました。ここがミソで、「YoutubeならIDのみ抽出する」と言うメソッドを作る事で、view側で呼び出す時にURLのID部分だけを取り出すことができます。

viewの入力フォーム(要素だけ)

入力部分だけなので、色々省略してます!simple_formを使っています。

_form.html.slim
〜〜〜色々省略
    = f.input :embed_type, collect: Embed.embed_types_i18n.invert, include_blank: false
    = f.input :identifier
    = f.button :submit
  • 埋め込むのがyoutubeなのか、twitterなのかで区別してます
  • identifierでURLを入力させます

埋め込みの表示

_embed_youtube.html.slim
.embed-youtube
  = content_tag 'iframe', nil, src: "https://www.youtube.com/embed/#{embed.split_id_from_youtube_url}", \
    frameborder: 0, gesture: 'media', allow: 'encrypted-media', allowfullscreen: true

src: "https://www.youtube.com/embed/#{embed.split_id_from_youtube_url}"でDBに入っているYouTubeのURLのID部分だけを呼び出して埋め込んでいます。

_embed_youtube/html.slim
script async="" charset="utf-8" src="https://platform.twitter.com/widgets.js"

.embed-twitter
  blockquote.twitter-tweet
    a href="#{embed.identifier}"

ツイッターの埋め込みについては、URLをそのまま埋め込んでも表示がされるように、script async="" charset="utf-8" src="https://platform.twitter.com/widgets.js"を記載する必要があります。
a href="#{embed.identifier}"でURLをそのまま呼び出し、表示させています。

kenkentarou
webエンジニアやってます
https://ikikata-media.biz/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした