WebAssemblyのインストールと使用（Windows10）

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

■PC環境
■EmscriptenSDKのインストール
■PATH及びその他の環境変数をアクティブする
■インストールの確認
■C/C++ファイルを作成しコンパイルする
■「’emcc’ は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチファイルとして認識されていません。」の対処

■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’ は、内部コマンドまたは外部コマンド、操作可能なプログラムまたはバッチファイルとして認識されていません。」と出力されなくなります。

■PC環境

■EmscriptenSDKのインストール

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

■インストールの確認

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

■コード

■実行・検証

■コード

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

コメント

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