Monthly Archives: 4月 2016

Walking #047

 

日付 曜日 歩数
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

 

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

 

QGISで、レイヤの属性値を変更するスクリプトは下記のように記述します。

 

 

実行すると2レコード目の2番目フィールドの値が9999の変更されます。

QGIS_032_01

 

QGIS_032_02

 

1レコード目の3番目フィールドの値を1111に変更の場合:

 
 

  • 参考文献

QGIS

 

Walking #046

 

日付 曜日 歩数
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

 

Walking #045

 

日付 曜日 歩数
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

 

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

 

try_001_09

 

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

 

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

 

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

 
 

①取得したいURLを実装

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

 

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

 
 

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

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

 

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

 

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

 

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

 

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

 
 

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

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

 

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

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

 
 

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

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

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

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

try_001_03

 

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

try_001_04

 

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

script.js

 

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

try_001_01

try_001_02

 

try_001_08

 

Walking.csv

 

Walking_moto.csv

 

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

 

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

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

 

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

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

 

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

 

index.html

 

Walking.js

 

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

 

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

 

example

 

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

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

 
 

  • 参考文献

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

 

Walking #044

 

日付 曜日 歩数
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
合計
32886

 

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

 

今回は、「gulp」でCSSファイルにベンダープレフィックスを付与する方法を試したいと思います。

 

node.js_016_02

 

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

 

node.js_022_01

 

gulpfile.js

 

作業フォルダでgulpを実行すると下記のようにコマンドプロンプトに表示されます。

 

node.js_022_02

 

処理が完了すると、distフォルダにベンダープレフィックスが付与された「stylesheet.css」が作成されます。

node.js_022_03

 

stylesheet.css

 

元のstylesheet.css

 
 

ベンダープレフィックスのモジュール読込み:

 

ベンダープレフィックスを付与してdistフォルダに保存:

 

各ブラウザのバージョンが2つ前までのベンダープレフィックスを付与:
※オプションを設定することによって様々なバージョンのベンダープレフィックスの付与が可能

 

gulp-autoprefixerモジュールを利用することによりベンダープレフィックスの付与を自動で実行することができます。

 
 

  • 参考文献

gulp
gulp-autoprefixer
Gulp.js入門