#What is vvvvjs?
・vvvvの皮を被った、なんか別物。笑
・node.js上で動いています。
・開発途上ではあるが、アップデートが少しずつされている。
・vvvvと挙動が異なるところも、多々ある。
・Onclickとか、ButtonのHTMLでつかえるものが多々ある
・vvvvとちがってWindows Onlyじゃないよーーーー！
#何ができるの？
vimeoの動画をぜひご覧ください！
https://vimeo.com/255544587
#vvvv.jsの良いところ、悪いところ
###Good↑
・vvvvを習得したままwebへ考え方を移行できる
・ユーザーがめちゃくちゃ少ない。
Developper コミュニティ：35人…。
→ But…開発者は、すごく優しい！！
###Bad↓
・情報が本当にない（公式のチュートリアルすら途中になっている。）
・ヘルプパッチがない
#関連Website
###vvvvjs公式ホームーページ
http://vvvvjs.com/
※公式ホームページ「Try it」より、環境構築せずに使用感を試せます。
###000.graphics
vvvv.jsの開発に関わっている000.graphicsのホームーページ。
質の高いサンプルなども上がっています。
http://000.graphics/tutorial/02_VVVV.js_Introduction.html
###vvvvjs Developper Support Community
めっちゃ優しいサポートコミュニティ！
https://riot.im/app/#/room/#vvvv.js:matrix.org
#Let's Setuppppp!!!
初学者向けに丁寧に書いているので、わかる人はバシバシ飛ばしてください。
（MacOSでセットアップした内容を記載しています。同様の手順でWindows10も問題なく動いておりました。）
##各種ダウンロード
###A. FireFox
公式は、Chrome対応と書いてますが、Chromeで動かないことが多く、
僕の環境ではFirefoxが安定的に動いてます。
（mac OS Mojave 10.14.2)
https://www.mozilla.org/ja/firefox/new/
###B. node.js
公式ホームページより
10.15.1 LTS は挙動確認済み
https://nodejs.org/ja/
###C. vvvvjs パッケージ
vvvv.jsのパッケージをダウンロードします。
公式のではなく、下記リポジトリの方が失敗なくインストールできました。
https://github.com/zauner/vvvv.js
#インストール
###1.zip解凍後、適当な場所へフォルダを移動
フォルダ名に " . " が入っているとパスがうまく通らない可能性もあるのでフォルダ名を変更してください。
ex) User / vvvv_dev / vvvvjs
2.コマンドラインツールでの操作
mac：terminal
windows:コマンドプロンプト
2.terminal/コマンドプロンプトで上記フォルダへ移動
ex)上記のフォルダで準備した場合
cd vvvv_dev
cd vvvvjs
3.vvvvjsフォルダ内で、”npm install” コマンド入力
4.上記、エラーないかを確認
※Xcode/コマンドプロンプトが入ってなかったら、エラーがccdでる。
#動作確認1:vvvv.jsが動いているか確認
###FireFox上でvvvvjsを動かしてみる
-
terminalからcdコマンドでvvvvjsフォルダへ移動
-
“node server.js . -e” で起動
※ . -e はエディットモードでの起動という意味です。編集しない場合は、
"node server.js"でOK
- FireFoxにて、下記URLで動くか確認
http://localhost:5000/examples/01_canvas_arcs/
下記画像が出てればOK！！
#動作確認2:vvvv.jsが編集可能か確認
- エディット用のパッチの展開
下記、URLをFireFoxで開く
localhost:5000/examples/01_canvas_arcs/#edit/example01.v4p
これは、User/vvvv_dev/vvvvjs/examples/01_canvas_arcsのフォルダ内のexample01.v4pを編集しているということになります。
-
パッチ画面でなんらか編集をする
-
”Control + S” で保存を行う
ポップアップが出て、保存ができればOK
（MacでもControlを使います）
4.ウィンドを閉じる時は、”Command+W”
（こっちはMacはCommand+W/Winはcontorl+W）
#セットアップ完了！
###Enjoy vvvv.js！！！！
基本操作などは、また別記事で！！
参考までに。
札幌市立大学クリエイティブコーディングスクールで実施したvvvv.jsワークショップの様子はこちら。
https://note.mu/junky/n/n9e40a24e7c0e