Wright Flyer Live Entertainment 人事の松田です。

先日、社内勉強会「WFLE VTuber Hackers Meetup」を開催しました！

WFLE社員の技術や知見のアウトプットの場として、様々な職種のメンバーからLT形式でノウハウの共有を行いました。
テーマの設定も自由に何でも良し！という前提で社内公募を行い、今回は8名が発表しました。

その内容を全3回に渡ってお届けしたいと思います。初回は「REALITYアプリ開発編」！
VTuber専用ライブ視聴・配信アプリREALITYの開発を担当するエンジニア3名による発表をご紹介します。

目次
・はじめに
・「アプリで動画視聴できるまで」インフラエンジニア S.Hさん
・「ギフトの仕組み - 贈られてから映像(配信者)に届くまで -」サーバサイドエンジニア Y.Tさん
・「Guide to App Architecture」アプリエンジニア H.Nさん

はじめに

勉強会のレポートをお読みいただく前に、まずはWFLEについて簡単にご紹介したいと思います。

◆ 事業概要
WFLEはバーチャルYouTuberに特化したライブエンターテインメント事業を展開しており、現在は主に3つのことに取り組んでいます。

・プラットフォーム事業
VTuber専用ライブ視聴・配信アプリ「REALITY」の開発・運営を行なっています。
誰でも簡単にアバターを作って気軽にライブ配信ができ、ユーザーとのコミュニケーションを楽しむことができます。投げ銭などできちんと収益化が出来るところまでサポートしています。

・プロダクション事業
魅力的なVTuberのプロデュースを通じて、投げ銭、広告、グッズなどでビジネス化を目指しています。現在WFLEには12名の個性豊かなVTuberが所属しています。

・IP展開支援
自社所属VTuberに限らず、より多くのVTuberが活躍する舞台を広げることを目指し、音楽事業やリアルイベントを軸に、いつでもVTuberに会いに行ける場づくりをしたり、商品化を支援することでVTuberを職業に出来るように仕掛けています。

◆ REALITYについて
2018年8月にリリースしたVTuber専用ライブ視聴・配信アプリです。
「公式配信」と呼ばれる今人気のVTuberたちによる生配信番組から、「一般配信」では年齢や性別問わず毎日多くの一般ユーザーの方々が配信しています。
視聴者はコメントやギフトを送ることで配信者とリアルタイムでコミュニケーションを取ることができます。

ギフトは定番のものから季節限定のものまで多数あり、4月は「お花見タワーケーキ」や「夜桜壁紙」「花冠」などの春らしいアイテムを追加。
無料ギフトもありますので、ぜひお気に入りVTuberに送ってみてくださいね。

ぜひ一度、REALITYで遊んでみてください！ダウンロードはこちら

◆ REALITY Studio Tokyoについて
弊社には、史上初のVTuber専用スタジオ「REALITY Studio Tokyo」を完備しています。
ここでは日々最新技術を取り入れながら、人気VTuberの方々の生配信・収録等を行なっています。
スタジオについての詳細はこちらの記事も合わせてご覧ください。

第3回ではスタジオの配信技術を支えるメンバーからの発表もご紹介しますのでお楽しみに。

以上のことを踏まえつつ、「WFLE VTuber Hackers Meetup Vol.1：アプリ開発編」開催レポートをご覧ください。

それではどうぞ！

アプリで動画視聴できるまで

トップバッターは、REALITY立ち上げ当初から開発インフラを支えるS.Hさんより、REALITYでの動画視聴の仕組みについて発表しました。

ー REALITYで動画視聴できる仕組み

S.H：
今回私からは、REALITYアプリ内で視聴できるVTuberの配信動画の仕組みを説明します。
（↑左スライドの青部分（背景に流れる部分）のことです）

まず、端末側でどのように動画が再生されているか、という話なんですが、
マスタープレイリストからデータを取得しており、マスタープレイリストというファイルの中には、高画質と低画質でフォルダが分かれていて、通信速度によってどちらか適切な動画が取得されるようになってます。（右スライド参照）

動画は2秒間隔で分割・保存されており、マスタープレイリストはその中から常に最新の動画を取得する仕組みです。

なので、

視聴者からはリアルタイムでライブ配信動画を見ているように感じますが、実際には裏側で細かく分割された動画が再生されているんです。

REALITYで動画を視聴できている仕組みはストリーム（ライブ動画やオンラインゲームの通信に使われている常時接続のもの）ではなく、
単なるファイル（更新があったときに都度取得されるもの。スケールしやすく、技術的に簡単でノウハウも多い。ホームページやソシャゲの通信も事実上こっち）で構成されている、ということですね。

このファイルは東京のサーバーから届けてるんですが、途中にCDNという配信用のネットワークを経由しています。
CDNを経由することで遅延はありますが、数十万人規模の配信にも耐え得る上、サーバ負荷も低く、弊社負担の通信料も安い、というメリットがあります。

ー 動画に遅延が生じてしまう理由

たぶん、皆さん気になってると思うのですが、
REALITYを視聴してると、実際の配信と流れている動画には遅延があります。

映像を受けるサーバーはリアルタイムで受け取ったデータをデコードし、必要な画質の数だけエンコードし直しています。
定期的にプレイリストが更新され、動画も分割され、視聴者からの読み取り専用の CloudStorage にアップロードし、アプリから定期的に参照されます。

