🌟

RailsでYoutubeの動画を投稿・編集する方法

2022/01/24に公開約4,300字12件のコメント

概要

Youtubeにアップロードされた動画をRailsアプリで投稿したいという方に向けたものです。
Youtubeの動画を投稿した時にYoutubeのURLのなかで最後の11桁の値のみを取り出し、他の変数に取り入れるようにしている記事が多い。
それだと編集する時に、末尾11桁を入力しないとエラーが起こってしまうので、それが起きないような、その実装方法を記載します。

1. YouTubeURLの種類

YouTubeURLは僕がパッと見た感じ3種類のURLが存在します

PCでのYouTube閲覧時のURL 一番スタンダード?

https://www.youtube.com/watch?v=DOEk-0MeQbI

共有用URL (スマホで視聴中の動画を友達に共有するときはこれ)

https://youtu.be/DOEk-0MeQbI

埋め込みURL (これをHTMLに貼り付ければそのページで埋め込み動画になる)

https://www.youtube.com/embed/DOEk-0MeQbI

1.2. どう実装するか

この3つのURLには共通して末尾に11桁の数字があります。これはGoogleがYouTubeに投稿された全ての動画に割り振っている通し番号でvideo_idと呼ばれます。
つまり上の2種類のURLが投稿されたら末尾の11桁を取り出し、HTMLに設置した以下の埋め込みURLの末尾にその数字を反映させれば埋め込み動画になるはずです。

埋め込みURLの末尾11桁に投稿されたurlの末尾11桁を代入→ 
https://www.youtube.com/embed/<11桁のvideo_id>

youtubeの動画は11桁の文字列で動画の識別を行っております。その11桁の文字列をyoutubeの埋め込み用のURLに貼り付けてあげれば、railsでも埋め込み動画を表示されるます。

youtubeのURL
https://www.youtube.com/watch?v=5H2oL6DQnzY
#この文字列で動画の識別を行う =>  「5H2oL6DQnzY」

ただ、ここに大きな落とし穴があります。
上記URLが生成される条件として、youtubeの動画を0秒から開始する場合のみ、上記のURLが生成されます。
この条件を満たしていないと、さらに長いURLが生成されるので、参考記事 通り作成しても、
埋め込み動画が表示されないバグが発生します。

下記の方法でyoutubeのURLを取得すると、動画識別の11文字のコードより長いURLが生成されます

  • 動画の再生を途中で止めた動画のURL
  • 特殊な状況で動画を再生している動画のURL
    (例:自身のお気に入り動画の再生画面からURLを取得する等)

他にも、あると思いますが、ひとまず長いURLだとバグが起こる可能性があると思ってください。

2. 実装

実装にあたって、私の開発環境を載せておきます。

環境
ruby 3.0.3
Rails 6.1.4.4

3. 事前準備

Youtubeの動画を投稿して編集ができるようなサイトを作っていきます。

ターミナル
cd desktop
rails new youtube_app
cd youtube_app

4. アプリの作成(準備)

コントローラーを作成します。

ターミナル
rails g controller tweets

tweetsコントローラーの中を記述します。

app/controllers/tweets_controller.rb
class TweetsController < ApplicationController
  def index
    @tweets = Tweet.all
  end
  
  def new
    @tweet = Tweet.new
  end

  def create
    tweet = Tweet.new(tweet_params)
    if tweet.save
      redirect_to :action => "index"
    else
      redirect_to :action => "new"
    end
  end

  def show
    @tweet = Tweet.find(params[:id])
  end

  def edit
    @tweet = Tweet.find(params[:id])
  end

  def update
    tweet = Tweet.find(params[:id])
    if tweet.update(tweet_params)
      redirect_to :action => "show", :id => tweet.id
    else
      redirect_to :action => "new"
    end
  end

  def destroy
    tweet = Tweet.find(params[:id])
    tweet.destroy
    redirect_to action: :index
  end

  private
  def tweet_params
    params.require(:tweet).permit(:body, :youtube_url)
  end
end

ルーティングを作成します。

config/routes.rb
resources :tweets
root "tweets#index"

モデルを作成します。

ターミナル
rails g model Tweet body:text youtube_url:string

[注意]すでに、モデルが作成されている方は

ターミナル
rails generate migration AddYoutubeUrlToTweets youtube_url:string

これでマイグレーションファイルの作成もできました。

ターミナル
rails db:migrate

をしてマイグレーションファイルをrails db:migrateしましょう。

htmlファイルを作成します。

views/tweetsの中に
・index.html.erb
・new.html.erb
・show.html.erb
・edit.html.erb

これで、準備は終了です。

5. html記述

