【簡単!!】Youtubeの動画を投稿する方法

11379 ワード
Ruby Rails haml VSCode Ruby テキストリンク

こんな感じで作りたい

1 概要

Youtubeにアップロードされた動画をRailsアプリで投稿したいという方に向けたものです。
この記事を通して「ああ、こんな感じなんだな」と理解してもらえれば幸いです!
あと初めてQiitaの記事を書きますので、色々ご不明点あるかもしれませんがよろぴく。

動画の貼り付け方は難しそうなイメージを持っているのではないかと思います。自分もそうでした。
なので今回はRailsアプリでYoutubeの動画を投稿する方法を説明していきます。

1.1 どうやって実装するか

通常はYoutubeの動画をWebページに表示する場合は、gifのように埋め込みのコードをコピーしてページに貼り付ければ簡単に表示できます。

ただ、今回の場合はyoutubeの動画を投稿して表示したい場合です。
youtubeの個々の動画のURLに共通してあるのは、下11桁のコードが存在してあることです。youtubeではこれをvideo_idを呼びます。(ニコニコ動画で言えばsm<7桁>または<8桁>)

なのでHTMLで用意されたiframeタグに直接反映させれば動画が再生されるのではと考えました。

1.2 前提

  • VSCode,Ruby,Railsを中心に使用します。
  • htmlはhamlを使用しています。
  • scafoldは使用しないです。
  • JavaScript,jQueryは使用しません。あくまで初学者でもわかるように説明します。

2 実装

さくっとやりましょう！

2.1 新規ファイルを作成

今回はMYSQLを使用します。バージョン指定したい場合は'rails 5.2.3 new YoutubeTest -d mysql'って感じで打ってください！

$ cd ~/projects // ディレクトリは各自用意
$ rails new YoutubeTest -d mysql

アプリ用のデータベースを作成します。

$ cd YoutubeTest // 新規作成したアプリのディレクトリへ移動
$ rails db:create // データベースを作成します

# 以下のような表示がされれば成功
Created database 'YoutubeTest_development'
Created database 'YoutubeTest_test'

サーバーを起動します。

$ rails s

あとはサーバー立ち上げることができたか確認します。
http://localhost:3000 にアクセスするとRailsのデフォルト画面が出ればOKです!

2.2 Gem導入

続いてはテキストエディタの出番ですね。
テキストエディタを開き、command + Oで先ほど作成したYoutubeTestディレクトリを選択。
Gemfileに一番最後の行に以下のgemを追加してください。

gem 'haml-rails'
gem 'erb2haml'

あとはbundle installをぶち込みます。
'bundle'でも可能なので、僕は気軽にインストールしたい時はこれをやってます。

ターミナルでcommand + tを押すとタブが作成されるので、そこでbundleします。
あるいはcontrol + cでサーバーを一旦停止してそこでbundleしてもOKです。

$ bundle

2.3 ファイル作成

はじめに、ルーティングを設定します。

routes.rb
Rails.application.routes.draw do
  root to: 'posts#index'
  resources :posts, only: [:index, :new, :create]
end

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

$ rails g controller posts

postsコントローラーに以下を追記してください。

app/controllers/posts_controller.rb
class PostsController < ApplicationController
  def index
    @posts = Post.all
  end

  def new
    @post = Post.new
  end

  def create
    Post.create(post_params)
    redirect_to root_path
  end

  private
  def post_params
    params.require(:post).permit(:body, :youtube_url)
  end
end

モデルを作成します

$ rails g model post

マイグレーションファイルに以下のように追加

db/migrate/xxxxxxxxxxxxxx_create_posts.rb
class CreatePosts < ActiveRecord::Migration[5.2]
  def change
    create_table :posts do |t|
      t.text :body # 追加
      t.string :youtube_url # 追加
      t.timestamps
    end
  end
end

あとは忘れずマイグレートしましょう。

$ rails db:migrate

いよいよ本題ですね!

トップ画面のビューファイルを作ります
views/posts配下に新たにindex.html.hamlファイルを作りましょう。
作成後に以下の内容をまるまる入れてください!

app/views/posts/index.html.haml
.contents
  = link_to '動画を投稿する', new_post_path
  .contents__content
    - @posts.each do |post|
      .contents__content
      %table
        %tr
          %th
            body
          %th
            movie
        %tr
          %td
            = post.body
          %td
            %iframe{allow: "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture", allowfullscreen: "", frameborder: "0", height: "315", src: "https://www.youtube.com/embed/#{post.youtube_url.last(11)}", width: "560"}

一番最後のiframeタグにhttps://www.youtube.com/embed/#{post.youtube_url.last(11)}のvideo_idの部分に#{post.youtube_url.last(11)}と入ってあるのは、簡単に説明すると「youtube_urlのurlの下11桁を取得します!」ということです。
lastメソッドを使って文字列の最後を取得するようにします。(この場合last(11)なので、文字列の下11桁を取得することになります。)

続いて投稿画面のビューファイルを作成します。
これも同じくviews/postsディレクトリ配下に新規のビューファイルを作ります。

views/posts/new.html.haml
.new-contents
  .new-contents__content
    = form_for [@post] do |f|
      = f.text_field :body, placeholder: 'body'
      = f.text_field :youtube_url, placeholder: 'youtube_url'
      = f.submit '投稿する'

最後は一旦サーバーを停止して、再度rails sを起動してください。
あとはhttp://localhost:3000/ へアクセスして動画を送ってみましょう!

これで完成です!

ね?簡単でしょ?

こんな感じで、動画投稿の実装までできたらこっちのもんです!
以上です。ありがとうございました。

参考サイト