[動画機能] 動画追加・一覧が欲しい

[komagata]

詳細はこちら。

動画機能 · fjordllc/bootcamp Wiki

[a-terumoto-gs]

@komagata @machida お疲れ様です！ こちらのissueの実装のイメージについてすり合わせをさせてください！ ページとしては一覧ページ、新規追加ページ、動画の詳細ページの3つが必要かと考えております。

全体イメージ

/movies

一覧ページ 左のポートフォリオの下に動画というアイコンを一つ追加してそこからアクセス可能にする 画面のデザインとしてはポートフォリオのものに倣うかたちで、ヘッダー赤枠の中を「動画」のページに合う文言に変更 右上の追加ボタンから新規追加ページにアクセス可能に(/movies/new) 一つ一つの動画をクリックして詳細ページにアクセス可能に(/movies/movie_id) ポートフォリオ一つ一つが表示されている部分に動画のサムネイル、タイトル、アップロード者、タグなどを表示

/movies/new

新規追加ページ タイトル、説明、動画データ、タグ、公開範囲を入力するフォームを用意 (いろんなページからデザイン拝借して必要なものを並べてみただけのイメージになっているので実装進める中で変わると思います。その際はまたご相談させていただきますので、今のイメージは参考程度にお願いします)

/movies/movie_id

詳細ページ このページにアクセスすることで動画を視聴可能にする タイトル、説明、動画データ、作成者、タグ、公開範囲を表示 (今のイメージはざっくりと必要そうな情報並べてみただけになっておりますのでこちらも参考程度に…)

全体の何となくのイメージとしてはこんな感じでよろしいでしょうか？

細かい仕様

• 一覧ページの動画一つ一つに表示する情報 動画のサムネイルを表示した下に、タイトル、アップロード者、タグを表示しようと考えているのですが、不要な情報、または、他に入れた方がいい情報はありますでしょうか？
• 詳細ページのURLについて 現在考えているような簡単なもののままでよいのか、user_idと結びつけたものにしたほうがいいのか、悩んでおります。 どう実装するのがよりベターか決めきれておりません。 アドバイスいただきたいです。

私自身まだ仕様を詰め切れていないところがあるのと、イメージ図がうまく作成できていない、そしてふわっとしていて申し訳ないのですが、確認よろしくお願いいたしますm(__)m

[komagata]

@a-terumoto-gs

全体の何となくのイメージとしてはこんな感じでよろしいでしょうか？

はい、おっしゃる通りで大丈夫です。ポートフォリオのページを参考にしてるのもその通りでいい感じです〜。

一覧ページの動画一つ一つに表示する情報

おっしゃる通りで大丈夫です〜。

詳細ページのURLについて

おっしゃっている設計でバッチリです〜。/movies/:id

[a-terumoto-gs]

@komagata コメントありがとうございます。 ではこの方向性で進めさせていただきます！

[machida]

@a-terumoto-gs https://github.com/fjordllc/bootcamp/wiki/%E5%8B%95%E7%94%BB%E6%A9%9F%E8%83%BD 動画機能のドキュメントを更新しました。 ご確認お願いします。 大きいところは、公開制限を仕様から外したところになります。

[a-terumoto-gs]

@machida ありがとうございます！ 更新された箇所に仕様を合わせて続きを実装したいと思いますm(__)m

[machida]

@a-terumoto-gs よろしくお願いしますー🙏

[a-terumoto-gs]

@komagata @machida お疲れ様です！ 一覧表示で使用する動画のサムネイルの仕様について相談させてください。

簡単にですが調べたところ、FFmpegやImageMagickなどのgemを使えばアップロードした動画から自動生成が可能みたいなので、そういった仕様にしようかなと考えていますが、いかがでしょうか？

または、動画追加の際の手間は増えますが、それ用のフォームを追加してサムネイルもユーザー側で追加をしてもらう仕様にする、というのも案の一つとして考えています。 (上の案がうまく行かなかった際はこの仕様を取り入れるのを候補にいれています) 他に良い案があればご教示いただけると助かります。

確認よろしくお願いいたします。

[komagata]

@a-terumoto-gs bootcampでは最近、動画慣例のライブラリをimagemagickからlibvipsに変えました。 image_processingを通じてサムネ作れると思うのでそちらちょっと調べてみてください〜。

libvipsを活用し『家族アルバム みてね』のサムネイル生成を倍速にしました - mitene / FamilyAlbum Team

[a-terumoto-gs]

@komagata 承知しました！調べてみますm(__)m

[a-terumoto-gs]

メモ WIP機能については実装を検討したが、編集機能とセットでないと運用ができないと判断し見送ることにした 以下のissueに取り組む際に追加でよいのではないか。 https://github.com/fjordllc/bootcamp/issues/7421

[a-terumoto-gs]

タグ付け機能がうまく動作しておらず、新規タグ追加の際に反映されないバグあり。 タグの文字を追加後、タグ記入欄でエンターを押して確定させないと起こるようである。 DocsやQ＆Aにおいても同様の現象が起こるため、このissueでは一旦そのままの仕様で実装する

[a-terumoto-gs]

@komagata @machida お疲れ様です！ こちらのissueのについてなのですが、サンプル動画を用意・追加していただく必要があるかなと思っておりますが、いかがでしょうか？ いままで開発環境でのセットアップとテストに必要だったのは画像だけだったと思います。 一応test/fixtures/filesを確認したところ、画像データしかなかったためです。 アップロード形式としてmp4形式とmov形式を想定しているためその二つのデータがあればありがたいです。 よろしくお願いいたしますm(__)m

