Apex Community (動画のアップロード)

概要　（Apex Communityとは）

学習の復習でApex-Communityというアプリを作りました。
このアプリは、最近話題のApexというゲームのコミュニティサイトです。
主にできることは、パーティーの募集(ランク、カジュアル、クラブの募集)、自慢プレイの動画投稿や面白かったプレイ動画投稿ができるアプリです。

動画投稿の方法

今回実装にあたって大変だった動画投稿の方法を二つあるのでそれについて書きたいと思います。
一つ目が、CarrierWaveというgemを使って、動画投稿する方法です。

Gemfileに追加

gem 'carrierwave'

追加した後に

bundle install

rails g uploader best_movie #この部分の名前はなんでも良い

rails g AddBestMovieToVideos best_movie:string #この部分の名前はなんでも良い

今回は元から作ってあるデータベース（video)に関連させ作成

rails db:migrate

app/model/video.rb

mount_uploader :best_movie, BestMovieUploader

app/uploaders/best_movie_uploader.rb

def extension_whitelist
   %w(jpg jpeg gif png MOV wmv mp4)
end 

jpg jpeg gif pngは写真
MOV wmv mp4は動画のファイルになります。
実際容量の都合上mp４しか動画は再生されませんでした。
MOV wmvのファイルは音声だけでしか再生されませんでした。

二つ目の方法(ActiveStorage)

・Active Storage をインストール

$ rails active_storage:install
$ rails db:migrate

/app/models/video.rb

has_one_attached :video 

:videoはファイルの呼び名で、用途に合わせて好きな名前をつけていいようです。（画像をアップロードするなら:imageなど)

Viewの作成

_form/html.erb

    <div class="form-group">
      <%= f.label :best_movie %>
      <%= f.file_field :best_movie, :accept => 'video/mp4', onchange: 'previewImage(preview)'  %> 　　　　　 #onchangeによってid=previewがJSファイルに渡される
      #video/mp4でmp４の動画ファイルしか選択できません
      <%= f.hidden_field :best_movie_cache %>
    </div>

    <div class='mt-3 mb-3'>
      <%= video_tag(@video.best_movie.url,
                    id: 'preview',
                    :controls => true, :autoplay => true, :muted => true,
                    size: '600x400') %>
    </div>

*プレビュー機能

/javascripts/preview.js

function previewImage(id) {
  const target = this.event.target;
  const file = target.files[0];
  const reader = new FileReader();
  reader.onloadend = function () {
    preview.src = reader.result;
  };
  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

app/uploaders/best_movie_uploader.rb

def default_url
    'https://i.gyazo.com/d9d7dc0d07a4eb756841bcc946afc915.mp4'
end

default_urlがないとプレビュー機能が実装されません。

＊動画のオプション

*完成イメージ

#まとめ
今回二つの方法で動画のアップロードを試してみましたが、今回のアプリでは、一つ目の方法でCarrierWaveで実装しました。
理由としては、二つ目のActiveStorageは動画を再生したまま、一個前のページに戻りますと、そのページで動画の音だけが再生されてうるさかったのCarrierWaveの方法で実装しました。
CarrierWaveですと一個前のページに戻っても問題なかったです。

またherokuでデプロイした時、動画投稿して時間が経つと動画再生されなかったので、AWS S3でなどでストレージ管理をしないといけないらしいので、まだ実装できてないので、実装していきたいと思います。
二つ目のActive StorageだとAWSなどを使わずに保存できるらしいです。
ただ短い動画しかできません。

最後に間違っている部分があれば教えてください。
この記事でApexをやっている方がいればこのアプリを使ってくださると幸いです。
この記事を読んでくださいりありがとうございます。