はじめに
jQuery UI向けのDate Range Picker！
日付の範囲を指定するUIです。このUIで範囲指定をして、Milkcocoaからデータを取得できたら格好いいなと思いまして。作ってみました。普段バックエンドばかり触っているエンジニアからすると、こういうはじめから格好いいUIを見るとなんだかワクワクして、いろいろ作りたくなります。
実装
アプリはMilkcocoaのサンプルチャットをそのまま使います。オープンにアクセスできるので、いろいろ便利です。
Milkcocoaからデータを取得するのはHistory APIがちょうど良いです。
daterangepickerを使うのに、jquery,jquery-ui,momentが必要です。この辺はbowerとか使うと楽そうです。
<head>
<link href="jquery-ui.min.css" rel="stylesheet">
<link href="jquery.comiseo.daterangepicker.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="moment.min.js"></script>
<script src="jquery.comiseo.daterangepicker.min.js"></script>
<script src="https://cdn.mlkcca.com/v2.0.0/milkcocoa.js"></script>
<script>
$(function() {
var milkcocoa = new MilkCocoa('flagi9edsvtg.mlkcca.com');
$("#e1").daterangepicker({
numberOfMonths: 3,
onChange: function() {
var range = $("#e1").daterangepicker("getRange");
var history = milkcocoa.dataStore('message').history();
history.sort('desc').size(50)
.span(range.start.getTime(), range.end.getTime());
history.on('data', function(data) {
var html = data.map(function(d) {
return '<div><span>'+d.id+'</span><span>'+new Date(d.timestamp).toLocaleString()+'</span><span>'+JSON.stringify(d.value) + '</span></div>';
}).join('');
$('#messages').append(html);
});
history.run();
$('#messages').empty();
}
});
});
</script>
</head>
<body>
<input id="e1" name="e1">
<div id="messages"></div>
</body>
さくっとHTMLを書きました。
このように指定した範囲の日付で、データが取得できます。Milkcocoa Meetupがあった10/4あたりで指定すると、この通り。daterangepickerは格好いいのに、データの表示部分がノンスタイルでイケてないのですね。
まとめ
このDateRangePickerで折れ線グラフとか出したら格好いいな〜と思いました。