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.

E2D3ハンズオン

282 views

Published on

2017.03.04
【E2D3】第1回スポーツ x データビジュアライゼーション ハッカソン@大桟橋
インターナショナル・オープンデータ・デイ

Published in: Technology
  • Login to see the comments

E2D3ハンズオン

  1. 1. 第1回スポーツ x データビジュアライゼーション ハッカソン E2D3ハンズオンセミナー 2017/03/04
  2. 2. 自己紹介 - えばた あや - @aya_122 - 株式会社アットウェア - お仕事は主にJava - E2D3 / Java女子部 / GTUG Girls / はじめてのハッカソン 他...
  3. 3. 今日のスライド http://goo.gl/1SzhyP
  4. 4. 今から話すこと E2D3テンプレートの 作り方を知ってもらう! (そして、作っちゃおう)
  5. 5. アジェンダ 1. 環境構築 2. 動かし方 3. 書き方(ちょっとだけ) 4. まとめ
  6. 6. 1. 環境構築
  7. 7. E2D3の環境を作るために必要なもの - Node.js - Git - Githubのアカウント - Excel 2013 or Excel Online - 今回はExcel Onlineの方で説明します
  8. 8. Node.jsを入れる https://nodejs.org/ja/
  9. 9. Gitの環境を作る Windows: https://git-for-windows.github.io/
  10. 10. Githubのアカウントを取得 https://github.com
  11. 11. Excel Onlineを始める OneDriveから https://onedrive.live.com/about/ja-jp/
  12. 12. E2D3の環境構築 - E2D3本体のインストール - E2D3テンプレートの取得
  13. 13. E2D3本体のインストール $ sudo npm install -g e2d3
  14. 14. E2D3テンプレートの取得 1. E2D3のGithubからe2d3-contribリポジトリを Fork
  15. 15. E2D3テンプレートの取得 2. 自分のGithubからclone cloneしたいディレクトリに移動して $ git clone <URL>
  16. 16. 2. 動かし方
  17. 17. E2D3の起動方法 1. e2d3-contribディレクトリに移動 2. e2d3コマンドを打つ 3. ブラウザが立ち上がる 立ち上がらない場合はlocalhost:8080へ 4. E2D3の起動、完了!
  18. 18. Excel Online上でデバッグを行う - 主に開発するときに使用するモード - ソースコードを変更したら、リアルタイムで 反映出来る
  19. 19. Excel Online上でデバッグを行う 1. E2D3を起動した状態で、 https://localhost:8443にアクセスして証明書 を許可 2. Excel Onlineを開いてアドインタブからE2D3 を選択
  20. 20. Excel Online上でデバッグを行う 3. E2D3本体をクリックしてから、 Ctrlキーを5回入力! 4. Go into delegate modeをクリック!
  21. 21. 3. 書き方(ちょっとだけ)
  22. 22. 川上くんの徒競走を例に説明します! ExcelとJavaScriptのデータのやり取り
  23. 23. ExcelとJavaScriptのデータのやり取り
  24. 24. ExcelとJavaScriptのデータのやり取り 川上くんの徒競走のソースコード - /e2d3-contrib/foot-race - https://github.com/e2d3/e2d3- contrib/tree/master/foot-race
  25. 25. ExcelとJavaScriptのデータのやり取り /e2d3-contrib/foot-race/main.js - update(data)メソッド - Excelでデータが更新されたら走る - 引数のdataにはExcelの値が入る
  26. 26. ExcelとJavaScriptのデータのやり取り
  27. 27. ExcelとJavaScriptのデータのやり取り /e2d3-contrib/foot-race/main.js - toList()メソッド - 二次元配列をリストへ変換
  28. 28. toMap()メソッド ExcelとJavaScriptのデータのやり取り
  29. 29. transpose()メソッド ExcelとJavaScriptのデータのやり取り
  30. 30. グラフが出来たら...? Pull Requestお願いします!!
  31. 31. まとめ - E2D3の環境構築について話しました - 動かし方や書き方についても話しました それでは皆さん、実際にE2D3のテンプレートを 作ってみましょう!!!!!!←
  32. 32. 参考資料 もっと詳しく知りたい方は、E2D3のwikiへ! https://github.com/e2d3/e2d3/wiki/Getting-Started_ja

×