【備忘録】Railsで動画投稿機能を実装

プログラミング 趣味 教育

こんにちは,たっきーです.
今回の記事は以前Discordに載せた動画投稿機能の実装方法の紹介になります.
いつもは割と丁寧に記事を書いているのですが,今回は
あくまで備忘録で,Railsフレームワークを触った事のある人向けに分かりやすく書いています.
初心者向けのWebサービス開発記事が途中で終わっていますが,現在個人で制作しているプロダクトがひと段落したら必ず更新します.
というわけで今回は完全に初心者向けではないことを念頭に置いてください.

はじめに

rails new (以下略)
でRailsアプリケーションの雛形が出来ている事が前提.

1.Gemの追加

Gemfileに

gem 'carrierwave'

を記述し,ターミナルで
bundle install
をしてGemを更新.

2.アップローダー作成

ターミナルから
rails g uploader video
と記述.
videoの部分は何でもOK(画像ならimageとか).

3.とりあえずコントローラとモデルを作成

コントローラ,モデルを自動で作ってくれるscaffoldという便利な機能があるので使ってもよい.
が,個人的には動きを把握する上で慣れないうちは1から実装の方が良いかも.
本格的にサービスを作るのではなく,あくまで動画投稿機能を体験したいなら別に使ってもOK.
念の為にscaffoldの方法も載せておく.
ターミナルから
rails g scaffold article title video
を記述.ここでは,articleというモデルを作成し,titleカラムとvideoカラムを追加している.
rails db:migrate
を実行してマイグレーション完了.
titleカラムもvideoカラムもstring型にしておけばOK.
dbディレクトリから確認してみるといいかも.

4.モデルの紐づけ

app/models/article.rbに

mount_uploader :video, VideoUploader

を記述.
これにより動画の保存場所を指定できる.
保存場所は例えばS3やCloudinaryといった外部ストレージにするのが基本だが,実装直前にやれば良いので省略.

5.拡張子の指定

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_white_list
     %w(jpg jpeg gif png)
  end

上記のようにコメントアウトを外す.
今回は動画ファイルなので,mp4 MOV wmvあたりを追加すればOK.

6.バリデーションの追加

app/models/article.rbで

validates :title, :video, :presence => true

を追加.これによりtitleカラム及びvideoカラムは空である事を認めない設定に出来る.

7.ブラウザからビデオを起動できるようにする

app/views/articles/(アンダースコア)form.html.erbはデフォルトでは

  <div class="field">
    <%= f.label :video %><br>
    <%= f.text_field :video %>
  </div>

となっている.
※(アンダースコア)は本来は記号である.

<%= f.text_field :video %>

の部分を

<%= f.file_field :video, :accept => 'video/*' %>

に書き換える.
これによりどの動画を投稿するのか選択できる.

8.再生機能実装

app/views/articles/show.html.erbに

<div class="video-player">
    <%= video_tag @article.video.url, autoplay: false, muted: false, controls: true , :size => "〇〇x〇〇"%>
</div>

と記述する.
ちなみにautoplay: は自動再生の有無,mutued: は動画の消音固定の有無,controls: は再生・停止のインタフェースの有無,:sizeは動画の表示サイズの指定である.
※本記事ではvideo_tagの部分で@article.video.urlとなっているが,@articleの部分は作成したコントローラ内のshowアクションで宣言した変数名によって異なる.くれぐれもこのまま実装しないように!

以上が動画投稿機能の実装になるが,画像投稿においても概ね実装方法は同じである.
これについては理解度チェックとして各自で実装して確認していただきたい.

ということで今回はRailsを使った動画投稿機能の実装方法を簡潔に紹介しましたが,いかがだったでしょうか?
Rails経験者のみにしか分からない記事になっていますが,Rails学習者の一助になれば幸いです.