こんにちは。Tebikiの畑中です。

tebiki Tech Blog へようこそ。

Tebikiは、現場の未来を切り拓くというミッションの下、ビジネス/エンタープライズ向けに SaaS ビジネスを展開しています。我々が提供するサービスの１つに、tebiki現場教育という「現場」向けの動画マニュアルに関するプロダクトがあります。私は現在、tebiki現場教育の動画編集や配信関連の機能開発を行うチームで、ソフトウェアエンジニアとして働いています。

前回の vol.1 では、動画配信に HLS（HTTP Live Streaming）を利用していることを紹介しました。

techblog.tebiki.co.jp

今回の vol.2 では、ユーザーが撮影し編集した動画が、どのように HLS で配信されるまでに至るのかについて紹介します。

動画マニュアルの目的を達成するためのステップ

tebiki現場教育の提供者目線では、具体的な配信システムを知る前に、動画マニュアルの目的が何であるかを理解しておくことが重要です。なぜなら、動画マニュアルの目的を知らずして、理想的なユーザー体験を作り上げることは不可能だからです。

そこで、まずは動画マニュアルの目的と、動画マニュアルを作成するために必要なステップについて簡単に紹介します。

撮影した動画を編集し、配信できれば良いのであれば、例えば YouTube で同じことが可能です。

しかし、企業が動画マニュアルを導入する目的のひとつには、教育状態の可視化があります。動画マニュアルの目的は、動画マニュアルの公開で達成されず、公開後の視聴状態、技術習得状態の管理までを含んでいます。

それを踏まえて、動画マニュアル作成者の業務フローを設計し、Webアプリケーションの形式に落とし込んだものが tebiki現場教育です。

動画マニュアルの目的を達成するためには、以下の5ステップが必要になります。

計画
撮影
編集
配信
計測

計画

動画マニュアルの作成者は、まずどのような動画マニュアルを作成するか計画する必要があります。

大体、以下の2パターンからスタートします。

新規で動画マニュアルを作成したい
紙、テキストベースのマニュアルを動画マニュアルにしたい

現場には既に紙やテキストベースのマニュアルが存在していることもあれば、新規で作成することもあります。いずれにせよ、動画撮影を開始する前に台本となる情報が必要です。

tebiki現場教育では、AIを利用して台本（PDF）からコースを生成する機能があります。コースとは、複数の動画マニュアルを束ねたものです。現場の作業は、複数の一連の作業の連続と捉えることができます。各作業をそれぞれ1つの動画マニュアルで表現し、それらを1つのコースとしてまとめることで、作業の切れ目や意図の理解、また習得単位の管理や、繰り返し学習をサポートします。

AIコース生成機能を利用することで、台本となるマニュアルから、どの単位で動画マニュアルにするかの提案を得ることが出来ます。動画マニュアル作成者は、分割された単位で動画を撮影すれば良いというわけです。

撮影

紙ベースのマニュアルは、閲覧時に端末を必要とせず、壁などに手軽に貼り付けられるといったメリットがありつつも、マニュアル改定時の再配布に手間が掛かることや、情報検索性の低さといったデメリットがあります。また、紙やテキストベースのマニュアルでは、作業のカンコツを伝えづらいという課題があり、これが動画マニュアルの最大の利点です。

動画マニュアル作成者は、台本をベースに動画を撮影することになります。しかし、どの作業単位で動画を撮影するべきかは悩むポイントとなります。そのため、一連の作業を全て1つの動画として撮影し、後で編集するというフローになりがちと想像できます。動画の撮影者と編集者が違うという現場も想定され、結局のところ認知負荷は軽減されることなく撮影フェーズから編集フェーズへ移動しているにすぎません。

AIコース生成機能は、これらの認知負荷を軽減する機能としてデザインされているものです。

編集

撮影された動画は、PCやモバイル端末を通じてtebiki現場教育へアップロードされます。tebiki現場教育では、Webブラウザベースの動画編集エディタ機能を提供しています。昨年、動画編集エディタのバージョン2にあたる、通称モダンエディタをリリースしました。バージョン1はクラシックエディタとして引き続きご利用頂いています。

モダンエディタは、クラシックエディタのテキストや図形配置といった既存機能に加え、クラシックエディタでは実現できなかった以下の機能を搭載しています。

動画のリアルタイムクリッピング
動画や素材のリアルタイム挿入
動画音声以外の音声トラック配置
その他

Webシステムであるため、動画素材のアップロード待ちは発生してしまうものの、動画の編集作業については、待ち時間無しで作業できるという点にこだわった設計となっています。

しかし、動画に適切なテロップを入れることや、適切なタイミングで図形を配置することなど、快適な編集体験を実現するために取り払うべき認知負荷がまだまだ存在しています。現在、AIによる編集体験向上のプロジェクトを進めています。

配信

Webブラウザで動作する動画編集エディタによって追加された複数の動画素材は、編集内容を保存した時点ではバラバラの素材のままであり、これらの素材を視聴者に全て配信するのは効率が悪く、また技術的な制約から、一部のモバイルブラウザでそのまま再生することが困難です。そのため、tebiki現場教育では、視聴者に配信を行う前に全ての動画素材を1つの動画にまとめています。これを動画の「最適化」と呼んでいます。

