DIY Akamai Globe in 50 Minutes

1 | © 2019 Akamai | Confidential
DIY Akamai Globe
in 50 Minutes
Taisuke Yamada
<tayamada@akamai.com>

今日のお題： Akamai Globe

今日のお題： Akamai Globe
最近のAkamai APIを使って、自分専用の
Akamai Globe（みたいなもの）を作ってみよう！

このセッションのゴール
• データ可視化の楽しさを知ってほしい
• 既成ツールにない機能も案外作れると感じてほしい
• ついでに、Akamai APIももっと使ってみてほしい！

このセッションのゴール
• データ可視化の楽しさを知ってほしい
• 既成ツールにない機能も案外作れると感じてほしい
• ついでに、Akamai APIももっと使ってみてほしい！
ついでに、Akamai APIももっと
使ってみてほしい！

今日お伝えしたいこと
「巨人の肩に乗ろう」

巨人の肩に乗る
「私がさらに遠くを見ることが
できたとしたら、それは単に
私が巨人の肩に乗っていたからです。」
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

現代ITの巨人「私がさらに遠くを見ることが
Cloud Computing

Cloud Computing
Open Source Software

そういうわけで、今日の話は・・・
1. まず、クラウドサービスを使って、ノープログラミングでの
データ可視化をやってみよう！
2. 次に、オープンソースソフトウェアを使って、簡単な
プログラミングだけでAkamai Globeを作ってみよう！
3. おまけに、Akamai Globeにはない機能まで追加してみよう！

クラウドサービスの肩に乗る

大変・面倒なことはクラウドサービス送りの時代
• ストレージ
• DAS, NAS, SAN,
ObjectStorage, ...
• データベース
• SQL-DB, KVS, DocumentDB, ...
• サーバ、処理系
• VM, Container, Runtime, Function
• ネットワーク
• LAN, WAN, VPN
• クラスタ構築・運用
• トレーシング
• ロギング
• 認証・認可
• メッセージキュー
• プッシュ通知
• 各種APIサービス
• データ分析・可視化

やってみよう
３クラウド連携のノープログラミング可視化
Amazon Simple Storage
Service (S3)
Google BigQuery

協力・データ提供: https://www.scalemates.com/

実は弊社社員協力のプラモ趣味サイトで、そこそこの
トラフィックがあり、当然アカマイ化されている
協力・データ提供: https://www.scalemates.com/

素材: Akamai DataStream API
カスタマイズした形で、アカマイ基盤でのログ、パフォーマンスデータ、
エラー、発生イベントを生ログ・集約データの形でPush/Pullアクセスできる

