「Yahoo! JAPAN Tech Conference 2019」に参加してきました

  • Yahoo! JAPAN Tech Conference 2019に参加してきました。

techconference.yahoo.co.jp

  • 昨年参加してとても面白かったので今年も参加しました。
  • 技術の話だけでなく、それを使って何を目指しているかまで話してもらたえたセッションが多くありとても勉強になりました。
  • 講演中にも資料を見られるように事前に公開してくれたり、twitterのモーメントを即時に作成してくれたり参加者への配慮がありがたかったです。
タイトル 発表者 タイトル 発表者
13:00 基調講演 - (twitterまとめ) 藤門 千明 / 仲原 英之
14:00 もう道に迷わない! Yahoo! MAPにおけるAR体験 - (twitterまとめ) 徳元 健太 / 廣橋 孝紀 パスワードレス普及への取り組み/ヤフーのデータ戦略を支えるID連携 - (twitterまとめ) 三原 一樹 / 本間 洋光
15:00 ライブクイズ「ワイキュー」を生み出した"内因的モチベーションドリブン"/ワイキューが目指した"楽しい時間を作るデザイン" - (twitterまとめ) 善積 正伍 / 染矢 沙織 データの力で実現するYahoo!ショッピングのCRM - (twitterまとめ) 市丸 数明
16:00 ユーザーコミュニケーションの新たな武器、けんさくとえんじんの秘密 - (twitterまとめ) 武井 友里恵 ライブ動画配信サービス「ワイキュー」の作り方 - (twitterまとめ) 石井 直矢
16:25 LEAN XPを活用したユーザーの声を聞くものづくり 〜Yahoo! JAPAN タブレットアプリのリニューアル〜 - (twitterまとめ) 馬場 敬寛 豊かなスポーツライフの実現を目指す、スポーツナビのシステムアーキテクチャ - (twitterまとめ) 北村 央斗
17:00 拡張性あるデザインシステム構築から挑む、GYAO!のウェブリニューアル - (twitterまとめ) 浜田 真成 Kubernetesで実現したYahoo! JAPANの次世代開発環境 ~ 100以上のクラスタを少人数で運用する秘訣 ~ - (twitterまとめ) 稲津 和磨 / 勝田 広樹
18:00 CtoC配信サービスのバックエンドからiOSアプリまで ~ヤフオク!ライブの全貌とXP開発~ - (twitterまとめ) 出水 厚輝 / 大西 智也 / 山下 真一郎 Yahoo! JAPANの巨大インフラの運用と展望 - (twitterまとめ) 奥村 司 / 神尾 皓 / 安藤 格也

基調講演

テーマ

  • 未来につづく話をしよう

yahooの取り組み

  • インターネットを通じていろいろなサービスを提供している
    • Search, Know, Read, Pay, Notify, etc...

Technology

  • いろんな技術
    • Search-Tech
    • AD-Tech
    • UI/UX
    • Security-Tech
    • Recommend-Tech
    • Fni-Tech
  • 共通点はデータxAI
    • データからよりよいモデルを作る
    • よりよいコンテンツでユーザが増える
    • データが増えるのでよりよいモデルを作れる
  • 足りなかったもの

kukai

  • 2015年から開発してる
  • 2017年リリース
  • GPUのサーバ
  • 液体につけて熱を冷ましてる
    • どうしても電気代がかから
    • 電力使いすぎは持続性がない
  • スパコンのノウハウない
    • 「データとAI」でチューニングに挑戦

kukaiを使った効果

ヤフオク

  • 不適切な商品が出品される
  • kukaiでAIを使った
    • 排除の量が3.1倍
    • モデルのビルドが1.5hで終わる
      • 毎日モデルを変えられる
      • 従来は100h

yahoo知恵袋

  • 不適切な質問や回答がある
  • kukaiを使ってランキングが上に来ないようにとか隠すことができた
  • 全質問回答(6億)を学習させた