なので、遅延が生じてしまう理由は、ネットワークによる影響はほとんどなく、大半はバッファとキャッシュなんです。

例えば10秒間の遅延があった場合に、その内訳がこちら↓

つまり当然、バッファやキャッシュを減らせば遅延を減らすことはできるんですが、その分安定性が落ちてしまうということです。

今後の映像配信の見通しについては、アーカイブや録画配信をできるようにしたり、HLS以外のプロトコル対応、画質調整・安定化、費用や効率の改善を図りたいと思ってます。

ギフトの仕組み - 贈られてから映像(配信者)に届くまで -

続いて、
REALITY上で視聴者から配信者にギフトが贈られる仕組みについて、サーバーサイドエンジニアY.Tさんが発表しました！

ー 配信者の個性や季節にあったギフトを贈るために、ギフトリストを細かく管理

Y.T：
REALITYには数多くのギフトがありますが、
実はこれら一つ一つには値段や公開期間、ふるまい（装着可否、出現時間や位置など）が個別に定義されています。

更に同じギフトでも公式配信用と一般配信用で細かい設定があって、
それらを配信者の個性や配信内容、そして季節ごとにぴったりのギフトを贈れるように、ギフトリストとして配信者 / 配信種別毎に管理できるような仕組みにしてます。

ー ギフトが映像(配信者)に届くまでの仕組み

公式配信の場合、視聴者がギフトを贈ったときにすぐ画面上に登場するギフトと、配信者が選んで装着したときに表示されるギフトの2種類があるんですが、

サーバ側ではそれらを贈った/選択した順に1つのリストキューとして並べて管理し、REALITYスタジオのシステムが定期的にリストを取得して映像中で順に再生する仕組みになってます。

一方、一般配信の場合は、配信者が装着するギフトを選ぶ仕組みはないので、視聴者から贈られたギフトはそのままリストとして管理され、配信者の端末がリストを取得して動画中で順に再生してます。

公式と一般どちらの配信でも、ギフトは特定の場面で一斉に贈られることが多いので、サーバ側でも負荷が高まりやすくなります。
なので、安全により多くのギフトを贈れるように、データの管理方法を工夫して読み書きを減らすなどの対策をしてます。

また、万が一トラブルが発生した時でも、贈られたギフトを配信の最初から必要な分だけ再度読み込み直す仕組みを整えています。

まとめると。

皆さん、安心してお気に入りの配信者にギフトを贈ってください！（一同笑）

Guide to App Architecture

続いて、
昨年12月にリリースされたREALITYのAndroid版アプリ開発をメインで担当しているH.Nさんが発表しました！

ー 設計とは

H.N：
ソフトウェア開発というのはおおよそ積み木のタワーのようなもので、

始めは比較的簡単に積み上げることができるのですが、徐々にどこかが破綻していき、積み上げることが難しくなっていきます。

Android開発上の難しさとしては、ActivityやFragmentが肥大化し、いわゆる神クラスとなってしまうFat Activity/Fragmentの問題や、バックグラウンドに入った状態からの復帰、画面回転にまつわるライフサイクルのハンドリングなどがよく挙げられます。

こうした問題を防ぐためには優れた設計が不可欠で、例えばMVC、MVP、クリーンアーキテクチャ、Fluxなど、さまざまな設計上の考え方があります。

ー Android Architecture Componentsの登場

そんな中、大きくトレンドが変わったと感じたのは2017年頃でした。

Google I/O 2017でKotlinが公式な言語として加わったのは記憶に新しいですが、
その他にAndroid Architecture Components（AAC）と呼ばれるライブラリ群が公開されました。

発表タイトルにあるGuide to App Architectureは、AACを活用したアプリ設計のガイド記事のタイトルで、この発表はこの記事が読んでて面白かったので皆も読みましょう、という、ただそれだけなんですが、とにかくこれにより、設計のベストプラクティスが公式的に提示されました。

このガイドの嬉しさはどこにあるのでしょうか？

設計の質という観点では、AACとの親和性の高さがあり、Googleが蓄積した知見に基づいたものであるという安心感があります。

加えて、それが纏まった文章として提示されることで、設計を議論する上での共通認識として活用することができます。

これはMaterial Designの効果に似た、ガイド自体が存在することよるメリットですね。

ー REALITYのアプリ構成

さて、

REALITYのAndroidアプリの構成はどうなっているのかというと、おおよそGuide to App Architectureに従ったMVVMの構成になっています。
これはつまり、このガイドを理解していれば REALITY Androidの設計をある程度理解した上で開発を始めることができます。

なのでこれを読んで書きましょう、という、そういう宣伝なのですが、

他にもREALITY AndroidはそもそもコードがFull Kotlinであるとか、AAC以外のJetpackライブラリをフル活用しているだとか、最近だとCoroutineを導入してみたりだとか、開発スタートが最近であり、コードベースがまだ小さいことも活きて、比較的新しい技術を積極的に取り入れることができています。

にもかかわらず、Android開発者不足というか、

開発上の面白さを共有する相手がおらず勿体無い感じがしているので、

そういうのに興味がある人がいたらご一報ください、

という話でした。以上です。

いかがでしたか？
次回は「WFLE VTuber Hackers Meetup：REALITYアプリ企画・デザイン編」をお届けします！