JavaScriptをDockerを使って黒い画面に表示する
背景
今年の4月ごろ、SLコマンドをEmscriptenでJavaScriptに変換してWeb上で動かすことに成功した。その時点からずっと、この逆にWebで動くJavaScriptを黒い画面（ターミナル）で動かしてみたいを思っていた。
フツーにnode.jsでtmlib.jsを動かすと
まず、canvasが必要になるが、これはnode-canvasが用意されている。
ansi-canvasを使えば、canvasへの描画を黒い画面に表示できる
node-canvasを黒い画面で動かすansi-canvasがある
エラーが出て動きませんでした。
ansi-vncとDockerを使えば
- ansi-vncという、前述のansi-canvasを応用して作ったコマンドラインベースのVNCクライアントがあった。
- DockerでVNCサーバーを動かし、Firefoxを動かすコンテナが公開されてる
この二つでtmlib.jsを黒い画面で動かせそうです！
ansi-vncのビルド
npmコマンドでインストールする前に、PKG_CONFIG_PATHを以下のように設定しないと手元のOSXの環境ではNGだった。
export PKG_CONFIG_PATH=/opt/X11/lib/pkgconfig npm install -g ansi-vnc
ansi-vncとfirefox-vncの思わぬ落とし穴
firefox-vncはパスワードを1234と分かりやすい設定にしてくれているが、この数字だけというのが仇になっているansi-vncのコマンドラインのパースで数字のみのパスワードだと文字列として認識してくれません。
firefox-vncをクローンしてパスワードを変える。
git clone https://github.com/creack/docker-firefox.git
firefox-vncで指定しているUbuntuが古い
パスワードをa1234と文字を含むように変更後、docker buildで完成！と行きたかったのですが、現在Ubuntu12.04だとビルドエラーとなってしまいました。
そこで、14.04に変更して、ビルドして無事、イメージを作ることが出来ました。
# Firefox over VNC # # VERSION 0.1 # DOCKER-VERSION 0.2 from ubuntu:14.04 # make sure the package repository is up to date #run echo "deb http://archive.ubuntu.com/ubuntu precise main universe" > /etc/apt/sources.list run apt-get update # Install vnc, xvfb in order to create a 'fake' display and firefox run apt-get install -y x11vnc xvfb firefox run mkdir /.vnc # Setup a password run x11vnc -storepasswd a1234 ~/.vnc/passwd # Autostart firefox (might not be the best way to do it, but it does the trick) run bash -c 'echo "firefox" >> /.bashrc'
docker build -t kjunichi/firefox-vnc .
黒い画面でTmlib.jsを動かし録画してみる
コンテナの起動
docker run -p 5900:5900 kjunichi/firefox-vnc x11vnc -forever -usepw -create -shared
VNCクライアントの起動
OSXなら、ターミナルで、boot2docker ipしてDockerのIPアドレスを覚えます。
FinderでComamnd+Kでvnc://(ipアドレス):5900
ターミナルで、ansi-vncを起動
ansi-vnc --host $(boot2docker ip 2>/dev/null) --port 5900 --password a1234
結果
tmlib.jsの公式エディタのrunstantを黒い画面で動かしました。
ttyrec2gifだと残念な結果（□表示になってしまう）だったので、ttygifで録画したものを貼り付けました。
まとめ
今回紹介した、ansi-vncとDockerを使えば、X11で動くものは何でも黒い画面で動かすことが出来るようになります。
Link
関連記事
トラックバック
この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/11179/60124725
この記事へのトラックバック一覧です： JavaScriptをDockerを使って黒い画面に表示する:
コメント