メニュー
ブログ更新履歴
コンテンツ更新履歴
リンク
  • rlib-MML デモページ
  • MML (Music Macro Language) をコンパイルし、再生や標準MIDIファイル出力をブラウザ上で行える形にまとめています。
  • Magome
  • クラウドベースのMIDIシーケンサ
    音楽制作に興味のある方を対象に、スタンドアロンでも使え、ネットならではの面白さも兼ね備えた音楽制作アプリの提供を目指しています。
twitter

WebAssembly を使うと JavaScript 以外をブラウザで動かすことが出来ておもしろいです。

Emscripten は C/C++ から WebAssembly (wasm) へのコンパイルをしてくれるもので、環境構築も難しくはありませんが docker になってると便利かなと思い作ってみました。

そして C++ ならやはり Boost C++ を使いたいと考え、ヘッダのみという制限はあるものの、一応使えるようにしました。Emscripten の Docker 自体は既に存在している中で自作した理由がコレです。
なお、Boost は Emscripten を公式にはサポートしていないので(OSS なのでそもそも論的にも)自己責任ではありますが、ヘッダオンリーのライブラリについては動く可能性が高そうな感じです。

Dockerfile anchor.png

FROM ubuntu:22.04

RUN apt update \
 && apt -y upgrade \
 && apt clean && rm -rf /var/lib/apt/lists/*

# timezone Asia/Tokyo ############
RUN apt update \
 && apt -y install tzdata \
 && apt clean && rm -rf /var/lib/apt/lists/*
ENV TZ=Asia/Tokyo

# build-essential ####################
RUN apt update \
 && apt -y install --no-install-recommends build-essential \
 && apt clean && rm -rf /var/lib/apt/lists/*

# tools ##########################
RUN apt update \
 && apt -y install git cmake wget python3 \
 && apt clean && rm -rf /var/lib/apt/lists/*

# emscripten ##########################
ARG EMSCRIPTEN_VERSION=3.1.56
ARG EMSDKDIR=/opt/emsdk
RUN git clone https://github.com/emscripten-core/emsdk.git ${EMSDKDIR}
RUN cd ${EMSDKDIR} \
 && ./emsdk install ${EMSCRIPTEN_VERSION} \
 && ./emsdk activate ${EMSCRIPTEN_VERSION}
RUN echo "source ${EMSDKDIR}/emsdk_env.sh" >> ~/.bash_profile
RUN echo '#!/bin/bash\nexec /bin/bash -l -c "$*"' > /opt/entrypoint.sh \
 && chmod +x /opt/entrypoint.sh
ENTRYPOINT ["/opt/entrypoint.sh"]


# boost ##########################
ARG BOOST_VERSION=1.84.0
RUN wget https://github.com/boostorg/boost/releases/download/boost-${BOOST_VERSION}/boost-${BOOST_VERSION}.tar.xz \
 && tar xvf boost-${BOOST_VERSION}.tar.xz \
 && cd boost-${BOOST_VERSION} \
 && ./bootstrap.sh \
 && ./b2 headers \
 && mkdir -p /opt/include \
 && cp -rl boost /opt/include/boost/ \
 && cd ..\
 && rm -f boost*.tar.xz \
 && rm -rf boost-${BOOST_VERSION} 
ENV EMCC_CFLAGS="-I /opt/include"
Page Top

使い方の例 anchor.png

まずは普通に docker build して image を構築します。

> docker build -t emsdk .

こんな感じでビルドできます。ビルドに必要なソースフォルダ(この例では ./sample)をマウントして emcc でビルドです。

> docker run --rm --name emsdk -v $(pwd)/sample:/opt/vol -w /opt/vol -it emsdk emcc main.cpp -s WASM=1 -o index.html
    • なお Windows では "$(pwd)" はNGですが、"${pwd}" にすると動くようです。ただし普通のコマンドプロンプトではなく PowerShell か ターミナル であることが条件なのでしょうか。いまいちよくわかっていません。

さらに Emscripten のサーバー機能を利用するとブラウザでの確認も容易です。

> docker run --rm --name emsdk -v $(pwd)/sample:/opt/vol -w /opt/vol -p 8080:8080 -it emsdk emrun --no_browser --port 8080 .

手元のブラウザで localhost:8080 を開くと確認できると思います。

Page Top

github anchor.png

github にも公開しておりますので、もしお役に立ちそうなら使ってみてください。
https://github.com/tr-takatsuka/emsdk-docker
使い方の事例や CMake を利用したサンプルコードも軽く掲載しています。
問題点やご助言などなど何かありましたら御一報いただけると幸いです。

Emscripten と Boost の関係者の方々に感謝です。


Front page   Freeze Diff Backup Copy Rename ReloadPrint View   New Page Page list Search Recent changes   Help   RSS of recent changes (RSS 1.0) RSS of recent changes (RSS 2.0) RSS of recent changes (RSS Atom) Powered by xpWiki
Counter: 237, today: 2, yesterday: 6
Princeps date: 2024-04-13 (Sat) 20:58:55
Last-modified: 2024-04-13 (Sat) 23:12:55 (JST) (36d) by takatsuka