メニュー
ブログ更新履歴
コンテンツ更新履歴
リンク
  • 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 -t emsdk .

こんな感じでビルドできます。ビルドに必要なソース一式をマウントしてビルド(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 index.html

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

Page Top

github anchor.png

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

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


トップ   凍結 差分 バックアップ 複製 名前変更 リロード印刷に適した表示   ページ新規作成 全ページ一覧 単語検索 最新ページの一覧   ヘルプ   最新ページのRSS 1.0 最新ページのRSS 2.0 最新ページのRSS Atom Powered by xpWiki
Counter: 128, today: 3, yesterday: 7
初版日時: 2024-04-13 (土) 20:58:55
最終更新: 2024-04-13 (土) 23:12:55 (JST) (16d) by takatsuka