4月 | 2016 | dayjournal blog

日付	曜日	歩数
2016.04.17	日	7956
2016.04.18	月	4786
2016.04.19	火	5437
2016.04.20	水	9151
2016.04.21	木	9266
2016.04.22	金	6888
2016.04.23	土	2546

合計
46030

日付	曜日	歩数
2016.04.10	日	11466
2016.04.11	月	5064
2016.04.12	火	7645
2016.04.13	水	5174
2016.04.14	木	7010
2016.04.15	金	10631
2016.04.16	土	6314

合計
53304

日付	曜日	歩数
2016.04.03	日	3132
2016.04.04	月	3988
2016.04.05	火	6486
2016.04.06	水	4266
2016.04.07	木	5327
2016.04.08	金	7316
2016.04.09	土	3598

合計
34113

今回は、Node.jsとC3.jsを利用してこのblogの「Walking」から歩数情報をスクレイピングして可視化してみようと思います。

地味にこんな感じで週単位で自分の歩数を記録して公開しています。

はじめに歩数情報を取得する方法を試していきます。

①取得したいURLを実装

取得したい情報が存在するURLを確認してみます。URLは「https://day-journal.com/blog/walking-001/」、「https://day-journal.com/blog/walking-002/」のように複数ページで規則性があるURLのようです。

それでは、「add_URL_all」という配列にそれぞれのURLを格納する処理を実装してみます。

    function (callback) {
            for (i = 1; i <= 43; i++) {
                //URLを指定
                add_URL = "https://day-journal.com/blog/walking-";
                //URLに連番を付与
                if (i < 10) {
                    add_URL = add_URL + "00" + i + "/";
                } else {
                    add_URL = add_URL + "0" + i + "/";
                }
                add_URL_all[i] = add_URL;
                //console.log(add_URL_all[i]);
            }
            //3秒待機
            setTimeout(callback, 3000);
            console.log('URL取得完了!!');
    },