[komagata]

@a-terumoto-gs 適当な画像や動画（著作権的に問題のないもの）を探して使ってみてください～。

[a-terumoto-gs]

@komagata 承知しました！

[a-terumoto-gs]

@komagata @machida お疲れ様です！ こちらのissueでサムネ生成に使うために、gemのstreamio-ffmpegを導入しました。

レビューしていただく段階で、そもそも開発環境にFFmpegがインストールされていないとgemを入れても動かず、動作がうまくいかないことが判明しました。 ↓レビューしてくださっている@kyokucho1989さんのコメント https://github.com/fjordllc/bootcamp/pull/7535#discussion_r1569523328 (自身は実装の段階で先にFFmpegそのものでのサムネ作成を検討し、インストール済みだったので見落としていました) これを受けて、開発環境の立ち上げの際にFFmpegをいれる過程の追加が必要と考えました。

libvipsと同様に、READMEにその旨を記載し、wikiページに追記するのがよいかと考えますが、いかがでしょうか？ https://github.com/fjordllc/bootcamp/wiki/%E7%94%BB%E5%83%8F%E5%87%A6%E7%90%86%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

他の方法がございましたら、ご教授いただけると助かります。 また、この方向性でよい場合、READMEへの追記とwikiページの編集はこちらで行ってよろしいでしょうか？ 確認よろしくお願いいたします。

[machida]

@a-kuroki-gs README にffmpegが必要であることと、そのインストール方法の記入をお願いしたいです🙏 wiki も編集して大丈夫ですー

[komagata]

@a-terumoto-gs (CC: @machida )

なるほどですね。

元々、動画の変換などは外部APIに任せてFFmpegなどはインストールさせないで行きたいと考えていました。動画の変換と一緒にサムネイル作成も別Issue（動画の変換のIssue）にお願いしようと思うのでこちらのIssueではサムネイル作成しなくてよいです。

サムネイル作成と動画の変換は別IssueでGoogle Transcode APIを使ってやりたいと思います。

[machida]

@komagata @a-terumoto-gs .mp4だけならサムネイルの生成はJSだけで生成できるので、今回は.mp4だけの対応にし、サムネイルの生成はJSで行う、ということでいかがでしょうか？（.movからJSでサムネイルを生成するには.movを.mp4にする必要がある）

Webサービスでも .mov を .mp4 に変換ができるので、.mov への変換に関しては急がなくていいかと思いました。 https://convertio.co/ja/mov-mp4/

JSでサムネイルを作るサンプルを作りました。 https://github.com/fjordllc/bootcamp/pull/7721

[komagata]

@machida (CC: @a-terumoto-gs ) 今回で本番リリースではなく、他のIssueも済んでからなので、今回のためだけに何か導入しなくてもいいかも？とおもいました。

Google Transcode APIを使って動画は全部mp4に変換し、サムネイルも生成するのが統一されていていいかなと思います。（圧縮比率もパフォーマンスもGoogle Transcode APIが一番良いと思うので）

[machida]

@komagata 了解ですー。それでいこうと思います。

[a-terumoto-gs]

@komagata @machida 承知いたしました。 サムネイル生成の処理は外したいと思います。 サムネイルはデフォルト画像表示の形で対応する形にしようと思いますがいかがでしょうか？ また、のちのち使用しなくなることも踏まえると、新しくサムネイル用画像を用意してもらう必要もないと思いますので、使う画像はポートフォリオのデフォルトサムネイルのものを流用する形でよいでしょうか？

[machida]

@a-terumoto-gs はい！ブログと同じblank用の画像を使うようにしておいてくださいー

[a-terumoto-gs]

@komagata @machida お疲れ様です。 こちらのissueについてですが、関連付けられたUserが削除されたときの表示について確認が漏れていました。

Userが削除された際には、Movieの外部キーuser_idがnullになりmovieは残る仕様で実装しているのですが、関連付けられたUserがいなくなった際の作成者の表示はどうしたらよいでしょうか？ 私の考えとしては、unknowユーザーのような表記にするか、空欄にするか、のどちらかで考えております。 いかがでしょうか？

[komagata]

@a-terumoto-gs githubのように「ghost」でおねがいします～ https://github.com/ghost

[a-terumoto-gs]

@machida お疲れ様です！ こちらユーザー削除された際のghostで表示されるユーザーアイコンですが、新しく追加する予定でしょうか？ 追加されるのであれば、アイコン画像の追加をお願いしたいですm(__)m

[machida]

@a-terumoto-gs 了解です！

[machida]

@a-terumoto-gs お待たせしました！ アイコン用意しましたー https://www.dropbox.com/scl/fi/ft7jwcq2jb78xzosajjud/ghost.png?rlkey=uzotv09fx4clyouy5i36lhxpd&dl=0

[a-terumoto-gs]

@machida ありがとうございます！

[a-terumoto-gs]

@machida お疲れ様です。 追加していただいたアイコンを使用し、ユーザー削除された際の表示を追加しました。 一覧ページのほうは問題ないかと思うのですが、個別ページのほうの表示がうまくいかず… 追加でデザインを入れていただいてもよろしいでしょうか？ (こちらのPRのレビューは完了しており、リリースの予定もまだ立っていないため急ぎではありません)

お忙しいところ恐縮ですが確認よろしくお願いいたします。

[github-actions[bot]]

このissue|PRは60日間更新がないため7日後にcloseします。closeしたくない場合はstaleラベルを外してください。