大切にしてる技術

  • Security-Tech
  • 安心して使ってもらうために必要

セキュリティの取り組み

  • セキュアな通信レベル向上
  • 2018/6~TLS1.2に切り替え
  • 暗号化すると通信量が増えるコストが増加する

yahooの取り組み

  • HTTPS
    • 2017年中に全サービス移行済み
  • TLS1.2
    • 2018/6までに決済サービス移行済み
    • 2018/10に全サービス移行済み

TLS1.2へ

  • TLS1.2にする不都合
    • 対応していなブラウザを使ってるとみれなくなる
    • 全体の3%
  • 移行の戦略
    • 売上よりも安全を優先
    • 全サービス移行
      • 決済系以外も
    • 早めに広く告知
  • 次はTLS1.3
    • OpenSSLのバージョンを1.1にあげないと使えない
    • 今後取り組んでいくことになる

CI/CDの重要性

  • セキュリティの対応はすぐに反映させないといけない
  • CI/CDがととのっているとすぐにリリースできる
  • CIの中で問題を事前に検知できる取り組みも進める
  • DevSecOps

パスワードレス普及への取り組み/ヤフーのデータ戦略を支えるID連携

  • 三原 一樹さん
  • 本間 洋光さん

Yahoo! Japan IDの現状

  • ヤフー
    • EC事業
    • メディア事業
  • ヤフーIDユーザ
    • 4587万

これまでのパスワードレスの取り組み

課題

  • セキュリティとユーザビリティの両立
  • パスワードを忘れたことがある:96%
  • パスワード使いまわしてる:73%
  • => ログインが手間、不正アクセスのリスク

解決策

  • パスワードレス化

SMS認証

  • パスワードをそもそも設定させない
  • ID入れるとスマホにメール
  • 確認コード入力しログイン
  • ユーザビリティ面でまだ改善余地あり

生体認証

  • FIDO
    • セキュリティと利便性の両立を目指す
  • パスワード認証
    • ユーザの入力とサーバが保持しているものを検証
  • FIDO認証
    • 端末で検証し端末上の秘密鍵で暗号化
    • サーバ側で公開鍵で復号できれば認証
    • サーバに生体情報が送られるわけではない
    • Webで実現する -> FIDO2

今後

  • パスワードレスログインの訴求
  • 対応デバイス拡大(今はAndroidでしか実現できない)

yahooのデータ戦略とID

  • 提供サービス100以上
  • ヤフーID連携で他サービスと連携
    • データの蓄積
    • データの活用

アプリ利用の促進

  • ブラウザのログインを引き継ぐ
  • ログインしてるからこその機能を提供
  • ヤフーIDを使うアプリのどれかでログインしてればそれが引き継がれる
  • 月間4587万ユーザ

ヤフーID連携

  • OpenID Connectを使っている
  • Webもアプリも同じIDでログインできる

他サービスでの利用

  • ヤフーIDでログインできるようになる
  • ヤフーIDに紐づく情報が連携可能

事例

  • ヤマト運輸
  • ヤフーIDでクロネコメンバーズにログインできる
    • ログイン時に住所等の提供の同意画面
    • クロネコ側でヤフーに登録してる情報を使える
  • クロネコ側での配送予定情報をヤフーに提供
    • ヤフーアプリのプッシュ通知で配送予定を知らせる
    • 配送情報の提供もID連携時に同意をとる

まとめ

  • データ活用にはログインしてもらうことが大切
  • 社外と連携することでできることが増えてくる

データの力で実現するYahoo!ショッピングCRM

  • 市丸 数明さん

Yahoo!ショッピングCRM

  • CRM - 顧客関係管理
  • ユーザの行動属性を分析
    • ユーザの買い物の満足度を上げる
    • 売上を最大化する
  • データをもとにユーザにフィットした対応をする
    • 通知を無視し続けるひとは自動で配信停止するとか
  • リアル店舗にはできないCRMを実現する
    • 1 to 1の対応はリアルに勝る

