1: 2024-04-13 (土) 20:58:55 takatsuka  |
現: 2024-04-13 (土) 23:12:55 takatsuka |
| - | aaaa | + | WebAssembly を使うと JavaScript 以外をブラウザで動かすことが出来ておもしろいです。 |
| | + | |
| | + | [[Emscripten:https://emscripten.org/]] は C/C++ から WebAssembly (wasm) へのコンパイルをしてくれるもので、環境構築も難しくはありませんが docker になってると便利かなと思い作ってみました。 |
| | + | |
| | + | そして C++ ならやはり [[Boost C++:https://www.boost.org/]] を使いたいと考え、ヘッダのみという制限はあるものの、一応使えるようにしました。Emscripten の Docker 自体は既に存在している中で自作した理由がコレです。 |
| | + | なお、Boost は Emscripten を公式にはサポートしていないので（OSS なのでそもそも論的にも）自己責任ではありますが、ヘッダオンリーのライブラリについては動く可能性が高そうな感じです。 |
| | + | |
| | + | * Dockerfile [#n5f12043] |
| | + | 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" |
| | + | |
| | + | |
| | + | * 使い方の例 [#r84cba85] |
| | + | まずは普通に 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 |
| | + | -- &font(90%){なお 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 を開くと確認できると思います。 |
| | + | |
| | + | |
| | + | * github [#d5f78452] |
| | + | github にも公開しておりますので、もしお役に立ちそうなら使ってみてください。 |
| | + | [[https://github.com/tr-takatsuka/emsdk-docker:https://github.com/tr-takatsuka/emsdk-docker]] |
| | + | 使い方の事例や CMake を利用したサンプルコードも軽く掲載しています。 |
| | + | 問題点やご助言などなど何かありましたら御一報いただけると幸いです。 |
| | + | |
| | + | Emscripten と Boost の関係者の方々に感謝です。 |
ページへ戻る
