使いたくなったときにサッと使えるようにメモ。Docker イメージを用意しておいて docker run すればコンパイルできる、という形にしたい。

プログラムが小さいうちはわざわざ事前コンパイルしなくても問題ないのですが、大きくなってくると事前コンパイルすることによる時間短縮が効いてきますし、source map ありでデバッガが使えて捗ります

まずは Dockerfile。Opal と DXOpal を含んだイメージを作ります。素の DXOpal ではなく、フォークして修正を加えたブランチを使っているのがポイント（後述）。

# Dockerfile

FROM ubuntu:22.04

RUN apt-get update \
  && apt-get install -y --no-install-recommends \
    git \
    ruby \
  && apt-get clean \
  && rm -rf /var/lib/apt/lists/*

RUN echo 'gem: --no-document' >> ~/.gemrc
RUN gem instal opal -v 1.2.0

WORKDIR /opt
RUN git clone \
  --branch v1.5.2-no-opal-parser \
  https://github.com/sonota88/dxopal.git

RUN mkdir /tmp/work
WORKDIR /tmp/work

適当なシェルスクリプト run.sh 。

#!/bin/bash

IMG_NAME=dxopal-builder:1

cmd_build_image() {
  docker build -t $IMG_NAME .
}

cmd_compile() {
  local rbfile="$1"; shift

  local cmd=""
  cmd="${cmd}docker run --rm -it "
  cmd="${cmd}  -v$(pwd):/tmp/work "

  # コンテナ外の DXOpal を使う場合
  # cmd="${cmd}  -v/path/to/dxopal:/opt/dxopal "

  cmd="${cmd}  ${IMG_NAME} "
  cmd="${cmd}    opal --compile --no-opal --no-exit "
  cmd="${cmd}      --include /opt/dxopal/lib "
  cmd="${cmd}      --include . "
  cmd="${cmd}      $rbfile "

  $cmd # 組み立てたコマンドを実行
}

cmd="$1"; shift
case $cmd in
  build-image )
    cmd_build_image
;; compile )
    cmd_compile "$@"
;; * )
    echo "unknown command (${cmd})" >&2
    exit 1
    ;;
esac

イメージをビルド。

./run.sh build-image

イメージができたら、コンパイルしたいファイルを渡してコンパイルします。以下は DXOpal のサイトにあるサンプルコードを使った例。

$ cat my_app.rb
require 'dxopal'; include DXOpal
Window.width = 300
Window.height = 300
Window.bgcolor = C_WHITE
Window.load_resources do
  x = rand(Window.width)
  y = rand(Window.height)
  dx = dy = 2
  Window.loop do
    Window.draw_circle_fill(x, y, 10, C_RED)
    dx = -dx if x < 0 || x > Window.width
    dy = -dy if y < 0 || y > Window.height
    x += dx
    y += dy
  end
end

$ ./run.sh compile my_app.rb > my_app.js

JavaScript に変換できたら、 my_app.js を HTML ファイルから読み込むようにして、ブラウザで開けばOK。

<!-- 最低限だとこんな感じ -->
<html>
  <body>
    <canvas id="dxopal-canvas"></canvas>
    <div id="dxopal-errors"></div>
    <script src="my_app.js"></script>
  </body>
</html>

source map 付きでコンパイルされるので、ブラウザの開発者ツールで Ruby のソースをそのまま見ることができ、デバッガも利用できます。

参考: Opal::Builder を使ってコンパイルする際に source map も生成する

メモ

opal-parser の除外

事前コンパイルする場合は opal-parser を含めないようにするとよいので、除外するようにしたブランチを git clone しています（上記 Dockerfile 参照）。

参考: DxOpalのゲームをコンパクトにして公開する方法 - Qiita

DXOpal 本体に手を加えてコンパイルしたい

DXOpal 本体に手を加えないと実現できない機能がある場合や、DXOpal をいじってあれこれ実験したい場合があります。

その場合は、docker run でコンパイルする際に -v オプションを使って DXOpal のディレクトリをマウントします。こうすることで、あらかじめイメージ内に入れておいた DXOpal の代わりに自分で修正した DXOpal が参照されるようになります。

docker run -v "{コンテナ外にあるDXOpalのディレクトリ}:/opt/dxopal" ...