LoginSignup
4
0

Emscriptenを使う機会があったので、備忘録として。

対象読者

Emscriptenって何ぞや。WebAssemblyって何ぞや。とりあえず動かしたい方向け。
(中身が知りたければ下部参考リンクまで)

WebAssemblyとは

 機械語に近いため、Webを高速実行できる。WebAssemblyを使えば色んな言語を、色んなブラウザで実行できる。(=言語やブラウザに依存する必要がない。)

対応言語

  • Java
  • PHP
  • C# .NET
  • C++
  • Ruby
  • C
  • Swift
  • R
  • Go
  • Rust

対応ブラウザ

  • Google Chrome・Chrome for Android
  • Microsoft Edge
  • Safari・iOS Safari
  • Firefox・Firefox for Android
  • Opera
  • Android Browser

Emscriptenとは

 平たく言えば上記対応言語をコンパイルしてwasm形式にできる便利ツール。

環境構築

開発環境:Windows10

$ git clone https://github.com/emscripten-core/emsdk.git
$ cd emsdk
$ # 最新版をインストール
$ ./emsdk install latest
$ # 最新版を使用
$ ./emsdk activate latest
$ # cmdを開いている間の環境パスを変更
$ ./emcmdprompt.bat

 Python, Node, Java とPATHが競合するため、./emcmdprompt.batは忘れずに実行しましょう。

実行

 hello.cを作成します。

#include <stdio.h>
int main() {
    printf("Hello, World!\n");
}

 Emscriptenでコンパイルしてみましょう。emccコマンドを使用します。

$ emcc <コンパイルするファイル> -o <コンパイル後のファイル名.拡張子>

 今回の場合では

$ emcc hello.c -o hello.html

 オプションで -s WASM=1 を指定すると.wasmファイルが生成されるようです。しかし上記のコマンドでも.wasm, .html, .js が生成された模様。

実行にはVS CodeのLive Serverが一番手っ取り早いです。

生成されたファイルを読み解いてみる

htmlファイル

 コードは200行にも渡るが、その実Emscriptenのロゴや基本的なページのテンプレのみであった。

jsファイル

 hello.wasmをインポートしているコードを発見。htmlファイルに具体的な出力内容を指定する役目を担っている。

wasmファイル

 要はこのファイルさえあればWebページにC言語の内容を出力することは難しくなさそうだ。Emscriptenのテンプレに従う必要がないのなら、.wasmファイルを自サイトに埋め込む方が良いだろう。

参考リンク

https://qiita.com/umamichi/items/c62d18b7ed81fdba63c2
https://qiita.com/RYOSKATE/items/918f2fda3c6f20c7f6ba

4
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
0