ヤフーで取り組むデータ可視化の流れ（FaaSで小さく始めるデータ準備から、Nuxtでのツール開発まで） #devsumi

#devsumi Developers Summit 2023 KANSAI ヤフーで取り組むデータ可視化の流れ （FaaSで⼩さく始めるデータ準備から、Nuxtでのツール開発まで） 2023年9⽉2⽇ ヤフー株式会社 猪⽬ 美紗 (C)Yahoo Japan 1

猪⽬ 美紗 Misa Inome ヤフー株式会社 ⼤阪オフィス所属 データソリューション事業 エンジニア データ可視化やサービスサイトの開発を担当 ©(C)Yahoo 2021 YahooJapan Japan Corporation All rights reserved. X（旧Twitter） @zzzmisa GitHub zzzmisa 2

ヤフー・データソリューションの紹介 データが分析に活⽤されるまでの流れ データ可視化の開発運⽤コストを下げるには ©(C)Yahoo 2021 YahooJapan Japan Corporation All rights reserved. 3

ヤフー・データソリューションの紹介 データが分析に活⽤されるまでの流れ データ可視化の開発運⽤コストを下げるには ©(C)Yahoo 2021 YahooJapan Japan Corporation All rights reserved. 4

ヤフー・データソリューションのデータを使った アイスブレイク (C)Yahoo Japan 5

クイズ あるワードと共に検索されているワードです 当てはまるワードはなんでしょう ？ (C)Yahoo Japan ※ 2023年7⽉30⽇を基準⽇に直近1年間のデータ 6

答え あるワードと共に検索されているワードです 当てはまるワードはなんでしょう 万博 (C)Yahoo Japan 7

クイズ ある検索ワードの推移です 当てはまるワードはなんでしょう ？ 毎年12⽉26⽇前後が 検索のピーク 2020/12/26 (C)Yahoo Japan 2021/12/26 2022/12/26 8

答え ある検索ワードの推移です 当てはまるワードはなんでしょう プロポーズされたら 毎年12⽉26⽇前後が 検索のピーク 2020/12/26 (C)Yahoo Japan 2021/12/26 2022/12/26 9

ヤフー・データソリューションとは クイズで登場したような データが⾒られます！ (C)Yahoo Japan 10

ヤフー・データソリューションのデータ可視化サービス (C)Yahoo Japan ヤフーのビッグデータを 無料で⾒られる 分析できるデスクリサーチツール データ可視化コンテンツ 11

ヤフー・データソリューションの紹介 データが分析に活⽤されるまでの流れ データ可視化の開発運⽤コストを下げるには ©(C)Yahoo 2021 YahooJapan Japan Corporation All rights reserved. 12

⽣成から活⽤までのデータの流れ API (C)Yahoo Japan 13

⽣成から活⽤までのデータの流れ API ユーザーの操作 • ページ閲覧 • リンククリック・検索・購⼊などのアクション…etc. (C)Yahoo Japan 14

⽣成から活⽤までのデータの流れ API ロギング API • サービス横断で集計できるよう形式を揃えたログや サービス固有のログを送信 (C)Yahoo Japan 15

⽣成から活⽤までのデータの流れ API データレイク • ヤフーの多種多様かつ膨⼤なデータをまとめて保管 • Hadoopを使⽤ (C)Yahoo Japan 16

⽣成から活⽤までのデータの流れ API データウェアハウス, データマート • データを使いやすく整理し直したデータベース • データソリューションでは、分析⽤にTeradata、 可視化ツール⽤にオブジェクトストレージ、Cassandraなどを使⽤ (C)Yahoo Japan 17

⽣成から活⽤までのデータの流れ API 可視化ツール • データを理解しやすいようにグラフ化やダッシュボード化 (C)Yahoo Japan 18

⽣成から活⽤までのデータの流れ API アナリスト • 可視化ツールを⾒て分析 • データベースから直接データを取得して分析 (C)Yahoo Japan 19

⽣成から活⽤までのデータの流れ API 次のスライドから可視化ツール部分を掘り下げて紹介 (C)Yahoo Japan 20

可視化ツールになるまでのデータの流れ API 3パターン紹介 (C)Yahoo Japan CMS FaaS API 21

可視化ツールになるまでのデータの流れ API CMS FaaS DS.INSIGHT API • Nuxtで作られた動的Webアプリケーション BFFでデータ取得APIを叩く • データ可視化には主にHighchartsを利⽤ (C)Yahoo Japan ※ BFF: Backends For Frontends 22

