Submit Search
Upload
20190324vvvvオフ会
•
Download as PPTX, PDF
•
0 likes
•
551 views
Saya Katafuchi
Follow
2019年3月24日に開催されたvvvvオフ会で利用した資料です
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 29
Download now
Recommended
RvizPlugin作成入門
RvizPlugin作成入門
Sho Takahashi
Web Content Design Final Project
Web Content Design Final Project
Kenta Moriuchi
Meguro es7
Meguro es7
健太 田上
Isomorphic Architecture & Interface
Isomorphic Architecture & Interface
Jxck Jxck
Microsoft Build 2021 前夜祭LT
Microsoft Build 2021 前夜祭LT
Yusuke Yamada
Selenium再入門-W3C勧告とページオブジェクトパターンと私-201707webエンジニア勉強会#2神田
Selenium再入門-W3C勧告とページオブジェクトパターンと私-201707webエンジニア勉強会#2神田
Y Watanabe
なぜ初心者は webpackが解らないのか?- Why can’t you understand the webpack? -
なぜ初心者は webpackが解らないのか?- Why can’t you understand the webpack? -
健人 井関
初めての拡張機能リリースまでの歩み / Road to publishing extension for the first time
初めての拡張機能リリースまでの歩み / Road to publishing extension for the first time
Yusuke Yamada
Recommended
RvizPlugin作成入門
RvizPlugin作成入門
Sho Takahashi
Web Content Design Final Project
Web Content Design Final Project
Kenta Moriuchi
Meguro es7
Meguro es7
健太 田上
Isomorphic Architecture & Interface
Isomorphic Architecture & Interface
Jxck Jxck
Microsoft Build 2021 前夜祭LT
Microsoft Build 2021 前夜祭LT
Yusuke Yamada
Selenium再入門-W3C勧告とページオブジェクトパターンと私-201707webエンジニア勉強会#2神田
Selenium再入門-W3C勧告とページオブジェクトパターンと私-201707webエンジニア勉強会#2神田
Y Watanabe
なぜ初心者は webpackが解らないのか?- Why can’t you understand the webpack? -
なぜ初心者は webpackが解らないのか?- Why can’t you understand the webpack? -
健人 井関
初めての拡張機能リリースまでの歩み / Road to publishing extension for the first time
初めての拡張機能リリースまでの歩み / Road to publishing extension for the first time
Yusuke Yamada
React.jsでHowManyPizza
React.jsでHowManyPizza
松田 千尋
エンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったこと
Hirata Tomoko
20130202 fe勉強会 canvas
20130202 fe勉強会 canvas
Keisuke Aizawa
Walking front end
Walking front end
Hirata Tomoko
VSCodeへコントリビュート / Contribute to VSCode
VSCodeへコントリビュート / Contribute to VSCode
Yusuke Yamada
GopherJS + Nashorn
GopherJS + Nashorn
Takuya Ueda
VS Code Day 2021 Recap
VS Code Day 2021 Recap
Yuki Ueda
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
Erina Takei
非ガチ勢「よし、Coffee script使おう!」
非ガチ勢「よし、Coffee script使おう!」
Muyuu Fujita
2018 06-09 WordBenchNagoya
2018 06-09 WordBenchNagoya
Yasuhiro Nozue
Processingについて
Processingについて
reona396
JavaとScalaとGroovyと
JavaとScalaとGroovyと
irof N
p5.js について
p5.js について
reona396
Ltctjs
Ltctjs
Hisashi Aruji
非エンジニアが MENstackでWebアプリをつくった話 #nodejs
非エンジニアが MENstackでWebアプリをつくった話 #nodejs
Yusaku Kinoshita
C#のコード解析ってなんだ@20160825 CenterCLR.学生 #1
C#のコード解析ってなんだ@20160825 CenterCLR.学生 #1
MasuqaT
Shibyra trac#13 前説
Shibyra trac#13 前説
riskrisk
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
Erina Takei
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
Erina Takei
1月からAndroidアプリ開発をやってみての近況
1月からAndroidアプリ開発をやってみての近況
takathemax
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Ryunosuke SATO
Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207
Kanako Kobayashi
More Related Content
What's hot
React.jsでHowManyPizza
React.jsでHowManyPizza
松田 千尋
エンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったこと
Hirata Tomoko
20130202 fe勉強会 canvas
20130202 fe勉強会 canvas
Keisuke Aizawa
Walking front end
Walking front end
Hirata Tomoko
VSCodeへコントリビュート / Contribute to VSCode
VSCodeへコントリビュート / Contribute to VSCode
Yusuke Yamada
GopherJS + Nashorn
GopherJS + Nashorn
Takuya Ueda
VS Code Day 2021 Recap
VS Code Day 2021 Recap
Yuki Ueda
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
Erina Takei
非ガチ勢「よし、Coffee script使おう!」
非ガチ勢「よし、Coffee script使おう!」
Muyuu Fujita
2018 06-09 WordBenchNagoya
2018 06-09 WordBenchNagoya
Yasuhiro Nozue
Processingについて
Processingについて
reona396
JavaとScalaとGroovyと
JavaとScalaとGroovyと
irof N
p5.js について
p5.js について
reona396
Ltctjs
Ltctjs
Hisashi Aruji
非エンジニアが MENstackでWebアプリをつくった話 #nodejs
非エンジニアが MENstackでWebアプリをつくった話 #nodejs
Yusaku Kinoshita
C#のコード解析ってなんだ@20160825 CenterCLR.学生 #1
C#のコード解析ってなんだ@20160825 CenterCLR.学生 #1
MasuqaT
Shibyra trac#13 前説
Shibyra trac#13 前説
riskrisk
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
Erina Takei
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
Erina Takei
1月からAndroidアプリ開発をやってみての近況
1月からAndroidアプリ開発をやってみての近況
takathemax
What's hot
(20)
React.jsでHowManyPizza
React.jsでHowManyPizza
エンジニアが Webを学ぶために やっててよかったこと
エンジニアが Webを学ぶために やっててよかったこと
20130202 fe勉強会 canvas
20130202 fe勉強会 canvas
Walking front end
Walking front end
VSCodeへコントリビュート / Contribute to VSCode
VSCodeへコントリビュート / Contribute to VSCode
GopherJS + Nashorn
GopherJS + Nashorn
VS Code Day 2021 Recap
VS Code Day 2021 Recap
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
GUIツールで送る快適な Gitライフ@Creators MeetUp #29
非ガチ勢「よし、Coffee script使おう!」
非ガチ勢「よし、Coffee script使おう!」
2018 06-09 WordBenchNagoya
2018 06-09 WordBenchNagoya
Processingについて
Processingについて
JavaとScalaとGroovyと
JavaとScalaとGroovyと
p5.js について
p5.js について
Ltctjs
Ltctjs
非エンジニアが MENstackでWebアプリをつくった話 #nodejs
非エンジニアが MENstackでWebアプリをつくった話 #nodejs
C#のコード解析ってなんだ@20160825 CenterCLR.学生 #1
C#のコード解析ってなんだ@20160825 CenterCLR.学生 #1
Shibyra trac#13 前説
Shibyra trac#13 前説
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
Gitライフをはじめましょう〜GUIツールで簡単運用 Mac編〜
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
ディレクタ兼エンジニアの仕事@Creators MeetUp #36
1月からAndroidアプリ開発をやってみての近況
1月からAndroidアプリ開発をやってみての近況
Similar to 20190324vvvvオフ会
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Ryunosuke SATO
Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207
Kanako Kobayashi
Nseg第32回勉強会
Nseg第32回勉強会
ko ty
Javaに這いよる.NET
Javaに這いよる.NET
Hiroshi Maekawa
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
Shunsuke Watanabe
(未発表) JavaScriptテスト勉強会@福岡#0の前に考えていたこと
(未発表) JavaScriptテスト勉強会@福岡#0の前に考えていたこと
Kohki Nakashima
javascript を Xcode でテスト
javascript を Xcode でテスト
Yoichiro Sakurai
Vue Fes Japan 2018 LINE株式会社 LunchスポンサーLT
Vue Fes Japan 2018 LINE株式会社 LunchスポンサーLT
LINE Corporation
Node.js基礎の基礎 - Miyazaki.js vol.2
Node.js基礎の基礎 - Miyazaki.js vol.2
Nobuhiro Nakashima
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
TypeScript 入門してみる
TypeScript 入門してみる
Ken Fukuyama
Hokuriku.net 2013 01-26 node.js
Hokuriku.net 2013 01-26 node.js
Tadahiro Ishisaka
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
civic Sasaki
いまさら触るAwt
いまさら触るAwt
Keiichi Kobayashi
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
Kei Yagi
Vue template-parserを作っている話
Vue template-parserを作っている話
Koki Natsume
Playで作るwebsocketサーバ
Playで作るwebsocketサーバ
ke-m kamekoopa
既存Objective-CプロジェクトをSwiftに移行した時ハマったこと
既存Objective-CプロジェクトをSwiftに移行した時ハマったこと
apuruni
Nodeにしましょう
Nodeにしましょう
Yuzo Hebishima
Node.js で Web アプリ開発
Node.js で Web アプリ開発
Tatsumi Naganuma
Similar to 20190324vvvvオフ会
(20)
Node.js を選ぶとき 選ばないとき
Node.js を選ぶとき 選ばないとき
Svgアニメーションを実装してみよう 20150207
Svgアニメーションを実装してみよう 20150207
Nseg第32回勉強会
Nseg第32回勉強会
Javaに這いよる.NET
Javaに這いよる.NET
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
大阪Node学園 七時限目 「ゼロからはじめるnode.js」
(未発表) JavaScriptテスト勉強会@福岡#0の前に考えていたこと
(未発表) JavaScriptテスト勉強会@福岡#0の前に考えていたこと
javascript を Xcode でテスト
javascript を Xcode でテスト
Vue Fes Japan 2018 LINE株式会社 LunchスポンサーLT
Vue Fes Japan 2018 LINE株式会社 LunchスポンサーLT
Node.js基礎の基礎 - Miyazaki.js vol.2
Node.js基礎の基礎 - Miyazaki.js vol.2
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
TypeScript 入門してみる
TypeScript 入門してみる
Hokuriku.net 2013 01-26 node.js
Hokuriku.net 2013 01-26 node.js
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
むずかしくないJavaScriptのやさしい話 jQueryからの次のステップ #ndsmeetup8
いまさら触るAwt
いまさら触るAwt
three.jsによる一歩進めたグラフィカルな表現
three.jsによる一歩進めたグラフィカルな表現
Vue template-parserを作っている話
Vue template-parserを作っている話
Playで作るwebsocketサーバ
Playで作るwebsocketサーバ
既存Objective-CプロジェクトをSwiftに移行した時ハマったこと
既存Objective-CプロジェクトをSwiftに移行した時ハマったこと
Nodeにしましょう
Nodeにしましょう
Node.js で Web アプリ開発
Node.js で Web アプリ開発
More from Saya Katafuchi
VJ Cardboard ブイジェーカードボード
VJ Cardboard ブイジェーカードボード
Saya Katafuchi
Handson opencv! 画像処理ライブラリを使って面白いプログラムを作ろう!その2
Handson opencv! 画像処理ライブラリを使って面白いプログラムを作ろう!その2
Saya Katafuchi
Hands On OpenCV! 画像処理ライブラリを使って面白いプログラムを作ろう!
Hands On OpenCV! 画像処理ライブラリを使って面白いプログラムを作ろう!
Saya Katafuchi
輪講用資料「Deep Convolutional Network Cascade for Facial Point Detection」
輪講用資料「Deep Convolutional Network Cascade for Facial Point Detection」
Saya Katafuchi
輪講用資料「Mitosis Detection in Breast Cancer Histology Images with Deep Neural Ne...
輪講用資料「Mitosis Detection in Breast Cancer Histology Images with Deep Neural Ne...
Saya Katafuchi
第一回カオス時系列解析
第一回カオス時系列解析
Saya Katafuchi
卒論執筆のために3年生からやる5つのこと
卒論執筆のために3年生からやる5つのこと
Saya Katafuchi
第3回長崎デジタルコンテストLT『リバースエンジニアリング入門』
第3回長崎デジタルコンテストLT『リバースエンジニアリング入門』
Saya Katafuchi
画像認識のための深層学習
画像認識のための深層学習
Saya Katafuchi
ディープボルツマンマシン入門
ディープボルツマンマシン入門
Saya Katafuchi
20140514在校生向けUnity&AR講座
20140514在校生向けUnity&AR講座
Saya Katafuchi
20140508 在校生向けUnity&AR講座
20140508 在校生向けUnity&AR講座
Saya Katafuchi
201310合同ゼミ論文紹介
201310合同ゼミ論文紹介
Saya Katafuchi
VirtualDJでPCDJっぽいことをやった
VirtualDJでPCDJっぽいことをやった
Saya Katafuchi
ヤンデレのUnityに愛されて眠れない〜りたーんず〜
ヤンデレのUnityに愛されて眠れない〜りたーんず〜
Saya Katafuchi
Capture the flag!
Capture the flag!
Saya Katafuchi
Tesseract-OCR in iOS
Tesseract-OCR in iOS
Saya Katafuchi
ヤンデレのUnityに愛されて眠れない〜Unity3分クッキング〜
ヤンデレのUnityに愛されて眠れない〜Unity3分クッキング〜
Saya Katafuchi
マルウェア解析講座そのいち〜仮想環境下では暴れないけど質問ある?〜
マルウェア解析講座そのいち〜仮想環境下では暴れないけど質問ある?〜
Saya Katafuchi
Reverseengineering koukai
Reverseengineering koukai
Saya Katafuchi
More from Saya Katafuchi
(20)
VJ Cardboard ブイジェーカードボード
VJ Cardboard ブイジェーカードボード
Handson opencv! 画像処理ライブラリを使って面白いプログラムを作ろう!その2
Handson opencv! 画像処理ライブラリを使って面白いプログラムを作ろう!その2
Hands On OpenCV! 画像処理ライブラリを使って面白いプログラムを作ろう!
Hands On OpenCV! 画像処理ライブラリを使って面白いプログラムを作ろう!
輪講用資料「Deep Convolutional Network Cascade for Facial Point Detection」
輪講用資料「Deep Convolutional Network Cascade for Facial Point Detection」
輪講用資料「Mitosis Detection in Breast Cancer Histology Images with Deep Neural Ne...
輪講用資料「Mitosis Detection in Breast Cancer Histology Images with Deep Neural Ne...
第一回カオス時系列解析
第一回カオス時系列解析
卒論執筆のために3年生からやる5つのこと
卒論執筆のために3年生からやる5つのこと
第3回長崎デジタルコンテストLT『リバースエンジニアリング入門』
第3回長崎デジタルコンテストLT『リバースエンジニアリング入門』
画像認識のための深層学習
画像認識のための深層学習
ディープボルツマンマシン入門
ディープボルツマンマシン入門
20140514在校生向けUnity&AR講座
20140514在校生向けUnity&AR講座
20140508 在校生向けUnity&AR講座
20140508 在校生向けUnity&AR講座
201310合同ゼミ論文紹介
201310合同ゼミ論文紹介
VirtualDJでPCDJっぽいことをやった
VirtualDJでPCDJっぽいことをやった
ヤンデレのUnityに愛されて眠れない〜りたーんず〜
ヤンデレのUnityに愛されて眠れない〜りたーんず〜
Capture the flag!
Capture the flag!
Tesseract-OCR in iOS
Tesseract-OCR in iOS
ヤンデレのUnityに愛されて眠れない〜Unity3分クッキング〜
ヤンデレのUnityに愛されて眠れない〜Unity3分クッキング〜
マルウェア解析講座そのいち〜仮想環境下では暴れないけど質問ある?〜
マルウェア解析講座そのいち〜仮想環境下では暴れないけど質問ある?〜
Reverseengineering koukai
Reverseengineering koukai
20190324vvvvオフ会
1.
vvvv.jsと フロントエンド 開発と その未来 @reiji1020
2.
だれ ● れいじ ● Twitter:@reiji1020 ●
ブログ:モノクロタイム(http://reiji1020.hatenablog.com/) ● 本業:フロントエンドエンジニア ○ React, Node.js, 一部PHP… 技術書典という同人技術書の即売会でvvvvの本を書いて頒布しています
3.
vvvv.jsー2017年辺りに存在を知るー ● vvvv.js Labs(デモページ)で使える機能少なくない? ○
2019年、CanvasとかWebGLで実装可能なノードしか ないことに気づく ● えっWindowsPC持ってるし、ネイティブvvvvの方が楽し いし。。。
4.
5.
6.
vvvv.js盛り上がってきてる?
7.
vvvv.jsー2019年、再入門するー ● vvvv.js Labと自前環境にはバージョンの差 がある ○
見た目もちょっと違う ○ 使えるノードの数は自前で作った環境の方 が少し多い ● ネイティブvvvvとの互換性はない ○ ちょっとだけある ○ vvvv->vvvv.jsに持っていくには、vvvv.js側 で対応するノードが用意されている必要が ある ● 自前環境を用意するのがそこそこ面倒 ○ 一回作っちゃえば後は必要ないけど。。。 ○ 人によってはyarn(npm)で詰みそうな気が する ● モダンなフロントエンド開発に組み込む にはいろいろ壁がありそう ○ 現在「ES6?何それ美味しいの?」状態で 管理されている ○ npmモジュール化されてないので npm/yarnで管理できない ● 細かいTipsいっぱいある ○ READMEに書いて・・・ 誤解していたこと 想定通りだったこと
8.
ここがすごいぞvvvv.js
9.
ここがすごいぞvvvv.js そもそもWebブラウザでCG作るのがかなり高度な技術 ● p5.js ● d3.js ●
WebGL 色々あるけど、ゴリゴリ書くのはすごく大変
10.
ここがすごいぞvvvv.js そもそもWebブラウザでCG作るのがかなり高度な技術 ● p5.js ● d3.js ●
WebGL 色々あるけど、ゴリゴリ書くのはすごく大変
11.
ここがすごいぞvvvv.js そもそもWebブラウザでCG作るのがかなり高度な技術 ● p5.js ● d3.js ●
WebGL 色々あるけど、ゴリゴリ書くのはすごく大変
12.
ここがすごいぞvvvv.js そもそもWebブラウザでCG作るのがかなり高度な技術 ● p5.js ● d3.js ●
WebGL 色々あるけど、ゴリゴリ書くのはすごく大変
13.
ここがすごいぞvvvv.js そもそもWebブラウザでCG作るのがかなり高度な技術 ● p5.js ● d3.js ●
WebGL 色々あるけど、ゴリゴリ書くのはすごく大変 vvvvプログラミングの知識を生かしながら、 動くものをサクサク作れること自体がすでに革命
14.
ここがすごいぞvvvv.js vvvv.jsのRendererは(プログラム読み込み後)canvasタグ1つで構成されるため、 既存Webページへ埋め込みやすい
15.
ここがすごいぞvvvv.js ReactやVue.jsなど、SPA(シングルページアプリケーション)向けのUI開発ライブ ラリとの併用も可能 ※ただしRedux(UIの状態管理フレームワーク)と相性はよくない…かもしれない。 これはvvvv.jsではなくcanvasとの相性によるもの。
16.
ここがすごいぞvvvv.js Reactで作成した Cardコンポーネント Thumbnail部分は vvvv.jsで作成された Canvas要素 =CGアニメーション
17.
ここがすごいぞvvvv.js Reactで作成した Cardコンポーネント Thumbnail部分は vvvv.jsで作成された Canvas要素 =CGアニメーション vvvvjs-for-reactとして 誠意モジュール開発中🤘
18.
ここがつらいよvvvv.js
19.
Tipsその①-Rendererサイズの調整- 描画領域は どうすれば 大きさを変えられるの?
20.
Tipsその①-Rendererサイズの調整- Renderer(描画領域)がデフォで512px×512px -> Backbuffer Width/Heightで変更可能、 0px
× 0px で指定した時のみ512px × 512pxに整形される vvvv.js/nodes/vvvv.nodes.canvas.jsより抜粋
21.
Tipsその①-Rendererサイズの調整- Renderer(描画領域)がデフォで512px×512px -> Backbuffer Width/Heightで変更可能、 0px
× 0px で指定した時のみ512px × 512pxに整形される vvvv.js/nodes/vvvv.nodes.canvas.jsより抜粋 Documentに書いて😭
22.
Tipsその②-Production Build- Webページに組み込みたいけど、 ↓みたいなデバッグログは出したくない。。。
23.
Tipsその②-Production Build- ビルドタイプ(ENV)をvvvv.jsコード内で変更できる デバッグログ出力部分 (vvvv.core.js) ビルドタイプ定義部分(vvvv.js)
24.
つらいところは 自分で直していこう
25.
コミッタ―になってvvvv.jsの開発に貢献する 現状vvvv.jsのリポジトリを見て手っ取り早く修正できそうなところ 1. ドキュメント周りの整備(まずは日本語README追加とかでもいいかも) 2. ビルドタイプ環境変数のより分かりやすい指定・設定ファイルの切り出し 3.
npmパッケージ化(これは手元で改修済なので、すぐ出せる) 4. ES6化 →vvvv.jsをガンガン使いたくても使いにくい障壁がそれなりにある リポジトリにPull Requestを出して より便利にしていきたい
26.
コミッタ―になってvvvv.jsの開発に貢献する とはいえ最後にPRがOpenされたのは2017 年で、以来ずっと放置されてそう。。。
27.
コミッタ―になってvvvv.jsの開発に貢献する 🤘 リポジトリを forkして、 手元で改修する? できればリポジトリは 離したくない… でも日本のvvvv勢で 改修していくのも楽し そう。。。 いい知恵お待ちしております😇
28.
可能性ありまくりな モジュールなのでガンガン使 っていきましょう💪
29.
EOP
Download now