function (callback) {

for (i = 1; i <= 43; i++) {

//URLを指定

add_URL = "https://day-journal.com/blog/walking-";

//URLに連番を付与

if (i < 10) {

add_URL = add_URL + "00" + i + "/";

} else {

add_URL = add_URL + "0" + i + "/";

}

add_URL_all[i] = add_URL;

//console.log(add_URL_all[i]);

}

//3秒待機

setTimeout(callback, 3000);

console.log('URL取得完了!!');

②スクレイピング処理を実装

まず、取得したい情報がどんなhtml構造か確認してみます。

どうやらtdタグで情報が取得できそうですね。それではページをスクレイピングして取得した情報を各変数に格納する処理を実装してみます。スクレイピングするために今回は、HTMLをjQueryライクにパースしてくれる「cheerio-httpcli」を利用してみます。

    function (callback) {
            //フィールド名を定義
            data_moto = "日付,曜日,歩数\r\n";
            //ループ初期化
            loopIndex = 1;
            //URLの数だけループ処理
            async.whilst(function () {
                    return loopIndex < i;
                },
                function (cb) {
                    //スクレイピングするURLをコンソールに表示
                    console.log('URL: ' + add_URL_all[loopIndex]);
                    //スクレイピング処理
                    client.fetch(add_URL_all[loopIndex], para, function (err, $, res) {
                        //カウント・フラグ初期化
                        count = 1;
                        flag = 0;
                        //tdタグの総数を取得
                        td_length = $('td').length;
                        //tdタグを取得
                        $("td").each(function (idx) {
                            //1.dataの取得 曜日別に集計
                            if (count % 3 === 0) {
                                data[flag] = data[flag] + parseInt($(this).text());
                                flag = flag + 1;
                            }
                            //2.data_motoの取得 最後の合計値は除外
                            if (count !== td_length) {
                                //tdの値をdataに入れる
                                data_moto = data_moto + $(this).text();
                                //値の間に改行か,を挿入
                                if (count % 3 == 0) {
                                    data_moto = data_moto + "\r\n";
                                } else {
                                    data_moto = data_moto + ",";
                                }
                            }
                            //tdタグをカウント
                            count = count + 1;
                        });
                    });
                    //ループカウント
                    loopIndex = loopIndex + 1;
                    //1秒間隔でスクレイピング処理
                    setTimeout(cb, 1000);
                }
            );
            //次の処理まで50秒待機
            setTimeout(callback, 50000);
    },

function (callback) {

//フィールド名を定義

data_moto = "日付,曜日,歩数\r\n";

//ループ初期化

loopIndex = 1;

//URLの数だけループ処理

async.whilst(function () {

return loopIndex < i;

function (cb) {

//スクレイピングするURLをコンソールに表示

console.log('URL: ' + add_URL_all[loopIndex]);

//スクレイピング処理

client.fetch(add_URL_all[loopIndex], para, function (err, $, res) {

//カウント・フラグ初期化

count = 1;

flag = 0;

//tdタグの総数を取得

td_length = $('td').length;

//tdタグを取得

$("td").each(function (idx) {

//1.dataの取得曜日別に集計

if (count % 3 === 0) {

data[flag] = data[flag] + parseInt($(this).text());

flag = flag + 1;

}

//2.data_motoの取得最後の合計値は除外

if (count !== td_length) {

//tdの値をdataに入れる

data_moto = data_moto + $(this).text();

//値の間に改行か,を挿入

if (count % 3 == 0) {

data_moto = data_moto + "\r\n";

} else {

data_moto = data_moto + ",";

}

//tdタグをカウント

count = count + 1;

});

//ループカウント

loopIndex = loopIndex + 1;

//1秒間隔でスクレイピング処理

setTimeout(cb, 1000);

}

);

//次の処理まで50秒待機

setTimeout(callback, 50000);

「async」のasync.whilstを利用して取得したいURLの分だけ処理を実行:

            //URLの数だけループ処理
            async.whilst(function () {
                    return loopIndex < i;
                },

//URLの数だけループ処理

async.whilst(function () {

return loopIndex < i;

「cheerio-httpcli」を利用してtdタグを取得してdataに「曜日別」、data_motoに「日別」情報を格納:

                        $("td").each(function (idx) {
                            //1.dataの取得 曜日別に集計
                            if (count % 3 === 0) {
                                data[flag] = data[flag] + parseInt($(this).text());
                                flag = flag + 1;
                            }
                            //2.data_motoの取得 最後の合計値は除外
                            if (count !== td_length) {
                                //tdの値をdataに入れる
                                data_moto = data_moto + $(this).text();
                                //値の間に改行か,を挿入
                                if (count % 3 == 0) {
                                    data_moto = data_moto + "\r\n";
                                } else {
                                    data_moto = data_moto + ",";
                                }
                            }
                            //tdタグをカウント
                            count = count + 1;
                        });
                    });

$("td").each(function (idx) {

//1.dataの取得曜日別に集計

if (count % 3 === 0) {

data[flag] = data[flag] + parseInt($(this).text());

flag = flag + 1;

}

//2.data_motoの取得最後の合計値は除外

if (count !== td_length) {

//tdの値をdataに入れる

data_moto = data_moto + $(this).text();

//値の間に改行か,を挿入

if (count % 3 == 0) {

data_moto = data_moto + "\r\n";

} else {

data_moto = data_moto + ",";

}

//tdタグをカウント

count = count + 1;

});

サーバーに負荷をかけないために1秒間隔でスクレイピング処理を実行:

                    //ループカウント
                    loopIndex = loopIndex + 1;
                    //1秒間隔でスクレイピング処理
                    setTimeout(cb, 1000);
                }

//ループカウント

loopIndex = loopIndex + 1;

//1秒間隔でスクレイピング処理

setTimeout(cb, 1000);

}

③CSVに保存する処理を実装

次に、スクレイピング処理で取得した値をCSVに格納する処理を実装してみます。

    function (callback) {
            //フィールド名を定義
            data_all = "日,月,火,水,木,金,土\r\n";
            for (i = 0; i <= 6; i++) {
                //値の間に改行か,を挿入
                if (i === 6) {
                    data_all = data_all + data[i] + "\r\n";
                } else {
                    data_all = data_all + data[i] + ",";
                }
            }
            //data_all変数をCSVに吐き出し
            fs.writeFile('./Walking.csv', data_all);
            //日付の「.」を「-」に文字置換
            result = data_moto.split(".").join("-");
            //result変数をCSVに吐き出し
            fs.writeFile('./Walking_moto.csv', result);
            //3秒待機
            setTimeout(callback, 3000);
            console.log('CSV作成完了!!');
    }

function (callback) {

//フィールド名を定義

data_all = "日,月,火,水,木,金,土\r\n";

for (i = 0; i <= 6; i++) {

//値の間に改行か,を挿入

if (i === 6) {

data_all = data_all + data[i] + "\r\n";

} else {

data_all = data_all + data[i] + ",";

}

//data_all変数をCSVに吐き出し

fs.writeFile('./Walking.csv', data_all);

//日付の「.」を「-」に文字置換

result = data_moto.split(".").join("-");

//result変数をCSVに吐き出し

fs.writeFile('./Walking_moto.csv', result);

//3秒待機

setTimeout(callback, 3000);

console.log('CSV作成完了!!');

}

スクレイピング処理で「曜日別」に取得したデータをdata_all変数に整形格納:

            //フィールド名を定義
            data_all = "日,月,火,水,木,金,土\r\n";
            for (i = 0; i <= 6; i++) {
                //値の間に改行か,を挿入
                if (i === 6) {
                    data_all = data_all + data[i] + "\r\n";
                } else {
                    data_all = data_all + data[i] + ",";
                }
            }

//フィールド名を定義

data_all = "日,月,火,水,木,金,土\r\n";

for (i = 0; i <= 6; i++) {

//値の間に改行か,を挿入

if (i === 6) {

data_all = data_all + data[i] + "\r\n";

} else {

data_all = data_all + data[i] + ",";

}

「曜日別と「日別」をそれぞれのCSVに保存:

            //data_all変数をCSVに吐き出し
            fs.writeFile('./Walking.csv', data_all);
            //日付の「.」を「-」に文字置換
            result = data_moto.split(".").join("-");
            //result変数をCSVに吐き出し
            fs.writeFile('./Walking_moto.csv', result);

//data_all変数をCSVに吐き出し

fs.writeFile('./Walking.csv', data_all);

//日付の「.」を「-」に文字置換

result = data_moto.split(".").join("-");

//result変数をCSVに吐き出し

fs.writeFile('./Walking_moto.csv', result);

④上記①②③を組み合わせた処理を実装

最後に、「async」を利用して処理の順序を設定して上記コードを組み合わせて実装します。

処理を実行する前にnpmから下記の必要なモジュールをインストールします。
・node.jsの実行順序を制御できる「async」
・HTMLをjQueryライクにパースしてくれる「cheerio-httpcli」

作業フォルダでnpmでasyncをローカルインストールします。

npm install async

1	npm install async

作業フォルダでnpmでcheerio-httpcliをローカルインストールします。

npm install cheerio-httpcli

1	npm install cheerio-httpcli

処理を組み合わせた最終的なscript.jsを実装します。

script.js

var client = require('cheerio-httpcli');
var fs = require('fs');
var async = require('async');

var para = {};
var data_moto;
var data = [0, 0, 0, 0, 0, 0, 0];
var data_all;
var add_URL;
var add_URL_all = [];
var i;
var count;
var loopIndex;
var flag;
var td_length;
var result;

async.series([
    //スクレイピングするURLを設定
    function (callback) {
            for (i = 1; i <= 43; i++) {
                //URLを指定
                add_URL = "https://day-journal.com/blog/walking-";
                //URLに連番を付与
                if (i < 10) {
                    add_URL = add_URL + "00" + i + "/";
                } else {
                    add_URL = add_URL + "0" + i + "/";
                }
                add_URL_all[i] = add_URL;
                //console.log(add_URL_all[i]);
            }
            //3秒待機
            setTimeout(callback, 3000);
            console.log('URL取得完了!!');
    },

    //スクレイピング
    function (callback) {
            //フィールド名を定義
            data_moto = "日付,曜日,歩数\r\n";
            //ループ初期化
            loopIndex = 1;
            //URLの数だけループ処理
            async.whilst(function () {
                    return loopIndex < i;
                },
                function (cb) {
                    //スクレイピングするURLをコンソールに表示
                    console.log('URL: ' + add_URL_all[loopIndex]);
                    //スクレイピング処理
                    client.fetch(add_URL_all[loopIndex], para, function (err, $, res) {
                        //カウント・フラグ初期化
                        count = 1;
                        flag = 0;
                        //tdタグの総数を取得
                        td_length = $('td').length;
                        //tdタグを取得
                        $("td").each(function (idx) {
                            //1.dataの取得 曜日別に集計
                            if (count % 3 === 0) {
                                data[flag] = data[flag] + parseInt($(this).text());
                                flag = flag + 1;
                            }
                            //2.data_motoの取得 最後の合計値は除外
                            if (count !== td_length) {
                                //tdの値をdataに入れる
                                data_moto = data_moto + $(this).text();
                                //値の間に改行か,を挿入
                                if (count % 3 == 0) {
                                    data_moto = data_moto + "\r\n";
                                } else {
                                    data_moto = data_moto + ",";
                                }
                            }
                            //tdタグをカウント
                            count = count + 1;
                        });
                    });
                    //ループカウント
                    loopIndex = loopIndex + 1;
                    //1秒間隔でスクレイピング処理
                    setTimeout(cb, 1000);
                }
            );
            //次の処理まで50秒待機
            setTimeout(callback, 50000);
    },

    //スクレイピング結果をCSVに保存
    function (callback) {
            //フィールド名を定義
            data_all = "日,月,火,水,木,金,土\r\n";
            for (i = 0; i <= 6; i++) {
                //値の間に改行か,を挿入
                if (i === 6) {
                    data_all = data_all + data[i] + "\r\n";
                } else {
                    data_all = data_all + data[i] + ",";
                }
            }
            //data_all変数をCSVに吐き出し
            fs.writeFile('./Walking.csv', data_all);
            //日付の「.」を「-」に文字置換
            result = data_moto.split(".").join("-");
            //result変数をCSVに吐き出し
            fs.writeFile('./Walking_moto.csv', result);
            //3秒待機
            setTimeout(callback, 3000);
            console.log('CSV作成完了!!');
    }

],

    //集約処理
    function (err, results) {
        if (err) {
            throw err;
        }
        console.log('全ての処理完了!!');
    }
);

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

var client = require('cheerio-httpcli');

var fs = require('fs');

var async = require('async');

var para = {};

var data_moto;

var data = [0, 0, 0, 0, 0, 0, 0];

var data_all;

var add_URL;

var add_URL_all = [];

var i;

var count;

var loopIndex;

var flag;

var td_length;

var result;

async.series([

//スクレイピングするURLを設定

function (callback) {

for (i = 1; i <= 43; i++) {

//URLを指定

add_URL = "https://day-journal.com/blog/walking-";

//URLに連番を付与

if (i < 10) {

add_URL = add_URL + "00" + i + "/";

} else {

add_URL = add_URL + "0" + i + "/";

}

add_URL_all[i] = add_URL;

//console.log(add_URL_all[i]);

}

//3秒待機

setTimeout(callback, 3000);

console.log('URL取得完了!!');

//スクレイピング

function (callback) {

//フィールド名を定義

data_moto = "日付,曜日,歩数\r\n";

//ループ初期化

loopIndex = 1;

//URLの数だけループ処理

async.whilst(function () {

return loopIndex < i;

function (cb) {

//スクレイピングするURLをコンソールに表示

console.log('URL: ' + add_URL_all[loopIndex]);

//スクレイピング処理

client.fetch(add_URL_all[loopIndex], para, function (err, $, res) {

//カウント・フラグ初期化

count = 1;

flag = 0;

//tdタグの総数を取得

td_length = $('td').length;

//tdタグを取得

$("td").each(function (idx) {

//1.dataの取得曜日別に集計

if (count % 3 === 0) {

data[flag] = data[flag] + parseInt($(this).text());

flag = flag + 1;

}

//2.data_motoの取得最後の合計値は除外

if (count !== td_length) {

//tdの値をdataに入れる

data_moto = data_moto + $(this).text();

//値の間に改行か,を挿入

if (count % 3 == 0) {

data_moto = data_moto + "\r\n";

} else {

data_moto = data_moto + ",";

}

//tdタグをカウント

count = count + 1;

});

//ループカウント

loopIndex = loopIndex + 1;

//1秒間隔でスクレイピング処理

setTimeout(cb, 1000);

}

);

//次の処理まで50秒待機

setTimeout(callback, 50000);

//スクレイピング結果をCSVに保存

function (callback) {

//フィールド名を定義

data_all = "日,月,火,水,木,金,土\r\n";

for (i = 0; i <= 6; i++) {

//値の間に改行か,を挿入

if (i === 6) {

data_all = data_all + data[i] + "\r\n";

} else {

data_all = data_all + data[i] + ",";

}

//data_all変数をCSVに吐き出し

fs.writeFile('./Walking.csv', data_all);

//日付の「.」を「-」に文字置換

result = data_moto.split(".").join("-");

//result変数をCSVに吐き出し

fs.writeFile('./Walking_moto.csv', result);

//3秒待機

setTimeout(callback, 3000);

console.log('CSV作成完了!!');

}

//集約処理

function (err, results) {

if (err) {

throw err;

}

console.log('全ての処理完了!!');

}

);

作業フォルダでscript.jsを実行します。しばらく待つとスクレイピングされた結果がCSVファイルで保存されます。

node script.js

1	node script.js

Walking.csv

日,月,火,水,木,金,土
288500,296903,292832,274209,283144,307202,336896

1 2	日,月,火,水,木,金,土 288500,296903,292832,274209,283144,307202,336896

Walking_moto.csv

日付,曜日,歩数
2015-05-31,日,8231
2015-06-01,月,4996
2015-06-02,火,5502
2015-06-03,水,3358
2015-06-04,木,4515
2015-06-05,金,4259
2015-06-06,土,4759
2015-06-07,日,12481
2015-06-08,月,5703
2015-06-09,火,6020
2015-06-10,水,5535
2015-06-11,木,6284
2015-06-12,金,6729
2015-06-13,土,9245
2015-06-14,日,8234
2015-06-15,月,8051
2015-06-16,火,5739
2015-06-17,水,4562
2015-06-18,木,4554
2015-06-19,金,5888
2015-06-20,土,7985
2015-06-21,日,9088
2015-06-22,月,3150
2015-06-23,火,5292
2015-06-24,水,6399
2015-06-25,木,5607
2015-06-26,金,4980
2015-06-27,土,10749
2015-06-28,日,5775
2015-06-29,月,4696
2015-06-30,火,4568
2015-07-01,水,4516
2015-07-02,木,9220
2015-07-03,金,12927
2015-07-04,土,11290
2015-07-05,日,11462
2015-07-06,月,4559
2015-07-07,火,11889
2015-07-08,水,4784
2015-07-09,木,5218
2015-07-10,金,12203
2015-07-11,土,10543
2015-07-12,日,13090
2015-07-13,月,12604
2015-07-14,火,4663
2015-07-15,水,5467
2015-07-16,木,4877
2015-07-17,金,7994
2015-07-18,土,7345
2015-07-19,日,10975
2015-07-20,月,3817
2015-07-21,火,10104
2015-07-22,水,5475
2015-07-23,木,6361
2015-07-24,金,4324
2015-07-25,土,5636
2015-07-26,日,11238
2015-07-27,月,13124
2015-07-28,火,5648
2015-07-29,水,5480
2015-07-30,木,4748
2015-07-31,金,4273
2015-08-01,土,7670
2015-08-02,日,9824
2015-08-03,月,6576
2015-08-04,火,4444
2015-08-05,水,13884
2015-08-06,木,6626
2015-08-07,金,6360
2015-08-08,土,7248
2015-08-09,日,4014
2015-08-10,月,4494
2015-08-11,火,5536
2015-08-12,水,4571
2015-08-13,木,6435
2015-08-14,金,9561
2015-08-15,土,11346
2015-08-16,日,8652
2015-08-17,月,6210
2015-08-18,火,4292
2015-08-19,水,4699
2015-08-20,木,7902
2015-08-21,金,6391
2015-08-22,土,6980
2015-08-23,日,8756
2015-08-24,月,5004
2015-08-25,火,6703
2015-08-26,水,5003
2015-08-27,木,5826
2015-08-28,金,5179
2015-08-29,土,10906
2015-08-30,日,7423
2015-08-31,月,8526
2015-09-01,火,11813
2015-09-02,水,2934
2015-09-03,木,6188
2015-09-04,金,6294
2015-09-05,土,4775
2015-09-06,日,4758
2015-09-07,月,6199
2015-09-08,火,5289
2015-09-09,水,3981
2015-09-10,木,4637
2015-09-11,金,5109
2015-09-12,土,7297
2015-09-13,日,3749
2015-09-14,月,6384
2015-09-15,火,6684
2015-09-16,水,5196
2015-09-17,木,5102
2015-09-18,金,6252
2015-09-19,土,3969
2015-09-20,日,8951
2015-09-21,月,6894
2015-09-22,火,7124
2015-09-23,水,5533
2015-09-24,木,4576
2015-09-25,金,4669
2015-09-26,土,18777
2015-09-27,日,5231
2015-09-28,月,5437
2015-09-29,火,4541
2015-09-30,水,5038
2015-10-01,木,4907
2015-10-02,金,5939
2015-10-03,土,7004
2015-10-04,日,4576
2015-10-05,月,6278
2015-10-06,火,5324
2015-10-07,水,5083
2015-10-08,木,5007
2015-10-09,金,4745
2015-10-10,土,4526
2015-10-11,日,3500
2015-10-12,月,5708
2015-10-13,火,4639
2015-10-14,水,3802
2015-10-15,木,4696
2015-10-16,金,4037
2015-10-17,土,5247
2015-10-18,日,7987
2015-10-19,月,4463
2015-10-20,火,14501
2015-10-21,水,4400
2015-10-22,木,7239
2015-10-23,金,4969
2015-10-24,土,4050
2015-10-25,日,9834
2015-10-26,月,4673
2015-10-27,火,3650
2015-10-28,水,6527
2015-10-29,木,5606
2015-10-30,金,4531
2015-10-31,土,9416
2015-11-01,日,8546
2015-11-02,月,4248
2015-11-03,火,4870
2015-11-04,水,3659
2015-11-05,木,4547
2015-11-06,金,3215
2015-11-07,土,8549
2015-11-08,日,9861
2015-11-09,月,4712
2015-11-10,火,3126
2015-11-11,水,4294
2015-11-12,木,4157
2015-11-13,金,4875
2015-11-14,土,11597
2015-11-15,日,8496
2015-11-16,月,5258
2015-11-17,火,3649
2015-11-18,水,3930
2015-11-19,木,4755
2015-11-20,金,5097
2015-11-21,土,7944
2015-11-22,日,12340
2015-11-23,月,4987
2015-11-24,火,6868
2015-11-25,水,8744
2015-11-26,木,10131
2015-11-27,金,8129
2015-11-28,土,3241
2015-11-29,日,5367
2015-11-30,月,8545
2015-12-01,火,8876
2015-12-02,水,8732
2015-12-03,木,6160
2015-12-04,金,8139
2015-12-05,土,7258
2015-12-06,日,8639
2015-12-07,月,9878
2015-12-08,火,7713
2015-12-09,水,9271
2015-12-10,木,7684
2015-12-11,金,6884
2015-12-12,土,9826
2015-12-13,日,6423
2015-12-14,月,7277
2015-12-15,火,4722
2015-12-16,水,6820
2015-12-17,木,9306
2015-12-18,金,8018
2015-12-19,土,4055
2015-12-20,日,3285
2015-12-21,月,7695
2015-12-22,火,8513
2015-12-23,水,5089
2015-12-24,木,6402
2015-12-25,金,8974
2015-12-26,土,8129
2015-12-27,日,1772
2015-12-28,月,11485
2015-12-29,火,8643
2015-12-30,水,9262
2015-12-31,木,1658
2016-01-01,金,5076
2016-01-02,土,6418
2016-01-03,日,5487
2016-01-04,月,6660
2016-01-05,火,8197
2016-01-06,水,8290
2016-01-07,木,8012
2016-01-08,金,7316
2016-01-09,土,9299
2016-01-10,日,2489
2016-01-11,月,8206
2016-01-12,火,7721
2016-01-13,水,8239
2016-01-14,木,8842
2016-01-15,金,7720
2016-01-16,土,6082
2016-01-17,日,2154
2016-01-18,月,8498
2016-01-19,火,8909
2016-01-20,水,8353
2016-01-21,木,7917
2016-01-22,金,9836
2016-01-23,土,8641
2016-01-24,日,4121
2016-01-25,月,8349
2016-01-26,火,8939
2016-01-27,水,9336
2016-01-28,木,8451
2016-01-29,金,8881
2016-01-30,土,8546
2016-01-31,日,2769
2016-02-01,月,8494
2016-02-02,火,7809
2016-02-03,水,7711
2016-02-04,木,7777
2016-02-05,金,7298
2016-02-06,土,8255
2016-02-07,日,2432
2016-02-08,月,10522
2016-02-09,火,7925
2016-02-10,水,9162
2016-02-11,木,8742
2016-02-12,金,8962
2016-02-13,土,9217
2016-02-14,日,2857
2016-02-15,月,9689
2016-02-16,火,8365
2016-02-17,水,8510
2016-02-18,木,8472
2016-02-19,金,8189
2016-02-20,土,8411
2016-02-21,日,2321
2016-02-22,月,9263
2016-02-23,火,5413
2016-02-24,水,8499
2016-02-25,木,7990
2016-02-26,金,8043
2016-02-27,土,4414
2016-02-28,日,7175
2016-02-29,月,9767
2016-03-01,火,5510
2016-03-02,水,8564
2016-03-03,木,8151
2016-03-04,金,10105
2016-03-05,土,9250
2016-03-06,日,4957
2016-03-07,月,5223
2016-03-08,火,8381
2016-03-09,水,8446
2016-03-10,木,8249
2016-03-11,金,8132
2016-03-12,土,6580
2016-03-13,日,4186
2016-03-14,月,8275
2016-03-15,火,6987
2016-03-16,水,8093
2016-03-17,木,7459
2016-03-18,金,16445
2016-03-19,土,6219
2016-03-20,日,4994
2016-03-21,月,2326
2016-03-22,火,7731
2016-03-23,水,4978
2016-03-24,木,12151
2016-03-25,金,10255
2016-03-26,土,8202

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

日付,曜日,歩数

2015-05-31,日,8231

2015-06-01,月,4996

2015-06-02,火,5502

2015-06-03,水,3358

2015-06-04,木,4515

2015-06-05,金,4259

2015-06-06,土,4759

2015-06-07,日,12481

2015-06-08,月,5703

2015-06-09,火,6020

2015-06-10,水,5535

2015-06-11,木,6284

2015-06-12,金,6729

2015-06-13,土,9245

2015-06-14,日,8234

2015-06-15,月,8051

2015-06-16,火,5739

2015-06-17,水,4562

2015-06-18,木,4554

2015-06-19,金,5888

2015-06-20,土,7985

2015-06-21,日,9088

2015-06-22,月,3150

2015-06-23,火,5292

2015-06-24,水,6399

2015-06-25,木,5607

2015-06-26,金,4980

2015-06-27,土,10749

2015-06-28,日,5775

2015-06-29,月,4696

2015-06-30,火,4568

2015-07-01,水,4516

2015-07-02,木,9220

2015-07-03,金,12927

2015-07-04,土,11290

2015-07-05,日,11462

2015-07-06,月,4559

2015-07-07,火,11889

2015-07-08,水,4784

2015-07-09,木,5218

2015-07-10,金,12203

2015-07-11,土,10543

2015-07-12,日,13090

2015-07-13,月,12604

2015-07-14,火,4663

2015-07-15,水,5467

2015-07-16,木,4877

2015-07-17,金,7994

2015-07-18,土,7345

2015-07-19,日,10975

2015-07-20,月,3817

2015-07-21,火,10104

2015-07-22,水,5475

2015-07-23,木,6361

2015-07-24,金,4324

2015-07-25,土,5636

2015-07-26,日,11238

2015-07-27,月,13124

2015-07-28,火,5648

2015-07-29,水,5480

2015-07-30,木,4748

2015-07-31,金,4273

2015-08-01,土,7670

2015-08-02,日,9824

2015-08-03,月,6576

2015-08-04,火,4444

2015-08-05,水,13884

2015-08-06,木,6626

2015-08-07,金,6360

2015-08-08,土,7248

2015-08-09,日,4014

2015-08-10,月,4494

2015-08-11,火,5536

2015-08-12,水,4571

2015-08-13,木,6435

2015-08-14,金,9561

2015-08-15,土,11346

2015-08-16,日,8652

2015-08-17,月,6210

2015-08-18,火,4292

2015-08-19,水,4699

2015-08-20,木,7902

2015-08-21,金,6391

2015-08-22,土,6980

2015-08-23,日,8756

2015-08-24,月,5004

2015-08-25,火,6703

2015-08-26,水,5003

2015-08-27,木,5826

2015-08-28,金,5179

2015-08-29,土,10906

2015-08-30,日,7423

2015-08-31,月,8526

2015-09-01,火,11813

2015-09-02,水,2934

2015-09-03,木,6188

2015-09-04,金,6294

2015-09-05,土,4775

2015-09-06,日,4758

2015-09-07,月,6199

2015-09-08,火,5289

2015-09-09,水,3981

2015-09-10,木,4637

2015-09-11,金,5109

2015-09-12,土,7297

2015-09-13,日,3749

2015-09-14,月,6384

2015-09-15,火,6684

2015-09-16,水,5196

2015-09-17,木,5102

2015-09-18,金,6252

2015-09-19,土,3969

2015-09-20,日,8951

2015-09-21,月,6894

2015-09-22,火,7124

2015-09-23,水,5533

2015-09-24,木,4576

2015-09-25,金,4669

2015-09-26,土,18777

2015-09-27,日,5231

2015-09-28,月,5437

2015-09-29,火,4541

2015-09-30,水,5038

2015-10-01,木,4907

2015-10-02,金,5939

2015-10-03,土,7004

2015-10-04,日,4576

2015-10-05,月,6278

2015-10-06,火,5324

2015-10-07,水,5083

2015-10-08,木,5007

2015-10-09,金,4745

2015-10-10,土,4526

2015-10-11,日,3500

2015-10-12,月,5708

2015-10-13,火,4639

2015-10-14,水,3802

2015-10-15,木,4696

2015-10-16,金,4037

2015-10-17,土,5247

2015-10-18,日,7987

2015-10-19,月,4463

2015-10-20,火,14501

2015-10-21,水,4400

2015-10-22,木,7239

2015-10-23,金,4969

2015-10-24,土,4050

2015-10-25,日,9834

2015-10-26,月,4673

2015-10-27,火,3650

2015-10-28,水,6527

2015-10-29,木,5606

2015-10-30,金,4531

2015-10-31,土,9416

2015-11-01,日,8546

2015-11-02,月,4248

2015-11-03,火,4870

2015-11-04,水,3659

2015-11-05,木,4547

2015-11-06,金,3215

2015-11-07,土,8549

2015-11-08,日,9861

2015-11-09,月,4712

2015-11-10,火,3126

2015-11-11,水,4294

2015-11-12,木,4157

2015-11-13,金,4875

2015-11-14,土,11597

2015-11-15,日,8496

2015-11-16,月,5258

2015-11-17,火,3649

2015-11-18,水,3930

2015-11-19,木,4755

2015-11-20,金,5097

2015-11-21,土,7944

2015-11-22,日,12340

2015-11-23,月,4987

2015-11-24,火,6868

2015-11-25,水,8744

2015-11-26,木,10131

2015-11-27,金,8129

2015-11-28,土,3241

2015-11-29,日,5367

2015-11-30,月,8545

2015-12-01,火,8876

2015-12-02,水,8732

2015-12-03,木,6160

2015-12-04,金,8139

2015-12-05,土,7258

2015-12-06,日,8639

2015-12-07,月,9878

2015-12-08,火,7713

2015-12-09,水,9271

2015-12-10,木,7684

2015-12-11,金,6884

2015-12-12,土,9826

2015-12-13,日,6423

2015-12-14,月,7277

2015-12-15,火,4722

2015-12-16,水,6820

2015-12-17,木,9306

2015-12-18,金,8018

2015-12-19,土,4055

2015-12-20,日,3285

2015-12-21,月,7695

2015-12-22,火,8513

2015-12-23,水,5089

2015-12-24,木,6402

2015-12-25,金,8974

2015-12-26,土,8129

2015-12-27,日,1772

2015-12-28,月,11485

2015-12-29,火,8643

2015-12-30,水,9262

2015-12-31,木,1658

2016-01-01,金,5076

2016-01-02,土,6418

2016-01-03,日,5487

2016-01-04,月,6660

2016-01-05,火,8197

2016-01-06,水,8290

2016-01-07,木,8012

2016-01-08,金,7316

2016-01-09,土,9299

2016-01-10,日,2489

2016-01-11,月,8206

2016-01-12,火,7721

2016-01-13,水,8239

2016-01-14,木,8842

2016-01-15,金,7720

2016-01-16,土,6082

2016-01-17,日,2154

2016-01-18,月,8498

2016-01-19,火,8909

2016-01-20,水,8353

2016-01-21,木,7917

2016-01-22,金,9836

2016-01-23,土,8641

2016-01-24,日,4121

2016-01-25,月,8349

2016-01-26,火,8939

2016-01-27,水,9336

2016-01-28,木,8451

2016-01-29,金,8881

2016-01-30,土,8546

2016-01-31,日,2769

2016-02-01,月,8494

2016-02-02,火,7809

2016-02-03,水,7711

2016-02-04,木,7777

2016-02-05,金,7298

2016-02-06,土,8255

2016-02-07,日,2432

2016-02-08,月,10522

2016-02-09,火,7925

2016-02-10,水,9162

2016-02-11,木,8742

2016-02-12,金,8962

2016-02-13,土,9217

2016-02-14,日,2857

2016-02-15,月,9689

2016-02-16,火,8365

2016-02-17,水,8510

2016-02-18,木,8472

2016-02-19,金,8189

2016-02-20,土,8411

2016-02-21,日,2321

2016-02-22,月,9263

2016-02-23,火,5413

2016-02-24,水,8499

2016-02-25,木,7990

2016-02-26,金,8043

2016-02-27,土,4414

2016-02-28,日,7175

2016-02-29,月,9767

2016-03-01,火,5510

2016-03-02,水,8564

2016-03-03,木,8151

2016-03-04,金,10105

2016-03-05,土,9250

2016-03-06,日,4957

2016-03-07,月,5223

2016-03-08,火,8381

2016-03-09,水,8446

2016-03-10,木,8249

2016-03-11,金,8132

2016-03-12,土,6580

2016-03-13,日,4186

2016-03-14,月,8275

2016-03-15,火,6987

2016-03-16,水,8093

2016-03-17,木,7459

2016-03-18,金,16445

2016-03-19,土,6219

2016-03-20,日,4994

2016-03-21,月,2326

2016-03-22,火,7731

2016-03-23,水,4978

2016-03-24,木,12151

2016-03-25,金,10255

2016-03-26,土,8202

これでデータの取得と整形が完了しました。

最後に、取得したデータを可視化していきます。

データビジュアライゼーションのライブラリでは「D3.js」が有名ですが、今回は「D3.js」から派生した「C3.js」というライブラリを試してみます。

「C3.js」は「D3.js」より自由度は少ないですが、さくっと実装できる強みがあります。

「C3.js」利用するには「C3.js」のJSファイルとCSSファイルが必要になります。あと、「D3.js」のJSファイルも必要になりますのでダウンロードします。

それではスクレイピング処理で作成した「Walking.csv」を使ってチャートを実装してみます。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="keywords" content="node.js,C3.js,歩数,チャート">
    <meta name="description" content="歩数チャート">
    <meta name="author" content="dayjournal">
    <title>歩数チャート</title>

    <!--D3.js読み込み-->
    <script src="./Library/d3/d3.min.js" charset="utf-8"></script>
    <!--C3.js読み込み-->
    <script src="./Library/c3/c3.min.js"></script>
    <link href="./Library/c3/c3.css" rel="stylesheet" />

</head>

<body>

    <div id="chart"></div>
    <script src="./Walking.js"></script>

</body>

</html>

<!DOCTYPE html>

<head>

<title>歩数チャート</title>

</head>

<body>

</body>

</html>

Walking.js

//C3.js宣言
var chart = c3.generate({
    data: {
        //外部ファイル設定
        url: './Walking.csv',
        //チャート形式設定:バーチャート
        type: 'bar'
    }
});

//10秒後にドーナツチャートに変化
setTimeout(function () {
    chart.transform('donut');
}, 10000);

//C3.js宣言

var chart = c3.generate({

data: {

//外部ファイル設定

url: './Walking.csv',

//チャート形式設定:バーチャート

type: 'bar'

}

});

//10秒後にドーナツチャートに変化

setTimeout(function () {

chart.transform('donut');

}, 10000);

index.htmlを実行すると下記のようにバーチャートが表示されます。

10秒後にドーナツチャートに変化します。

example

今回はNode.jsとC3.jsを利用して歩数情報をスクレイピングして可視化してみました。数字だけでは見えづらいものを可視化してみると見えてくるものがあります。

取得した歩数データを、曜日別に集計してみました。チャートを確認してみると、どうやら土曜日に一番歩いていることがわかりました。平日は通勤で1時間程度歩いているので、土曜日は平日の時間よりもさらに歩いていることになります。おそらく休みの日は比較的土曜日に活動して、日曜は少し休み気味なのでしょう。歩数が一番少ないのは水曜日ですが何故だろう。もっと細かく分析すれば要因を気見つけれそうですね。季節別だったり抽出方法を変えてもっと色々な分析ができそうです。

参考文献

cheerio-httpcli
async.js解説
 C3.js
[超速]C3.jsでチャート作成してみた

日付	曜日	歩数
2016.03.27	日	3411
2016.03.28	月	4362
2016.03.29	火	4620
2016.03.30	水	5035
2016.03.31	木	4882
2016.04.01	金	5264
2016.04.02	土	5312

Monthly Archives: 4月 2016

Walking #047

QGIS #032 – レイヤの属性値を変更するスクリプト

Walking #046

Walking #045

Try #001 – 歩数情報をスクレイピングして可視化してみた

①取得したいURLを実装

②スクレイピング処理を実装

③CSVに保存する処理を実装

④上記①②③を組み合わせた処理を実装

script.js

Walking.csv

Walking_moto.csv

index.html

Walking.js

Walking #044

Node.js #022 – gulpでCSSファイルにベンダープレフィックスを付与

gulpfile.js

stylesheet.css

元のstylesheet.css