可視化ツールになるまでのデータの流れ API CMS FaaS DS.GALLERY • FaaSで集計プログラムを定期実⾏ 出⼒データはCMSに配置し、サイトから読み込む API ▶ データを予め⽤意しているので静的でシンプル (C)Yahoo Japan ※ FaaS: Function as a Service. スクリプトの実⾏環境 23

可視化ツールになるまでのデータの流れ API ユーザーによる可視化 CMS FaaS API • 提供中のデータ取得APIを使えば ユーザー⾃⾝によるオリジナルの可視化も可能 (C)Yahoo Japan 24

可視化ツールになるまでのデータの流れ API CMS FaaS API 次のスライドからDS.INSIGHTのシステム構成を紹介 (C)Yahoo Japan 25

DS.INSIGHTシステム概要 機能1 BFF クライアント 機能2 クライアント BFF API郡 機能3 クライアント ツール画⾯ (C)Yahoo Japan BFF ※ BFF: Backends For Frontends 26

DS.INSIGHTシステム概要 機能毎にレポジトリやメンバーも分かれている ▶ フットワーク軽く新機能の追加が可能 デザインシステムを⽤意 ▶ 全プロジェクト⼀貫性のあるデザインを実現 (C)Yahoo Japan 27

ヤフー・データソリューションの紹介 データが分析に活⽤されるまでの流れ データ可視化の開発運⽤コストを下げるには ©(C)Yahoo 2021 YahooJapan Japan Corporation All rights reserved. 28

データ更新頻度の検討 ⾼ 低 スナップショットでOK 実装例 • データを ⼀回だけダウンロード その場限りの可視化 週⼀回 • データ集計を⾏う スクリプトの定期実⾏ • Tableauなら データ抽出の定期実⾏ 開発運⽤コスト (C)Yahoo Japan ⼩ リアルタイム • システムの裏で APIリクエスト • Tableauなら データソースへのライブ接続 開発運⽤コスト ⼤ 29

使うデータ量の検討 多 少 少量のデータで ちょっとした可視化 実装例 • 決まったデータを読み込む 静的ウェブサイト • エクセルで可視化 開発運⽤コスト (C)Yahoo Japan ⼩ ⼤量のデータから 複雑な絞り込みや検索にも対応 • 裏でAPIリクエストを⾏う 動的ウェブアプリケーション • BIツールで可視化 開発運⽤コスト ⼤ 30

データの⾒せ⽅の検討 特殊 ⼀般的 ⼀般的なグラフでOK ダッシュボード化する 少しリッチに⾒せたい • エクセルで可視化 • BIツールで可視化 実装例 開発運⽤コスト (C)Yahoo Japan ⼩ 今までにない 可視化表現を創造する • 可視化コンテンツを ⾃分で開発 開発運⽤コスト ⼤ 31

ユーザーに合わせた可視化表現の例 例: トレンドワードランキング ⼀般向け (C)Yahoo Japan データ活⽤したい⼈向け 32

気を付けること 1. データ更新頻度 • データ更新頻度が⾼いと開発運⽤が⼤変 そこまで頻繁に確認しなければならないか ▶ 2. 使うデータ量 • データ量が多いと開発運⽤が⼤変 過去データまで必要か、対象を絞れないか ▶ 3. データの⾒せ⽅ 更新頻度削減のために要件を絞る 使うデータ量削減のために要件を絞る • 新しい可視化表現を開発するのは⼤変 ▶ ⼀般的なグラフで表現 ユーザーに合わせた表現も⼤事 (C)Yahoo Japan 33

気を付けること 4. データの調達 • データの収集・加⼯から⾏うのは⼤変 ▶ 5. データ取得APIの利⽤料 • 従量課⾦制APIのライブ接続は利⽤料が⾼額に ▶ 6. 社外公開 すぐに使えるデータやAPIがないか探してみる 定期実⾏で節約 • 社外秘データが含まれていないか、 差別⽤語・アダルトワードはどうする ▶ 公開NGデータが含まれていないかチェック (C)Yahoo Japan 34

まとめ データ可視化の実現⽅法は多種多様 企画の段階から要件を絞り込んで できるだけ⼩さく始めてみる (C)Yahoo Japan 35

©(C)Yahoo 2021 YahooJapan Japan Corporation All rights reserved. 36

【告知】本セッションの アフターイベント を ヤフー⼤阪オフィス で開催します ヤフーのデータエンジニア3⼈に聞く ! データ可視化の裏側 2023.09.14（THU） 19:00 – 21:30 ヤフー⼤阪オフィス（グランフロント南館 37F） 参加費無料 詳細・申し込み はこちらから 交流会あり 37