ClipHype DevBlog

2021/08

動画内のクリップにタイトルを描画する機能を追加

クリップのタイトルを挿れることで、その動画の内容と期待するもの（笑いや驚きなど）の理解を助け、短いクリップでも状況の把握が簡単になるので結構嬉しい機能。

個人的には、クリップの最初の数秒だけ表示をするよりもクリップ全体で表示を続ける方が何も考えずにまったりと見れると思ってて、タイトルの表示がなくなって数秒後に見ている動画の注目すべきポイントが何か分からなくなるような状態を避けられる。

表示するテキストのエフェクトとかフォントを色々選択できればもっと嬉しいけど、ffmpegを使ってる関係でエフェクト（影、合成など）は限界がある。フォントはフォントファイルを用意すれば何でも使えるので、今後実装予定。今は、日本語が使えるようにNoto Sansを使っていて、Googleフォントからutfファイルをダウンロードして必要なサイズのものだけLamdbaで使えるようにしている。

開発用環境のコストが気になる

基本的に追加で料金がかかるのはRDSの開発用DBで、作業するときだけインスタンス立ち上げたいけど時間がかかるのでついつい放置しがち。このままだと月１万になっちゃう（ア

その他の稼働させるサービスは追加のコストはかなり小さいけど、スポットインスタンスでc5.xlargeとか使ってると少し気になってくる。

AMI生成がめんどう

concat-clipsを実行するインスタンスのAMIを生成するときの手順が多い

  • ec2インスタンス起動
  • インスタンス内でconcat-clipsをビルド
  • concat-clipsサービスの修正
  • AMIを生成（割と時間かかる）
  • 起動したインスタンスを終了
  • spot-request関数の環境変数を新しいAMIに変更

ここらへんも自動化できるのかな？シェルスクリプト使えるようになればここらへんもターミナルだけでできて楽になるかも

2021/09

ClipHype開発に区切りをつけてCI/CDとか、リファクタリングとかやりたい。

  • モーダル上でタイトル変更
  • リクエストしたハイライト動画の復元
  • 動画ダウンロードをLambdaに移す
  • クリップの情報にHype値を追加する

2021/12

TODO

Vue CLIを使った大規模向けの開発方法を身につける

  • Vue.jsのリアクティブシステム(data,computed,filters,methods...)の復習
  • コンポーネントの基礎(~12/29)
  • Vue Router(~12/31)
  • 単一ファイルコンポーネント
  • Vuex

SPIに対応できるDjangoの振る舞いを考える

リファクタリング

  • Djangoのモジュール構成や関数の配置を見直す
  • Vue.jsの実装をコンポーネントに分割する（段階的に適用する）

2022/01

リファクタリング

Vue.jsの実装をコンポーネントに分割する（段階的に適用する）

  • Atomic Designに沿って、コンポーネントの構成を考える
  • Djangoとどうやって連携させるかがよく分かってない
  • VueCLIはソースファイルをコンパイルすることでhtmlファイルとjsファイルを生成するから、そのhtmlファイルがDjangoから認識できればいいだけだからtemplateファイル群置き場だけ指定できるようにするだけであとはあんまり気にしなくても連携できそう
  • どのバージョン使うか検討する必要があるけど、Vue.js v3 が2020年9月にリリースされたからせっかくだからVue.js v3を使ってみる
  • 色々仕様変更はあるけどその都度移行ガイドや公式ドキュメント見ながらすすめる
  • まずは、Githubでブランチを切ってfrontendって名前のディレクトリの中でVueCLI使ってフロントエンド開発を進めていく
  • その前に今のindex.html（ホームページ）をなくしてアプリページをそのままホームページとする

コンポーネント設計

  • viewsディレクトリはrouterに指定するコンポーネントとして使うので、結局Atomic Designでいうところのtemplatesに該当すると思う

  • molecules以下をcomponentsディレクトリで管理して、moleculesを組み合わせたものをviews内のコンポーネントで定義する

  • まずは、トップダウンでひな形を作っていく

  • ログイン情報とか、リクエスト処理とかをどこで管理するか

  • ログイン情報はどこからでもアクセスできるようにしたいからvuexで管理するのが良さそう

  • APIリクエスト関連のいろんなとこで使えそうな関数はmixinにする？

  • ChStreamerFormで入力された配信者のIDを取得して、それらの情報を次のChArchiveViewに渡したい

  • vue-routerの動的ルートマッチングを使うといい感じにできそう

  • /streamer/euriece/archive/12345/clips

  • こうするか、これらの情報はvuexで管理するか

  • ハイライト動画に使うクリップの情報はvuexで管理しないと難しそう

    • 兄弟関係にあるコンポーネント間のデータ送受信はvuexが楽
    • 一人に対してのハイライト動画作成なら動的ルートマッチングの方法はブックマークとかに使えて良さそうではある
    • でもちょっと複雑？
    • /euriece/archive/12345/highlights
    • そもそもarchive選択はクリップ取得期間の１つの選択肢で普通に日時範囲指定でクリップ取得するケースもあるからclipsとクリップ取得エリアは同じページのほうが利便性良さそう
    • でもやっぱり、シンプルなアプリケーションにしたいからアーカイブの選択からクリップを絞り込むのを基本にするのが良さそう
    • その上でアーカイブの複数選択とかを追加していく形で。
    • cliphype.com/euriece/archiveでアーカイブ選択

  • クリップ表示コンポーネントは汎用的にしたい

  • 全体の流れ

    • propsでクリップ取得のリクエストに使うパラメータを指定可能にする
    • cliphype.com/eurieceにアクセスしたら/archivesに飛ばす
    • /archivesで取得するクリップの情報を選択し、/clipsに移動
    • ここでは、vuexのパラメータに値をセットするだけ
    • /clipsに行ったら、取得するクリップをvuexから取得する
    • /clipsでは、クリップを選択するたびにvuexのselected_clipsに情報を追加する
    • selected_clipsもクリップ表示コンポーネントの下に表示する
    • それらが終わったら、/highlightsに移動する
    • 最終的に、諸々設定したらハイライト動画生成リクエストを送り、/videos/:idに移動する

  • Vuexで管理するデータ

    • streamerName: 指定した配信者の名前
    • streamerId: 指定した配信者のID
    • archiveStartedAt: アーカイブの開始時刻
    • archiveEndedAt: アーカイブの終了時刻
    • selectedClips: 選択したクリップのメタデータ配列

  • Vuexで定義するメソッド

    • streamerNameからstreamerIdを取得

  • mixinを用いたコンポーネントの共通部分の抽出

    • TwitchAPI関連をまとめたもの
    • AwsAPI関連をまとめたもの
    • など

CI/CD

  • バックエンドのテストを作る
  • フロントエンドのテストを作る
  • CircleCIでマージする前にテストを実行する
  • mainブランチにマージするときにはデプロイまでやる