【総計５万はてブ！】QiitaのAdvent Calendarのはてブ数をNode.jsで集計してRactive.jsで表示する

## 結果

http://kazuph.github.io/advent-calendar-aggregator/

![rank](http://i.gyazo.com/05c1a249f6215b373aa14789293264a0.png)

今日時点の集計結果はこちらです。なんとGitが1位です！おめでとうございます！
さっきまでVimが１位だったのね＞＜

```
総はてブ数: 50,681
総記事数: 3,818/5,350
テーマ数214

【完走✕】1位 Git はてブ数合計: 2018, 記事数: 22
【完走○】2位 Vim はてブ数合計: 1887, 記事数: 25
【完走✕】3位 クローラー／スクレイピング はてブ数合計: 1759, 記事数: 24
【完走✕】4位 Yahoo! JAPAN Tech はてブ数合計: 1700, 記事数: 22
【完走○】5位 Pepabo はてブ数合計: 1622, 記事数: 25
【完走○】6位 Webアプリエンジニア養成読本 はてブ数合計: 1413, 記事数: 25
【完走✕】7位 VirtualDOM はてブ数合計: 1370, 記事数: 24
【完走✕】8位 PHP はてブ数合計: 1358, 記事数: 24
【完走✕】9位 JavaScript はてブ数合計: 1296, 記事数: 22
【完走○】10位 MySQL Casual はてブ数合計: 1276, 記事数: 25
【完走✕】11位 Ruby on Rails はてブ数合計: 1265, 記事数: 24
【完走✕】12位 Ruby はてブ数合計: 1210, 記事数: 24
【完走✕】13位 h2o はてブ数合計: 1206, 記事数: 18
【完走○】14位 Go はてブ数合計: 1183, 記事数: 25
【完走○】15位 Frontrend はてブ数合計: 1168, 記事数: 25
【完走○】16位 HTTP2 はてブ数合計: 1140, 記事数: 25
【完走○】17位 Perl はてブ数合計: 1139, 記事数: 25
【完走✕】18位 Docker はてブ数合計: 1100, 記事数: 24
【完走✕】19位 Perl入学式 はてブ数合計: 1091, 記事数: 24
【完走✕】20位 Sensu はてブ数合計: 1065, 記事数: 19
【完走✕】21位 Machine Learning はてブ数合計: 1044, 記事数: 21
【完走○】22位 Node.js はてブ数合計: 978, 記事数: 25
【完走✕】23位 ピクシブ株式会社 はてブ数合計: 902, 記事数: 18
【完走✕】24位 Swift はてブ数合計: 893, 記事数: 24
【完走○】25位 ドワンゴ はてブ数合計: 757, 記事数: 25
【完走✕】26位 PostgreSQL はてブ数合計: 650, 記事数: 23
【完走○】27位 Livesense はてブ数合計: 604, 記事数: 25
【完走✕】28位 Fluentd はてブ数合計: 578, 記事数: 24
【完走○】29位 Linux はてブ数合計: 565, 記事数: 25
【完走✕】30位 iOS はてブ数合計: 551, 記事数: 22
【完走○】31位 Android はてブ数合計: 539, 記事数: 25
【完走○】32位 AWS はてブ数合計: 490, 記事数: 25
【完走✕】33位 例外 はてブ数合計: 470, 記事数: 5
【完走✕】34位 TypeScript はてブ数合計: 425, 記事数: 24
【完走✕】35位 Elasticsearch はてブ数合計: 361, 記事数: 23
【完走✕】36位 Python はてブ数合計: 356, 記事数: 24
【完走✕】37位 Oculus Rift はてブ数合計: 340, 記事数: 24
【完走○】38位 Java はてブ数合計: 340, 記事数: 25
【完走✕】39位 Haskell はてブ数合計: 323, 記事数: 22
【完走○】40位 C++ はてブ数合計: 316, 記事数: 25
【完走○】41位 G*Advent Calendar(Groovy,Grails,Gradle,Spock...) はてブ数合計: 311, 記事数: 25
【完走✕】42位 HTML5 はてブ数合計: 298, 記事数: 23
【完走○】43位 zsh はてブ数合計: 296, 記事数: 25
【完走○】44位 CYBIRDエンジニア はてブ数合計: 295, 記事数: 25
【完走○】45位 mod_mruby ngx_mruby はてブ数合計: 284, 記事数: 25
【完走✕】46位 Unity はてブ数合計: 282, 記事数: 23
【完走✕】47位 AWS Lambda はてブ数合計: 278, 記事数: 21
【完走✕】48位 Emacs はてブ数合計: 262, 記事数: 24
【完走○】49位 一人React.js はてブ数合計: 260, 記事数: 25
【完走○】50位 Scala はてブ数合計: 256, 記事数: 25
【完走✕】51位 株式会社LIG はてブ数合計: 244, 記事数: 22
【完走○】52位 Java EE はてブ数合計: 244, 記事数: 25
【完走✕】53位 Slack はてブ数合計: 240, 記事数: 23
【完走○】54位 WebRTC はてブ数合計: 227, 記事数: 25
【完走✕】55位 HeartRails はてブ数合計: 218, 記事数: 6
【完走✕】56位 Tech Women はてブ数合計: 217, 記事数: 20
【完走○】57位 Heroku はてブ数合計: 211, 記事数: 25
【完走✕】58位 株式会社リクルートテクノロジーズ はてブ数合計: 205, 記事数: 18
【完走✕】59位 Bluetooth Low Energy はてブ数合計: 205, 記事数: 23
【完走○】60位 Postfix はてブ数合計: 204, 記事数: 25
【完走✕】61位 AngularJS はてブ数合計: 196, 記事数: 24
【完走✕】62位 CoreOS はてブ数合計: 195, 記事数: 4
【完走✕】63位 Ansible はてブ数合計: 194, 記事数: 23
【完走✕】64位 Spark, SQL on Hadoop etc. はてブ数合計: 189, 記事数: 22
【完走✕】65位 CakePHP はてブ数合計: 174, 記事数: 24
【完走✕】66位 UEFI はてブ数合計: 173, 記事数: 18
【完走✕】67位 1分で実現できる有用な技術 はてブ数合計: 172, 記事数: 22
【完走✕】68位 C# はてブ数合計: 160, 記事数: 24
【完走✕】69位 Elm はてブ数合計: 149, 記事数: 16
【完走✕】70位 アジャイルCasual はてブ数合計: 144, 記事数: 17
【完走✕】71位 Treasure Data はてブ数合計: 142, 記事数: 23
【完走✕】72位 Gunosy はてブ数合計: 141, 記事数: 20
【完走○】73位 TECHSCORE はてブ数合計: 140, 記事数: 25
【完走○】74位 Symfony はてブ数合計: 140, 記事数: 25
【完走✕】75位 Google Cloud Platform はてブ数合計: 138, 記事数: 24
【完走○】76位 おうちハック はてブ数合計: 137, 記事数: 25
【完走○】77位 Erlang はてブ数合計: 137, 記事数: 25
【完走○】78位 WebGL はてブ数合計: 135, 記事数: 25
【完走○】79位 Phalcon はてブ数合計: 131, 記事数: 25
【完走✕】80位 nginx はてブ数合計: 130, 記事数: 11
【完走○】81位 Tableau Software Tips&Viz(全部俺) はてブ数合計: 122, 記事数: 25
【完走✕】82位 Julia はてブ数合計: 119, 記事数: 24
【完走✕】83位 Kazoo04 はてブ数合計: 114, 記事数: 23
【完走✕】84位 Laravel はてブ数合計: 112, 記事数: 21
【完走✕】85位 Swift-2 はてブ数合計: 107, 記事数: 3
【完走○】86位 Xamarin はてブ数合計: 106, 記事数: 25
【完走✕】87位 milkcocoa はてブ数合計: 101, 記事数: 19
【完走✕】88位 tmlib.js はてブ数合計: 98, 記事数: 19
【完走○】89位 Unreal Engine 4 (UE4) はてブ数合計: 94, 記事数: 25
【完走○】90位 Iwate Developers はてブ数合計: 91, 記事数: 25
【完走○】91位 Ruboty はてブ数合計: 89, 記事数: 25
【完走○】92位 Titanium はてブ数合計: 87, 記事数: 25
【完走○】93位 WatchKit はてブ数合計: 86, 記事数: 25
【完走✕】94位 R はてブ数合計: 84, 記事数: 24
【完走✕】95位 Selenium/Appium はてブ数合計: 81, 記事数: 17
【完走✕】96位 CUDA & OpenCL はてブ数合計: 79, 記事数: 15
【完走✕】97位 XAML はてブ数合計: 76, 記事数: 23
【完走✕】98位 Kubernetes はてブ数合計: 72, 記事数: 22
【完走○】99位 仙台iOS開発者勉強会(SWWDC) はてブ数合計: 67, 記事数: 25
【完走✕】100位 RubyMine はてブ数合計: 67, 記事数: 24
【完走✕】101位 Evil はてブ数合計: 60, 記事数: 9
【完走✕】102位 KnockoutJS はてブ数合計: 58, 記事数: 24
【完走✕】103位 JVM はてブ数合計: 58, 記事数: 9
【完走✕】104位 1円にもならない無駄な技術 はてブ数合計: 58, 記事数: 22
【完走✕】105位 Atom はてブ数合計: 56, 記事数: 11
【完走✕】106位 ML はてブ数合計: 54, 記事数: 22
【完走✕】107位 OS X はてブ数合計: 53, 記事数: 9
【完走○】108位 Cocos2d-x はてブ数合計: 50, 記事数: 25
【完走✕】109位 WebStorm / PhpStorm はてブ数合計: 46, 記事数: 16
【完走✕】110位 Vue.js はてブ数合計: 46, 記事数: 10
【完走○】111位 Dart はてブ数合計: 46, 記事数: 25
【完走✕】112位 Lisp はてブ数合計: 41, 記事数: 22
【完走○】113位 Visual Studio はてブ数合計: 40, 記事数: 25
【完走○】114位 NetBSD はてブ数合計: 40, 記事数: 25
【完走✕】115位 ASP.NET はてブ数合計: 38, 記事数: 24
【完走○】116位 スマフォスロットイン系HMD はてブ数合計: 37, 記事数: 25
【完走✕】117位 Haxe はてブ数合計: 36, 記事数: 14
【完走✕】118位 MongoDB はてブ数合計: 35, 記事数: 15
【完走✕】119位 Oculus Rift 2 はてブ数合計: 34, 記事数: 12
【完走✕】120位 Azure はてブ数合計: 34, 記事数: 24
【完走○】121位 Lucene / Solr はてブ数合計: 33, 記事数: 25
【完走✕】122位 JavaScript for OSX Automation AppleScriptの代替をJavaScriptでやるサンプル はてブ数合計: 33, 記事数: 15
【完走○】123位 岩手県立大学ソフトウェア情報学部 はてブ数合計: 32, 記事数: 25
【完走○】124位 これからはじめるGulp.js（全俺） はてブ数合計: 32, 記事数: 25
【完走✕】125位 Groonga はてブ数合計: 31, 記事数: 24
【完走○】126位 AR(Augmented Reality) はてブ数合計: 30, 記事数: 25
【完走✕】127位 オブジェクト指向 はてブ数合計: 29, 記事数: 19
【完走○】128位 Yii2 はてブ数合計: 29, 記事数: 25
【完走✕】129位 Google Apps Script はてブ数合計: 28, 記事数: 8
【完走✕】130位 Data Visualization はてブ数合計: 28, 記事数: 16
【完走✕】131位 BEAR.Sunday はてブ数合計: 28, 記事数: 22
【完走○】132位 1枚目 SoftLayer はてブ数合計: 28, 記事数: 25
【完走✕】133位 CSS はてブ数合計: 27, 記事数: 16
【完走✕】134位 Clojure はてブ数合計: 27, 記事数: 22
【完走✕】135位 Unity Assets はてブ数合計: 26, 記事数: 23
【完走○】136位 Smalltalk はてブ数合計: 23, 記事数: 25
【完走✕】137位 VyOS はてブ数合計: 22, 記事数: 14
【完走✕】138位 Qt はてブ数合計: 22, 記事数: 24
【完走✕】139位 FOSS4G はてブ数合計: 22, 記事数: 24
【完走✕】140位 Edison はてブ数合計: 22, 記事数: 19
【完走✕】141位 D言語 はてブ数合計: 22, 記事数: 22
【完走✕】142位 d3.js はてブ数合計: 22, 記事数: 12
【完走✕】143位 OSv はてブ数合計: 20, 記事数: 16
【完走✕】144位 MySQL Fabricつらい はてブ数合計: 20, 記事数: 19
【完走✕】145位 プロ生ちゃん はてブ数合計: 18, 記事数: 22
【完走✕】146位 Yesod はてブ数合計: 18, 記事数: 1
【完走✕】147位 Bitcoin はてブ数合計: 18, 記事数: 13
【完走✕】148位 Elixir はてブ数合計: 17, 記事数: 24
【完走○】149位 CMake はてブ数合計: 17, 記事数: 25
【完走✕】150位 VVVV はてブ数合計: 16, 記事数: 18
【完走○】151位 Salesforce1 はてブ数合計: 16, 記事数: 25
【完走✕】152位 AWS vol.2 はてブ数合計: 16, 記事数: 4
【完走✕】153位 Backbone.js はてブ数合計: 15, 記事数: 2
【完走✕】154位 Excel はてブ数合計: 14, 記事数: 7
【完走✕】155位 マイナー言語 はてブ数合計: 13, 記事数: 14
【完走✕】156位 Theorem Prover はてブ数合計: 11, 記事数: 17
【完走✕】157位 Chef はてブ数合計: 11, 記事数: 8
【完走✕】158位 Ceph and GlusterFS はてブ数合計: 11, 記事数: 3
【完走○】159位 COM はてブ数合計: 10, 記事数: 25
【完走✕】160位 Civic Tech Advent Calendar 2014 はてブ数合計: 10, 記事数: 11
【完走✕】161位 ドキュメント作成技術 はてブ数合計: 9, 記事数: 5
【完走○】162位 2枚目 SoftLayer はてブ数合計: 9, 記事数: 25
【完走✕】163位 Webix はてブ数合計: 8, 記事数: 10
【完走✕】164位 dietcake はてブ数合計: 8, 記事数: 22
【完走○】165位 パッケージソフトウェア開発 はてブ数合計: 7, 記事数: 25
【完走✕】166位 SublimeText はてブ数合計: 7, 記事数: 2
【完走✕】167位 PureScript はてブ数合計: 7, 記事数: 6
【完走✕】168位 Lua はてブ数合計: 7, 記事数: 6
【完走✕】169位 Blender はてブ数合計: 7, 記事数: 13
【完走✕】170位 blackbird はてブ数合計: 7, 記事数: 20
【完走✕】171位 WordPress はてブ数合計: 6, 記事数: 7
【完走○】172位 Firebird はてブ数合計: 5, 記事数: 25
【完走✕】173位 株式会社アトラエ はてブ数合計: 4, 記事数: 11
【完走○】174位 Salesforce1 Lightning はてブ数合計: 4, 記事数: 25
【完走✕】175位 Meteor はてブ数合計: 4, 記事数: 6
【完走✕】176位 ffmpeg はてブ数合計: 4, 記事数: 4
【完走✕】177位 Visual Basic はてブ数合計: 3, 記事数: 13
【完走✕】178位 Prolog はてブ数合計: 3, 記事数: 7
【完走✕】179位 Pepper はてブ数合計: 3, 記事数: 9
【完走✕】180位 Objective-C はてブ数合計: 3, 記事数: 5
【完走✕】181位 Gentoo はてブ数合計: 3, 記事数: 7
【完走○】182位 Friendly はてブ数合計: 3, 記事数: 25
【完走○】183位 FileMaker はてブ数合計: 3, 記事数: 25
【完走✕】184位 Corona SDK はてブ数合計: 3, 記事数: 7
【完走✕】185位 開発環境全般 はてブ数合計: 2, 記事数: 2
【完走✕】186位 Riot API Advent Calendar はてブ数合計: 2, 記事数: 7
【完走✕】187位 Polymer はてブ数合計: 2, 記事数: 3
【完走✕】188位 PivotalTracker はてブ数合計: 2, 記事数: 2
【完走✕】189位 RSpec はてブ数合計: 1, 記事数: 1
【完走✕】190位 Open PaaS(Cloud Foundry,OpenShift,etc) はてブ数合計: 1, 記事数: 8
【完走✕】191位 Espruino はてブ数合計: 1, 記事数: 21
【完走✕】192位 Adobe はてブ数合計: 1, 記事数: 13
【完走✕】193位 Abby はてブ数合計: 1, 記事数: 5
【完走✕】194位 ひとりで Unity はてブ数合計: 0, 記事数: 13
【完走✕】195位 からくりカレンダー はてブ数合計: 0, 記事数: 0
【完走✕】196位 UI Design はてブ数合計: 0, 記事数: 2
【完走✕】197位 TechBuzz はてブ数合計: 0, 記事数: 0
【完走✕】198位 Tableau はてブ数合計: 0, 記事数: 1
【完走✕】199位 sysd はてブ数合計: 0, 記事数: 3
【完走✕】200位 sails.js はてブ数合計: 0, 記事数: 14
【完走✕】201位 RubyMotion はてブ数合計: 0, 記事数: 0
【完走✕】202位 ROS はてブ数合計: 0, 記事数: 7
【完走✕】203位 Pull Request はてブ数合計: 0, 記事数: 0
【完走✕】204位 MYO はてブ数合計: 0, 記事数: 0
【完走✕】205位 MAX はてブ数合計: 0, 記事数: 6
【完走✕】206位 libgit2 はてブ数合計: 0, 記事数: 2
【完走✕】207位 Internet of Things はてブ数合計: 0, 記事数: 4
【完走✕】208位 Hadoop はてブ数合計: 0, 記事数: 1
【完走✕】209位 Hack はてブ数合計: 0, 記事数: 0
【完走✕】210位 GAMEBOY Development はてブ数合計: 0, 記事数: 4
【完走○】211位 Delphi / Appmethod はてブ数合計: 0, 記事数: 25
【完走○】212位 baserJS はてブ数合計: 0, 記事数: 25
【完走○】213位 AVX-512 はてブ数合計: 0, 記事数: 25
【完走✕】214位 Alfred はてブ数合計: 0, 記事数: 3
```

## 概要

雑ですがNode.jsと最近はやりのRactiveJSを駆使して、QiitaでのAdvent Calendarの集計（スクレイピング）とグラフ表示をやってみました！

スクレイピングでの収集結果をjsonにして、htmlからはそのjsonを読み込んでRactive.jsに突っ込んでいる感じです。DBを使わないで、jsonをDBの代わりにしている感じですね。

使ったモジュールは以下です。

- スクレイピングスクリプト
    - async
        - 非同期処理を出来るだけネストしないで記述するため
        - `async.map`の2重ループを書いたんだけど、普通に動作しててなんかすごい
    - restler
        - RESTなAPIを叩くため
        - 今回ははてブ数を取得するために使用
    - scraperjs
        - スクレイピング用
        - めっちゃ書きやすい
        - 内部でcheerioというDOMをjQeury的にいじれるライブラリを使っいて簡単にスクラップできる
- 表示
    - Ractive.js
        - なんかテンプレとか使えて一瞬で表示できた。便利。
    - Highchart.js
        - グラフライブラリも色々みたけど、割りと使いやすい方だった。
    - Underscore.js
        - Rubyになれていたのでさくっとmapとか使いたいとき用に使用。少なくともクライアントサイドでいじいじしたいなら必須で導入したいなって思った。

ソースはこちら。

[https://github.com/kazuph/advent-calendar-aggregator](https://github.com/kazuph/advent-calendar-aggregator)

がんばってもうちょっと綺麗にしようー、と。