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

# こんな感じで作りたい
[![Screenshot from Gyazo](https://gyazo.com/3edac1498d6795da5023a59bd9acc543/raw)](https://gyazo.com/3edac1498d6795da5023a59bd9acc543)

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

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

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

[![Screenshot from Gyazo](https://gyazo.com/490e8b7702bffc644bbe30937e15a4c8/raw)](https://gyazo.com/490e8b7702bffc644bbe30937e15a4c8)

ただ、今回の場合はyoutubeの動画を投稿して表示したい場合です。
youtubeの個々の動画のURLに共通してあるのは、下11桁のコードが存在してあることです。youtubeではこれをvideo_idを呼びます。(ニコニコ動画で言えばsm<7桁>または<8桁>)
<img width="321" alt="6dd8514eced3c81a39a16c367511d24d.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/610089/7fa4695f-8359-b9c4-0d4f-db61f0ed39ad.png">

なので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です!
[![Screenshot from Gyazo](https://gyazo.com/aa42578496e362131452b38405a24c75/raw)](https://gyazo.com/aa42578496e362131452b38405a24c75)

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

```Gemfile
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/ へアクセスして動画を送ってみましょう!

### これで完成です!
[![Screenshot from Gyazo](https://gyazo.com/f74137922c92241cd162d371e2b66a1c/raw)](https://gyazo.com/f74137922c92241cd162d371e2b66a1c)

__ね?簡単でしょ?__

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

# 参考サイト
https://qiita.com/Kairi_Yasunnde/items/8e931a4670549ba8237e