前回の tebiki Tech Blog では、tebiki現場教育が動画をストリーミング配信する際に利用している HLS（HTTP Live Streaming）について紹介しました。今回は、ユーザーが編集時に追加した複数の動画素材を、HLSを使って配信できる形式に変換するシステムについてです。この後紹介します。

計測

動画マニュアルは、作成が完了してもその目的は達成されません。視聴者によって利用され、視聴者がスキルを獲得することが目的となります。tebiki現場教育では、動画マニュアル視聴状況を可視化するレポーティング機能と、従業員のスキル管理を行うスキルマップ機能を提供し、動画マニュアルの教育効果を測定出来るよう設計しています。

これらのステップをグルグルと回すことで、動画マニュアルを中心とした現場教育の改善を目指すことが tebiki現場教育の価値となります。

それでは、編集された動画を実際に配信するためのシステムアーキテクチャについて見ていきましょう。

今回の tebiki Tech Blog では、動画配信システムを主題としているため、その他のテーマはまた別の機会に。乞うご期待。

動画の最適化と配信システムのアーキテクチャ

先程紹介したモダンエディタのアーキテクチャを前提として説明します。

動画編集

モダンエディタは、Webブラウザで動作する動画編集エディタです。

複数の動画、画像、音声を配置することができ、各素材の再生位置の調整、再生長の変更やカット・分割、編集状態のプレビュー再生などを一通り行うことができます。

実際には、Web ブラウザ上で直接素材そのものに対して変更を行っているわけではなく、動画マニュアル全体の編集状態を現す独自のデータ型（JSON）を定義し、各素材の編集状態をメタデータとして保存するという手法を取っています。

素材ファイルは、ブラウザへのロードと Amazon S3 Bucket へのアップロードを行っています。ブラウザから Amazon S3 Bucket へファイルをアップロードする際には、利用組織ごとにアップロード先を制限する必要があります。そのため、Amazon S3 の署名付きURLを利用して実現しています。

各動画素材は、複数の HTML Media Element として同時に画面に存在しています。プレビュー再生時は、これらの Media Element や、再生位置などを JavaScript（TypeScript, React）で動的に切り替えることで全体を再生しています。この仕組みは、一部のモバイルブラウザで再生を安定させることが困難であり、現状、モダンエディタはPCのみで利用できる機能となっています。もし解決してやるぜという方がいましたら、是非一緒に作りましょう。

編集エディタのアーキテクチャ詳細については別の機会に。乞うご期待。

動画の最適化

さて、編集が完了すると、各素材のURLや、再生開始位置、再生速度といったメタデータをバンドルした1つのJSONデータが完成します。このJSONデータを用いて、全ての素材を HLS で配信可能な形式にコンバートします。

編集状態を保存するたびに最適化を実行するとコストの無駄であるため、モダンエディタでは動画マニュアルを公開する際に1度だけ最適化を行います。これを「公開準備」と呼んでいます。公開準備＝最適化です。

動画の最適化は以下のステップで行われます。

各種素材のエンコード（FFmpeg）
素材をHLSで配信できる形式にコンバート（AWS Elemental MediaConvert）

編集時に追加された素材は、その再生位置や再生速度が指定されています。あるいは、一部のシーンにぼかしが設定されていたりします。また、テキストの読み上げ音声と動画音声のミックスなども行います。そういった編集内容を各素材に反映するために、FFmpeg を利用しています。

各素材に編集状態を反映したら、全ての素材をHLSプレイリストとセグメントデータへコンバートします。コンバートには AWS Elemental MediaConvert を利用しています。このとき、様々な視聴ネットワーク環境にも対応できるよう、複数のビットレートで出力します。

動画の配信

AWS Elemental MediaConvert によってコンバートされた HLS プレイリストとセグメントデータは、Amazon S3 bucket へ保存されます。

これらのファイルは、スケーラビリティを考慮して CDN（Amazon CloudFront）で配信しています。ファイルへのアクセスは、利用組織ごとあるいは視聴者ごとにアクセス制限を掛ける必要があります。これは、Amazon CloudFront の署名付きURL を利用して実現しています。

動画素材のアップロードから編集、最適化、そして配信を1つの図にまとめると以下のようになります。

① まず素材を S3 へアップロードし、モダンエディタで再生位置や速度その他を編集します
② 編集状態は、専用のマイクロサービスを通じて Amazon DynamoDB に保存しています
③ 最適化を実行すると、専用のマイクロサービスを通じて AWS StepFunctions が実行されます。トリガーした Job ID はポーリングのため保存します。
- AWS StepFunctions は、動画素材をエンコードするために FFmpeg 実行基盤で処理を行い、エンコードされた各種素材を HLS Playlist へ変換するために AWS Elemental MediaConvert を実行します。
④ 最適化中は、専用のマイクロサービスを通じてフロントから定期的に AWS StepFunctions の実行状態をポーリングします
⑤ 最適化が完了すると、CloudFront 経由で動画配信をストリーミング再生できるようになります

このようなシステムで、ユーザーが撮影し編集した動画を HLS によって配信しています。