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

6.3K Views

September 02, 23

スライド概要

2023年9月2日に開催されたデブサミ関西の登壇資料です。

【イベント詳細】
Developers Summit 2023 KANSAI
https://event.shoeisha.jp/devsumi/20230902

【セッション概要】
セッションのヤフー・データソリューションは、ヤフーのビッグデータを活用して企業や自治体の課題解決を支援するサービスです。サービスで提供しているデータについて、生成されてから分析に活用されるまでの流れと、DS.INSIGHT、DS.GALLERYといったデータ可視化ツールのシステム構成を紹介します。ヤフーがデータを活用してどんなことをしているかを知りたい方、データ活用に興味がある方、業務においてデータ可視化にこれから取り組みたい方などに聞いていただければと思います。

【紹介したサービスに関するURL】
ヤフー・データソリューションのサービスサイト
https://ds.yahoo.co.jp/

DS.GALLERY
https://ds.yahoo.co.jp/gallery/trend/

DS.INSIGHTの無料トライアル(法人向け)
https://ds.yahoo-net.jp/trial/dsinsight

profile-image

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

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

2.

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

3.

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

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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

13.

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

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

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

32.

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

33.

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

34.

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

35.

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

36.

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

37.

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