MeteorのリアクティブプログラミングとPhantomJSを使っでインタラクティブにd3.jsのチャートを画像で保存するサービスと、このサービスのDockerコンテナでの環境構築ついての解説です。

1. Dockerで作る
d3.jsインタラクション
共有&DL環境
大石ナオヤ / “dogrun” Inc. ! oec014
2015-03-07 Mishima.syk

2. Dockerとは
ホストOSに独立したアプリケーションのデプ
ロイ・実行環境のコンテナを作る仮想化技術。
オーバーヘッドが小さい、環境を別サーバに移
して実行することが容易、などが優れた点とさ
れています。

3. 経緯
バイオハッカソン BH14.14で、Dockerを集中
的に学習する機会！!
データ可視化に使えそうなアプリケーションサー
バを作っておこう → サービスを組みあわせる
とある課題を解決できるイメージが…

4. Data visualizeなサービスの
よくある課題
「可視化の結果である統計量やグラフを静的
なファイルとして利用したい。」

5. サービスの構成
環境：
Mac OSX + Vargrant + CoreOS + Docker
!
アプリケーションのフレームワーク：
Meteor + PhantomJS

6. PhantomJSとは
JavaScript APIでコントロールできる、headless
なWebKitブラウザ。
テスティングフレームワークやWebの自動処
理、画面キャプチャーなどに使われる。

7. Meteorとは
Node.jsのフレームワークでMongoDBを内蔵。
MonogDBのデータはサーバとクライアントでミラーリングされ
る（publish-subscribeによる同期）。
あるデータに対しておこなった変更が自動的に他の部分に影響
を及ぼすプログラミングパラダイム＝「リアクティブ・プログラ
ミング」に対応している。
変更のあったデータを「リアクティブ・データソース」、変更さ
れた際に実行される関数を「リアクティブ・コンテキスト」とさ
れている。

8. d3.jsのインタラクションチャートの
Meteor + PhantomJSを使った画像キャプチャモデル

9. Meteorからd3.js更新＋
PhantomJSのメソッド呼出し
デモ
# d3.jsのインタラクション共有のみのデモはmeteor.comに。
http://simpled3reactiveapp.meteor.com
!
# キャプチャのデモはMacのDockerコンテナに構築した環境で
行います。

10. Macでコンテナを利用する
かなりざっくりとした手順
1. caskをインストール //homebrewの拡張
2. virtualvoxをインストール（brew cask install virtualbox）
3. vagrantをインストール
4. coreos-vagrantをgitclone
5. CoreOSを起動（ vagrant up && vagrant ssh）
6. CoreOSから docker run
7. optionでポートや永続化するディレクトリを設定
A. Meteorの場合の例）docker run -it -p 8080:300 ubuntu -bash
B. 永続化手段があると開発楽）docker run -it -v $(pwd) :/data ubuntu bash

11. Dockerで
Meteorアプリを起動する
1. coreos-vagrant $ vagrant up && vagrant ssh
2. core@core-01 - $ cd share // /coreos-vagrant/の下に永続化するデータ用の
ディレクトリを作りそちらをカレントディレクトリにします。
3. core@core-01 -/share/myapp $ docker run -it -p 8080:3000 -v $(pwd) :/
data dogrun/docker-meteor-phantomjs
4. # cd data
5. meteor create myapp
6. cd myapp
7. meteor

12. 実際にDockerでMeteor &
PhanotmJSの環境を作ってみます

13. Meteorはd3.jsのキャプ
チャーに実際使えるのか？
キャプチャーのためだけにMeteorを使うことは、やっぱ無い！
再描画の方法など通常のd3.jsの書き方と大きく変わってる。
リアクティブ前提の - たとえばチャットしながら地図に色々プロッ
トして、キャプチャーした画像を送るとか -サービスはできそう
クライアントのみでPNGの書き出しを行う方法もいろいろ考え
られてはいます。ただコレと言う定番はまだ無さそう。
HighChartのように書き出せるのが理想……書き出しや再利用性
などを考慮したd3.jsのより良い記法を実装者が意識して作って
いきたいものです。

14. サービス制作者とって
Dockerの良いところ
アプリケーションの実装に集中できる。 - 統計
ライブラリ、画像ライブラリなどインタプリタ
のバージョンと相性があったり、サービス構築
で環境作るのがひと作業だったりしませんか？
新しいモジュール・フレームワークを知り、試
してみて、新しいソリューションのアイデアが
生まれるかもしれない。

15. ソースコードとDocker file
• github
• https://github.com/dogrunjp/d3MeteorS2P
• Docker Hub
• https://registry.hub.docker.com/u/
dogrunjp/docker-meteor-phantomjs/