【Rails】carrierwave(キャリアウエーブ)で動画の投稿(保存)　

#はじめに
キャリアウエーブ（carrierwave）を導入しました。
画像ではなく、動画の投稿方法を紹介します。
　
###目次
1. carrierwave導入
2. 動画の保存準備
3. 動画の投稿


#開発環境
ruby 2.6.5
rails 6.0.0


#実装
それでは実装していきます〜

#1. carrierwave導入
まずはGemをインストールします。

```:ターミナル
gem "carrierwave"
```

```:ターミナル
bundle install
```
gemを読み込むために、`rails s`　して必ずサーバーを再起動させてください。


##1.2 アップローダークラスの生成
動画専用のファイルを作成します。

```:ターミナル
rails g uploader video_top
```

構文はこちらです。

```:ターミナル
rails g uploader アップローダー名
```
今回はvideo_tpoという名前で作ります。


そうすると以下の様なファイルが自動生成されます。

![スクリーンショット 2020-11-22 5.49.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/769854/001ee6bd-208e-8526-441b-6e5c0bb0ed63.png)

いろいろ記述してありますが、`extension_whitelist`の部分をコメントインして`MOV wmv mp4`を追記します。

```ruby:app/uploaders/video_uploader.rb
#省略

  # Add a white list of extensions which are allowed to be uploaded.
  # For images you might use something like this:
  def extension_whitelist
    %w(jpg jpeg gif png MOV wmv mp4) #←ここを追記
  end

#省略
```

アップロードするファイルの拡張子やサイズ、保存するパスを指定する事が出来ますが、今回は動画なので `MOV` `wmv` `mp4`この３っつを追記します。

ここまでがキャリアウエーブの導入です。









#2. 動画の保存準備

続いて動画の保存をします。
MVCの作成をしていきます。

####まずはモデル作成します。

```:ターミナル
rails g model top
```
今回は`top`という名前で作成します。

まず自動生成されてるマイグレーションファイルに追記します。


```ruby:db/migrate/2020XXXXXXXXX_create_tops.rb
class CreateTops < ActiveRecord::Migration[6.0]
  def change
    create_table :tops do |t|
      t.string :video_top #←ここ

      t.timestamps
    end
  end
end
```

今回は`video_top`という名前でカラムを追加します。


```:ターミナル
rails db:migrate
```


次に、できたモデルに、アップローダークラスとカラムの紐づけをしていきます。


```ruby:app/models/top.rb
class Top < ApplicationRecord
  mount_uploader :video_top, VideoUploader
end
```

構文はこちらです。
`mount_uploader [:カラム名], [アップローダークラス]`

カラム名は`video_top`でアップローダークラスは最初に作成したアップローダークラスのクラス名`VideoUploader`です。


####コントローラーの作成・編集をします。

```:ターミナル
rails g controller top index new create
```
保存と再生に最低限必要なアクションは`index` `new` `create`です。


自動で記述さてる`new` `create`に追記し、paramsを許可してデータを取得できるようにします。

```app/controllers/tops_controller.rb
class TopsController < ApplicationController
  def index
  end

  def new
    @top = Top.new #←ここを追記
  end

  def create
    @top = Top.new(tops_params) #←ここを追記
    @top.save! #←保存だけします 「!」をつける事でエラーを表示してくれます。
  end


  private

#ここからがデータを許可する記述
  def tops_params
    params.require(:top).permit(:video_top)
  end
end
```

これで保存する裏側は完成です。

あとはビューを作って投稿ができるようにします。


#3. 動画の投稿

自動生成されてるviewのnewに追記します。

```html:app/views/tops/new.html.erb
<h1>Tops#new</h1>
<p>Find me in app/views/tops/new.html.erb</p>

#ここから追記
<%= form_with model: @top, local: true do |f| %>

<div class="field">
  <%= f.label :video %>
  <%= f.file_field :video_top, :accept => 'video/*' %>
</div>

<div class="#">
  <%= f.submit "作成する" ,class:"#" %>
  <%=link_to 'もどる', root_path, class:"back-btn" %>
</div>
<% end %>
```

ルーティングを設定して保存してみます。

```ruby:config/routes.rb
Rails.application.routes.draw do
  root to: 'tops#index'
  resources :tops
end
```

http://localhost:3000/tops/new


これで保存機能の完成です！


次に、保存ができたらファイルを確認してみます。





####3.1 動画ファイルの確認とgitとの連携 
`video_top`カラムにはファイル名が保存され、動画自体はpublic/top/video_top/「id名」に保存されてます。

![スクリーンショット 2020-11-22 7.02.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/769854/31af238b-59f9-632b-c4da-560df3d8a390.png)

Githubと連携させている方であれば、commit・pushの際データ量が多すぎるので、Git管理下から除外しときます。


```:.gitignore
#省略
/public/packs
/public/packs-test
/node_modules
/yarn-error.log
yarn-debug.log*
.yarn-integrity

/public/uploads #←これを追記
```

保存が確認されました。


次回、ビューで表示させます。ページに遷移したら（リロード）自動で再生してくれる方法と、ボタンを押して手動再生する方法があるので、二種類紹介します。
よかったら参考にしてみてください。
【Rails】carrierwave(キャリアウエーブ)の再生方法　「自動再生」「手動再生」
https://qiita.com/AKI3/items/2d96600b5aa36666b351





#まとめ
キャリアウエーブ（carrierwave）を使った動画の「投稿」方法でした。
下記の参考にせていただいた記事の中に、動画ではなく「画像」を保存してるので記事もあるので、そちらも興味あれば参考にしてみてください。


###最後に
私はプログラミング初学者ですが、自分と同じ様にエンジニアを目指す方々の助けになればと思い、記事を投稿しております。
それではまた次回お会いしましょう〜


#参考
https://pikawaka.com/rails/carrierwave