Akamai as DataSourceの歴史
• Log Delivery Service (LDS)
• 生ログ蓄積・管理サービス
• 指定先ストレージにバッチ転送 or メール（歴史を感じる・・・）
• Download Receipt
• ログ蓄積ではなくアクセス情報をストリーム的に流してくれる(Push）
• Akamai Cloud Monitor
• DR同様だが、より情報・形式がリッチな形で形式も扱いやすい(Push)
• Akamai DataStream
• サーバサイドの生ログでも要約データでも好きな方を収集できる
• ストリーム的にPushもするし、アカマイ側で集積しているデータをPullもできる
• Akamai mPulse API
• クライアント側から採取したデータにPull方式でアクセスできる

Akamai as DataSourceの歴史
• Log Delivery Service (LDS)
• 生ログ蓄積・管理サービス
• 指定先ストレージにバッチ転送 or メール（歴史を感じる・・・）
• Download Receipt
• ログ蓄積ではなくアクセス情報をストリーム的に流してくれる(Push）
• Akamai Cloud Monitor
• DR同様だが、より情報・形式がリッチな形で形式も扱いやすい(Push)
• サーバサイドの生ログでも要約データでも好きな方を収集できる
• ストリーム的にPushもするし、アカマイ側で集積しているデータをPullもできる
• Akamai mPulse API
• クライアントから採取したデータにPull方式でアクセスできる
歴史的には様々な提供形態がありますが、生ログ保管用のLDS、
そして下２つのDataStreamとmPulse APIが主力となります。

Akamai DataStream API
• リアルタイムでアカマイ基盤からのログ・モニタリング情報を取得可能
• 詳細な生ログ、集約された統計情報のどちらにも対応
• 設定で伝達・取得項目を選択し、きめ細かく制御可能
• Push API
• 規定のエンドポイント・サービスにJSON形式で送り込む
• Splunk, SumoLogic, Amazon S3に対応
• Pull API
• 最大24h分のデータから、任意のデータをJSON形式で取得可能

Akamai mPulse API
• リアルタイムでウェブブラウザ側からのモニタリングデータを提供
• ブラウザ側でのモニタリングのため、直帰率などの行動指標も取得可能
• 詳細な時系列データ、集約された統計情報の両方に対応
• REST APIのクエリパラメータで多様な絞り込みに対応
• Pull APIのみサポート
• 最大13ヶ月分の蓄積データからJSON形式でデータ取得可能
Akamai DataStreamがアカマイ基盤側から見たデータ、
Akamai mPulse APIがエンドユーザー（ブラウザ）側から見たデータ、と
ちょうど対になっている形となります。

はじめよう：登場人物
Service (S3)
Google BigQuery BigQuery Geo Viz

動作の流れ (1/3)
Service (S3)
Akamai DataStream のデータプッシュ機能を使い、
Amazon S3にリアルタイムにデータ投入を行う
①

動作の流れ（2/3）
Service (S3)
GBQのData Transfer機能を
使い、適時S3上のデータを
インポートする
①
②

動作の流れ（3/3）
Service (S3)
BigQuery Geo Viz より
GBQにクエリを発行し、
取得したデータをマッピング
①
②
③

ノープログラミング。でも設定はあります。
• Raw DataStream の Push 設定
• Amazon S3
• バケットの用意と読み書き用のアクセスキー情報
• Google BigQuery
• DataStreamデータの保存先テーブル（スキーマ定義）
• S3からのData Transfer設定
• BigQuery Geo Viz
• 可視化したい情報を抜いてくるためのクエリ
• 可視化パラメータ（描画色や大きさなど）

Akamai DataStreamの設定

DataStreamからS3のどのバケット・
フォルダにPushするのかを指定し、
AWS側で発行したアクセスキーを
あわせて設定します。

最後に、ログデータのどのフィールドを
プッシュ送信するか指定します。
サンプリングレートも1-100%の間で
指定できるので、ストレージ側の容量に
あわせたデータ取得が可能です。

Google BigQuery の設定
今度は最終的にデータを入れるGBQ側で
テーブルを作成します。
ここでのポイントは、DataStreamから
プッシュされるJSONデータの構造に
合わせて、GBQでサポートされている
RECORD型をテーブル定義に使うことです。

DataStream JSONとBigQuery Table Schema
JSONのような構造のあるデータは、RECORD型に
マッピングすると変換ルーチン不要で取り込める

GBQ Data Transfer 設定
〜〜
テーブル定義ができれば、後は
転送設定だけです。
設定画面の下にある形式・許容
エラー数・未知データのスキップ
設定も忘れずに！
取得データはJSON形式
多少のエラーでは止めない
未知データはスキップ

転送結果

３クラウド連携の可視化をしてみよう！
DEMO

可視化完了

まとめ
• ノープログラミングでもここまでできる
• システム間の配管作業、プラレール遊びのような楽しさがある
• 学び：自己記述的なデータでのシステム連結は強力

ところで・・・

まだ、地球になってないよね？

オープンソースの肩に乗る

Cloud Computing
Open Source Software

世の様々なサービスで使われるOSS
サービス
オープンソースな
ミドルウェア・ライブラリ・OS・
運用管理基盤・etc・etc・・・
サービスだけ使っていると
標準提供されていないものが
欲しい場合に詰んでしまう。。。

世の様々なサービスで使われるOSS
サ
ー
ビス
オープンソースな
ミドルウェア・ライブラリ・OS・
運用管理基盤・etc・etc・・・
ないものは作ってみよう！
OSSの肩も結構高いよ！
API
データ

今回利用するOSS
GIO.js C3.js

全体構成
今回作る何か
(*1) 画像はイメージです

全体動作
serverclient
①
今度はDataStream Pull APIを使い、サーバ側より定期的に
ログデータを取得し、GIO.js用のデータに変換・保存します
loop DataStream Pull API

全体動作
serverclient
①
ブラウザでDIY Globe画面を開くと、XHR callでこの定期取得している
データを取得し、GIO.jsで可視化。DIY Akamai Globeの完成です！
②
GET page
GET statusloop
③

全体動作
serverclient
①
②
GET page
GET statusloop
③
④
GET country?cc=FR
mPulse Query API
せっかくのDIYなので拡張しましょう。
GIO.jsの国選択イベントを拾い、その国での
パフォーマンスデータをXHR call→mPulse
APIのリレーをしつつ取得し、C3.jsで可視化。
これで本当の完成！

DIY Akamai Globeを動かしてみた
DEMO

超はやわかりGIO.js

超はやわかりDIY Akamai Globe
単に非同期ループで定期的に取得した内容を
GIO.jsのaddData APIに渡し続けるだけ

DataStream Raw Log → GIO.js 形式の変換
{
"data": [{
"type": "Raw",
...
"geo": {
"country": "US",
...
},
"network": {
...
"bw": "5000"
},
...
}, {
"type": "Raw",
...
左の DataStream Raw Log (JSON) 形式の
たった２つのフィールドを抜き出し、GIO.jsが
求める{e:, i:, v:}の形式にすればいいだけ

定番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でロードする

DataStream API + 変換の全体像
上の3行がDataStream APIを呼び出し、
GIO.js向けのデータ変換をする中核部分

mPulse API + C3.js
地球全体の可視化
選択した国の
データ可視化
DataStream API
mPulse API

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 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としての提供機能がかなり多いため、
本日は概要までの紹介に留めさせていただきます。

mPulse APIの応答をグラフ化する
DataStream+GIO.js よりは若干長くなるが、mPulse APIの呼び出しが145、
それをC3.jsで利用するための変換が146-149、以降の151-行の部分は
すべてグラフ作成と見た目制御の部分で、かなり簡潔に書くことができる。

まとめ

まとめ
• Akamai DataStream 紹介（アカマイ基盤側のログ取得）
• Akamai mPulse API 紹介（クライアント側データの取得）
• クラウドサービスによるノープログラミングでのデータ可視化
• GIO.js, C3.jsといったオープンソースライブラリでのデータ可視化
• 案外簡単なDIY Akamai Globe（もどき）の制作

まとめ
• Akamai DataStream 紹介（アカマイ基盤側のログ取得）
• Akamai mPulse API 紹介（クライアント側収集データの取得）
• クラウドサービスによるノープログラミングでのデータ可視化
• GIO.js, C3.jsといったオープンソースライブラリでのデータ可視化
• 案外簡単なDIY Akamai Globe（もどき）の制作
このセッションを通じ、「なんだ、案外簡単じゃないか」
「これならちょっとつついてみようかな」と思って頂けたなら幸いです。
ありがとうございました！

DIY Akamai Globe in 50 Minutes

More Related Content

What's hot

Similar to DIY Akamai Globe in 50 Minutes

More from Taisuke Yamada

DIY Akamai Globe in 50 Minutes