Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Dockerで作るd3.jsインタラクション共有&DL環境

1,255 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

Dockerで作るd3.jsインタラクション共有&DL環境

  1. 1. Dockerで作る d3.jsインタラクション 共有&DL環境 大石ナオヤ / “dogrun” Inc. ! oec014 2015-03-07 Mishima.syk
  2. 2. Dockerとは ホストOSに独立したアプリケーションのデプ ロイ・実行環境のコンテナを作る仮想化技術。 オーバーヘッドが小さい、環境を別サーバに移 して実行することが容易、などが優れた点とさ れています。
  3. 3. 経緯 バイオハッカソン BH14.14で、Dockerを集中 的に学習する機会!! データ可視化に使えそうなアプリケーションサー バを作っておこう → サービスを組みあわせる とある課題を解決できるイメージが…
  4. 4. Data visualizeなサービスの よくある課題 「可視化の結果である統計量やグラフを静的 なファイルとして利用したい。」
  5. 5. サービスの構成 環境: Mac OSX + Vargrant + CoreOS + Docker ! アプリケーションのフレームワーク: Meteor + PhantomJS
  6. 6. PhantomJSとは JavaScript APIでコントロールできる、headless なWebKitブラウザ。 テスティングフレームワークやWebの自動処 理、画面キャプチャーなどに使われる。
  7. 7. Meteorとは Node.jsのフレームワークでMongoDBを内蔵。 MonogDBのデータはサーバとクライアントでミラーリングされ る(publish-subscribeによる同期)。 あるデータに対しておこなった変更が自動的に他の部分に影響 を及ぼすプログラミングパラダイム=「リアクティブ・プログラ ミング」に対応している。 変更のあったデータを「リアクティブ・データソース」、変更さ れた際に実行される関数を「リアクティブ・コンテキスト」とさ れている。
  8. 8. d3.jsのインタラクションチャートの Meteor + PhantomJSを使った画像キャプチャモデル
  9. 9. Meteorからd3.js更新+ PhantomJSのメソッド呼出し デモ # d3.jsのインタラクション共有のみのデモはmeteor.comに。 http://simpled3reactiveapp.meteor.com ! # キャプチャのデモはMacのDockerコンテナに構築した環境で 行います。
  10. 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. 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. 12. 実際にDockerでMeteor & PhanotmJSの環境を作ってみます
  13. 13. Meteorはd3.jsのキャプ チャーに実際使えるのか? キャプチャーのためだけにMeteorを使うことは、やっぱ無い! 再描画の方法など通常のd3.jsの書き方と大きく変わってる。 リアクティブ前提の - たとえばチャットしながら地図に色々プロッ トして、キャプチャーした画像を送るとか -サービスはできそう クライアントのみでPNGの書き出しを行う方法もいろいろ考え られてはいます。ただコレと言う定番はまだ無さそう。 HighChartのように書き出せるのが理想……書き出しや再利用性 などを考慮したd3.jsのより良い記法を実装者が意識して作って いきたいものです。
  14. 14. サービス制作者とって Dockerの良いところ アプリケーションの実装に集中できる。 - 統計 ライブラリ、画像ライブラリなどインタプリタ のバージョンと相性があったり、サービス構築 で環境作るのがひと作業だったりしませんか? 新しいモジュール・フレームワークを知り、試 してみて、新しいソリューションのアイデアが 生まれるかもしれない。
  15. 15. ソースコードとDocker file • github • https://github.com/dogrunjp/d3MeteorS2P • Docker Hub • https://registry.hub.docker.com/u/ dogrunjp/docker-meteor-phantomjs/

×