Play Framework 2(JAVA) で FitbitデータをGoogle Chartsで表示する

前回の記事「Play Framework 2(JAVA) で Twitter OAuth 1.0」ではTwitter APIのOAuth認証を行い、受け取ったJSONデータをBootstrapを使ってタイムライン風に表示しました。今回は歩数や消費カロリーを記録する活動量計Fitbitで収集したデータをAPI経由で取得して、Google Chartsを使ってグラフ表示したいと思います。

FitbitのOAuth1.0認証

前回の記事「Play Framework 2(JAVA) で Twitter OAuth 1.0」で作成したTwitterクラスのFitbit版を作成し、以下の点を変更します。

  • Fitbit APIを利用する為に開発者サイトでアプリ登録して、API KeyとAPI secretを取得
  • Fitbit API用にServiceInfoを修正
private static final ServiceInfo SERVICE_INFO = new ServiceInfo
("http://api.fitbit.com/oauth/request_token",
"http://api.fitbit.com/oauth/access_token",
"http://www.fitbit.com/oauth/authorize",
KEY);

あとは利用したいFitbitAPIのURLを変更してから、[play run]コマンドで実行して127.0.0.1:9000にアクセスすると、Fitbitの認証用画面が表示されます。

あとは利用したいFitbitAPIのURLを変更してから、[play run]コマンドで実行して127.0.0.1:9000にアクセスすると、Fitbitの認証用画面が表示されます。

認証後、取得したJSONデータがそのままブラウザ上にレンダリングされます。

Google ChartsのLine ChartでJSONデータをグラフ化する

Google Chartsには様々なグラフ形式が用意されており、今回は折れ線(Line Chart)を使ってFitbitの睡眠データをグラフ化します。しかしFitbitのJSONデータをそのままLine Chartに渡してもダメなので、グラフ用にJSONデータを加工します。
加工イメージ

{cols: [{"type":"string"},
{"type":"number"}],
rows: [{"c":[{"v":"02:21:00"},
{"v":2}]},{"c":
[{"v":"02:22:00"},
{"v":2}]}...]}

参考「DataTable」

まず前回記事のApplication.javaを以下のように修正します。
app/controllers/Application.java

・・・
return WS.url(feedUrl)
.sign(calc)
.get()
.map(new Function() {
public Result apply(Response response) {
if(response.getStatus() == 200){
ObjectMapper objectMapper = new ObjectMapper();
try {
//グラフ用に加工したJSONをStringにしてViewに渡す
String json = objectMapper.writeValueAsString(fitbitParse(response.asJson()));
return ok(views.html.fitbit.render(json));
} catch (JsonProcessingException e) {
return badRequest(“error”);
}
}
・・・

private static JsonNode fitbitParse(JsonNode rootNode) {
//Fitbitの睡眠データ(Sleep)の内、分毎のデータを取得
JsonNode minuteData = rootNode.findPath(“minuteData”);
ObjectMapper mapper = new ObjectMapper();
ArrayNode sleepJson = mapper.createArrayNode();
JsonNode current;
for (int i = 0; (current = minuteData.get(i)) != null; i++) {
//上記のGoogleChartのJSONフォーマットに合わせて加工(rows以下)
ObjectNode firstObject = sleepJson.addObject();
ArrayNode cNode = firstObject.putArray(“c”);
ObjectNode timeObject = cNode.addObject();
timeObject.put(“v”,current.findPath(“dateTime”).asText());
ObjectNode valueObject = cNode.addObject();
valueObject.put(“v”, current.findPath(“value”).asInt());
}
return sleepJson;
}

次いでGoogle Chartsを使用する準備としてViewを作成・修正します。先程Controllerで加工した値をDataTableのインスタンス化する際に使用します。

app/view/fitbit.scala.html

@**************************************

Controllerから渡されるの値

**************************************@@

(sleepData: String)

@**************************************

Google Chartsの描画用JS **************************************

@@scripts = {<scripttype="text/javascript">

//Google Visualization APIの読み込みgoogle.load('visualization', '1.0', {'packages':['corechart']});

//上記Google Visualization APIの読み込み完了時のコールバック設定google.setOnLoadCallback(drawChart);

//上記コールバック時に実行する関数function drawChart() {//DataTableの作成(JSON形式)

//@Html(sleepData):値をエスケープしない→エスケープするとJSのエラーになる

var data = new google.visualization.DataTable({cols: [{"type":"string"},{"type":"number"}],

rows: @Html(sleepData)}, 0.5);

//Line Chartのオプションvar options = {title: 'Fitbit SleepDate'};

//Line Chartの描画先のDIVを取得var chart = new google.visualization.LineChart(document.getElementById('chart_div'));

//Line Chartの描画実行chart.draw(data, options);}</script>}

@main("Test to Play Fitbit", scripts){@**************************************

Line Chart描画先DIV **************************************@

<divid="chart_div"style="width:400; height:300"/>}

app/view/main.scala.html

@**************************************

fitbit.scala.htmlから渡される値

**************************************@@

(title: String, scripts: Html = Html(""))

(content: Html = null)<!DOCTYPEhtml><html><head><title>@title

</title>

@**************************************

AJAX API Load **************************************

@<scripttype="text/javascript"src="https://www.google.com/jsapi"></script>

@************************************** fitbit.scala.htmlから渡されるJS **************************************

@@scripts</head>

<body>

@**************************************

fitbit.scala.htmlから渡されるHTML **************************************

@@content</body>

</html>

[play run]コマンドで実行して127.0.0.1:9000にアクセスすると、 Google ChartsのLine Chanrtを利用した、Fitbitの睡眠データのグラフが確認できます。

Related Post

Play Framework 2(JAVA) で Twitter OAuth 1.0Play Framework 2(JAVA) で Twitter OAuth 1.0

Play FrameworkはJavaとScalaに対応したWebアプリケーションフレームワークです。軽量でMVCでRESTfulで、、、といった概要については公式ドキュメントをご確認いただくとして、今回はPlay Framework 2.2.0(JAVA)で動作する「WS(WebService)とOAuthライブラリを利用してOAuth1.0認証を行う」「APIを叩いて取得したJSONをTwitter BootStrapを使って表示する」の2点についてまとめました。 WS(WebService)とOAuthライブラリを利用してOAuth1.0認証を行う WS(WebService)は非同期通信でPlayアプリから外部Webサービスを呼び出す際に利用するライブラリです。また、PlayframeworkはOAuth1.0のみをサポートしたOAuthライブラリが用意されており、今回は主にこの2つを使って実装します。 準備