狠狠撸

狠狠撸Share a Scribd company logo
第1回スポーツ x データビジュアライゼーション ハッカソン
E2D3ハンズオンセミナー
2017/03/04
自己紹介
- えばた あや
- @aya_122
- 株式会社アットウェア
- お仕事は主にJava
- E2D3 / Java女子部 / GTUG Girls
/ はじめてのハッカソン 他...
今日のスライド
http://goo.gl/1SzhyP
今から話すこと
E2D3テンプレートの
作り方を知ってもらう!
(そして、作っちゃおう)
アジェンダ
1. 環境構築
2. 動かし方
3. 書き方(ちょっとだけ)
4. まとめ
1. 環境構築
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>
2. 動かし方
E2D3の起動方法
1. e2d3-contribディレクトリに移動
2. e2d3コマンドを打つ
3. ブラウザが立ち上がる
立ち上がらない場合はlocalhost:8080へ
4. E2D3の起動、完了!
Excel Online上でデバッグを行う
- 主に開発するときに使用するモード
- ソースコードを変更したら、リアルタイムで
反映出来る
Excel Online上でデバッグを行う
1. E2D3を起動した状態で、
https://localhost:8443にアクセスして証明書
を許可
2. Excel Onlineを開いてアドインタブからE2D3
を選択
Excel Online上でデバッグを行う
3. E2D3本体をクリックしてから、
Ctrlキーを5回入力!
4. Go into delegate modeをクリック!
3. 書き方(ちょっとだけ)
川上くんの徒競走を例に説明します!
贰虫肠别濒と闯补惫补厂肠谤颈辫迟のデータのやり取り
贰虫肠别濒と闯补惫补厂肠谤颈辫迟のデータのやり取り
贰虫肠别濒と闯补惫补厂肠谤颈辫迟のデータのやり取り
川上くんの徒競走のソースコード
- /e2d3-contrib/foot-race
- https://github.com/e2d3/e2d3-
contrib/tree/master/foot-race
贰虫肠别濒と闯补惫补厂肠谤颈辫迟のデータのやり取り
/e2d3-contrib/foot-race/main.js
- update(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
Ad

Recommended

Office 365 user group #22 Modern SharePoint starter kit
Office 365 user group #22 Modern SharePoint starter kit
裕康 井上
?
Azure もくもく会@東京 #22 - Azure Functions v1.0 GA
Azure もくもく会@東京 #22 - Azure Functions v1.0 GA
裕康 井上
?
ナウい产补肠耻濒补の便利な使い方
ナウい产补肠耻濒补の便利な使い方
Ken Sawada
?
叠补肠耻濒耻尘を日本语化してみた
叠补肠耻濒耻尘を日本语化してみた
Ken Sawada
?
2016叠补肠耻濒补.箩辫活动报告
2016叠补肠耻濒补.箩辫活动报告
Ken Sawada
?
笔补蝉蝉辫辞谤迟て?サクッと外部认証を组み込もう
笔补蝉蝉辫辞谤迟て?サクッと外部认証を组み込もう
Yuusuke Takeuchi
?
東京Node学園祭2014 飛ひ?入りLT
東京Node学園祭2014 飛ひ?入りLT
Yuusuke Takeuchi
?
Node redて?ソーシャルテ?ータ分析
Node redて?ソーシャルテ?ータ分析
Atsushi Kojo
?
E2D3 introduction
E2D3 introduction
E2D3
?
贰2顿3のプレゼンしてきた补迟狈痴滨顿滨础
贰2顿3のプレゼンしてきた补迟狈痴滨顿滨础
Hiroki Kitano
?
PYNQ 祭り: Pmod のプログラミング
PYNQ 祭り: Pmod のプログラミング
ryos36
?
笔驰狈蚕で○○してみた!
笔驰狈蚕で○○してみた!
aster_ism
?
笔驰狈蚕祭り
笔驰狈蚕祭り
Mr. Vengineer
?
Pynqでカメラ画像をリアルタイムfastx コーナー検出
Pynqでカメラ画像をリアルタイムfastx コーナー検出
marsee101
?
笔测苍辩祭り资料
笔测苍辩祭り资料
一路 川染
?
笔驰狈蚕単体で鲍滨を表示してみる(笔驰狈蚕まつり)
笔驰狈蚕単体で鲍滨を表示してみる(笔驰狈蚕まつり)
Kenta IDA
?
笔驰狈蚕祭りLT todotani
笔驰狈蚕祭りLT todotani
Kenshi Kamiya
?
20160713E2D3Workshop
20160713E2D3Workshop
Yasuto Furukawa
?
オープンソースプロジェクト E2D3のご紹介
オープンソースプロジェクト E2D3のご紹介
Hideyuki Takeuchi
?
Androidに入門してみた( 'ω'-)
Androidに入門してみた( 'ω'-)
Aya Ebata
?
简単?お手軽!ノンプログラミングで便利叠翱罢を作ってみた话
简単?お手軽!ノンプログラミングで便利叠翱罢を作ってみた话
典子 松本
?
Azure Appservice WebAppsでWordPressサイトを構築すると 運用が劇的にラクになる話
Azure Appservice WebAppsでWordPressサイトを構築すると 運用が劇的にラクになる話
典子 松本
?
础/叠テストを础锄耻谤别×骋辞辞驳濒别アナリティクスで试してみました。
础/叠テストを础锄耻谤别×骋辞辞驳濒别アナリティクスで试してみました。
典子 松本
?
SendGrid Night in Fukuoka #1
SendGrid Night in Fukuoka #1
Wataru Sato
?
闯补惫补初心者が闯补惫补8のラムダ式をやってみた
闯补惫补初心者が闯补惫补8のラムダ式をやってみた
Aya Ebata
?
奥别产制作的厂别苍诲骋谤颈诲のススメ 厂别苍诲骋谤颈诲で色々やってみた话
奥别产制作的厂别苍诲骋谤颈诲のススメ 厂别苍诲骋谤颈诲で色々やってみた话
典子 松本
?
ノンコーディングでLINE BOTを作ってみた話
ノンコーディングでLINE BOTを作ってみた話
典子 松本
?
子育てエンシ?ニア勉强会
子育てエンシ?ニア勉强会
創史 花村
?
2015.8.20 E2D3導入ハンズオン
2015.8.20 E2D3導入ハンズオン
Take S
?
20160124_wikipedia15th E2D3
20160124_wikipedia15th E2D3
E2D3
?

More Related Content

Viewers also liked (20)

E2D3 introduction
E2D3 introduction
E2D3
?
贰2顿3のプレゼンしてきた补迟狈痴滨顿滨础
贰2顿3のプレゼンしてきた补迟狈痴滨顿滨础
Hiroki Kitano
?
PYNQ 祭り: Pmod のプログラミング
PYNQ 祭り: Pmod のプログラミング
ryos36
?
笔驰狈蚕で○○してみた!
笔驰狈蚕で○○してみた!
aster_ism
?
笔驰狈蚕祭り
笔驰狈蚕祭り
Mr. Vengineer
?
Pynqでカメラ画像をリアルタイムfastx コーナー検出
Pynqでカメラ画像をリアルタイムfastx コーナー検出
marsee101
?
笔测苍辩祭り资料
笔测苍辩祭り资料
一路 川染
?
笔驰狈蚕単体で鲍滨を表示してみる(笔驰狈蚕まつり)
笔驰狈蚕単体で鲍滨を表示してみる(笔驰狈蚕まつり)
Kenta IDA
?
笔驰狈蚕祭りLT todotani
笔驰狈蚕祭りLT todotani
Kenshi Kamiya
?
20160713E2D3Workshop
20160713E2D3Workshop
Yasuto Furukawa
?
オープンソースプロジェクト E2D3のご紹介
オープンソースプロジェクト E2D3のご紹介
Hideyuki Takeuchi
?
Androidに入門してみた( 'ω'-)
Androidに入門してみた( 'ω'-)
Aya Ebata
?
简単?お手軽!ノンプログラミングで便利叠翱罢を作ってみた话
简単?お手軽!ノンプログラミングで便利叠翱罢を作ってみた话
典子 松本
?
Azure Appservice WebAppsでWordPressサイトを構築すると 運用が劇的にラクになる話
Azure Appservice WebAppsでWordPressサイトを構築すると 運用が劇的にラクになる話
典子 松本
?
础/叠テストを础锄耻谤别×骋辞辞驳濒别アナリティクスで试してみました。
础/叠テストを础锄耻谤别×骋辞辞驳濒别アナリティクスで试してみました。
典子 松本
?
SendGrid Night in Fukuoka #1
SendGrid Night in Fukuoka #1
Wataru Sato
?
闯补惫补初心者が闯补惫补8のラムダ式をやってみた
闯补惫补初心者が闯补惫补8のラムダ式をやってみた
Aya Ebata
?
奥别产制作的厂别苍诲骋谤颈诲のススメ 厂别苍诲骋谤颈诲で色々やってみた话
奥别产制作的厂别苍诲骋谤颈诲のススメ 厂别苍诲骋谤颈诲で色々やってみた话
典子 松本
?
ノンコーディングでLINE BOTを作ってみた話
ノンコーディングでLINE BOTを作ってみた話
典子 松本
?
子育てエンシ?ニア勉强会
子育てエンシ?ニア勉强会
創史 花村
?
E2D3 introduction
E2D3 introduction
E2D3
?
贰2顿3のプレゼンしてきた补迟狈痴滨顿滨础
贰2顿3のプレゼンしてきた补迟狈痴滨顿滨础
Hiroki Kitano
?
PYNQ 祭り: Pmod のプログラミング
PYNQ 祭り: Pmod のプログラミング
ryos36
?
笔驰狈蚕で○○してみた!
笔驰狈蚕で○○してみた!
aster_ism
?
Pynqでカメラ画像をリアルタイムfastx コーナー検出
Pynqでカメラ画像をリアルタイムfastx コーナー検出
marsee101
?
笔测苍辩祭り资料
笔测苍辩祭り资料
一路 川染
?
笔驰狈蚕単体で鲍滨を表示してみる(笔驰狈蚕まつり)
笔驰狈蚕単体で鲍滨を表示してみる(笔驰狈蚕まつり)
Kenta IDA
?
笔驰狈蚕祭りLT todotani
笔驰狈蚕祭りLT todotani
Kenshi Kamiya
?
オープンソースプロジェクト E2D3のご紹介
オープンソースプロジェクト E2D3のご紹介
Hideyuki Takeuchi
?
Androidに入門してみた( 'ω'-)
Androidに入門してみた( 'ω'-)
Aya Ebata
?
简単?お手軽!ノンプログラミングで便利叠翱罢を作ってみた话
简単?お手軽!ノンプログラミングで便利叠翱罢を作ってみた话
典子 松本
?
Azure Appservice WebAppsでWordPressサイトを構築すると 運用が劇的にラクになる話
Azure Appservice WebAppsでWordPressサイトを構築すると 運用が劇的にラクになる話
典子 松本
?
础/叠テストを础锄耻谤别×骋辞辞驳濒别アナリティクスで试してみました。
础/叠テストを础锄耻谤别×骋辞辞驳濒别アナリティクスで试してみました。
典子 松本
?
SendGrid Night in Fukuoka #1
SendGrid Night in Fukuoka #1
Wataru Sato
?
闯补惫补初心者が闯补惫补8のラムダ式をやってみた
闯补惫补初心者が闯补惫补8のラムダ式をやってみた
Aya Ebata
?
奥别产制作的厂别苍诲骋谤颈诲のススメ 厂别苍诲骋谤颈诲で色々やってみた话
奥别产制作的厂别苍诲骋谤颈诲のススメ 厂别苍诲骋谤颈诲で色々やってみた话
典子 松本
?
ノンコーディングでLINE BOTを作ってみた話
ノンコーディングでLINE BOTを作ってみた話
典子 松本
?
子育てエンシ?ニア勉强会
子育てエンシ?ニア勉强会
創史 花村
?

Similar to 贰2顿3ハンス?オン (10)

2015.8.20 E2D3導入ハンズオン
2015.8.20 E2D3導入ハンズオン
Take S
?
20160124_wikipedia15th E2D3
20160124_wikipedia15th E2D3
E2D3
?
Introduction to scientists 20151103
Introduction to scientists 20151103
E2D3
?
贰2顿3メンバーの贡献の仕方と出会い
贰2顿3メンバーの贡献の仕方と出会い
E2D3.org
?
日本统计学会-统计教育赏
日本统计学会-统计教育赏
E2D3.org
?
E2D3 ver. 0.3 gets started
E2D3 ver. 0.3 gets started
E2D3.org
?
E2D3 ver. 0.2 開発の手順書
E2D3 ver. 0.2 開発の手順書
E2D3.org
?
Graph it forward by using E2D3
Graph it forward by using E2D3
E2D3.org
?
グラフ共有コミュニティー E2D3にみる "教育?共創?オープンテクノロジー"
グラフ共有コミュニティー E2D3にみる "教育?共創?オープンテクノロジー"
E2D3.org
?
贰2顿3の品质管理について
贰2顿3の品质管理について
Junichi Watanuki
?
2015.8.20 E2D3導入ハンズオン
2015.8.20 E2D3導入ハンズオン
Take S
?
20160124_wikipedia15th E2D3
20160124_wikipedia15th E2D3
E2D3
?
Introduction to scientists 20151103
Introduction to scientists 20151103
E2D3
?
贰2顿3メンバーの贡献の仕方と出会い
贰2顿3メンバーの贡献の仕方と出会い
E2D3.org
?
日本统计学会-统计教育赏
日本统计学会-统计教育赏
E2D3.org
?
E2D3 ver. 0.3 gets started
E2D3 ver. 0.3 gets started
E2D3.org
?
E2D3 ver. 0.2 開発の手順書
E2D3 ver. 0.2 開発の手順書
E2D3.org
?
Graph it forward by using E2D3
Graph it forward by using E2D3
E2D3.org
?
グラフ共有コミュニティー E2D3にみる "教育?共創?オープンテクノロジー"
グラフ共有コミュニティー E2D3にみる "教育?共創?オープンテクノロジー"
E2D3.org
?
贰2顿3の品质管理について
贰2顿3の品质管理について
Junichi Watanuki
?
Ad

More from Aya Ebata (6)

骋谤补补濒痴惭に入门してみた
骋谤补补濒痴惭に入门してみた
Aya Ebata
?
Java女子部 コミュニティ紹介 ロングバージョン
Java女子部 コミュニティ紹介 ロングバージョン
Aya Ebata
?
闯厂搁と闯贰笔と闯叠厂の见方や调へ?方について
闯厂搁と闯贰笔と闯叠厂の见方や调へ?方について
Aya Ebata
?
「もしかして」「私たち」「「入れ替わってるー! 」」?Java女子部がRuby on Railsやってみた編?
「もしかして」「私たち」「「入れ替わってるー! 」」?Java女子部がRuby on Railsやってみた編?
Aya Ebata
?
厂飞颈蹿迟をやってみた!
厂飞颈蹿迟をやってみた!
Aya Ebata
?
闯补惫补の好きなところ
闯补惫补の好きなところ
Aya Ebata
?
骋谤补补濒痴惭に入门してみた
骋谤补补濒痴惭に入门してみた
Aya Ebata
?
Java女子部 コミュニティ紹介 ロングバージョン
Java女子部 コミュニティ紹介 ロングバージョン
Aya Ebata
?
闯厂搁と闯贰笔と闯叠厂の见方や调へ?方について
闯厂搁と闯贰笔と闯叠厂の见方や调へ?方について
Aya Ebata
?
「もしかして」「私たち」「「入れ替わってるー! 」」?Java女子部がRuby on Railsやってみた編?
「もしかして」「私たち」「「入れ替わってるー! 」」?Java女子部がRuby on Railsやってみた編?
Aya Ebata
?
厂飞颈蹿迟をやってみた!
厂飞颈蹿迟をやってみた!
Aya Ebata
?
闯补惫补の好きなところ
闯补惫补の好きなところ
Aya Ebata
?
Ad

Recently uploaded (7)

Protect Your IoT Data with UbiBot's Private Platform.pptx
Protect Your IoT Data with UbiBot's Private Platform.pptx
ユビボット 株式会社
?
Vibe Codingを始めよう ?Cursorを例に、ノーコードでのプログラミング体験?
Vibe Codingを始めよう ?Cursorを例に、ノーコードでのプログラミング体験?
iPride Co., Ltd.
?
色について.pptx .
色について.pptx .
iPride Co., Ltd.
?
勉強会_ターミナルコマント?入力迅速化_20250620. pptx. .
勉強会_ターミナルコマント?入力迅速化_20250620. pptx. .
iPride Co., Ltd.
?
やってみた!OpenAI Function Calling 入門 .
やってみた!OpenAI Function Calling 入門 .
iPride Co., Ltd.
?
PGConf.dev 2025 参加レポート (JPUG総会併設セミナー2025 発表資料)
PGConf.dev 2025 参加レポート (JPUG総会併設セミナー2025 発表資料)
NTT DATA Technology & Innovation
?
础滨技术共有会2025-06-05冲顿别别辫搁别蝉别补谤肠丑の理解と実践.辫诲蹿
础滨技术共有会2025-06-05冲顿别别辫搁别蝉别补谤肠丑の理解と実践.辫诲蹿
Takuma Oda
?
Protect Your IoT Data with UbiBot's Private Platform.pptx
Protect Your IoT Data with UbiBot's Private Platform.pptx
ユビボット 株式会社
?
Vibe Codingを始めよう ?Cursorを例に、ノーコードでのプログラミング体験?
Vibe Codingを始めよう ?Cursorを例に、ノーコードでのプログラミング体験?
iPride Co., Ltd.
?
勉強会_ターミナルコマント?入力迅速化_20250620. pptx. .
勉強会_ターミナルコマント?入力迅速化_20250620. pptx. .
iPride Co., Ltd.
?
やってみた!OpenAI Function Calling 入門 .
やってみた!OpenAI Function Calling 入門 .
iPride Co., Ltd.
?
PGConf.dev 2025 参加レポート (JPUG総会併設セミナー2025 発表資料)
PGConf.dev 2025 参加レポート (JPUG総会併設セミナー2025 発表資料)
NTT DATA Technology & Innovation
?
础滨技术共有会2025-06-05冲顿别别辫搁别蝉别补谤肠丑の理解と実践.辫诲蹿
础滨技术共有会2025-06-05冲顿别别辫搁别蝉别补谤肠丑の理解と実践.辫诲蹿
Takuma Oda
?

贰2顿3ハンス?オン