WebAssemblyのインストールと使用(Windows10)

WebAssemblyのインストールと使用について解説しています。(Windows10)

■PC環境

>Windows 10

>git –version

git version 2.35.1.windows.2

>node –version

v16.14.0

■EmscriptenSDKのインストール

まずは、EmscriptenSDKのインストールを行いますので、emsdkリポジトリのクローンを作成します。(https://github.com/emscripten-core/emsdk

クローンを作成するために、Windows10のコマンドプロンプトを起動します。

>git clone https://github.com/emscripten-core/emsdk.git

起動後、上記のコマンドを入力し、Enterキーを押します。「git clone」コマンドで、リポジトリのクローンを作成します。

Cloning into 'emsdk'...
remote: Enumerating objects: 3330, done.
remote: Counting objects: 100% (49/49), done.
remote: Compressing objects: 100% (34/34), done.
remote: Total 3330 (delta 26), reused 30 (delta 14), pack-reused 3281
Receiving objects: 100% (3330/3330), 1.95 MiB | 1.76 MiB/s, done.
Resolving deltas: 100% (2170/2170), done.

Enterキーを上記のメッセージが出力され、クローンの作成が開始します。開始後、「done」と出力されます。これでemsdkリポジトリのクローンの作成完了となります。

>cd emsdk

作成後、上記のコマンドを入力し、Enterキーを押します。「cd」コマンドで「emsdk」ディレクトリ内に移動します。

>emsdk install latest

移動後、上記のコマンドを入力し、Enterキーを押します。Emscriptenのインストールを行います。

Resolving SDK alias 'latest' to '3.1.15'
Resolving SDK version '3.1.15' to 'sdk-releases-upstream-568a46a9fb7e1f1686a6f7216b3dc976f28d2a79-64bit'
Installing SDK 'sdk-releases-upstream-568a46a9fb7e1f1686a6f7216b3dc976f28d2a79-64bit'..
Installing tool 'node-14.18.2-64bit'..
Downloading: C:/Users/user_/emsdk/zips/node-v14.18.2-win-x64.zip from https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/node-v14.18.2-win-x64.zip, 30570907 Bytes
Unpacking 'C:/Users/user_/emsdk/zips/node-v14.18.2-win-x64.zip' to 'C:/Users/user_/emsdk/node/14.18.2_64bit'
Done installing tool 'node-14.18.2-64bit'.
Installing tool 'python-3.9.2-nuget-64bit'..
Downloading: C:/Users/user_/emsdk/zips/python-3.9.2-4-amd64+pywin32.zip from https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/python-3.9.2-4-amd64+pywin32.zip, 14413267 Bytes
Unpacking 'C:/Users/user_/emsdk/zips/python-3.9.2-4-amd64+pywin32.zip' to 'C:/Users/user_/emsdk/python/3.9.2-nuget_64bit'
Done installing tool 'python-3.9.2-nuget-64bit'.
Installing tool 'java-8.152-64bit'..
Downloading: C:/Users/user_/emsdk/zips/portable_jre_8_update_152_64bit.zip from https://storage.googleapis.com/webassembly/emscripten-releases-builds/deps/portable_jre_8_update_152_64bit.zip, 69241499 Bytes
Unpacking 'C:/Users/user_/emsdk/zips/portable_jre_8_update_152_64bit.zip' to 'C:/Users/user_/emsdk/java/8.152_64bit'
Done installing tool 'java-8.152-64bit'.
Installing tool 'releases-upstream-568a46a9fb7e1f1686a6f7216b3dc976f28d2a79-64bit'..
Downloading: C:/Users/user_/emsdk/zips/568a46a9fb7e1f1686a6f7216b3dc976f28d2a79-wasm-binaries.zip from https://storage.googleapis.com/webassembly/emscripten-releases-builds/win/568a46a9fb7e1f1686a6f7216b3dc976f28d2a79/wasm-binaries.zip, 415658653 Bytes
Unpacking 'C:/Users/user_/emsdk/zips/568a46a9fb7e1f1686a6f7216b3dc976f28d2a79-wasm-binaries.zip' to 'C:/Users/user_/emsdk/upstream'
Done installing tool 'releases-upstream-568a46a9fb7e1f1686a6f7216b3dc976f28d2a79-64bit'.
Done installing SDK 'sdk-releases-upstream-568a46a9fb7e1f1686a6f7216b3dc976f28d2a79-64bit'.

Enterキーを押すと、インストールが開始され「Done installing tool」、「Done installing SDK」と出力されます。これでインストールは完了となります。

■PATH及びその他の環境変数をアクティブする

完了後、PATH及びその他の環境変数をアクティブにします。

>emsdk_env.bat

アクティブにする場合、上記のコマンドを入力し、Enterキーを押します。

Adding directories to PATH:
PATH += C:\Users\user_\emsdk

Setting environment variables:
PATH = C:\Users\user_\emsdk;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v11.5\bin;C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v11.5\libnvvp;C:\Program Files (x86)\Python37-32\Scripts\;C:\Program Files (x86)\Python37-32\;C:\Program Files\Python36\Scripts\;C:\Program Files\Python36\;C:\Program Files\Python38\Scripts\;C:\Program Files\Python38\;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Users\user_\AppData\Roaming\Python\Python38\Scripts\;C:\Program Files\MongoDB\Server.4\bin\;C:\xampp\php;C:\ProgramData\ComposerSetup\bin;C:\Program Files (x86)\Common Files\Sony Shared\FeliCaLibrary;C:\Program Files\Common Files\Sony Shared\FeliCaLibrary;C:\Program Files (x86)\Common Files\Sony Shared\FeliCaNFCLibrary;C:\Program Files\Common Files\Sony Shared\FeliCaNFCLibrary;C:\Program Files\NVIDIA Corporation\Nsight Compute 2021.3.0\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\erl-24.1.7\bin;C:\Program Files (x86)\Elixir\bin;C:\WINDOWS\system32\config\systemprofile\.mix\escripts;C:\Program Files\nodejs\;C:\Program Files\PostgreSQL\bin;C:\Program Files\Git\cmd;C:\kotlinc\bin;C:\Program Files\OpenSSL-Win64\bin;C:\Program Files\Amazon\AWSCLIV2\;C:\Program Files\Docker\Docker\resources\bin;C:\ProgramData\DockerDesktop\version-bin;C:\Program Files\GTK3-Runtime Win64\bin;C:\Program Files\Amazon\AWSSAMCLI\bin\;C:\Users\user_\.pyenv\pyenv-win\bin;C:\Users\user_\.pyenv\pyenv-win\shims;C:\Users\user_\AppData\Local\Microsoft\WindowsApps;C:\Users\user_\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\user_\AppData\Roaming\Composer\vendor\bin;C:\Users\user_\AppData\Roaming\npm;C:\Program Files\heroku\bin;C:\terraform;C:\Program Files (x86)\GnuWin32\bin;C:\Program Files (x86)\zip-3.0-bin\bin;C:\Program Files (x86)\bzip2-1.0.5-bin\bin;
EMSDK = C:/Users/user_/emsdk
EM_CONFIG = C:\Users\user_\emsdk\.emscripten
Clearing existing environment variable: EMSDK_PY

Enterキーを押すと、上記のメッセージが出力されます。「Clearing existing environment variable:(既存の環境変数のクリア)」と出力され、環境変数がアクティブになります。

■インストールの確認

>emcc -v

環境変数がアクティブになった後に、インストールの確認を行うために、上記のコマンドを入力し、Enterキーを押します。

'emcc' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

Enterキーを押すと、上記のようなメッセージが出力される場合は、正常にインストールが完了していません。

>emsdk activate latest

なお、今回はEmscripten用の設定の更新を行っていなかったため、「認識されていません」と出力したので、上記のコマンドを入力し、Enterキーを押します。

Resolving SDK alias 'latest' to '3.1.15'
Resolving SDK version '3.1.15' to 'sdk-releases-upstream-568a46a9fb7e1f1686a6f7216b3dc976f28d2a79-64bit'
Setting the following tools as active:
   node-14.18.2-64bit
   python-3.9.2-nuget-64bit
   java-8.152-64bit
   releases-upstream-568a46a9fb7e1f1686a6f7216b3dc976f28d2a79-64bit

Adding directories to PATH:
PATH += C:\Users\user_\emsdk\node.18.2_64bit\bin
PATH += C:\Users\user_\emsdk\upstream\emscripten

Setting environment variables:
PATH = C:\Users\user_\emsdk\node.18.2_64bit\bin;C:\Users\user_\emsdk\upstream\emscripten;C:\Users\user_\emsdk;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v11.5\bin;C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v11.5\libnvvp;C:\Program Files (x86)\Python37-32\Scripts\;C:\Program Files (x86)\Python37-32\;C:\Program Files\Python36\Scripts\;C:\Program Files\Python36\;C:\Program Files\Python38\Scripts\;C:\Program Files\Python38\;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Users\user_\AppData\Roaming\Python\Python38\Scripts\;C:\Program Files\MongoDB\Server.4\bin\;C:\xampp\php;C:\ProgramData\ComposerSetup\bin;C:\Program Files (x86)\Common Files\Sony Shared\FeliCaLibrary;C:\Program Files\Common Files\Sony Shared\FeliCaLibrary;C:\Program Files (x86)\Common Files\Sony Shared\FeliCaNFCLibrary;C:\Program Files\Common Files\Sony Shared\FeliCaNFCLibrary;C:\Program Files\NVIDIA Corporation\Nsight Compute 2021.3.0\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\erl-24.1.7\bin;C:\Program Files (x86)\Elixir\bin;C:\WINDOWS\system32\config\systemprofile\.mix\escripts;C:\Program Files\nodejs\;C:\Program Files\PostgreSQL\bin;C:\Program Files\Git\cmd;C:\kotlinc\bin;C:\Program Files\OpenSSL-Win64\bin;C:\Program Files\Amazon\AWSCLIV2\;C:\Program Files\Docker\Docker\resources\bin;C:\ProgramData\DockerDesktop\version-bin;C:\Program Files\GTK3-Runtime Win64\bin;C:\Program Files\Amazon\AWSSAMCLI\bin\;C:\Users\user_\.pyenv\pyenv-win\bin;C:\Users\user_\.pyenv\pyenv-win\shims;C:\Users\user_\AppData\Local\Microsoft\WindowsApps;C:\Users\user_\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\user_\AppData\Roaming\Composer\vendor\bin;C:\Users\user_\AppData\Roaming\npm;C:\Program Files\heroku\bin;C:\terraform;C:\Program Files (x86)\GnuWin32\bin;C:\Program Files (x86)\zip-3.0-bin\bin;C:\Program Files (x86)\bzip2-1.0.5-bin\bin;
EMSDK_NODE = C:\Users\user_\emsdk\node.18.2_64bit\bin\node.exe
EMSDK_PYTHON = C:\Users\user_\emsdk\python.9.2-nuget_64bit\python.exe
JAVA_HOME = C:\Users\user_\emsdk\java.152_64bit
Clearing existing environment variable: EMSDK_PY
The changes made to environment variables only apply to the currently running shell instance. Use the 'emsdk_env.bat' to re-enter this environment later, or if you'd like to register this environment permanently, rerun this command with the option --permanent.

Enterキーを押すと、上記のメッセージが出力され、設定が更新されます。

>emcc -v

更新後、再度上記のコマンドを入力し、Enterキーを押します。

emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 3.1.15 (8b4443a87f5eab5dbb9adb690f9ebed0a9da4bd9)
clang version 15.0.0 (https://github.com/llvm/llvm-project 27abff670bc7ad9702c4f9fc8b82aae6b530bf0f)
Target: wasm32-unknown-emscripten
Thread model: posix
InstalledDir: C:\Users\user_\emsdk\upstream\bin

Enterキーを押すと、今度はemccのバージョンなどが出力されました。これでインストールの確認は完了となります。

■C/C++ファイルを作成しコンパイルする

インストールの確認が完了し、CまたはC++コードをコンパイルできるようになりましたので、C/C++ファイルを作成しコンパイルしてみます。

■コード

#include 
int main(){
    printf("Hello World");
    return 0;
}

今回はC++コードで、main()という関数を定義し、printfで「Hello World」という文字列を出力させるものです。

このコードを「C:\Users\user_(フォルダパス)」内に「cmain.cpp」という名前で保存します。

>emcc cmain.cpp

保存後、コマンドプロンプトを起動し、上記のコマンドを入力し、Enterキーを押します。「emcc」コマンドで今回作成した「cmain.cpp」というファイルを指定します。

shared:INFO: (Emscripten: Running sanity checks)

Enterキーを押すと、上記のメッセージ、もしくは何も出力されない場合もありますが、これでコンパイルが成功します。

成功後、「C:\Users\user_(フォルダパス)」内を確認すると、「a.out.js」と「a.out.wasm」の2つのファイルが生成されていることが確認できました。

■実行・検証

>node a.out.js

確認後、コマンドプロンプト上に戻り、上記のコマンドを入力し、Enterキーを押します。今回生成された「a.out.js」というjsファイルを実行してみます。実行するために、nodeをインストールする必要があります。今回はバージョン「14.18.2」を使用しています。

stdio streams had content in them that was not flushed. you should set EXIT_RUNTIME to 1 (see the FAQ), or make sure to emit a newline when you printf etc.
(this may also be due to not including full filesystem support - try building with -sFORCE_FILESYSTEM)

Enterキーを押すと、上記のメッセージが出力されました。出力された内容を翻訳し確認すると「EXIT_RUNTIME を 1 に設定するか (FAQ を参照)、printf などの際に改行するように してください。(これは、ファイルシステムを完全にサポートしていないことが原因かもしれません -sFORCE_FILESYSTEM を付けてビルドしてみてください)」ということで、今回作成した「cmain.cpp」の内容を変更します。

■コード

#include 
int main(){
    printf("Hello World\n");
    return 0;
}

変更内容としては、printf()を用いて文字列を出力する際に「\n(改行コード)」を記述し、ファイルを保存します。保存後、再度コンパイルを行い、その後、jsファイルを実行してみます。

実行してみると、今回は先程のメッセージは出力されず「Hello World」と出力されることが確認できました。

なお、「cmain.cpp」の内容を変更せずに、コンパイルを行う際に、上記の「emcc cmain.cpp -s EXIT_RUNTIME=1」というコマンドを用いてコンパイルを行うと、生成されたjsファイルを実行する際に、先程のメッセージは出力されず「Hello World」と出力される。

■「’emcc’ は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。」の対処

「’emcc’ は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。」と出力される場合がありますが、この場合は、Windows10のコマンドプロンプトを起動します。

>cd emsdk

起動後、上記のコマンドを入力し、Enterキーを押します。「cd」コマンドで「emsdk」ディレクトリ内に移動します。

>emsdk_env.bat

移動後、上記のコマンドを入力し、Enterキーを押します。emsdk_env.batを実行し、環境変数が追加します。

PATH = C:\Users\user_\emsdk;C:\Users\user_\emsdk\upstream\emscripten;C:\Users\user_\emsdk\node.18.2_64bit\bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v11.5\bin;C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v11.5\libnvvp;C:\Program Files (x86)\Python37-32\Scripts\;C:\Program Files (x86)\Python37-32\;C:\Program Files\Python36\Scripts\;C:\Program Files\Python36\;C:\Program Files\Python38\Scripts\;C:\Program Files\Python38\;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Users\user_\AppData\Roaming\Python\Python38\Scripts\;C:\Program Files\MongoDB\Server.4\bin\;C:\xampp\php;C:\ProgramData\ComposerSetup\bin;C:\Program Files (x86)\Common Files\Sony Shared\FeliCaLibrary;C:\Program Files\Common Files\Sony Shared\FeliCaLibrary;C:\Program Files (x86)\Common Files\Sony Shared\FeliCaNFCLibrary;C:\Program Files\Common Files\Sony Shared\FeliCaNFCLibrary;C:\Program Files\NVIDIA Corporation\Nsight Compute 2021.3.0\;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\erl-24.1.7\bin;C:\Program Files (x86)\Elixir\bin;C:\Users\user_\.mix\escripts;C:\Program Files\nodejs\;C:\Program Files\PostgreSQL\bin;C:\Program Files\Git\cmd;C:\kotlinc\bin;C:\Program Files\OpenSSL-Win64\bin;C:\Program Files\Amazon\AWSCLIV2\;C:\Program Files\Docker\Docker\resources\bin;C:\ProgramData\DockerDesktop\version-bin;C:\Program Files\GTK3-Runtime Win64\bin;C:\Program Files\Amazon\AWSSAMCLI\bin\;C:\Users\user_\.pyenv\pyenv-win\bin;C:\Users\user_\.pyenv\pyenv-win\shims;C:\Users\user_\AppData\Local\Microsoft\WindowsApps;C:\Users\user_\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\user_\AppData\Roaming\Composer\vendor\bin;C:\Users\user_\AppData\Roaming\npm;C:\Program Files\heroku\bin;C:\terraform;C:\Program Files (x86)\GnuWin32\bin;C:\Program Files (x86)\zip-3.0-bin\bin;C:\Program Files (x86)\bzip2-1.0.5-bin\bin;
EMSDK = C:/Users/user_/emsdk
EM_CONFIG = C:\Users\user_\emsdk\.emscripten
EMSDK_NODE = C:\Users\user_\emsdk\node.18.2_64bit\bin\node.exe
EMSDK_PYTHON = C:\Users\user_\emsdk\python.9.2-nuget_64bit\python.exe
JAVA_HOME = C:\Users\user_\emsdk\java.152_64bit
Clearing existing environment variable: EMSDK_PY

Enterキーを押すと、上記のメッセージが出力されます。これで「’emcc’ は、内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。」と出力されなくなります。

コメント

タイトルとURLをコピーしました