自分の手で未来を創るーlav0

自分のために、誰かのために、今ここにないもの、もっと良くしたいもの、何でも自分の手で創っていく。そして、作ったものを公開していきます

Rails 6.0でアプリを開発 基本の流れ⑬ 画像や動画投稿の設定

既にプロフ画像でActiveStrageを導入済みなので、記事投稿にそれを実装する。プラス動画投稿もしてみるメモ。(※この記事は中途半端になってます。修正予定)

f:id:kslabo51:20200315121821j:plain

 

実現したいこと

アプリケーションの記事投稿で画像、動画を扱う。そしてきれいに配置して表示する。

 

1)Postモデルの設定

今回は複数の画像を投稿できるようにする。

f:id:kslabo51:20200314202232p:plain

1つならhas_one_attached、複数ならhas_many_attached

 

2)投稿するためのフォームを作成

f:id:kslabo51:20200314202528p:plain

multiple: trueで複数の画像を投稿できるようになる。

 

3)ストロングパラメーターで画像に許可を出す。

f:id:kslabo51:20200314202726p:plain

 

4)登録した画像を表示する

f:id:kslabo51:20200314202927p:plain

 

5)画像をリサイズする

既にimage_processingをインストール済みなので

f:id:kslabo51:20200314204019p:plain

配置はできていないが制限は可能。

 

※以下、いったん手順を表示するが、動画をS3にアップまでは完了できるが再生までできていないのでそれは今後編集予定 

 

6)動画をアップする

①has_one_attachedで記事が1つの動画を持てるようにする

f:id:kslabo51:20200315120419p:plain

 

②ストロングパラメーターにvideoを追加

f:id:kslabo51:20200315120543p:plain

 

③フォームに一旦、画像とは別にファイルフィールドを設定

f:id:kslabo51:20200315120718p:plain

 

④画像があるときは画像、動画があるときは動画を表示するように分岐

※S3には動画がアップされていることは確認したが下記のエラーで表示されない。

ActionView::Template::Error (The asset "" is not present in the asset pipeline.):

f:id:kslabo51:20200315120918p:plain

 

上記コードではその後、引数の値を調べるために<%= post.video.inspect %>を埋め込んだものです。引数の値は問題なさそうだが。。

 

⑤プレビューを作成するためにimage_tagに変更し

<%= image_tag post.video.preview(resize: "100x100>") %>

でプレビューを表示することも可能なのはチェック済み

 

⑥またffmpegをインストールしてみた

Windowsにダウンロード→パスの設定→Gemファイルのインストール

・こちらの設定はまだ。

 

 

参考にさせていただいたサイト

Active Storage の概要 - Railsガイド

carrierwaveで画像(リサイズ)と動画のアップロードを両立させる - Railsでwebサービスを作ってみる

Active StorageのVariantの指定方法いろいろ - Qiita

video_tagで横幅いっぱいに動画を挿入する方法 - Qiita

The asset "" is not present in the asset pipeline - Qiita

Active Storageを使用して添付ファイル(アップロード)を簡単に管理する

Ruby on Rails で動画をアップロード – CarrierWaveとFFmpeg | Developers.IO

↓ウィンドウズのインストールからパスを通すまでのやり方↓

【windows】FFmpegをインストールする手順|新卒エンジニアの開発日記