JavaScriptをDockerを使って黒い画面に表示する

こんばんは、今日は久しぶりに奥さんが仕事で朝からいないので、実家に息子達を連れていって来ました。@kjunichiです。

背景

今年の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で動くものは何でも黒い画面で動かすことが出来るようになります。

参考資料

ttyrecordからGIF作るのにスクリーンショットなんて必要なかったんや - すぎゃーんメモ

non vorrei lavorare

昔はおもにプログラミングやガジェット系、今は？