LINEのライブ配信サービス「LINE LIVE」では、4月にiPhoneやiPadの画面をそのまま配信できるスクリーン配信機能をリリース。この新機能を開発したメンバーにその開発舞台裏について語り合ってもらいました。
スクリーン配信機能の開発プロジェクトでの役割は？
── 本日はLINE LIVEのスクリーン配信機能の開発に関わった皆さんにお集まりいただき、色々とお話を伺っていきたいと思います。まずは皆さんのご担当と、いつからLINE LIVEに関わったのかを教えていただけますか？
Yappo：LINE LIVEのサービスが始まったのは、2015年12月。その3カ月前の9月くらいから開発を開始し、サーバーサイドエンジニアをリードする立場として、参加していました。2018年10月に前任の開発マネージャーが異動となり、開発統括を引き継ぎ、現在はLINE LIVEの開発チームを統括するPMを担当しています。
開発プロジェクトが滞りなくリリースできるように業務フローを見直し、みんなが働きやすい開発環境を作っています。あとは開発チームのマネジメントもやっています。メンバーと話し合いながら、開発に負荷がかかりにくい環境を作っています。
新谷：私は2018年7月に入社しました。LINE LIVEのiOS開発を担当し、新規機能の開発やバグ修正、リファクタリングなどを担当しています。4月にはスクリーン配信機能をリリースしました。
Yappo：新谷さんは入社して2日目くらいで、サービスのiOSアプリのコードにプルリクを投げまくってました。そのキャッチアップの早さに、みんなビビってましたね。
LINE LIVEには、JOYSOUNDの音源をLINE LIVE上に再生して配信できる「カラオケ機能」というサービスがあるのですが、その開発を入社後一カ月くらいで、一人で担当して作ってました。
企画側が出す機能要件に対しても、これはこうした方がいいと意見を出してくれます。もっといいサービスにしようという姿勢で取り組んでいて、めちゃくちゃ自走してます。
野原：私は2015年にテストリーダーとして入社したのですが、2017年に前任者からの引き継ぎでQAとして活動し始めました。業務のとりまとめから、企画・開発とのやりとりをする側にシフトチェンジしています。
LINE LIVEは立ち上げの頃から、クライアント側の担当をやってます。企画の段階から参画して、仕様のレビューやテストケースの作成、実行管理などをメインで見ています。
吉永：僕もLINE LIVE立ち上げの頃から、主にサーバーのQAを担当しています。基本的にはクライアントのQAをしているときに、サーバー側で起きた問題に対して、開発側とやりとりすることが主な仕事です。
最近では、社内でLINE LIVEの配信をする活動もしています。社内の勉強会や共有会があるときに、LIVE配信を活用してアーカイブを残し、どうしても参加できない人にも後からでも見れるようにできたらいいなと。
去年の12月くらいから本格的に活動を始めて、社内のチャレンジを表彰するイベント「LFK VALUE AWARD」をJR九州ホールまで行って配信してきたり、社内で行ったグローバルワークショップを2日間かけて配信したりしています。
── スクリーン配信機能の開発で担った役割を教えてください。
Yappo：前任の開発PMと企画担当が、雑談ベースでゲームの配信をやりたいと話してたところから始まったと聞いています。スクリーン配信の映像処理部分は韓国にある子会社のLINE PlusのYukiチームという開発チームで作るのが一番開発効率が良さそうということで、一年くらい前から開発が始まりました。
去年の10月くらいに、Yukiチームからスクリーン配信する基盤ができたよというフィードバックをもらいました。スクリーン配信の機能は世の中に対しても大きなWOWを提供できますし、スマホのゲーム配信などを専用機材無しでやりたいという需要もあったので、絶対必要だろうというのがみんなの意識としてありました。
そこで、LINE LIVEでどうやって実装できるかを考えてもらうところから、実際に動くものを作って欲しいと新谷さんにお願いしました。たしか 1 on 1で新谷さんと話してる時に、この技術分野への興味の高さがすごかったので、勢い全部でその場でお願いしたような気がします。
新谷：端末の映像や音声を録画して記録したりストリーミングできるReplayKitというフレームワークをiOSが提供しているのですが、ReplayKitにはもとから興味があったので、入社前から個人的に調査や実装を試していました。入社後Yuki側でスクリーン配信用にSDKを拡張中と聞いて、「ぜひやりたい」と手を挙げました。
まずはYukiを使ってスクリーン配信ができるところまで技術検証を行いました。その時点では企画担当がついていなかったので、技術検証と並行して自ら他社アプリを触ってベンチマークをとって、LINE LIVEでやるならどのような機能を実装するべきか仕様をまとめていきました。
吉永：QAとしては、去年の11～12月くらいからスクリーン配信機能の仕様把握を始めました。既存アプリの仕様把握もできたので、その動作確認を事前に進めておき、どういう機能を確認しなければいけないか、リスト作成していきました。
まずはリリースしてみる、アップデートでより良いものに
── 技術的にチャレンジングだったことはありますか？
Yappo：一番大変だったのは、現在も継続中なんですが、ユーザー端末のメモリの使用量で、配信にかなり不安定な状況が起きたりすることですね。
例として、自分の環境では端末にSafariのタブを100個くらい立ち上げた状態で、かつアプリケーションを50個くらい起動し、タスクも切らない状態にします。その状態で、Vtuber（Vチューバー）用の3D機能をふんだんに使ったアプリを使ってスクリーン配信しようとすると、すぐにメモリが枯渇し、配信が止まってしまいます。開発段階からそうしたテストもしていました。
ただそのような環境は割とレアなケースで、そこばかり原因究明していても、リリースまでに時間がかかってしまう。多くの人たちから望まれるエンジニアリングではないかもしれないので、一旦対応しないと判断しました。普通のカジュアルゲームが配信できるようになった段階でリリースしてもらったほうがいいだろうと判断したんですね。
しかし、リリースした後に改めて確認したら、やっぱり同じ状況で落ちている。リリースが終わり落ち着いた段階で新谷さんに調査してもらったら、原因がわかってきました。
新谷：それについてはまだチューニング中で解決はしていないんですが、一番メモリを食うライブラリのメモリ使用量をもっと抑えられないか、Yuki側と調整しています。こちらでも自分たちのコードで改善できるところはないか、Instrumentsを使ってメモリ使用量が大きいところ、メモリリークの疑いがあるところなどを調査しながら実装しています。
Yappo：ずっとデバックし続けてる感じですよね。まずはリリースしてみて、その後に足りないクオリティの機能を徐々にアップデートしていって、次のリリースでより良いものにしていこうとしています。まさに「LINE STYLE」に則った開発スタイルです (笑)。
新谷：スクリーン配信ではOSの制限で使えるメモリが少なく、現在もチューニングにはすごく苦労しています。たぶん他のアプリ開発者も感じていることだと思います。
あとは技術の話ではないんですが、通常の開発は企画で仕様イメージを固めて、開発側で実装するんですね。それが今回のスクリーン配信は自分でベンチマークを取って仕様を固め、どこまで実装するか決めていくスタイルだったので、すごく楽しかったです。苦労じゃないんですけど(笑)。
Yappo：LINEで開発のみが主導で進めるケースは、ほぼないですよね。新谷さん自身で本来企画担当が書くような機能仕様や、ベンチマークも自分で書いてました。LINEで作る場合はこの機能があった方がいいといったことも書いてありました(笑)。
── 開発の中で個人的にこだわったことを教えてください。
新谷：スクリーン配信はアプリ側でUIを用意することができないので、ユーザーとどうコミュニケーションをとるべきかを考える必要がありました。
コメントやお知らせはプッシュ通知を使って表示するのが一般的なやり方なのですが、あまり出しすぎても邪魔になるので何をプッシュ通知で出してあげるかには気を使いました。
Yappo：あとは視聴者から配信者に送信される応援アイテムへの対応も、けっこう工夫していましたよね。
新谷：そうですね。「応援アイテムが送られました」と表示されるだけでは実感が薄いのと、実際のアプリではアニメーションが動いたりするので、文字だけでは寂しいなと思い、応援アイテムのアイコンをつけたりしました。
野原：QA側で大変だったのは、複数端末での確認ですね。特にiOSはサポート対象のOS,機種が結構広くて、古めのiOS10やiPhone5Sといった端末も用意してテストを行っていました
あとはデータを確認する際に、10数枠の限られた配信枠しかないんですけど、複数人数で一度に配信していくので、配信枠の圧迫がかなりありました。枠を超えると配信自体ができず、検証できなくなるので、枠を超えないように調整しながら気をつけてました。
配信系アプリは、配信していると端末の充電がゴリゴリ減っていくんですね。長時間配信する検証もしなければいけないのですが、どうしても1時間くらい検証すると充電切れを起こしてしまいます。
全部の端末が充電切れしてしまうと、充電できるまで1時間ほど待たなくてはいけないので、充電の状況に気をつける必要があります。まばらに充電するタイミングと検証するタイミングと端末に差をつけて、事故が起こらないように気をつけて検証していました。
吉永：一般公開されてからもリアル部分の検証を行っています。スクリーン配信は端末の画面を映す機能なので、何気なくうっかりQRコードを表示してしまったりすると、モニタリングチームから不適切動画だと判断されて、アカウントが使えなくなってしまうこともあります。そういった要素を事前に洗い出して、配信の注意を促す周知をするのも大変でした。
確認＆調整を繰り返したプッシュ通知の画像判定
── 特に苦労したポイントはありますか？
新谷：既存アプリからスクリーン配信と共用できる処理を切り出す必要がありました。
また、ログイン情報やキャッシュなどアプリ内で保存していた情報をスクリーン配信でも使えるようにデータの移行をする必要があり、既存アプリでデグレが起きないよう慎重に進めました。
あと機能面では、スクリーン配信はスクリーンを全部映すことになるので、例えばLINEアプリでメッセージが来た時にその通知やメッセージも全て配信してしまうという問題があります。表示してはいけない通知に対して、ぼかしを入れるのも苦労しましたね。
受け取ったスクリーン画面をチェックして、通知があればぼかすという機能を入れています。それがまた負荷が高くて、この機能をオンにしていると、メモリ超過でクラッシュすることもあるので、現在チューニング中です。
Yappo：画面の上部から通知のUIが降ってきたら、そこの領域を通知として検知する機能ですよね。
新谷：プッシュ通知が来たというイベントがOSで用意されているわけではないので、画像で判定するしかないのが結構つらかったです。
Yappo：あと端末を横向きにしたときの通知とかも。
新谷：プッシュ通知が表示されているかどうかは、各フレームごとに通知の表示エリアの左辺、下辺、右辺の色差を見て判定しています。表示エリアはキャプチャした映像のorientationと映像の縦横比などを見て受け取った映像の上下左右どこにあるのか判定します。
最初の頃は、縦画面では上手くいくけど、画面を横にするとぼかしが効かない場合もあり、細かい調整を繰り返していました。
また、表示エリアの計算に使っているorientationや映像のサイズがiPad Proでは返ってくる値が違って正しくぼかされないケースもあったりと実装が大変でした。
野原：QA側としては、通知の確認に苦労しましたね。LINE LIVEはシステムメッセージの種類が結構多く、端末数台でそれぞれ確認するとなると膨大な時間がかかってしまうんです。ただ、普段からリグレッション(回帰テスト)で通知の種別や表示方法を把握していたおかげでシステムメッセージの表示方法は熟知していたので、時間がかかった点だけが苦労したポイントかなと。スクリーン配信にあまり苦労した記憶はないですね。
── スクリーン配信のリリース時には、他にも機能追加がありました。何か影響はありましたか？
吉永：大きく2つあって、ライブ配信者が視聴者と一緒にクイズに答えていく「LIVE Q」と有料配信機能が追加されました。
「LIVE Q」は基本的な機能部分はそんなにトラブルは起こってないんですけど、バックグラウンド遷移やスリープモード遷移するとか、一旦LINE LIVEを抜けて、LINEアプリでメッセージを送ったりなど、割り込みの動作をすると、クイズの再開ができなくなる現象が出たりとか。サイドエフェクト的なイシューが多かったですね。
LIVE Qは特にポップアップの数が結構あるので、ポップアップの種類ごとにタイミングを合わせてバックグラウンドに入ると、また別の現象が出たりする。そういったタイミングやポップアップの種類を全て検証しなければいけなかったので、苦労しました。
野原：有料配信は検証自体が大変だったという話ではなく、有料配信を組み込んだことによって、プレイヤーという既存の視聴機能に大きな影響がでました。社内的に、かなり広範囲の確認をすることが必要になったので、想定外の実働がかかった対応がありました。
新谷：社内的な確認ということだと、スクリーン配信も法務確認が大変でした。
LINEでサービスを出すときは、リーガルチェックや、個人情報的に問題がないかのチェック、セキュリティチェックなど、全て専門部署に見てもらうんです。それぞれの部署が出してもいいと承認が出たらリリースできるんですが、当初スクリーン配信は法務側からこの機能は難色を示されてしまって。
何が問題だったかというと、画面まるごと配信できるので、動画配信サービスの有料動画など、権利的にアウトなコンテンツを簡単に配信できてしまうことですね。権利侵害となってしまうかもしれないサービスは出せないと。あとは情報セキュリティ、個人情報保護の面でも指摘がありました。
Yappo：結局、法務からプッシュ通知をぼかすことやモニタリングルールの徹底など、リリースできる条件となるクリアポイントを提示してもらえたことと、それに新谷さんが頑張って対応したことで無事リリースすることができましたね。
新谷：これがスクリーン配信に関する詳細設定の説明画面なんですけど、ここに注意を促すメッセージを書きつつ、あとは配信を開始した際にも、「開始しました」「映り込みに注意してください」と、プッシュ通知を通じてユーザーに伝えて注意を促すようにしています。
機能が増えていくなかで、大事にしていること
── QA的に気をつけて見ているところは？
野原：LINE LIVEは仕様がかなり複雑化していて、企画側が把握しきれてない機能とかもすでにふんだんに盛り込まれているんですね。なので、QAサイドから仕様の観点一覧みたいなのを作成して企画に確認しつつ、大分広い範囲を細かくフォローしています。
QAとしてはLINE LIVEの仕様漏れを防いでいけるような施策がとれればいいなと取り組んでいるところです。必ず漏らさないように注意しながら、QAをやっていくしかないなと思っています。
吉永：現在既に存在している機能を追加で別画面に出そうとしている場合、「既に同じ機能があることを考慮した上での追加なのか？」を再確認するなど、自分たちもサービスの仕様の仕組みをよく理解した上で、発言するようにしています。ユーザーが混乱をきたすUIにならないように、QAとしては注意してみていきたいですね。
野原：あとは配信の種別も増えているので、新しい仕様を組み込んだそれぞれの機能が種別ごとにうまく動くかというのを見ているので、QA観点としてはどんどん増えていっているかんじです。そういった増えていく仕様に対して、QA自体がボトルネックにならずに、スピードを落とさずにリリースするためにはどうするか、常日頃考えています。
Yappo：最近はiPadとか、端末も増えていってますからね。
吉永：そうですね。iPadの観点も増えてますね。
Yappo：iPad対応は開発側でやってみたら意外と簡単にできた、さくっと入れてもらったといった経緯がありました。
新谷： アプリを飛び越えてプレイヤーを起動する機能や、ドラッグ＆ドロップによって動画をシェアするといった、iPadでしかできない機能も入れてもらえました。
Yappo：iPadの対応をしてないと、アプリがiPadの画面サイズに引き延ばされるだけの変な感じだったんですよね。そのデザイン調整などを実装側で対応して、iPadで違和感なく見れたらいいねって話をしてたら、左側にLINE LIVEのアプリを起動して、右側にLINEアプリを起動してドラッグ＆ドロップで簡単にシェアできる機能を新谷さんが作ってくれました(笑)。
新谷：スプリットビューですね(笑)。ドラッグ＆ドロップでコンテンツのリストをLINEアプリにシェアするUIとなってます。画面分割（スプリッドビュー）自体はiPadの機能なので、うちで何かするとかではないんですけど、ただiPad対応すると聞いたときに、やってみたいなと思ってました。
iPad対応って開発者としては、iPad用にUI用意しなきゃいけなかったり、画面分割によって画面の解像度が変わるのでUI崩れが起きやすかったり、面倒くさいことも多いんです。でも、その中で自分のモチベーションアップできることを自分で作っていくというか。どうせiPadやるなら、やってみたいことをやろうと思って取り組みました。
Yappo：ただ対応しただけでは、スプリッドビューには対応できない。自分でちゃんと対応しようと思って作らないといけないということだよね。
新谷：iPadの機能なので画面分割はされるんですけど、ちゃんと実装していないとUIが崩れたりするので、そこはどんな画面のサイズになってもうまくきれいに表示されるようにする実装が必要です。そこは私だけじゃなくて、もう一人のiOSエンジニアが一緒に実装してくれました。
それに加えて、ドラッグ＆ドロップで別のアプリにシェアするUIは、それ用の実装がないとできないので、新しく付け加えました。
Yappo：iPadで配信がちゃんと見れるようになったので、Twitterなどを見ていると、好意的に受け止めてくれている方が多いですね。やっておいてよかったなと思っています。
新谷：プレイヤーのカメラの映像を表示するビューを作るために、社内のライブラリのYukiを使ったんですけど、もともと縦画面表示しかなくて。横画面表示のケースを考えていないライブラリだったので、横にも対応させるのが大変でした。カメラの映像はYuki側でCameraViewというカメラから取得した映像にフィルタやフェイスステッカーなどをかけて描画してくれるViewを提供してくれていて、それを配信画面に貼って使っています。
しかしこれが縦しか考慮されていなかったので、端末を横にすると映像が90度回転して表示されてしまっていました。
YukiはLINEアプリでも使われているのでLINE LIVEのためだけに改修することが難しく、仕方ないので端末が回転されたら回転された向きに応じて映像が縦向
きになるようにCameraViewのtransformを設定するみたいなめんどくさいことをやっています。
「LINE LIVE」を今後どうしていきたい？
── 最後に、今後「LINE LIVE」で取り組みたいことはありますか？
Yappo：リリース後の評判は、結構よかったですね。使われ方はゲーム配信が多かったです。
新谷：横画面で見たいという要望が多かったので、今は16：9の縦配信しか対応していないのですが、今後のアップデートで対応したいと考えています。
個人的に次に入れたいと思っている機能としては、コメントの読み上げ機能ですね。今はプッシュ通知で来ているんですけど、やっぱりゲームやっている時に話しながら、通知も見て、ゲームもやるとなると大変なので、コメントを読み上げてくれた方がやりやすいなと考えてます。
あとは、画面にプレイヤーのアバターを表示したいという意見が社内からも出ているので、どうやったらできるかいろいろ試しています。まだちょっとリリースまでには道が遠そうですが。
Yappo：読み上げ機能の方はある程度実装できていて、速度とか音の高さなども自分の聞き取りやすいように設定ができます。実際の配信で通知が来た時に、ちゃんと読み上げてくれます。
野原：え、読み上げ機能、アバターですか？初耳ですねその機能…検証大変そうだな…と思って聞いてました（笑）。
Yappo：今後もいろいろアップデートしていきますので、楽しみにしていてください！