electronにvvvv.jsのpatchを含める

先の記事でelectronからvvvvパッチを見る方法を書いた。
この方法は一台のMacでvvvvパッチを見る方法としては十分機能する。
しかしvvvv.jsのパッチを作って、第三者のMacで実行して見せたいという事もあるだろう。
electronにvvvv.jsと作成したvvvvのパッチを含める事が出来る。

このvvvvパッチを含めたelectronを他のMacにインストールすればvvvvのパッチを再生できる。
方法としてはごく普通のelectronアプリの作成方法となる。
以下の方法ではasarを用いてファイルサイズを小さくしている。
（もちろん後述するContents/Resources/内にappディレクトリを作成してそこにvvvv.js以下を配置すればvvvvパッチを再生できる。）

以前書いた記事では多くのデモを再生する為examples内にindex.js等を書いた。
今回は単一のvvvvパッチを再生する為だけのelectronアプリを作成する目的としている。
よってファイルの追加をした。
変更、追加した各ソースはgithubに置いてある。

おおまかな手順
１）asarによりelectronに含ませる為のvvvv.jsとパッチを含めた"app.asar"というアーカイブファイルを作る。
２）electronに"app.asar"を追加する。

---

実行手順
Macのターミナル.appからnpmでasarをインストールする。
Passwordではユーザのパスワードを入力する。

$ sudo npm install -g asar
Password:
npm WARN engine cryptiles@2.0.5: wanted: {"node":">=0.10.40"} (current: {"node":"0.10.38","npm":"1.4.28"})
npm WARN engine hoek@2.16.3: wanted: {"node":">=0.10.40"} (current: {"node":"0.10.38","npm":"1.4.28"})
npm WARN engine boom@2.10.1: wanted: {"node":">=0.10.40"} (current: {"node":"0.10.38","npm":"1.4.28"})
/usr/local/bin/asar -> /usr/local/lib/node_modules/asar/bin/asar
asar@0.9.0 /usr/local/lib/node_modules/asar
├── chromium-pickle-js@0.1.0
├── commander@2.3.0
├── cuint@0.1.5
├── minimatch@2.0.4 (brace-expansion@1.1.2)
├── mkdirp@0.5.1 (minimist@0.0.8)
├── glob@5.0.15 (inherits@2.0.1, path-is-absolute@1.0.0, once@1.3.3, inflight@1.0.4)
└── mksnapshot@0.1.0 (fs-extra@0.18.2, decompress-zip@0.1.0, request@2.55.0)

sudo を付け忘れると
Please try running this command again as root/Administrator.
とエラーとなるので注意してほしい。

$ npm install -g asar
npm ERR! Error: EACCES, mkdir '/usr/local/lib/node_modules/asar'
npm ERR!  { [Error: EACCES, mkdir '/usr/local/lib/node_modules/asar']
npm ERR!   errno: 3,
npm ERR!   code: 'EACCES',
npm ERR!   path: '/usr/local/lib/node_modules/asar',
npm ERR!   fstream_type: 'Directory',
npm ERR!   fstream_path: '/usr/local/lib/node_modules/asar',
npm ERR!   fstream_class: 'DirWriter',
npm ERR!   fstream_stack:
npm ERR!    [ '/usr/local/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:36:23',
npm ERR!      '/usr/local/lib/node_modules/npm/node_modules/mkdirp/index.js:46:53',
npm ERR!      'Object.oncomplete (fs.js:108:15)' ] }
npm ERR!
npm ERR! Please try running this command again as root/Administrator.

npm ERR! System Darwin 14.5.0
npm ERR! command "node" "/usr/local/bin/npm" "install" "-g" "asar"
npm ERR! cwd /Users/14
npm ERR! node -v v0.10.38
npm ERR! npm -v 1.4.28
npm ERR! path /usr/local/lib/node_modules/asar
npm ERR! fstream_path /usr/local/lib/node_modules/asar
npm ERR! fstream_type Directory
npm ERR! fstream_class DirWriter
npm ERR! code EACCES
npm ERR! errno 3
npm ERR! stack Error: EACCES, mkdir '/usr/local/lib/node_modules/asar'
npm ERR! fstream_stack /usr/local/lib/node_modules/npm/node_modules/fstream/lib/dir-writer.js:36:23
npm ERR! fstream_stack /usr/local/lib/node_modules/npm/node_modules/mkdirp/index.js:46:53
npm ERR! fstream_stack Object.oncomplete (fs.js:108:15)
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/14/npm-debug.log
npm ERR! not ok code 0

自分の環境では0.9.0がインストールされた。

$ npm ls -g | grep asar
├─┬ asar@0.9.0

以下の例では/toolというディレクトリにvvvv.jsを展開しているので/tool/vvvv.jsのディレクトリに移動する。

$ cd /tool/vvvv.js
$ pwd
/tool/vvvv.js

/tool内にapp.asarというファイルを作るので、上書きを防ぐ為、事前にapp.asarというファイルが存在しないか確認する。

$ ls /tool/app.asar
ls: /tool/app.asar: No such file or directory

存在しなかったので、aparによってpackというコマンドを使いapp.asarというファイルを作る。

$ asar pack . /tool/app.asar

正しくapp.asarファイルが作成できていれば

$ asar list . /tool/app.asar

として内容を確認できる。

この作成したapp.asarファイルを既存のelectronに含ませるため、同一バージョンのelectronをインストールする。
まずはターミナルからelectronのバージョンを確認する。

$ electron -v
  v0.32.2

この場合はv0.32.2なので、electron-v0.33.2-darwin-x64.zipをダウンロードして入手する。
ブラウザからelectronのサイトを確認する。
electronのサイトの一番下にある、prebuilt binaryをクリックして、githubに移動する。



github上のhttps://github.com/atom/electron/releasesよりelectronの該当バージョンのtagを探す。



ここには目的のバージョンである、v0.32.2がなかった。
一番下にあるNextのボタンをクリックして該当バージョンを探す。



下側にある、electron-v0.33.2-darwin-x64.zipというファイルをダウンロードする。

以降の操作はMacのfinderから操作する。
electron-v0.33.2-darwin-x64.zipというファイルをダブルクリックして解凍する。



FinderからElectron.appをcontrolクリックしてパッケージの内容を表示する。



Contents/Resources/内に作成した/tool/app.asarをコピーする。
（もちろん不要となったapp.asaeは削除して良い。）



後は作成したElectron.appをクリックすればvvvv.jsのパッチを再生できる。
普通にクリックして起動した場合、Macのセキュリティ機能で以下の様にファイルの実行に制限があるかも知れない。



これは、controlキーを押した状態でクリックする事で回避できる。




このままでは、アイコンがelectronのままなのでファイルを多く作った場合は混乱しがちだ。
アイコンを変更する方法等は改めて書きたい。

参考
http://electron.atom.io/docs/v0.36.4/tutorial/application-distribution/
https://github.com/atom/asar