E2D3ハンズオン

第１回スポーツ x データビジュアライゼーションハッカソン
E2D3ハンズオンセミナー
2017/03/04

自己紹介
- えばたあや
- @aya_122
- 株式会社アットウェア
- お仕事は主にJava
- E2D3 / Java女子部 / GTUG Girls
/ はじめてのハッカソン他...

今日のスライド
http://goo.gl/1SzhyP

今から話すこと
E2D3テンプレートの
作り方を知ってもらう！
（そして、作っちゃおう）

アジェンダ
1. 環境構築
2. 動かし方
3. 書き方（ちょっとだけ）
4. まとめ

E2D3の環境を作るために必要なもの
- Node.js
- Git
- Githubのアカウント
- Excel 2013 or Excel Online
- 今回はExcel Onlineの方で説明します

Node.jsを入れる
https://nodejs.org/ja/

Gitの環境を作る
Windows: https://git-for-windows.github.io/

Githubのアカウントを取得
https://github.com

Excel Onlineを始める
OneDriveから
https://onedrive.live.com/about/ja-jp/

E2D3の環境構築
- E2D3本体のインストール
- E2D3テンプレートの取得

E2D3本体のインストール
$ sudo npm install -g e2d3

E2D3テンプレートの取得
1. E2D3のGithubからe2d3-contribリポジトリを
Fork

E2D3テンプレートの取得
2. 自分のGithubからclone
cloneしたいディレクトリに移動して
$ git clone <URL>

E2D3の起動方法
1. e2d3-contribディレクトリに移動
2. e2d3コマンドを打つ
3. ブラウザが立ち上がる
立ち上がらない場合はlocalhost:8080へ
4. E2D3の起動、完了！

Excel Online上でデバッグを行う
- 主に開発するときに使用するモード
- ソースコードを変更したら、リアルタイムで
反映出来る

1. E2D3を起動した状態で、
https://localhost:8443にアクセスして証明書
を許可
2. Excel Onlineを開いてアドインタブからE2D3
を選択

3. E2D3本体をクリックしてから、
Ctrlキーを5回入力！
4. Go into delegate modeをクリック！

3. 書き方（ちょっとだけ）

川上くんの徒競走を例に説明します！
ExcelとJavaScriptのデータのやり取り

川上くんの徒競走のソースコード
- /e2d3-contrib/foot-race
- https://github.com/e2d3/e2d3-
contrib/tree/master/foot-race

/e2d3-contrib/foot-race/main.js
- update(data)メソッド
- Excelでデータが更新されたら走る
- 引数のdataにはExcelの値が入る

/e2d3-contrib/foot-race/main.js
- toList()メソッド
- 二次元配列をリストへ変換

toMap()メソッド

transpose()メソッド

グラフが出来たら...？
Pull Requestお願いします！！

まとめ
- E2D3の環境構築について話しました
- 動かし方や書き方についても話しました
それでは皆さん、実際にE2D3のテンプレートを
作ってみましょう！！！！！！←

参考資料
もっと詳しく知りたい方は、E2D3のwikiへ！
https://github.com/e2d3/e2d3/wiki/Getting-Started_ja

More Related Content