More Related Content Similar to DIY Akamai Globe in 50 Minutes (20) More from Taisuke Yamada (20) DIY Akamai Globe in 50 Minutes1. 1 | © 2019 Akamai | Confidential
DIY Akamai Globe
in 50 Minutes
Taisuke Yamada
<tayamada@akamai.com>
2. 2 | © 2019 Akamai | Confidential
今日のお題: Akamai Globe
3. 3 | © 2019 Akamai | Confidential
今日のお題: Akamai Globe
最近のAkamai APIを使って、自分専用の
Akamai Globe(みたいなもの)を作ってみよう!
4. 4 | © 2019 Akamai | Confidential
このセッションのゴール
• データ可視化の楽しさを知ってほしい
• 既成ツールにない機能も案外作れると感じてほしい
• ついでに、Akamai APIももっと使ってみてほしい!
5. 5 | © 2019 Akamai | Confidential
このセッションのゴール
• データ可視化の楽しさを知ってほしい
• 既成ツールにない機能も案外作れると感じてほしい
• ついでに、Akamai APIももっと使ってみてほしい!
ついでに、Akamai APIももっと
使ってみてほしい!
6. 6 | © 2019 Akamai | Confidential
今日お伝えしたいこと
「巨人の肩に乗ろう」
7. 7 | © 2019 Akamai | Confidential
巨人の肩に乗る
「私がさらに遠くを見ることが
できたとしたら、それは単に
私が巨人の肩に乗っていたからです。」
https://ja.wikiquote.org/wiki/%E3%82%A2%E3%82%A4%E3%82%B6%E3%83%83%E3%82%AF%E3%83%BB%E3%83%8B%E3%83%A5%E3%83%BC%E3%83%88%E3%83%B3
8. 8 | © 2019 Akamai | Confidential
現代ITの巨人 「私がさらに遠くを見ることが
できたとしたら、それは単に
私が巨人の肩に乗っていたからです。」
https://ja.wikiquote.org/wiki/%E3%82%A2%E3%82%A4%E3%82%B6%E3%83%83%E3%82%AF%E3%83%BB%E3%83%8B%E3%83%A5%E3%83%BC%E3%83%88%E3%83%B3
Cloud Computing
9. 9 | © 2019 Akamai | Confidential
現代ITの巨人 「私がさらに遠くを見ることが
できたとしたら、それは単に
私が巨人の肩に乗っていたからです。」
https://ja.wikiquote.org/wiki/%E3%82%A2%E3%82%A4%E3%82%B6%E3%83%83%E3%82%AF%E3%83%BB%E3%83%8B%E3%83%A5%E3%83%BC%E3%83%88%E3%83%B3
Cloud Computing
Open Source Software
10. 10 | © 2019 Akamai | Confidential
そういうわけで、今日の話は・・・
1. まず、クラウドサービスを使って、ノープログラミングでの
データ可視化をやってみよう!
2. 次に、オープンソースソフトウェアを使って、簡単な
プログラミングだけでAkamai Globeを作ってみよう!
3. おまけに、Akamai Globeにはない機能まで追加してみよう!
11. 11 | © 2019 Akamai | Confidential
クラウドサービスの肩に乗る
12. 12 | © 2019 Akamai | Confidential
大変・面倒なことはクラウドサービス送りの時代
• ストレージ
• DAS, NAS, SAN,
ObjectStorage, ...
• データベース
• SQL-DB, KVS, DocumentDB, ...
• サーバ、処理系
• VM, Container, Runtime, Function
• ネットワーク
• LAN, WAN, VPN
• クラスタ構築・運用
• トレーシング
• ロギング
• 認証・認可
• メッセージキュー
• プッシュ通知
• 各種APIサービス
• データ分析・可視化
13. 13 | © 2019 Akamai | Confidential
大変・面倒なことはクラウドサービス送りの時代
• ストレージ
• DAS, NAS, SAN,
ObjectStorage, ...
• データベース
• SQL-DB, KVS, DocumentDB, ...
• サーバ、処理系
• VM, Container, Runtime, Function
• ネットワーク
• LAN, WAN, VPN
• クラスタ構築・運用
• トレーシング
• ロギング
• 認証・認可
• メッセージキュー
• プッシュ通知
• 各種APIサービス
• データ分析・可視化
14. 14 | © 2019 Akamai | Confidential
やってみよう
3クラウド連携のノープログラミング可視化
Amazon Simple Storage
Service (S3)
Google BigQuery
15. 15 | © 2019 Akamai | Confidential
協力・データ提供: https://www.scalemates.com/
16. 16 | © 2019 Akamai | Confidential
実は弊社社員協力のプラモ趣味サイトで、そこそこの
トラフィックがあり、当然アカマイ化されている
協力・データ提供: https://www.scalemates.com/
17. 17 | © 2019 Akamai | Confidential
素材: Akamai DataStream API
カスタマイズした形で、アカマイ基盤でのログ、パフォーマンスデータ、
エラー、発生イベントを生ログ・集約データの形でPush/Pullアクセスできる
18. 18 | © 2019 Akamai | Confidential
Akamai as DataSourceの歴史
• Log Delivery Service (LDS)
• 生ログ蓄積・管理サービス
• 指定先ストレージにバッチ転送 or メール(歴史を感じる・・・)
• Download Receipt
• ログ蓄積ではなくアクセス情報をストリーム的に流してくれる(Push)
• Akamai Cloud Monitor
• DR同様だが、より情報・形式がリッチな形で形式も扱いやすい(Push)
• Akamai DataStream
• サーバサイドの生ログでも要約データでも好きな方を収集できる
• ストリーム的にPushもするし、アカマイ側で集積しているデータをPullもできる
• Akamai mPulse API
• クライアント側から採取したデータにPull方式でアクセスできる
19. 19 | © 2019 Akamai | Confidential
Akamai as DataSourceの歴史
• Log Delivery Service (LDS)
• 生ログ蓄積・管理サービス
• 指定先ストレージにバッチ転送 or メール(歴史を感じる・・・)
• Download Receipt
• ログ蓄積ではなくアクセス情報をストリーム的に流してくれる(Push)
• Akamai Cloud Monitor
• DR同様だが、より情報・形式がリッチな形で形式も扱いやすい(Push)
• Akamai DataStream
• サーバサイドの生ログでも要約データでも好きな方を収集できる
• ストリーム的にPushもするし、アカマイ側で集積しているデータをPullもできる
• Akamai mPulse API
• クライアントから採取したデータにPull方式でアクセスできる
歴史的には様々な提供形態がありますが、生ログ保管用のLDS、
そして下2つのDataStreamとmPulse APIが主力となります。
20. 20 | © 2019 Akamai | Confidential
Akamai DataStream API
• リアルタイムでアカマイ基盤からのログ・モニタリング情報を取得可能
• 詳細な生ログ、集約された統計情報のどちらにも対応
• 設定で伝達・取得項目を選択し、きめ細かく制御可能
• Push API
• 規定のエンドポイント・サービスにJSON形式で送り込む
• Splunk, SumoLogic, Amazon S3に対応
• Pull API
• 最大24h分のデータから、任意のデータをJSON形式で取得可能
21. 21 | © 2019 Akamai | Confidential
Akamai mPulse API
• リアルタイムでウェブブラウザ側からのモニタリングデータを提供
• ブラウザ側でのモニタリングのため、直帰率などの行動指標も取得可能
• 詳細な時系列データ、集約された統計情報の両方に対応
• REST APIのクエリパラメータで多様な絞り込みに対応
• Pull APIのみサポート
• 最大13ヶ月分の蓄積データからJSON形式でデータ取得可能
Akamai DataStreamがアカマイ基盤側から見たデータ、
Akamai mPulse APIがエンドユーザー(ブラウザ)側から見たデータ、と
ちょうど対になっている形となります。
22. 22 | © 2019 Akamai | Confidential
はじめよう: 登場人物
Amazon Simple Storage
Service (S3)
Google BigQuery BigQuery Geo Viz
23. 23 | © 2019 Akamai | Confidential
動作の流れ (1/3)
Amazon Simple Storage
Service (S3)
Google BigQuery BigQuery Geo Viz
Akamai DataStream のデータプッシュ機能を使い、
Amazon S3にリアルタイムにデータ投入を行う
①
24. 24 | © 2019 Akamai | Confidential
動作の流れ(2/3)
Amazon Simple Storage
Service (S3)
Google BigQuery BigQuery Geo Viz
GBQのData Transfer機能を
使い、適時S3上のデータを
インポートする
①
②
25. 25 | © 2019 Akamai | Confidential
動作の流れ(3/3)
Amazon Simple Storage
Service (S3)
Google BigQuery BigQuery Geo Viz
BigQuery Geo Viz より
GBQにクエリを発行し、
取得したデータをマッピング
①
②
③
26. 26 | © 2019 Akamai | Confidential
ノープログラミング。でも設定はあります。
• Akamai DataStream
• Raw DataStream の Push 設定
• Amazon S3
• バケットの用意と読み書き用のアクセスキー情報
• Google BigQuery
• DataStreamデータの保存先テーブル(スキーマ定義)
• S3からのData Transfer設定
• BigQuery Geo Viz
• 可視化したい情報を抜いてくるためのクエリ
• 可視化パラメータ(描画色や大きさなど)
27. 27 | © 2019 Akamai | Confidential
Akamai DataStreamの設定
28. 28 | © 2019 Akamai | Confidential
Akamai DataStreamの設定
DataStreamからS3のどのバケット・
フォルダにPushするのかを指定し、
AWS側で発行したアクセスキーを
あわせて設定します。
29. 29 | © 2019 Akamai | Confidential
Akamai DataStreamの設定
最後に、ログデータのどのフィールドを
プッシュ送信するか指定します。
サンプリングレートも1-100%の間で
指定できるので、ストレージ側の容量に
あわせたデータ取得が可能です。
30. 30 | © 2019 Akamai | Confidential
Google BigQuery の設定
今度は最終的にデータを入れるGBQ側で
テーブルを作成します。
ここでのポイントは、DataStreamから
プッシュされるJSONデータの構造に
合わせて、GBQでサポートされている
RECORD型をテーブル定義に使うことです。
31. 31 | © 2019 Akamai | Confidential
DataStream JSONとBigQuery Table Schema
JSONのような構造のあるデータは、RECORD型に
マッピングすると変換ルーチン不要で取り込める
32. 32 | © 2019 Akamai | Confidential
GBQ Data Transfer 設定
〜〜
テーブル定義ができれば、後は
転送設定だけです。
設定画面の下にある形式・許容
エラー数・未知データのスキップ
設定も忘れずに!
取得データはJSON形式
多少のエラーでは止めない
未知データはスキップ
33. 33 | © 2019 Akamai | Confidential
転送結果
34. 34 | © 2019 Akamai | Confidential
3クラウド連携の可視化をしてみよう!
DEMO
35. 35 | © 2019 Akamai | Confidential
36. 36 | © 2019 Akamai | Confidential
37. 37 | © 2019 Akamai | Confidential
可視化完了
38. 38 | © 2019 Akamai | Confidential
まとめ
• ノープログラミングでもここまでできる
• システム間の配管作業、プラレール遊びのような楽しさがある
• 学び:自己記述的なデータでのシステム連結は強力
39. 39 | © 2019 Akamai | Confidential
ところで・・・
40. 40 | © 2019 Akamai | Confidential
まだ、地球になってないよね?
41. 41 | © 2019 Akamai | Confidential
オープンソースの肩に乗る
42. 42 | © 2019 Akamai | Confidential
現代ITの巨人 「私がさらに遠くを見ることが
できたとしたら、それは単に
私が巨人の肩に乗っていたからです。」
https://ja.wikiquote.org/wiki/%E3%82%A2%E3%82%A4%E3%82%B6%E3%83%83%E3%82%AF%E3%83%BB%E3%83%8B%E3%83%A5%E3%83%BC%E3%83%88%E3%83%B3
Cloud Computing
Open Source Software
43. 43 | © 2019 Akamai | Confidential
世の様々なサービスで使われるOSS
サービス
オープンソースな
ミドルウェア・ライブラリ・OS・
運用管理基盤・etc・etc・・・
サービスだけ使っていると
標準提供されていないものが
欲しい場合に詰んでしまう。。。
44. 44 | © 2019 Akamai | Confidential
世の様々なサービスで使われるOSS
サ
ー
ビス
オープンソースな
ミドルウェア・ライブラリ・OS・
運用管理基盤・etc・etc・・・
ないものは作ってみよう!
OSSの肩も結構高いよ!
API
データ
45. 45 | © 2019 Akamai | Confidential
今回利用するOSS
GIO.js C3.js
46. 46 | © 2019 Akamai | Confidential
全体構成
今回作る何か
(*1) 画像はイメージです
47. 47 | © 2019 Akamai | Confidential
全体動作
serverclient
①
今度はDataStream Pull APIを使い、サーバ側より定期的に
ログデータを取得し、GIO.js用のデータに変換・保存します
loop DataStream Pull API
48. 48 | © 2019 Akamai | Confidential
全体動作
serverclient
①
ブラウザでDIY Globe画面を開くと、XHR callでこの定期取得している
データを取得し、GIO.jsで可視化。DIY Akamai Globeの完成です!
loop DataStream Pull API
②
GET page
GET statusloop
③
49. 49 | © 2019 Akamai | Confidential
全体動作
serverclient
①
loop DataStream Pull API
②
GET page
GET statusloop
③
④
GET country?cc=FR
mPulse Query API
せっかくのDIYなので拡張しましょう。
GIO.jsの国選択イベントを拾い、その国での
パフォーマンスデータをXHR call→mPulse
APIのリレーをしつつ取得し、C3.jsで可視化。
これで本当の完成!
50. 50 | © 2019 Akamai | Confidential
DIY Akamai Globeを動かしてみた
DEMO
51. 51 | © 2019 Akamai | Confidential
超はやわかりGIO.js
52. 52 | © 2019 Akamai | Confidential
超はやわかりDIY Akamai Globe
単に非同期ループで定期的に取得した内容を
GIO.jsのaddData APIに渡し続けるだけ
53. 53 | © 2019 Akamai | Confidential
DataStream Raw Log → GIO.js 形式の変換
{
"data": [{
"type": "Raw",
...
"geo": {
"country": "US",
...
},
"network": {
...
"bw": "5000"
},
...
}, {
"type": "Raw",
...
左の DataStream Raw Log (JSON) 形式の
たった2つのフィールドを抜き出し、GIO.jsが
求める{e:, i:, v:}の形式にすればいいだけ
54. 54 | © 2019 Akamai | Confidential
定番JSON加工ツール: jq(1)
$ jq -r '[.data[] | select(.geo.country) | {
"e": .geo.country,
"v": .network.bw | tonumber
}] | group_by(.e) | map({
"i": "GB",
"e": .[0].e,
"v": map(.v) | add
})' < raw.json > status.json
{
"data": [{
"type": "Raw",
...
"geo": {
"country": "US",
...
},
"network": {
...
"bw": "5000"
},
...
}, {
"type": "Raw",
...
左のDataStream Raw LogのJSON形式は上の
7行ほどのjqコマンドでGIO.jsに渡すデータ構造に
変換できる。つまり、ここもプログラミング不要に。
この生成された結果を
GIO.jsでロードする
55. 55 | © 2019 Akamai | Confidential
DataStream API + 変換の全体像
上の3行がDataStream APIを呼び出し、
GIO.js向けのデータ変換をする中核部分
56. 56 | © 2019 Akamai | Confidential
mPulse API + C3.js
地球全体の可視化
選択した国の
データ可視化
DataStream API
mPulse API
57. 57 | © 2019 Akamai | Confidential
mPulse Query API
https://developer.akamai.com/api/web_performance/mpulse_query/v2.html
API 機能
$API_URL/summary ロードタイム中央値などの全体的な集計結果を返す
$API_URL/histogram ロードタイムの区間毎に、そのアクセス件数を分布として返す
$API_URL/sessions-per-page-load-time ロードタイムの区間毎に、その範囲に収まったセッション数を返す
$API_URL/metric-per-page-load-time ロードタイムの区間毎に、その群での直帰率などの追加データを返す
$API_URL/by-minutes 指定日のアクセスについて、分単位でロードタイムを返す
$API_URL/geography 各国別に集計したパフォーマンス集計結果を返す
$API_URL/page-groups ページグループ別に集計したパフォーマンス集計結果を返す
$API_URL/browsers ブラウザ別に集計したパフォーマンス集計結果を返す
$API_URL/bandwidth 帯域別に集計したパフォーマンス集計結果を返す
$API_URL/ab-tests A/Bテストパターン別に集計したパフォーマンス集計結果を返す
$API_URL/timers-metrics 各種パフォーマンス指標や追加指標単位の集計結果を返す
$API_URL/metrics-by-dimension 指定の指標を軸にして、ユーザーの行動計測データを返す
$API_URL/dimention-values 個々の指標で、フィルタ条件として指定できる値の一覧を返す
58. 58 | © 2019 Akamai | Confidential
mPulse Query API
https://developer.akamai.com/api/web_performance/mpulse_query/v2.html
API 機能
$API_URL/summary ロードタイム中央値などの全体的な集計結果を返す
$API_URL/histogram ロードタイムの区間毎に、そのアクセス件数を分布として返す
$API_URL/sessions-per-page-load-time ロードタイムの区間毎に、その範囲に収まったセッション数を返す
$API_URL/metric-per-page-load-time ロードタイムの区間毎に、その群での直帰率などの追加データを返す
$API_URL/by-minutes 指定日のアクセスについて、分単位でロードタイムを返す
$API_URL/geography 各国別に集計したパフォーマンス集計結果を返す
$API_URL/page-groups ページグループ別に集計したパフォーマンス集計結果を返す
$API_URL/browsers ブラウザ別に集計したパフォーマンス集計結果を返す
$API_URL/bandwidth 帯域別に集計したパフォーマンス集計結果を返す
$API_URL/ab-tests A/Bテストパターン別に集計したパフォーマンス集計結果を返す
$API_URL/timers-metrics 各種パフォーマンス指標や追加指標単位の集計結果を返す
$API_URL/metrics-by-dimension 指定の指標を軸にして、ユーザーの行動計測データを返す
$API_URL/dimention-values 個々の指標で、フィルタ条件として指定できる値の一覧を返す
mPulse APIはAPIとしての提供機能がかなり多いため、
本日は概要までの紹介に留めさせていただきます。
59. 59 | © 2019 Akamai | Confidential
mPulse APIの応答をグラフ化する
DataStream+GIO.js よりは若干長くなるが、mPulse APIの呼び出しが145、
それをC3.jsで利用するための変換が146-149、以降の151-行の部分は
すべてグラフ作成と見た目制御の部分で、かなり簡潔に書くことができる。
60. 60 | © 2019 Akamai | Confidential
まとめ
61. 61 | © 2019 Akamai | Confidential
まとめ
• Akamai DataStream 紹介(アカマイ基盤側のログ取得)
• Akamai mPulse API 紹介(クライアント側データの取得)
• クラウドサービスによるノープログラミングでのデータ可視化
• GIO.js, C3.jsといったオープンソースライブラリでのデータ可視化
• 案外簡単なDIY Akamai Globe(もどき)の制作
62. 62 | © 2019 Akamai | Confidential
まとめ
• Akamai DataStream 紹介(アカマイ基盤側のログ取得)
• Akamai mPulse API 紹介(クライアント側収集データの取得)
• クラウドサービスによるノープログラミングでのデータ可視化
• GIO.js, C3.jsといったオープンソースライブラリでのデータ可視化
• 案外簡単なDIY Akamai Globe(もどき)の制作
このセッションを通じ、「なんだ、案外簡単じゃないか」
「これならちょっとつついてみようかな」と思って頂けたなら幸いです。
ありがとうございました!