Googleのクライアントサイドデータ分析フレームワークKratuをExpress.jsで動かしてみた

Kratu by google

じっさいにExpress.jsにのっけて動かし見てたのがこちら。
Kratu sample on express
Kratuのコードに付属しているサンプルを動かしています。

クライアントサイド と名乗っているとおり、データをもとに動的な表示の変更・相関関係の分析などができるようになっています。

また、付属しているcsv.js, json.jsを用いることで、サーバーサイドに保存されているCSVデータやJSONデータを簡単に扱うことができます。

特徴

Kratuの特徴はSignal Definition, Report Definition, Analysis Engineと呼ばれる3つの構造でデータを扱うことです。

フレームワークを構成する3つの要素のうち、Analysis EngineをKratu本体が担当し、残りの2つを開発者が記述することになります。

Report Definition

Report DefinitionはJson形式で記述します。
ここではデータに対応するSignal Definitionを指定するほか、データの中で表示するフィールドの設定、合計行の設定などを行います。
もっとも簡単なReport Definitionの例は以下のようになります。

{
  "name":"Bug Prioritization Sheet",
  "signalDefinitionUrl":"/examples/bugreport/bugs_signaldefinition.js",
  "signals":[
    {"key":"ticketId"},
    {"key":"customerId"},
    {"key":"customerName"},
    {"key":"subject"},
    {"key":"department"},
    {"key":"ticketType"},
    {"key":"priority"},
    {"key":"customerTier"}
  ]
}

Signal Definition

Signal DefinitionはJavaScriptで記述します。
ここではReport Definitionで定義したSignalに対してフォーマットやイベントハンドラの設定、スコアの計算、データの操作、閾値の設定などを行います。

signals.socialExtensionEnabled = {
  name: '% Social Extensions Enabled',
  weight: 25,
  lMax: 10,
  lMin: 50,
  range: {min: 0, max: 100, step: 1},
  format: signals.kratu.formatters.percentage,
  getData: function(account) {
    var totalCampaigns = account.numberOfActiveCampaigns;
    var campaignsWithExtension =
        account.numberOfCampaignsWithSocialExtensionEnabled || 0;
    if (!totalCampaigns || totalCampaigns === 0) return 0;
    else return (campaignsWithExtension / totalCampaigns) * 100;
  },
  headerEventHandlers: headerEventHandlers
};

使ってみた感想とか

Kratuを使うとサーバーサイドからデータを渡すだけで簡単にいい感じのレポートを作ることができます。
また、クライアントサイドではDOMの構築を考えなくてよいため、データの振る舞いを定義することに注力できました。
工夫を凝らしたデータの見せ方をする場合には物足りないかもしれませんが、さくっとテーブル形式の表を作りたい場合には重宝しそうです。