Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
cookpad-tech-kitchen-number-15
Search
ishikota
April 23, 2018
Technology
1
5.7k
cookpad-tech-kitchen-number-15
https://cookpad.connpass.com/event/81142/
ishikota
April 23, 2018
Tweet
Share
Other Decks in Technology
See All in Technology
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
230
Obsidian応用活用術
onikun94
1
470
DDD集約とサービスコンテキスト境界との関係性
pandayumi
3
280
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
220
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
150
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
210
生成AI時代のデータ基盤設計〜ペースレイヤリングで実現する高速開発と持続性〜 / Levtech Meetup_Session_2
sansan_randd
1
150
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
410
品質視点から考える組織デザイン/Organizational Design from Quality
mii3king
0
200
ChatGPTとPlantUML/Mermaidによるソフトウェア設計
gowhich501
1
130
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3k
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
120
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
Designing for humans not robots
tammielis
253
25k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Being A Developer After 40
akosma
90
590k
Rails Girls Zürich Keynote
gr2m
95
14k
Practical Orchestrator
shlominoach
190
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Scaling GitHub
holman
463
140k
Unsuck your backbone
ammeep
671
58k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
Transcript
cookpadTV開発の裏側 ~ Android編 ~ Cookpad Tech Kitchen 2018/03/29
自己紹介 •石本航太 • 新卒1年目 • 入社してから今まで ◦Androidエンジニア ◦ 2017/06 ~
2017/12 : StoreTV client side開発 ◦ 2018/01 ~ : cookpadTV Androidアプリ開発
今日話す内容 • cookpadTV Androidアプリどうやって作られているか ◦ LIVE配信画面 • HLSを利用した機能開発 ◦ ただ動画再生するだけじゃなくて、こんなこともできるよ
cookpadTVの価値 • ざっくり一言で ◦ 先生が料理している所をLIVE配信 • アプリコンセプト ◦ 先生とコミュニケーション取りな がら料理が学べる
LIVE配信
HLS (HTTP Live Streaming) • 「Playlist」と呼ばれるtext fileに動画情報を記述 • 「Playlist」には、動画に関するメタ情報を記述できる
HLSをAndroidで再生 • google/ExoPlayer ◦app側は、基本的にURLをplayerに渡すだけ
ExoPlayerの補助 サービス要件に沿ったチューニングはやはり必要 • BehindLiveWindowException対策 • 勝手に高画質の動画取りに行かないでほしい... • iOSとくらべて、タイムラグを感じる...
Playlistの更新方法 1.৽͍͠ηάϝϯτϑΝΠϧ(.ts)͕࡞ΒΕΔ 2.playlistʹ৽͍͠ηάϝϯτϑΝΠϧ͕ࡌΔ ◦ ݹ͍ηάϝϯτϑΝΠϧԡ͠ग़͞ΕΔܗͰফ͑Δ BEFORE AFTER
ExoPlayerはplaylistをtrackしている • ExoPlayerは最新のplaylistを手元にfetchし続ける ◦ playlistの更新ができず、最新のplaylistが先に進んでしまうことが. LOCAL LATEST
Playlistの更新が遅れると... • 再生したいセグメントが、最新のplaylistから消えちゃった ◦ ExoPlayer「何を再生すればいいか分からない。。」
BehindLiveWindowException • LiveWindow = Playlistに含まれる動画の長さ • Playerの再生位置がLiveWindowから外れる LiveWindow =10s •
segment = 2s • 2s x 5 = 10x
BehindLiveWindowException対策 ref: ExoPlayer公式Medium CookpadTVのLiveWindowは10秒...
LiveWindowを小さくしている理由 playlistに1分の動画を保持する場合、 最悪1分程度のタイムラグが 先生と視聴者の間に生まれてしまう 「先生とのコミュニケーション」がコアコンセプト
BehindLiveWindowException対策 •BehindLiveWindowException ◦手元のplaylistを最新のものに修正すれば、 引き続き再生できる ◦このエラーの時は、アプリ側で自動復帰を試 みるように実装することに
コメント、ハート機能
Client sideの実装は簡単 基本的に 「Firebaseで受け取ったイベントをUIに反映するだけ」 常に差分だけが送られてくる設計のおかげ
コメント • コメント投稿の度に、 ここが上書き更新 • ここのupdate eventを subscribe • eventの内容をListView
に追加
LIVE画面で使われている技術 • LIVE配信 ◦ HLS x ExoPlayer ◦ サービス要件に沿ったチューニング は必要
• コメント機能 • ハート機能 ◦ Firebaseを採用 ◦ 差分が送られてくるので、基本的に は、イベントをUIに反映するだけで ok
HLSを利用した機能開発 ここまでの話 • playlistには動画の情報しか載せてなかった これからの話 • サービス独自の要件をPlaylistに載っけたらどう? ◦ 何かいろいろできるんじゃないか。
お題: アーカイブ機能 LIVE配信を後から見返す機能 • 動画が見れる • コメントも閲覧できる ◦ 動画とコメントを同期して表示
お題: 動画とコメントを同期して表示 前提: server側でコメント一覧は保存してある apiでこの一覧を取得して表示...? Playlistにコメント情報を載せられないか? [ { 動画の3.6秒目にAさんが「コメント1」とコメントした },
… ]
HLSは字幕をサポート • 字幕とコメント、要件似てるのでは? ◦ 「動画のn秒目に特定のコンテンツを表示したい」
ExoPlayerの字幕機能 • ExoPlayerも字幕をサポート ◦ 動画に同期して字幕を表示する仕組みが 既に実装されて いる どういう実装になってる?
字幕情報の入力フォーマット • WebVTTでok https://en.wikipedia.org/wiki/WebVTT 字幕の代わりにコメント情報載せられるのでは?
字幕のRenderingどうやってるか 1. 再生位置に対応した字幕情報を取得 2. 字幕情報から「テキスト、描画位置」等を取得し て、画面上に描画 このRendering用クラスを自前で書くことも可能
webVTTでコメント情報をplaylistに付与 全体的な方針 1. serverで保持しているコメント情報をwebVTT形式に 2. Playlistに、字幕情報(SUBTITLE)として、上の webVTTファイルを指定 3. ExoPlayerのTextRenderを自前実装に置き換える ◦
受け取った字幕(コメント)情報をListViewに追記 動画とコメントの同期を Playerが自然な形で行えるのでは
コメント情報 in webVTT
CommentRenderer (自作クラス)
今のはあくまで一例 要するに、こういうことができそう 1. 動画と連携させたいコンテンツ情報をPlaylistに載せる ◦ 「15秒~30秒は、1つ目のレシピの手順2」 2. アプリ側でコンテンツを動画と連動した形で表示 ◦ 今どの作業をしているのか、画面に表示
いろいろできそう
今日話した内容 • CookpadTV Androidアプリどうやって作られているか ◦ LIVE配信の実装 ◦ Comment, Heart機能の実装 •
HLSを利用した機能開発 ◦ Playlistにサービス要件に沿った情報を載せてみる
最後に ただライブ動画を配信するだけじゃなく、 アプリでしか体験できないようなコンテンツ を作ってみたい!!