Slide 1
Slide 1 text
ママリで動画配信するまでに検討したこと
2021/03/17 KGDC Tech Conference
もりや ひろゆき
Slide 2
Slide 2 text
ママ向けNo.1アプリ、情報メディア「ママリ」
ユーザー同士で悩みを相談しあうQ&A機能
生活に役立つ記事を毎日配信。
人気順の質問検索や回答リクエスト、プレミアム限定記事など、ママリをより便利に使
える機能を提供。
※妊娠中〜2歳0ヶ⼒の⼒供を持つ⼒性1,084⼒を対象とした調査より「現在使っているアプリ(妊娠・⼒育て系) をすべて教えてください」で第1位（2019年3⼒実施、調査協⼒：インテージ）。
Q&Aコミュニティ
メディア
ママリプレミアム
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
今日はママリに動画を配信するまでに、
検討したことなどを簡単にお話します。
Slide 5
Slide 5 text
自己紹介
● もりやひろゆき
● 2019/09 コネヒト入社
● Webエンジニア（フロントエンドがメイン）
○ 個人的によくAWSを触っています
● ママリ動画の配信側を設計、実装しました
○ アプリは触っていない
Slide 6
Slide 6 text
動画を配信するにあたって検討したこと
1. どういう形式で動画を配信するか
2. どうやって配信するか
3. どうやって動画を変換するか
Slide 7
Slide 7 text
動画を配信するにあたって検討したこと
1. どういう形式で動画を配信するか
2. どうやって配信するか
3. どうやって動画を変換するか
Slide 8
Slide 8 text
ストリーミングの主な形式
1. MPEG-DASH
○ 国際標準規格(ISO/IEC 23001-6)
○ DRMなどの複雑な要件にも対応できる
2. HLS (HTTP Live Streaming)
○ Appleが提唱している規格
○ シンプル
Slide 9
Slide 9 text
ストリーミングの主な形式
1. MPEG-DASH
○ 国際標準規格(ISO/IEC 23001-6)
○ DRMなどの複雑な要件にも対応できる
2. HLS (HTTP Live Streaming)
○ Appleが提唱している規格
○ シンプル
HLSに決定！
Slide 10
Slide 10 text
動画を配信するにあたって検討したこと
1. どういう形式で動画を配信するか
2. どうやって配信するか
3. どうやって動画を変換するか
Slide 11
Slide 11 text
HLSの仕組み
以下の２種類のファイルで構成されている
1. 配信情報ファイル（.m3u8）
2. 動画ファイル（.ts）
○ 約10秒ごとに分割（分割単位は設定で変更可）
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:13
#EXT-X-MEDIA-SEQUENCE:1
#EXT-X-PLAYLIST-TYPE:VOD
#EXTINF:12,
hls_1_00001.ts
#EXTINF:12,
hls_1_00002.ts
#EXTINF:12
...
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-INDEPENDENT-SEGMENTS
#EXT-X-STREAM-INF:BANDWIDTH=1000000,AVERAGE-BA
NDWIDTH=100000,CODECS="avc1.4d4020,mp4a.40.2",
RESOLUTION=800x600,FRAME-RATE=29.970
hls_1.m3u8
Slide 12
Slide 12 text
CloudFront + S3 で配信
● HTTPサーバーで静的ファイルを配信できればOK
● ママリはAWSを使っているので、スタンダードな CloudFront + S3
の構成で配信することに決定
Slide 13
Slide 13 text
動画を配信するにあたって検討したこと
1. どういう形式で動画を配信するか
2. どうやって配信するか
3. どうやって動画を変換するか
Slide 14
Slide 14 text
HLSへの変換
● MP4やMOVからHLSへ変換が必要
● 常時使うわけでもないのにサーバー立てるのは微妙・・・
Slide 15
Slide 15 text
AWSで何か使えるサービス無いかな・・・
Slide 16
Slide 16 text
ありました！
● MediaConvert というサービスで動画変換ができます！
○ https://aws.amazon.com/jp/mediaconvert/
● Elastic Transcoder というサービスもあるようですが、MediaConvert の方を勧めている
ようです。
○ https://aws.amazon.com/jp/elastictranscoder/
Slide 17
Slide 17 text
MediaConvertでやっていること
● 動画の変換（MP4,MOV → HLS）
● サムネイル画像の作成
○ ママリでは１秒毎に１枚のキャプチャ(JPEG)を作成して、その中
からサムネイルに使う画像を選んでいます
Slide 18
Slide 18 text
MediaConvertの料金（ママリの場合）
● ※変換内容によって金額は大きく変わります
● ママリの例：60分の動画を変換した場合
○ 0.034USD * 60分 * 107円 = 約218円（$1 = 107円計算）
○ １分間の変換料金は 0.034USD。
■ MediaConvert の算定方法だと 4K に該当するサイズ
■ フレームレートは <30fps
● 料金は変換した時間で課金されます。
● サーバーを立てて維持管理するコストを考えるとめちゃくちゃ安
い！
Slide 19
Slide 19 text
まとめ
● ストリーミングはMPEG-DASHとHLSの２つが主流らしい
● ストリーミングは静的ファイルを配信できるHTTPサーバーがあれば
可能
● MediaConvertを使うとサーバー立てずに簡単に動画を変換できる
Slide 20
Slide 20 text
[PR] 詳細は「コネヒト TECH BLOG」へ
https://tech.connehito.com/entry/2020/05/12/143906
Slide 21
Slide 21 text
ご静聴ありがとうございました！