app/views/tweets/index.html.erb
<% @tweets.each do |t| %>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/<%= t.youtube_url[32..42] if t.youtube_url? %>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <%= t.created_at %>
    <%= link_to "詳細へ", tweet_path(t.id) %>
    <%= link_to "編集する", edit_tweet_path(t.id) %>
    <%= button_to "削除する", tweet_path(t.id), method: :delete %>
<% end %>

下記コードは、Youtube埋め込みコードの基盤となるコードです。

https://www.youtube.com/embed/

このコードの後ろに、<%= t.youtube_url[32..42] %> を追記してあげることで、変則的な状態で生成されたURLでも正常に再生できるようになります。

<%= t.youtube_url[32..42] %>
# 動画の識別をする11桁の文字列を取得している

続いて、投稿画面と編集画面のviewを作成します。
new.html.erbedit.html.erbに下記コード追記してください

<%= form_for @tweet do |f| %>
  <%= f.label :youtube_url %><br>
  <%= f.text_field :youtube_url, :size => 140 %><br>
  <%= f.label :body %><br>
  <%= f.text_field :body, :size => 140 %> <br>
  <%= f.submit "編集する" %>
<% end %>

これで完成です。

最後に

「RailsでYoutubeの動画を投稿・編集する方法」の説明を終わりたいと思います。
間違っている点がありましたらご指摘頂けると助かります。

最後までご覧いただき、ありがとうございました。

Discussion

こんにちは、Railsで記事の通り開発を進めているのですが、
一通り同じ文を入力したところNo route matches [GET] "/rails/actions"とエラーが返ってきてしまいます。
おそらくコントローラーの中のActionのリダイレクトについてのエラー文だと思うのですが、こちらはどこにルーティングされているのでしょうか?
素人質問で大変恐縮ですが、回答いただけたら嬉しいです。

どういったアクションを行った後にroutingerrorが出ましたでしょうか?
routes.rbに記述はされてますでしょうか?
コントローラーも同じtweetsで作成されてますでしょうか?
index.html.erbとnew.html.erbはどのように記述されてますでしょうか?

localhostをブラウザを開こうとすると上記のエラーが返ってきます。
routes.rb、index.html.erb、new.html.erbは下記のように記述しています。
また、rails gはpostという名前で作成しているので、コードもそれに合わせて変更しています。

routes.rb

Rails.application.routes.draw do
  resources :posts
  root to: "posts#index"
end

index.html.erb

<p id="notice"><%= notice %></p>

<h1>Videos</h1>
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th colspan="3"></th>
    </tr>
    </thead>

  <tbody>
    <% @posts.each do |t| %>
        <tr>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/<%= t.youtube_url[32..42] %>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            <%= t.created_at %>
            <%= link_to "詳細へ", post_path(t.id) %>
            <%= link_to "編集する", edit_post_path(t.id) %>
            <%= button_to "削除する", post_path(t.id), method: :delete %>
        </tr>
    <% end %>
  </tbody>
</table>

<br>

new.html.erb (edit.html.erbも同様のコードを記述しています。)

<%= form_for @post do |f| %>
    <%= f.label :youtube_url %><br>
    <%= f.text_field :youtube_url, :size => 140 %><br>
    <%= f.label :body %><br>
    <%= f.text_field :body, :size => 140 %> <br>
    <%= f.submit "編集する" %>
  <% end %>

すみません、このURLで試したところrails gでpostと単数系で命名してしまったためエラーがいくつか返ってきてるので一度postsで作成し直してみます。

なるほど!
そういうことだったんですね!
それでもエラーが起こった場合は気軽にコメントください!

返信ありがとうございます!
命名をpostsに変えたのち、もう一度記事の手順を行いサイトを開いたところ白紙で表示されました。
編集し忘れている箇所ってあったりしますか?

特にはないと思います!
これで投稿をしてみてうまくいっていれば大丈夫です!

一応命名をtweetsにし、全く同じように行ったのですがやはり白い画面のまま何も表示されません...
どういった修正が必要かわかればご教示いただきたいです...

確認して欲しいこと
1.tweetsにした漏れはないのか
2. マイグレーションファイルの作成はできてるのか
3. データーベースに保存されているのか
4. コントローラーでパラーメーターのところに記述ができているのか
をみて欲しいです!
1.ならテーブルはpostsのままだったり
2. downにしないで書き換えたなど
3. rails cをしてTweet.allで確認してみてください!
4. 1番下の部分ですね

確認したところ、単純にデータベースを追加するの忘れていただけでした...
本当にお騒がせしてしまいすみませんでした...!

よかったです!!!!
全然大丈夫ですよ!!!

ログインするとコメントできます