現在プログラミングスクールに通い、ポートフォリオ制作フェーズに移行した所です。
インスタのストーリーズみたいに、短い動画を投稿できるようなのを作ろうと思ったのですが動画をアップする記事が思ったより少なくて悩んだので、今回忘れないように書いておこうと思います。
参考サイト
- 【Rails 5.2】 Active Storageの使い方
- Active Storageを使って動画投稿サイトを作った
-
https://stackoverflow.com/questions/50993367/active-storage-displaying-video-in-video-tag
Active Storage を使用
当初は Carrierwave などを使って実装しようと考えていましたが、調べると Rails の標準機能でファイルアップロードができるようなので、こちらで実装します。
ActiveStorageを今日知った程度の初学者なので詳しいことは他の方の記事を調べてみて下さい。
動画投稿までのフローを残しておきます。
参考サイトからの引用です。
Rails5.2で追加された、ファイルアップロードを行うための機能です。これを使えば、フォームで画像の投稿機能などが簡単に作れます。また、Amazon S3, Google Cloud Storage, Microsoft Azure Storageなどのクラウドストレージサービスに対するファイルのアップロードを簡単に行うことができます。クラウドストレージの他に、ローカルディスクにファイルを保存することもできます。
Active Storage をインストール
$ rails active_storage:install
$ rails db:migrate
active_storage_blobsとactive_storage_attachmentsという２つのテーブルが作成されます。
この２つはこのままで次に進みます。
モデルの作成
今回はシンプルにVideoというモデルを作ります。
カラムにtitleとintroductionを作成しました。
ここで動画自体のカラムは作っていません。
$ rails g resource video title:string introduction:text
$ rails db:migrate
今回は「投稿する動画は1回で１つ」という前提にします。
Videoモデルにhas_one_attachedを記述します。
class Video < ApplicationRecord
has_one_attached :video
end
:videoはファイルの呼び名で、用途に合わせて好きな名前をつけていいようです。（画像をアップロードするなら:imageなど）
コントローラーの作成
videosコントローラーに記述していきます。
class VideosController < ApplicationController
def new
@video = Video.new
end
def create
@video = Video.new(video_params)
@video.create
redirect_to @video
end
def show
@video = Video.find(params[:id])
end
private
def video_params
params.require(:video).permit(:title, :introduction, :video)
end
end
Videoモデルに:videoカラムはありませんが、ここはhas_one_attaches :videoに対応します。
今回は動画の投稿ができるかテストなので、new create showだけ書いてあります。
ビューの作成
newで投稿フォームを記述します。
<%= form_with model: @video, local: true do |form| %>
<p>title</p><%= form.text_field :title %> <br>
<p>introduction</p><%= form.text_area :introduction %> <br>
<p>video</p><%= form.file_field :video %> <br>
<%= form.submit %>
<% end %>
こんな感じで投稿フォームができたかと思います。
showページも作ります。
<% if @video.video.attached? %>
<p><%= @video.title %></p> <br>
<p><%= @video.introduction %></p>
<%= video_tag rails_blob_path(@video.video) %>
<% end %>
.attached?で@videoがvideoを持っているかどうかを調べられます。
シンプルに <%= video_tag @video.video %> と書いてしまうと、データを /app/assets/ の方に探しにいくみたいで、アセットパイプラインのエラーが出ます。
rails_blob_pathを記述しましょう。
これで表示はされました。ただ今のままだと動画が再生されません。 <%= video_tag %>を <video> の中に記述します。
<% if @video.video.attached? %>
<p><%= @video.title %></p> <br>
<p><%= @video.introduction %></p>
<video src="<%= rails_blob_path(@video.video) %>" type="video/mp4" controls></video>
<% end %>
controlsは動画を利用しやすくするインタフェースを自動で作成します。
これで、動画のアップロードと表示、再生までを作ることができました。
実際カラムを作っているわけではないので、一覧表示してみたりするのはこれからですが果たしてうまくいくのか・・・
また何かあったら投稿しようと思います。
注意点
今回はポートフォリオ作成なので、デプロイまで考えて動画はフリー素材のもの、かつ、数秒程度の短いものを利用する前提です。
動画が長いものはサイズが大きいのでローカルはともかくネットワーク上でやろうとするとえらいことになりそうです。
（スクールの人には必要最低限にしてねと注意されました）
利用料はかかりますが AWS S3 を使用するなどの方法があるようです（この辺りはまだ詳しくないですが）
自分と同じような初学者の方で、こういう方法があるんだなぁ、と思ってもらえれば幸いです。