Yahoo Japan Tech Conference 2019 参加録
Yahoo Japan Tech Conference 2019
会場の様子
Yahoo JAPAN Tech Conference
— kozzy (@kozzy0919) 2019年1月26日
2019 にきています! #yjcf pic.twitter.com/m4nxvWxqFl
聴講した講演の Summary
ライブクイズ「ワイキュー」を生み出した"内因的モチベーションドリブン"/ワイキューが目指した"楽しい時間を作るデザイン
善積 正伍 / 染矢 沙織
メディアカンパニー メディア統括本部 メディア本部
www.slideshare.net
善積さんパート
🎉ヤフーがワイキューをやる理由
— Shoco Sato (@satoshoco) 2019年1月26日
・いままでにない利用想起への挑戦
・新たな利用者層へのリーチ
・メディアから行動するきっかけ作り#yjtc #yjtcA
スマートフォン市場の頭打ち、アプリのインストールコストの増大によって戦いの場は単体から全体に変わっている #yjtcA
— kozzy (@kozzy0919) 2019年1月26日
「内因的モチベーション」でアプリを使ってもらって、「内因的モチベーション」で開発も進めていきたい #yjtcA
— kozzy (@kozzy0919) 2019年1月26日
自身のミッション、プロダクト、会社のミッションの重ね合わせ大事 #yjtcA
— kozzy (@kozzy0919) 2019年1月26日
プロダクト と ペインポイント(こういう場面で不便) の関係性がわいキューには <ない> ...!ので、MLP(Minimum Lovable Product)による仮説検証を進めた #yjtcA
— kozzy (@kozzy0919) 2019年1月26日
MLPによって、3日間で計2000人がルームに参加、ミーティングが中断(いい意味で)、フロアがざわつく(いい意味で)といったモーメントを生み出すことができた。 #yjtcA
— kozzy (@kozzy0919) 2019年1月26日
小さくても成功体験はモチベーションあがる。自信にもつながる#yjtcA #yjtc
— じょみお (@joooi13) 2019年1月26日
社内ワイキューは何百人もの人が同じオフィスで同時にワイワイしてるのが楽しくて、大きな会社の強み感じた #yjtc #yjtcA
— Kazumasa Kumamoto (@kumamo_tone) 2019年1月26日
「生配信」「時差との集計」「負荷」「WebView」「データの堅牢性」・・・多くのコンポーネントが複雑に絡むことから、リリース時期を見直し。リリース延期に伴い、「過去の成功体験も時が経てば慣れる」というモチベーションの賞味期限があることを実感。 #yjtc #yjtcA
— kozzy (@kozzy0919) 2019年1月26日
やらなくてもわかること,やらないとわからないことは事前に分解してMLPを組み立てる #yjtc #yjtcA
— おっち (@ottijp) 2019年1月26日
細かい仮説検証を通じて、プロダクトの質だけでなくて、リリース前に成功体験をチーム全体で積むことになり、内因的モチベーションの向上につなげた #yjtc #yjtcA
— Kazumasa Kumamoto (@kumamo_tone) 2019年1月26日
成功体験の因数分解もPMのお仕事。みんなのモチベーションを考える。小さな成功体験をさせてあげて、モチベーションをあげ、開発スピードをあげる。 MLPは仮説検証でもあり、チーム育成でもある。メンバーのモチベーションまで設計する。#yjtc #yjtcA pic.twitter.com/pwgpfSk8XV
— Shoco Sato (@satoshoco) 2019年1月26日
MLPは仮説検証でもあり、<チーム育成>でもある。チームマネジメントする上ではメンバーのモチベーションを併せて考えることまで設計する。(マネージャーの仕事って大変だなあ・・・) #yjtc #yjtcA
— kozzy (@kozzy0919) 2019年1月26日
まとめ:内因的モチベーションドリブンによって仮説検証とチームビルディングの両立、マイルストーンの最適化、モチベーション伝播によるスピードアップ、心が折れない拠り所の確立、といったメリットはあった。でもモチベーションは人それぞれ…! #yjtc #yjtcA
— kozzy (@kozzy0919) 2019年1月26日
染矢さんパート
引き続き、ワイキューのUI/UXデザイナー 染矢さんのお話😉
— Shoco Sato (@satoshoco) 2019年1月26日
ワクワクとドキドキを共有することができる、パーティをモチーフとしてデザイン🎉パーティ会場を意識🎉#yjtc #yjtcA pic.twitter.com/mBfNkXpLri
パーティー会場の構成要素には「食事」「テーブルセッティング」「司会進行」「ウェイター」といったものがあるように、わいキューにも「問題」「ビジュアルデザイン」「MC」「台本」といった構成要素をセット。 #yjtc #yjtca
— kozzy (@kozzy0919) 2019年1月26日
ユーザー体験って結局いろんな人が考えて意見を出すべきだと思うんだ(小声)#yjtca
— DANCING BURNING SOUL (@onira666) 2019年1月26日
ライブ動画配信サービス「ワイキュー」の作り方 〜優れた社内技術で実現する、少人数のサービス開発〜
石井 直矢
メディアカンパニー メディア統括本部 メディア本部
www.slideshare.net
Yahoo!Inc由来のYUIから、React with Redux で書き換えた。 #yjtc #yjtcB
— Yohei TSUJI (@crossroad0201) 2019年1月26日
社内プラットフォームを利用しているため、リバースプロキシといったサービスの開発に注力できているため、3人での開発が実現できている。#yjtc #yjtcB
— kozzy (@kozzy0919) 2019年1月26日
HLS = HTTP Live Streaming 動画プラットフォーム #yjtc #yjtcB
— こまっち@クラウド(インフラ)仕事希望! (@komacchi_u) 2019年1月26日
[https://twitter.com/kamykn/status/1089057813953884161:embed]
#yjtc #yjtcB https://t.co/pQZb402oSA
— しばいぬ (@shIbaInu42) 2019年1月26日
ワイキューの裏側ではCassandra, Oracle, Redis などのストレージを使用。これも社内プラットフォームで数クリックで運用可能な状態に持ってける(かなりフロントエンド開発に集中できそうな環境・・・!) #yjtc #yjtcB
— kozzy (@kozzy0919) 2019年1月26日
#yjtcB CassandraとかRedisとか。OracleExadataとかヤフーでよく使ってる模様。
— せのお@サブ (@senooken) 2019年1月26日
web開発とくゆうのソフトなのかしら。
メッセージキューにあるさ?というのを使っていて貢献もしているとか。
ポイントの配布処理はMessage queueに保存しておいて、サーバリソースに余裕があるときに逐次処理。ポイントに関わるデータはより堅牢なOracleに保存している。#yjtc #yjtcb
— 1coin (@1coin178) 2019年1月26日
ベースプラットフォーム(インフラも含め)は、すでに作られているから、フロントエンドエンジニアは開発に集中できる。ベースのインフラは独自DC?? #yjtc #yjtcB
— こまっち@クラウド(インフラ)仕事希望! (@komacchi_u) 2019年1月26日
・プロフェッショナルとして楽しく価値を発揮する。
— Yohei TSUJI (@crossroad0201) 2019年1月26日
・ユーザのニーズ、会社の要求、自分の得意/興味 の3つが重なるところでバリューを発揮できる。#yjtc #yjtcB
#yjtcB 大企業特有のやり方だな。プラットフォームを用意して、部門を分けて分業するの。細分化してその道の専門家を集めて投入するの。
— せのお@サブ (@senooken) 2019年1月26日
効率はいいのかもしれないけれど。
今回は質問したいことないか。
役割がしっかりと分かれてそれぞれのモチベーションで開発している #yjtc #yjtcB pic.twitter.com/8G0Wcgv5ec
— ひでお (@dehio_) 2019年1月26日
豊かなスポーツライフの実現を目指す、スポーツナビのシステムアーキテクチャ
北村 央斗
メディアカンパニー メディア統括本部 バーティカルメディア本部
www.slideshare.net
スポーツナビ https://t.co/PE0JkRNwES #yjtc #yjtcB
— kozzy (@kozzy0919) 2019年1月26日
スポナビはデータ提供元とデータ連携システムで連携している。入稿元の数だけプラグインがある #yjtc #yjtcB
— ひでお (@dehio_) 2019年1月26日
スポナビのお話。DBは競技ごとに用意されていて、
— じょみお (@joooi13) 2019年1月26日
競技に特化した情報を提供しやすくなっている
#yjtc #yjtcB
プロ野球速報システムは、Redis & Node.js / https://t.co/Z7WqEFAvyW で実現されている #yjtc #yjtcB
— kozzy (@kozzy0919) 2019年1月26日
プラグインは独立性が高い分、共通化が難しい作りになってしまっている。ひとつ修正するために3箇所も修正が必要となってしまっている #yjtc #yjtcB
— ひでお (@dehio_) 2019年1月26日
スポーツイベントで盛り上が理に応じて大量のアクセスが発生する。これに対応するためにChefを利用して、負荷を予測した上で仮想サーバの自動デプロイを行った上で負荷分散、増強を行うようにしている(スケールアウト、スケールアップ) #yjtc #yjtcB
— kozzy (@kozzy0919) 2019年1月26日
#chef を利用して、仮想サーバの構築を簡略化。
— こまっち@クラウド(インフラ)仕事希望! (@komacchi_u) 2019年1月26日
オートスケーリングが重要になってくるんじゃないのかな。アクセス数の解析もIoTで解析してもいい気がする。
#yjtc #yjtcB
拡張性あるデザインシステム構築から挑む、GYAO!のウェブリニューアル
浜田 真成
#yjtcA リファクタリングばかりやってた人の模様。
— せのお@サブ (@senooken) 2019年1月26日
GYAOは未来に向けて刷新している。
GYAOは公式無料動画サービス。実は古い。ヤフーに統合されて十年。
大きく2個やる。
1. レガシーシステムからの脱却。モノリシックコードの改善
2. 事業目標の達成
ミッション:レガシーWebシステムからの脱却、既存プロダクトを維持して事業目標を達成する。 -> これをどう達成するか? #yjtc #yjtcA
— kozzy (@kozzy0919) 2019年1月26日
#yjtcA チームは5-6人。フロント一人。
— せのお@サブ (@senooken) 2019年1月26日
敵1. 継ぎ足しでできた膨大なコード。ロジックの分散。
敵2. テストの欠如と手動リリース
敵3. HTMLの非セマンティック
敵4. UIの非一貫性
敵5. 表示速度
敵6. 仕様の欠如
敵7. 複雑なワークフロー
Webアーキテクチャの一括リプレースをすると二重運用が発生するため、少人数の現場では厳しかったので、段階移行の方法を採用した #yjtc #yjtcA
— kozzy (@kozzy0919) 2019年1月26日
#yjtcA アーキテクチャの段階移行。
— せのお@サブ (@senooken) 2019年1月26日
ここは参考になるかも。
分解、個別改善、全体最適。 https://t.co/HkQqya0dZk
#yjtcA ドメイン駆動設計で、クリーンアーキテクチャー。そしてAtomicDesign。
— せのお@サブ (@senooken) 2019年1月26日
ドメイン駆動設計をどう勉強したか質問しようか…
Phase1. AtomicDesign をベースとして、表示要素を分解しコンポーネント化
— kozzy (@kozzy0919) 2019年1月26日
Phase2. 各要素をリファクタリング、デザインシステムの導入
Phase3. PaaS環境への移行/自動化/SPA化
cf. Atomic Design https://t.co/bacCSfSj7F… #yjtc #yjtcA
パフォーマンス指標として、遅延とユーザ感覚をマッピングした RAILモデルがある。これをもとに、サービスの特色を入れた独自指標を定義 FYI. https://t.co/HiT3dYYq1Q #yjtc #yjtcA
— kozzy (@kozzy0919) 2019年1月26日
#yjtcA パフォーマンス指標のRAILモデル。ユーザーをベースとした指標。
— せのお@サブ (@senooken) 2019年1月26日
初期表示。FMP/TTI
クリティカルレンダリングパス。
webpackで圧縮してCDN配信。
CriticalCSS
AMPを使うようにしてパフォーマンス改善#yjtc #yjtca
— ozaki25 (@ozaki25rn) 2019年1月26日
コンポーネント分解は GeneralElectric社で使用されている Predix Design System (FYI https://t.co/q6i8KJ4SiR) を踏襲して、Page/Layout/Components/Basic として定義 #yjtc #yjtcA
— kozzy (@kozzy0919) 2019年1月26日
コンポーネント分解は GeneralElectric社で使用されている Predix Design System (FYI https://t.co/q6i8KJ4SiR) を踏襲して、Page/Layout/Components/Basic として定義 #yjtc #yjtcA
— kozzy (@kozzy0919) 2019年1月26日
ポイント
— kozzy (@kozzy0919) 2019年1月26日
1. 分類したコンポーネント間でのスタイルの影響を階層ごとに閉じること
2. 一意な出力を JSON-Schema で定義することで、フロント/バックで同時並行で開発#yjtc #yjtcA
<ピュアみ by @kaidempa>
— kozzy (@kozzy0919) 2019年1月26日
同じデータを入れたら、必ず同じ表示となるコンポーネントを作成すること(スナップショットテストの実現ができる) #yjtc #yjtcA
#yjtcA データ型をJSON SCHEMAで表現することで、stubの生成や分業を補助。
— せのお@サブ (@senooken) 2019年1月26日
次にデザインシステム。
マテリアルとかいろいろある。
これまでのワークフローだと、デザインやったり仕様作ったりで、間に障壁があると止まる。
デザインシステム作成のポイント
— kozzy (@kozzy0919) 2019年1月26日
1. 常に「コンポーネント」の粒度で考える
2. 「信頼できる唯一の情報源」を作る
3. UI/UX の「意図」を残していく
4. 小さく初めて徐々に広げる#yjtc #yjtcA
組織を変えるために・・・
— kozzy (@kozzy0919) 2019年1月26日
1. 組織での運用を考える
2. システムの考え方を普及させる(最も難しい、担当ごとのメリットを明文化するようにした)
3. システムを学ぶバック体制 #yjtc #yjtcA
# Web 刷新のポイント
— kozzy (@kozzy0919) 2019年1月26日
* 技術洗濯と移行プロセスを見極めよう
* デザインシステムによってプロセスを構築する #yjtc #yjtcA
CtoC配信サービスのバックエンドからiOSアプリまで ~ヤフオク!ライブの全貌とXP開発~
出水 厚輝 / 大西 智也 / 山下 真一郎
www.slideshare.net
出水さんパート
1. サービス紹介とバックエンド
— kozzy (@kozzy0919) 2019年1月26日
2. iOS アプリ
3. 分析の取り組み
4. 開発手法(ライブコーディング付!) #yjtc #yjtcA
ヤフオクって20年近く続くサービスなんだ…割とながいんだね!?#yjtc #yjtcA
— いりあ (@elsa3333) 2019年1月26日
ニコ動みたいにコメント流しながら、リアルタイムコミュニケーション、リアルタイムオークションができるのがヤフオクライブ。楽しそう #yjtc #yjtcA
— kozzy (@kozzy0919) 2019年1月26日
プッシュ機能の実現方法、HTTPポーリング or WebSocket。ヤフオクライブでは、プッシュ機能でも Redis を pubメッセージング × WebSocketを用いて実現 #yjtc #yjtcA
— kozzy (@kozzy0919) 2019年1月26日
redis は ただのオンメモリキャッシュストレージじゃないで! -> リアルタイム処理の中心となる通信経路としても利用できる #yjtc #yjtcA
— kozzy (@kozzy0919) 2019年1月26日
マイクロサービスアーキテクチャにすることでのメリット
— kozzy (@kozzy0919) 2019年1月26日
1. 多人数での並行開発が容易に
2. 各プログラムを小さく単純に保てる
デメリット
1. サーバー間の依存性の管理が複雑化#yjtc #yjtcA
機能を分散することで、そこだけ隔離みたいなこともできるから小さい構成でも有用ということか(あってるか不安)#yjtc #yjtcA
— いりあ (@elsa3333) 2019年1月26日
大西さんパート
HTTP Live Streaming を利用してリアルタイム性を実現。遅延があるので、これを考慮してサービスを設計している #yjtc #yjtcA
— kozzy (@kozzy0919) 2019年1月26日
アニメーションは Core Animationでの自前実装, Lottie(ライブラリ)よる実装を使用している FYI. https://t.co/Do5qjZXi9w #yjtc #yjtcA
— kozzy (@kozzy0919) 2019年1月26日
Yahoo 全社的にデータドリブンな開発が推奨されている。YJVOICEという音声認識技術を利用して Speech-to-Text を実現してキーワード抽出、形態素解析を行なってデータを収集、これをサービス改善に繋げて行きたい #yjtc #yjtcA
— kozzy (@kozzy0919) 2019年1月26日
山下さんパート
Yahoo 全社的にデータドリブンな開発が推奨されている。YJVOICEという音声認識技術を利用して Speech-to-Text を実現してキーワード抽出、形態素解析を行なってデータを収集、これをサービス改善に繋げて行きたい #yjtc #yjtcA
— kozzy (@kozzy0919) 2019年1月26日
エクストリームプラグラミングのうち、ペアプロミングとテスト駆動開発が特に効果が高かった。具体的にはリリースの回数が増加、不具合数が減少。そして、属人化の軽減が実現できた。(すげー) #yjtc #yjtcA
— kozzy (@kozzy0919) 2019年1月26日
テスト書く必要ありますか?
— ozaki25 (@ozaki25rn) 2019年1月26日
- 未来に渡ってコードを書くにはクリーンでなければならない
- そのためには常にリファクタ
- そのためにはテスト#yjtc #yjtca
ペアプロによって、書くコードの量は低下し、アウトプットの質と量は向上する。そして、永続的に素早く開発するためにテストを書く。 #yjtc #yjtcA
— kozzy (@kozzy0919) 2019年1月26日
820Labsと呼ばれる iMac, 昇降デスク完備の環境で画面をミラーリングしながらペアプロするという素敵な環境。事務作業とかもペアでやっている。作業効率下がりそうという印象より、モチベーション保てて効率的にも、心理的にも良さそう。 #yjtc #yjtcA
— kozzy (@kozzy0919) 2019年1月26日