Slide 1
Slide 1 text
大量 コメントを捌く技術
@sota1235
2018/1/23 API Talk about メルカリチャンネル
Slide 2
Slide 2 text
自己紹介
■ @sota1235
■ Sota Sugiura
■ 入社1年経ちました
■ 将来 夢 JavaScriptです
Slide 3
Slide 3 text
最初に
■ これだけ 覚えて帰ってほしいことがあります
Slide 4
Slide 4 text
メルカリチャンネル
Slide 5
Slide 5 text
メルカリチャンネル？
Slide 6
Slide 6 text
ˈ メルカリチャンネル
Slide 7
Slide 7 text
ˉ メルチャン
Slide 8
Slide 8 text
あと おまけです
Slide 9
Slide 9 text
アジェンダ
■ お客さまにとって コメント
■ 開発者にとって コメント
■ コメント機能 未来
Slide 10
Slide 10 text
お客さまにとって コメント
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
視聴者数
入室メッセージ
視聴者コメント
各種通知メッセージ
いい
Slide 13
Slide 13 text
視聴者数
入室メッセージ
視聴者コメント
各種通知メッセージ
いい
Slide 14
Slide 14 text
コメント機能
■ ログインしていれ 誰でも可能
■ 配信者、視聴者全員が見られる
Slide 15
Slide 15 text
なぜコメント機能？
Slide 16
Slide 16 text
なぜ◯◯でなくメルチャン？
Slide 17
Slide 17 text
なぜメルチャン？
■ なぜECサイトで ない？
■ なぜテレビショッピングで ない？
■ なぜメルカリで ない？
Slide 18
Slide 18 text
なぜか
Seller Buyer
Broadcast
Comment
■ そ 場でコミュニケーションが取れるから
Slide 19
Slide 19 text
コミュニケーション
■ 「そ 野菜 おすすめ 食べ方 ？」
■ 「そ アクセサリ、アレンジできない？」
■ 「あと500円安かったら買います」
■ 「送料込みにできませんか？」
Slide 20
Slide 20 text
買い物に限らない
■ 挨拶したり
■ 雑談したり
■ ゲームしたり
Slide 21
Slide 21 text
例えるなら、八百屋？
Slide 22
Slide 22 text
例えるなら、八百屋？
へいらっしゃい
Slide 23
Slide 23 text
数字で見るコメント機能
■ 配信によって 毎秒1個以上 コメントが投稿され
ている
■ 運用しているFirebase Realtime Database インス
タンス数 世界最大級
Slide 24
Slide 24 text
コメント メルチャン 肝
■ 「映像が見られる」に次いで大事な機能
■ もしもコメントが無かったら…
■ ライブである必要が無い
Slide 25
Slide 25 text
開発者にとって コメント
Slide 26
Slide 26 text
要件定義
■ 細かい要件 一杯ある
■ ログインユーザしかコメントできない
■ ユーザ名にいい感じに色を付ける
■ NGワード フィルタリング
■ etc...
Slide 27
Slide 27 text
一番必要な要件
■ コミュニケーション機能として確立すること
Slide 28
Slide 28 text
Face to face
Slide 29
Slide 29 text
face to face感を出すために
■ 遅延がない
■ コメントが埋もれていかない
■ 配信者がきちんと拾える
Slide 30
Slide 30 text
遅延がない
■ コメントを投稿したらすぐに反映される
■ Firebase Realtime Databaseを用いて実現
Slide 31
Slide 31 text
ちなみに
■ 多く 機能でFirebase Realtime Databaseを利用し
ています
Slide 32
Slide 32 text
視聴者数
入室メッセージ
視聴者コメント
各種通知メッセージ
いい
Slide 33
Slide 33 text
コメントが埋もれていかない
■ 生放送な で放送途中に視聴することがある
■ 途中から直近N件 コメントを表示するよう改善
Slide 34
Slide 34 text
コメントが埋もれていかない
■ 生放送な で放送途中に視聴することがある
■ 途中から直近N件 コメントを表示するよう改善
■ 結果、コメント率が改善
Slide 35
Slide 35 text
配信者が読める
■ 視聴者以上にコメントを読めることが重要
■ 唯一無二 コミュニケーション手段
Slide 36
Slide 36 text
より読みやすく
■ 視聴者よりも文字を大きく
■ 同じユーザ 同じ色で表示
Slide 37
Slide 37 text
視聴者画面 配信者画面
Slide 38
Slide 38 text
配信画面 文字を大きく
視聴者画面 配信者画面
Slide 39
Slide 39 text
ユーザ名 色を固定
視聴者画面 配信者画面
Slide 40
Slide 40 text
コメント機能 未来
Slide 41
Slide 41 text
大きく2つ
■ 今あるコメント機能 改善
■ 新しいコミュニケーション 創造
Slide 42
Slide 42 text
コメント機能 改善
Slide 43
Slide 43 text
今 問題点
■ スケールアップ問題
■ モニタリング問題
■ コメント 表現力
Slide 44
Slide 44 text
スケールアップ問題
■ Firebase Realtime Database スケールアップしな
い
■ 現在 複数インスタンスを運用中
Slide 45
Slide 45 text
スケールアップ問題
Slide 46
Slide 46 text
シャーディング
Slide 47
Slide 47 text
スケールアップ問題
■ 今 ところ 回ってる
■ が、手動で インスタンス追加がツライ
■ 急成長する(現在進行系)サービスで 限界がある
Slide 48
Slide 48 text
New Architecture
■ Cloud Firestore 検証、移行したい
■ 自社実装もありうる
■ いずれも難易度が高いながら、技術的にやりがい
あるチャレンジ
Slide 49
Slide 49 text
モニタリング問題
■ コメント機能が快適に動いてるか 監視
■ “快適に” 定義が非常に難しい
■ モニタリング→自動切り替え等 Karakuriが求め
られる
Slide 50
Slide 50 text
コメント 表現力
■ 文字がコメントできるだけでいい か？
■ 今 UIってベスト？
■ コメントが右から左に流れていっても面白いかもし
れない
Slide 51
Slide 51 text
新しいコミュニケーション
創造
Slide 52
Slide 52 text
再掲 コミュニケーション 構図
Seller Buyer
Broadcast
Comment
Slide 53
Slide 53 text
これから…？
Seller Buyer
Broadcast
???
Slide 54
Slide 54 text
半年後 メルカリチャンネル きっと…
■ スタンプ機能
■ コメント自動読み上げ
■ 自動返信
■ 模索 余地がまだまだある
Slide 55
Slide 55 text
[WIP]半年後 メルチャン
Seller Buyer
Broadcast
自動読み上げ
AI ライブ参加
仮想通貨
機械学習
etc...
Slide 56
Slide 56 text
Thank you