CRM実現の仕組み

  • CRM5w1hで考える
  • UI - 接点
    • Web、アプリ、通知
  • EDW - データ
    • ユーザのデータをためてる
  • CRM - 施策管理

Yahoo!ショッピングならではのしくみ

  • 一周たりともページを止めてはならない
    • フロントとバックのJSを分けてる
  • 非機能要件のSLAが高い
    • 数万qpsを捌く
    • 200ms以内
  • 数千万件のユーザにPush配信を行う
    • 同じオファーを二回送ってしまうとかは絶対ダメ

事例①

  • 離脱直前ユーザへのオファー
  • CVRを確認すると特定のPV数で一回落ち込む
    • 離脱しやすさにスコアをつける
    • スコアが一定以上になったらオファーを出す

事例②

  • 定期購入リマインド
  • 定期購入対象の商品の定義
    • 同じカテゴリに属する商品を2回以上
    • 多くのユーザが該当するもの
  • 再購買時期の予測
    • サンプルユーザのデータをもとに分析
    • 商品に応じて通知するタイミングをチューニング

これからのCRM

  • Whenの最適化
    • データ分析・利活用をリアルタイム化
    • 今は毎日バッチで処理
  • サービス間のデータを相互利用
    • 他サービスのデータをもとにオファー
    • 似たユーザの統計情報をもとにオファー
  • システムをマイクロサービス化
    • CRMはモノリシック
    • DDDでリプレイス中

まとめ

  • yahoo全てのデータを活用
  • リアルタイム化
  • 最新アーキテクチャで実現
  • 究極の1 to 1へ

ライブ動画配信サービス「ワイキュー」の作り方〜優れた社内技術で実現する、少人数のサービス開発〜

  • 石井 直矢さん

ワイキュー

  • 3人だけでで開発してる
  • ライブ動画配信
  • コメント
  • 出題/回答
    • 短時間にアクセスが集中する
  • Tポイント
    • リアルタイム性より堅牢性

まとめ

  • 多くの機能が社内のプラットフォームで提供されている
    • ライブ配信とか不正ワード検知とか
    • ログインとかCI/CDとかも
  • 機能ではない部分を考えることにも集中できた
    • どうやって楽しく使ってもらうか

豊かなスポーツライフの実現を目指す、スポーツナビのシステムアーキテクチャ

  • 北村 央斗さん

スポーツナビ

  • 月間平均PV:46億
  • 月間平均UB:5710万
    • UniquBrowser

スポーツナビのシステム

  • 豊富なデータを使うシステム
    • 幅広い競技の情報
    • 競技に特化した詳細な情報
  • データ提供元と連携して表示している

プロ野球速報アプリ

  • 一つの画面に様々なデータ
  • 一球ごとの結果をリアルタイムに届ける
    • 提供元から受け取ったデータをすぐにアプリへ届ける

今後

  • データが増えても保守し続けられる仕組み
  • 取り扱う競技を拡充しやすくする仕組み
    • 競技横断のシステム

スポーツナビの運用

  • 特定のタイミングで負荷増
    • オリンピックの羽生結弦の登場タイミングとか
  • CaaS/PaaSへの移行を進行中

拡張性あるデザインシステム構築から挑む、GYAO!のウェブリニューアル

  • 浜田 真成さん

GYAOのリニューアル

  • レガシーWebからの脱却
    • 10年続くモノリシック
  • 既存プロダクトを維持して事業目標を達成

課題

モノリシック(FatView)

  • ロジックとViewが混ざってる
    • リファクタできない
  • ロジックが局所化

テストの欠如と手動リリース

  • テストは手動で
  • リリース作業1時間

セマンティックWeb

UI一貫性の破綻

  • 同じような部品

パフォーマンス

  • 初期描画が遅い

