前置き
VVVVとは
グラフィカルにプログラムを組み立てる開発環境です。
非営利目的の使用は無料です。
（公式サイトから引用 https://vvvv.org/documentation/jp.propaganda ）
このソフトウェアは様々な利用用途がある訳だが、windowsのみのリリースとなっている。(2016年1月13日の段階)
Macから利用するには、BootCampなりVMwareなりを介して利用するのが容易で一般的だと思う。
これはオーバーヘッドなところがあったり、このソフトウェアの存在を知らない人に、vvvvを試してもらうには非常にハードルが高い。
気軽に試す方法として、ブラウザから実行できる、http://vvvvjs.com/ という物もある。
しかしこれも、javascriptを必要として、htmlファイルをブラウザから開くという事となる。
どの様なブラウザで実行しているのかを考慮する必要があるかも知れない。
もっとスタンドアローンで、単一なアプリケーションとして動作して、誰でもいつでも難しい操作を必要としない実行環境を検討してみた。
そこで、ありきたりだが、electronで動作させる。
これなら、単一なファイルとして実行環境を用意して、他人にvvvvを試す環境を提供できるのではないか。
vvvvjs.com にはいくつのサンプルがgithub上にある。
これをelectron上で実行させる。
forkしたソースはこちら。
事前準備
electronをインストールする。
（当然、npmも必要）
electronはv0.32.2、vvvv.jsは1.1。
内包されているjqueryはjquery-1.8.2.min.jsでの動作を確認した。
Macでの実行方法
複雑な事は無く、electronをインストールしてpackage.json、jsファイル、htmlを書く。
ファイルを配置して、index.jsを指定する。
適当なターミナルからelectronを実行する。
githubには当然、ファイルが追加してあるので、git cloneしてelectronを実行する。
$ electron examples/<examplesdirectory>/index.js
と実行する。
以下スクリーンショットは01_canvas_arcsを実行した結果。
当然、<examplesdirectory>の箇所は適宜変更してほしい。
ウィンドウが開かれ、デモ画面が見られる。
ソースの説明
難しい事はしていないく、 基本vvvvjsのサンプルを実行している。
ただindex.htmlはelectronに合わせ修正している。
あまり動作を確認していないが、electron以外にブラウザでindex.htmlを開いても確認できる様になっている。
これは参考にさせていただいた以下のブログに書いてある通り。
タネを明かせば、index.htmlを上記のブログを参考にして書き換えただけでelectoron上で動いた。
vvvv.jsは所詮、javascriptで動くもので、センサー関連との連動や、パフォーマンスなどは期待できない。（カメラなどはvvvvjsの実装次第）
しかしどのプラットフォームでも実行できる、完全なアプリケーションとして第三者に渡す事ができる点が大きなメリットを生むと思う。
また、複数のウインドを利用する事で、既存のvvvvと違った表現ができると思われる。
バイナリなどにする方法は改めて書きたい。
参考
http://phiary.me/electron-jquery-script-tag-load
0 件のコメント:
コメントを投稿