search
LoginSignup
2

More than 5 years have passed since last update.

posted at

updated at

Organization

Date Range PickerとMilkcocoa JavaScript SDKを組み合わせる!

はじめに

f56dca99-3e4b-833a-5d2f-27c098592324.png

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を書きました。

スクリーンショット 2015-12-06 21.30.15.png

スクリーンショット 2015-12-06 21.30.23.png

スクリーンショット 2015-12-06 21.36.57.png

このように指定した範囲の日付で、データが取得できます。Milkcocoa Meetupがあった10/4あたりで指定すると、この通り。daterangepickerは格好いいのに、データの表示部分がノンスタイルでイケてないのですね。

まとめ

このDateRangePickerで折れ線グラフとか出したら格好いいな〜と思いました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
2