Carrierwaveを使って動画を保存する
[導入]
①carrierwaveのインストール
gem "carrierwave"
bundle install + rails s を忘れずに
②動画専用のクラスの生成
rails g uploader video
「rails g uploader + クラス名」で生成します。
🗂 → app/uploaders/video_uploader.rb
# Add an allowlist of extensions which are allowed to be uploaded.
# For images you might use something like this:
def extension_allowlist
%w(jpg jpeg gif png MOV wmv mp4) ⬅️
end
⚠️「def extension_allowlist ~ end」をコメントインします。
拡張子「MOV, wmv, mp4」を追記します。
[保存]
①動画を保存したいモデルを作成(今回はtweetモデルとします)
rails g model tweet
②該当のマイグレーションファイルにカラムを追加
class CreateTweets < ActiveRecord::Migration[6.0]
def change
create_table :tweets do |t|
t.text :text
t.string :video ⬅️
t.references :user, null: false, foreign_key: true
t.timestamps
end
end
end
(ターミナルでrails db:migrate)
型はstringです。
③tweetモデルにuploaderクラス + videoカラムのアソシエーションを定義
🗂 → tweet.rb
class Tweet < ApplicationRecord
belongs_to :user
mount_uploader :video, VideoUploader ⬅️
validates :text, presence: true
validates :text, length: { in: 1..40 }
end
「mount_uploader + カラム名 + VideoUploader(クラス名)」
で紐付けます。
④tweetsコントローラーの作成、編集
rails g controller tweets
class TweetsController < ApplicationController
before_action :authenticate_user!, only: [:new]
def index
@tweets = Tweet.all.order("created_at DESC")
end
def new
@tweet = Tweet.new
end
def create
@tweet = Tweet.new(tweets_params)
if @tweet.save
redirect_to root_path
else
render :new
end
end
private
def tweets_params
params.require(:tweet).permit(:video, :text).merge(user_id: current_user.id)
end
end
index、new、createをそれぞれ編集します。
⑤ルーティングを設定
Rails.application.routes.draw do
devise_for :users
root to: "tweets#index" ⬅️
resources :tweets, only: [:new, :create] ⬅️
end
⑥ビューを作成
🗂 → app/views/tweets/new.html.erb
<%= form_with model: @tweet, local: true do |f| %>
<%= render "shared/error_messages", model: f.object %>
<div class="img-upload">
<div class="click-upload">
<%= f.label :video, placeholder: "video" %> ⬅️
<%= f.file_field :video, accept: 'video/*' %> ⬅️
:
:
<% end %>
form_with を使って記述します。
これで完成です😊
[表示]
<% @tweets.each do |tweet| %>
<div class='tweet-contents'>
<%= video_tag(tweet.video.to_s, loop: true, autoplay: true, muted: true, controls: true) %> ⬅️
<div class='tweet-text'><%= tweet.text %>
</div>
</div>
<% end %>
railsにおける動画表示をするためには、「video_tag」を使います。下記のリンクで、video_tagのオプション(loop, autoplayなど)を確認することができます。
railsドキュメント:
https://railsdoc.com/page/video_tag
参考:
ご覧いただきありがとうございます。これはアウトプット用のnoteです。
よろしければアドバイスやコメント等お願いします!