仕様の複雑化

  • 暗黙の了解で仕様が分からない
  • ドキュメント内

複雑なワークフロー

  • 直列なやりとり

技術戦略

Webアーキテクチャの段階移行

  • 段階移行
    • 並行稼動期間がある
  • phase1
  • phase2
  • pahse3
    • PaaSへ移行
    • TypeScript導入

パフォーマンス改善

  • パフォーマンス指標
    • RAILモデルをベースにサービス固有のものを追加
      • 動画の開始は2秒以内
  • 初期表示の速度改善
    • TTIやFMPの指標を重視
  • APM採用

コンポーネントシステム

  • AtomicDesignの思想をベースに
    • Page - Layout - Components - Basic
  • 関数型的なinputに対してoutputが一意になるコンポーネント

デザインシステム

  • デザインをプロダクトに届けるまでのプロセスを「仕組み」にする
  • 仕様の更新と開発をあわせて行う
  • ポイント
    • 常にコンポーネントの粒度で考える
    • 信頼できる唯一の情報源を作る
    • UI/UXの意図を残していく

組織を変える

  • 運用を止めない
    • システムの考え方を普及させる
    • システムを学ぶバックアップ体制

まとめ

  • 負債を確実に解消
  • 技術選択と移行プロセスを見極めよう
  • デザインシステムによってプロセスを構築する

今後

  • マイクロサービス化
  • パフォーマンスのさらなる改善
  • PWA(キャッシュの有効活用)

CtoC配信サービスのバックエンドからiOSアプリまで ~ヤフオク!ライブの全貌とXP開発~

  • 出水 厚輝さん / 大西 智也さん / 山下 真一郎さん

ヤフオク

  • 1999年から続くCtoC ECの老舗
  • 一分間に2000個出品
  • 年間8800億円の流通

ヤフオクライブ

  • リアルタイムに動画配信しながらオークションできるサービス

バックエンド

リアルタイムコミュニケーションシステムをどう構成するか

  • 不特定多数ユーザの双方向通信
    • いいねとかコメントとか
  • サーバ側からのプッシュ送信
    • 商品の追加/入札/落札
不特定多数ユーザの双方向通信
  • WebSocketで双方向通信実現
  • 膨大なユーザをどう扱うか
    • 複数台のサーバどう同期するか
    • RedisのPubSubを使ってる
サーバ側からのプッシュ送信
  • RedisのPubの部分を使ってる

ヤフオク!の既存機能値どのように共存させるか

アーキテクチャ
  • モノリシック
    • 多人数で開発するとコンフリクト
    • 通信レイテンシは小さい
    • プログラム肥大化
  • マイクロサービス
    • 多人数での並行開発が容易
    • 各プログラムを小さく保てる
    • サーバ間の依存性の管理が複雑化
  • マイクロサービス化へ
バックエンドの構成
  • ヤフオクだけで40機能がある
    • そこにライブの機能を追加
    • 商品へ依存が集中してしまう
    • 更新がいらない情報は各機能がコピーを作ってそれを使う
  • 機能ごとにプラットフォームを選択できる
    • FaaS/PaaS/CaaS/IaaS
    • マイクロサービス化されたからそれぞれ選べる

iOSアプリ

  • WebSocketでやりとり
  • リアルタイムなUIの変化
    • タイミング
    • 画面の状態
    • 大量・連続
  • アニメーション
    • 自前で実装
      • ユーザのインタラクションが発生するもの
    • Lottie
      • jsonをもとに作る
      • デザイナーが自由にこだわることができる

分析の取り組み

  • 配信者の声をもとに改善したい
    • 全部見るわけにもいかない
    • 文字起こしする(Speech to Text)
    • それを分析にかける(形態素解析)

開発手法

課題

  • 開発効率低下
  • 品質低下
  • 属人化

解決法

まとめ

  • テストがあれば細かいバグにも気づける
  • テストがあるから自身を持ってリファクタできる