いがにんのぼやき

若手WEBエンジニアのブログ。IT、WEB、バンド、アニメ。

AbemaTV DEVELOPER CONFERENCE 2016に参加してきた

AbemaTV DEVELOPER CONFERENCE 2016に参加してきた
その時の雑な自分用メモを公開

AbemaTV Developer Conference 2016

まとめ記事は以下に公開されています。

developers.cyberagent.co.jp

インターネットにおける動画配信の仕組み

Http Adaptive Streaming

  • HLS
  • HDS
  • Smooth Streaming
  • MPEG-DASH

LinearTVを行うには

APC System(オンプレ)といったものをテレビでは使用するらしい
最初に表示されるテレ朝のニュースだけAPCを使用

映像データの取り扱い

録画コンテンツ

映像データが納品後、管理システムからデータを送る
一旦ジョブキューに格納されて、ワーカーがそれぞれ変換して配信可能形式に

生放送

オンラインで送られてきていてオンラインで変換しなければいけない
その変換では他社のEncoderやPackagerを使用している
それぞれの元の配信形式に合わせるため

セグメントをどう扱うか

録画コンテンツ

GCS
JSONで分割一情報を入れてあり、それを元に今のデータから現在の再生一から放送している

生放送

MongoDBを使用してセグメント情報を登録して、それを元に映像を再生させる

Adaptive Bitrate Streaming

元データを同じ時間単位で各画質ごとに分割しなければいけない
高画質のデータで破損や欠損、位置ずれするトラブルがあった
自動検知できる場合は、下の画質から置き換えるようにした
ポーリング時にセグメントの数などを確認したり

デザイナーとエンジニアの境界線

UIデザイナー

pixateでモックを作成
3人?で3ヶ月でモックを250個
開発初期は技術者の連携が濃くクオリティの高いプロダクトを作り上げられる環境
今は40人で運用フェーズでリモート勤務の方もいたり忙しかったりで最近コミュニケーションが希薄
Sketchでデザイン、エンジニアがSketchを見て実装
Sketchファイルからエクスポートを実行し、PNGの最適化を行うコマンドをエンジニアが開発
デザインガイド(マージンの幅の詳細とか)を用意しなくても成立するようになった
Pixateでデザイナーがアニメーションエージングを試行してからエンジニアに渡していた(具体的に数字を示して)

  • とにかくチーム全員で揉む
  • ファイルのやり取り書き出しは自動化
  • アニメーションを決めてからエンジニアに渡す

テクニカルクリエイター

自分がアプリを作ってることを匂わせる
リアルなプロダクトを重視する流れ
テクニカルクリエイターという社内の流れ
(一人多彩なクリエイター)

インタラクティブなUIのためのAVPlayerベストプラクティス

動画をザッピング後、動画の破棄が重い、現れる動画の準備が重い
AVAssetは場合によっては時効スレッドをブロックしてでもコンテンツの読み込みを行おうとする場合がある
AVAssetからメディアの時間を取得する処理をメインスレッドを使うと他の処理が止まってしまうことがある

読み込み開始時は低いビットレート
両脇の動画も低ビットレートで、再度読み込まれる時に画質をあげたものに

マルチスレッド

UIはマルチスレッドで
やみくもにサブスレッドに投げない
以前はCircleCI、今はJenkins、ビルドはカーストレイン、テストアプリはFabric、本番はテストフライト

AbemaTVの開発スタイル

ベースはスクラム
アジャイルサムライにあるインセプションデッキ

FRESH
開発:20人
以外:10人

AbemaTV
30
100
スクラムチームは奥手も10から15人が限界なので分解が必要

炎上プロジェクト立て直しの風景

WEB業界の炎上経験多数
自社内開発では柔軟な分、あいまいなことが多い

意思決定、情報の集約は一元化しよう
介入が避けられねい場合、影響を局所化しよう

アクセス傾向とCMのところから30万くらいの推定
実際の数字を見せることによって説得した

※この度過去に参加したイベントのメモなどを公開することにしたので、投稿日時をイベント当日に変更してあります。