前回の記事「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の睡眠データのグラフが確認できます。
