{"id":10401,"date":"2020-08-10T00:10:15","date_gmt":"2020-08-09T15:10:15","guid":{"rendered":"http:\/\/www.webcyou.com\/?p=10401"},"modified":"2020-08-10T00:48:00","modified_gmt":"2020-08-09T15:48:00","slug":"webassembly%e7%94%a8%e3%81%84%e3%81%a6%e3%80%81sdl-2-0%e3%82%92%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%a7%e3%83%ac%e3%83%b3%e3%83%80%e3%83%aa%e3%83%b3%e3%82%b0","status":"publish","type":"post","link":"https:\/\/www.webcyou.com\/?p=10401","title":{"rendered":"Webassembly\u7528\u3044\u3066\u3001SDL 2.0\u3092\u30d6\u30e9\u30a6\u30b6\u3067\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0"},"content":{"rendered":"<p>\u3069\u3082\u3067\u3059\u3002<\/p>\n<p>\u304a\u4ed5\u4e8b\u3067\u3001\u3061\u3087\u3044\u3068Webassembly\u6271\u3046\u6a5f\u4f1a\uff08\u524d\u306e\u8a71\u306b\u306a\u308a\u307e\u3059\u304c\u3002\u3002\uff09\u3042\u308a\u307e\u3057\u305f\u306e\u3067\u30e1\u30e2\u7a0b\u5ea6\u306b\u3068\u3002<\/p>\n<p>\u3082\u308d\u3082\u308d\u8abf\u3079\u3066\u3044\u307e\u3057\u305f\u3089\u3001SDL 2.0\u3082\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3067\u304d\u308b\u3068\u306e\u4e8b\u3067\u3057\u305f\u306e\u3067\u3001\u65e9\u901f\u30c6\u30b9\u30c8\u3002<\/p>\n<p><strong>\u74b0\u5883<\/strong><\/p>\n<p>macOS Mojave 10.14.5<\/p>\n<p>Python 3.7.0<\/p>\n<p>nodejs 12.18.1<\/p>\n<h4>Emscripten \u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h4>\n<p>\u5148\u305a\u306f\u3001\u3068\u3082\u3042\u308c\u3001<strong>Emscripten<\/strong>\uff08\u30a8\u30e0\u30b9\u30af\u30ea\u30d7\u30c8\u30f3\uff09\u30b3\u30f3\u30d1\u30a4\u30e9\u304c\u5fc5\u8981\u3068\u306a\u3063\u3066\u6765\u307e\u3059\u306e\u3067\u3001\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3092\u3057\u3066\u884c\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<p><strong>Emscripten<\/strong>\u3068\u306f\u306a\u3093\u305e\u3084\u3067\u3059\u304c\u3001<strong>Emscripten<\/strong>\u306f\u3001<strong>C++ \u304b\u3089\u751f\u6210\u3055\u308c\u308b LLVM \u30d3\u30c3\u30c8\u30b3\u30fc\u30c9\u3092\u5165\u529b\u306b\u3001\u30a6\u30a7\u30d6\u30d6\u30e9\u30a6\u30b6\u3084 Node.js \u306a\u3069\u3067\u52d5\u4f5c\u3059\u308b JavaScript \u3092\u51fa\u529b\u3059\u308b\u30b3\u30f3\u30d1\u30a4\u30e9<\/strong>\u3068\u306a\u3063\u3066\u304a\u308a\u307e\u3059\u3002<\/p>\n<p>\u516c\u5f0f\u30b5\u30a4\u30c8\u3068GitHub\u30ec\u30dd\u30b8\u30c8\u30ea\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3002<\/p>\n<p><strong>Emscripten<\/strong><\/p>\n<p><a href=\"http:\/\/emscripten.org\" target=\"_blank\" rel=\"noopener\">http:\/\/emscripten.org<\/a><\/p>\n<p><strong>GitHub<\/strong><\/p>\n<p><a href=\"https:\/\/github.com\/emscripten-core\/emscripten\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/emscripten-core\/emscripten<\/a><\/p>\n<p><a href=\"http:\/\/emscripten.org\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10404\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2020\/08\/a8f4140419f9d157664fb7463a97d920.png\" alt=\"\" width=\"474\" height=\"426\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2020\/08\/a8f4140419f9d157664fb7463a97d920.png 749w, https:\/\/www.webcyou.com\/wp-content\/uploads\/2020\/08\/a8f4140419f9d157664fb7463a97d920-300x270.png 300w\" sizes=\"auto, (max-width: 474px) 100vw, 474px\" \/><\/a><\/p>\n<p>\u3053\u3061\u3089\u306e\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\uff08\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\uff09\u65b9\u6cd5\u306b\u6cbf\u3063\u3066\u5b9f\u884c\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n<p>\u3053\u3061\u3089\u306e\u30da\u30fc\u30b8\u3088\u308a\u3001\u5404\u74b0\u5883\u306b\u6cbf\u3063\u305f\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u65b9\u6cd5\u304c\u8a18\u8f09\u3055\u308c\u3066\u304a\u308a\u307e\u3059\u3002<\/p>\n<p><a href=\"https:\/\/emscripten.org\/docs\/getting_started\/downloads.html\" target=\"_blank\" rel=\"noopener\">https:\/\/emscripten.org\/docs\/getting_started\/downloads.html<\/a><\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">$ git clone https:\/\/github.com\/emscripten-core\/emsdk.git\r\n$ cd emsdk<\/pre>\n<p>\u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3088\u308a<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">git pull\r\n\r\n# Download and install the latest SDK tools.\r\n.\/emsdk install latest\r\n\r\n# Make the \"latest\" SDK \"active\" for the current user. (writes .emscripten file)\r\n.\/emsdk activate latest\r\n\r\n# Activate PATH and other environment variables in the current terminal\r\nsource .\/emsdk_env.sh<\/pre>\n<p>\u3068\u3001\u4f1a\u793e\u306ePC\u3067\u306f\u4f55\u3082\u554f\u984c\u306a\u304b\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u81ea\u5b85Mac\u3060\u3068\u3001<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">&lt;urlopen error &#x5B;SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:749)&gt;<\/pre>\n<p>\u3068\u3001<\/p>\n<p><strong>SSL: CERTIFICATE_VERIFY_FAILED<\/strong>\u306e\u30a8\u30e9\u30fc\u304c\u5410\u304b\u308c\u3066\u3057\u307e\u3063\u305f\u3002\u3002<\/p>\n<p>\u4f55\u304b\u8db3\u308a\u306a\u3044\u306e\u304b\u3002\u5fc5\u9808\u3068\u306a\u308a\u305d\u3046\u306a\u6240\u306f\u516c\u5f0f\u30b5\u30a4\u30c8\u3067\u306f\u3001\u4ee5\u4e0b\u306e\u901a\u308a\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">Node.js\u00a0(0.8 or above; 0.10.17 or above to run websocket-using servers in node):\r\nPython\u00a02.7.12 or above, or Python 3.5 or above (Python 2.7.0 or newer may also work, but is known to have SSL related issues,\u00a0https:\/\/github.com\/emscripten-core\/emscripten\/issues\/6275)\r\nJava\u00a0(1.6.0_31 or later). Java is optional. It is required to use the\u00a0Closure Compiler\u00a0(in order to minify your code).\r\nGit\u00a0client. Git is required if building tools from source.\r\nLLVM\u00a0(LLVM, including clang and wasm-ld)\r\nBinaryen\u00a0(Binaryen, including wasm-opt, wasm-emscripten-finalize, etc.)\r\nThe\u00a0Emscripten code, from GitHub<\/pre>\n<p>\u3053\u3061\u3089\u304b\u3089\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><a href=\"https:\/\/emscripten.org\/docs\/building_from_source\/toolchain_what_is_needed.html#toolchain-what-you-need\" target=\"_blank\" rel=\"noopener\">https:\/\/emscripten.org\/docs\/building_from_source\/toolchain_what_is_needed.html#toolchain-what-you-need<\/a><\/p>\n<p>\u30a8\u30e9\u30fc\u304b\u3089\u898b\u3066\u307f\u308b\u3068\u3001\u3069\u3046\u3082pyhon\u306e\u8a3c\u660e\u66f8\u306e\u30d1\u30b9\u304c\u901a\u3063\u3066\u3044\u306a\u3044\u307d\u3044\u3002\u3002<\/p>\n<p>pyenv\u3092\u5229\u7528\u3057\u3066\u3044\u308b\u304b\u3089\u304b\u3082\u3002<\/p>\n<p>\u3069\u3046\u3084\u3089\u3001certifi\u30d1\u30c3\u30b1\u30fc\u30b8\u3042\u308c\u3070\u826f\u3044\u307f\u305f\u3044\u306a\u306e\u3067\u3001pip\u30b3\u30de\u30f3\u30c9\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">$ pip install --upgrade certifi<\/pre>\n<p>\uff08\u30c7\u30d5\u30a9\u30eb\u30c8\u3092pip3\u306b\u3057\u3066\u3044\u308b\uff09<\/p>\n<p>\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u5b8c\u4e86\u5f8c\u3001python\u30a4\u30f3\u30bf\u30d7\u30ea\u30bf\u5b9f\u884c\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">$ python\r\n&gt;&gt;&gt; import certifi\r\n&gt;&gt;&gt; certifi.where()<\/pre>\n<p>\u4e0a\u8a18\u306e\u30b3\u30de\u30f3\u30c9\u3067\u3001 certifi\/cacert.pem \u306e\u30d1\u30b9\u304c\u8868\u793a\u3057\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3067\u30d1\u30b9\u3092\u901a\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">$ export SSL_CERT_FILE=\u8868\u793a\u3055\u308c\u305fcertifi\/cacert.pem\u30d1\u30b9<\/pre>\n<p>\u518d\u3073\u3001Emscripten\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3092\u884c\u3046\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">$ .\/emsdk install latest<\/pre>\n<p>\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u5f8c\u30a2\u30af\u30c6\u30a3\u30d9\u30fc\u30c8\u30b3\u30de\u30f3\u30c9\u5b9f\u884c\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">$ .\/emsdk activate latest<\/pre>\n<p>\u3059\u308b\u3068\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306a\u30e1\u30c3\u30bb\u30fc\u30b8\u304c\u8868\u793a\u3057\u307e\u3059\u306e\u3067\u3001<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">Setting the following tools as active:\r\nnode-12.18.1-64bit\r\npython-3.7.4-64bit\r\n\r\nNext steps:\r\n- To conveniently access emsdk tools from the command line,\r\nconsider adding the following directories to your PATH:\r\n....<\/pre>\n<p>\u4ee5\u4e0b\u306e\u30b3\u30de\u30f3\u30c9\u3067\u3001\u30b7\u30a7\u30eb\u3092\u9069\u5fdc\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">$ source .\/emsdk_env.sh<\/pre>\n<p>\u3059\u308b\u3068\u3001PATH\u3068environment\u304c\u8a2d\u5b9a\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>\uff08&#8230;..\u306f\u3001\u5404\u74b0\u5883\u3067\u7570\u306a\u308a\u307e\u3059\u3002\uff09<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">Adding directories to PATH:\r\nPATH += .....\/emsdk\r\nPATH += .....\/emsdk\/upstream\/emscripten\r\nPATH += .....\/emsdk\/node\/12.18.1_64bit\/bin\r\nPATH += .....\/emsdk\/python\/3.7.4_64bit\/bin\r\n\r\nSetting environment variables:\r\nEMSDK = .....\/emsdk\r\nEM_CONFIG = .....\/emsdk\/.emscripten\r\nEM_CACHE = .....\/emsdk\/upstream\/emscripten\/cache\r\nEMSDK_NODE = .....\/emsdk\/node\/12.18.1_64bit\/bin\/node\r\nEMSDK_PYTHON = .....\/emsdk\/python\/3.7.4_64bit\/bin\/python3<\/pre>\n<p>\u3068\u3001\u3044\u3046\u4e8b\u3067\u7121\u4e8bEmscripten\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u51fa\u6765\u307e\u3057\u305f\u3002<\/p>\n<p>\u3053\u3053\u307e\u3067\u884c\u3063\u3066\u3001\u5f8c\u304b\u3089\u6c17\u304c\u4ed8\u3044\u305f\u306e\u3067\u3059\u304c\u3001Mac\u3067\u3042\u308c\u3070 homebrew\u3067\u4e00\u767a\u3067\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u51fa\u6765\u308b\u3063\u307d\u3044\u3067\u3059\u3002\u3002\u3002\uff08\u8a66\u3057\u3066\u3044\u306a\u3044\u3067\u3059\u3002\uff09<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">$ brew install emscripten binaryen<\/pre>\n<h4>SDL Canvas Wasm<\/h4>\n<p>\u305d\u308c\u3067\u306f\u3001SDL2.0\u3092\u3001wasm\u5f62\u5f0f\u306b\u51fa\u529b\u3057\u3001\u30d6\u30e9\u30a6\u30b6\u306b\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3057\u3066\u884c\u304d\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>\u3068\u3044\u3046\u4e8b\u3067\u3001\u624b\u3063\u53d6\u308a\u65e9\u304f\u8a66\u305b\u308b\u30c7\u30e2\u304c\u3053\u3061\u3089\u306e\u30ec\u30dd\u30b8\u30c8\u30ea\u306b\u3042\u308a\u307e\u3057\u305f\u306e\u3067\u8a66\u3057\u3066\u884c\u304d\u307e\u3059\u3002<\/p>\n<p><a href=\"https:\/\/github.com\/timhutton\/sdl-canvas-wasm\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/timhutton\/sdl-canvas-wasm<\/a><\/p>\n<p>\u3053\u3061\u3089\u306e\u30ec\u30dd\u30b8\u30c8\u30ea\u306b\u66f8\u304b\u308c\u305f\u624b\u9806\u3067\u884c\u3063\u3066\u884c\u304d\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">Install Emscripten: http:\/\/emscripten.org\r\n\r\nClone this repo:git clone https:\/\/github.com\/timhutton\/sdl-canvas-wasm.gitcd sdl-canvas-wasm\r\n\r\nBuild index.js and index.wasm:emcc core.cpp -s WASM=1 -s USE_SDL=2 -O3 -o index.js\r\n\r\nOpen index.html in a web browser. You should see a moving blue square in a red square:\r\n\r\nChrome doesn't support file:\/\/ XHR requests, so you need to first start a webserver, e.g.:\r\n\r\nwith Python 2:\u00a0python -m SimpleHTTPServer 8080\r\n\r\nwith Python 3:\u00a0python -m http.server 8080\r\n\r\nand then open this URL:\r\n\r\nhttp:\/\/localhost:8080\/<\/pre>\n<p>Emscripten \u30b3\u30f3\u30d1\u30a4\u30e9\u3067\u3001OpenGL\u3084\u3089SDL\u304c\u3001wasm\u5f62\u5f0f\u30d5\u30a1\u30a4\u30eb\u3068js\u30d5\u30a1\u30a4\u30eb\u3068\u3057\u3066\u51fa\u529b\u3055\u308c\u3066\u3044\u308b\u306e\u304c\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>HTML\u306eJS\u8aad\u307f\u8fbc\u307f\u7b87\u6240\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3002<\/p>\n<p>\u30b0\u30ed\u30fc\u30d0\u30eb\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306e\u300cModule\u300d\u3092\u4f7f\u3063\u3066\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308bDOM\u3092\u6307\u5b9a\u3059\u308c\u3070\u826f\u3044\u307f\u305f\u3044\u3067\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">&lt;!-- Create the canvas that the C++ code will draw into --&gt;\r\n&lt;canvas id=&quot;canvas&quot; oncontextmenu=&quot;event.preventDefault()&quot;&gt;&lt;\/canvas&gt;\r\n\r\n&lt;!-- Allow the C++ to access the canvas element --&gt;\r\n&lt;script type='text\/javascript'&gt;\r\n    var Module = {\r\n        canvas: (function() { return document.getElementById('canvas'); })()\r\n    };\r\n&lt;\/script&gt;\r\n\r\n&lt;!-- Add the javascript glue code (index.js) as generated by Emscripten --&gt;\r\n&lt;script src=&quot;index.js&quot;&gt;&lt;\/script&gt;<\/pre>\n<p>SDL\u3092\u30a4\u30f3\u30af\u30eb\u30fc\u30c9\u3057\u3066\u3044\u308bC++\u30d5\u30a1\u30a4\u30eb\u3092\u898b\u3066\u307f\u308b\u3068\u3001<\/p>\n<p>SDL 2.0 window\u4f7f\u7528\u3067\u306f\u306a\u304f\u3001Emscripten loop\u3092\u4f7f\u3046\u5f62\u307d\u3044\u3067\u3001\u305d\u306e\u307e\u307eSDL 2.0\u306e\u30bd\u30fc\u30b9\u3092\u5229\u7528\u3067\u304d\u308b\u3063\u3066\u3053\u3068\u3067\u306f\u306a\u304f\u3001<\/p>\n<p>\u3061\u3087\u3063\u3068\u7f6e\u304d\u63db\u3048\u304c\u5fc5\u8981\u307d\u3044\u611f\u3058\u3067\u3059\u306d\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">emscripten_set_main_loop_arg(mainloop, &ctx, fps, simulate_infinite_loop);<\/pre>\n<p><a href=\"https:\/\/github.com\/timhutton\/sdl-canvas-wasm\/blob\/main\/core.cpp#L49\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/timhutton\/sdl-canvas-wasm\/blob\/main\/core.cpp#L49<\/a><\/p>\n<p><strong>Emscripten \u30b3\u30de\u30f3\u30c9<\/strong><\/p>\n<p>\u5148\u307b\u3069\u3001Emscripten\u30b3\u30de\u30f3\u30c9\u306e emcc \u3092\u7528\u3044\u3066wasm\u306e\u30b3\u30f3\u30d1\u30a4\u30eb\u3092\u884c\u3063\u305f\u306e\u3067\u3059\u304c\u3001\u30b3\u30de\u30f3\u30c9\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u3082\u8272\u3005\u3068\u7528\u610f\u3055\u308c\u3066\u304a\u308a\u3001<\/p>\n<p>\u30aa\u30d7\u30b7\u30e7\u30f3\u306e\u3088\u3063\u3066\u30d3\u30eb\u30c9\u7d50\u679c\u3082\u7570\u306a\u3063\u3066\u6765\u307e\u3059\u3002<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">#include &lt;stdio.h&gt;\r\n\r\nint main(int argc, char ** argv) {\r\n    printf(&quot;Hello World\\n&quot;);\r\n}<\/pre>\n<p><strong>Emscripten\u30b3\u30de\u30f3\u30c9\u5b9f\u884c<\/strong><\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">$ emcc hello.c -s WASM=1 -o hello.html<\/pre>\n<p>\u4e0a\u8a18\u306e\u30aa\u30d7\u30b7\u30e7\u30f3\u306f\u6b21\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n<p>-s WASM=1\u00a0\u2014 \u51fa\u529b\u3092 wasm \u306b\u6307\u5b9a\u3002\u6307\u5b9a\u3057\u306a\u3044\u5834\u5408\u3001Emscripten \u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u306f\u00a0asm.js\u00a0\u3068\u3057\u3066\u51fa\u529b\u3055\u308c\u307e\u3059\u3002<\/p>\n<p>-o hello.html\u00a0\u2014 \u30b3\u30fc\u30c9\u3092\u5b9f\u884c\u3059\u308b\u305f\u3081\u306e HTML \u30da\u30fc\u30b8\u3092\u6307\u5b9a\u3002wasm \u30e2\u30b8\u30e5\u30fc\u30eb\u3068\u30a6\u30a7\u30d6\u74b0\u5883\u3067\u4f7f\u7528\u3067\u304d\u308b\u3088\u3046\u306b\u30b3\u30f3\u30d1\u30a4\u30eb\u3001\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u5316\u3059\u308b\u305f\u3081\u306e JavaScript\u30b3\u30fc\u30c9\u3082\u51fa\u529b\u306b\u542b\u307e\u308c\u307e\u3059\u3002<\/p>\n<p>\u4e0a\u8a18\u306e\u30b3\u30de\u30f3\u30c9\u3092\u884c\u3063\u3066\u3001\u51fa\u529b\u3055\u308c\u308b\u30d5\u30a1\u30a4\u30eb\u306f\u3001\u4ee5\u4e0b\u306e\u901a\u308a\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u30d0\u30a4\u30ca\u30ea\u306e wasm \u30e2\u30b8\u30e5\u30fc\u30eb\u30b3\u30fc\u30c9 (hello.wasm)<\/p>\n<p>\u30cd\u30a4\u30c6\u30a3\u30d6\u306e C \u306e\u95a2\u6570\u3068 JavaScript\/wasm \u306e\u9593\u3067\u5909\u63db\u3092\u884c\u3046 JavaScript \u30d5\u30a1\u30a4\u30eb (hello.js)<\/p>\n<p>wasm \u30b3\u30fc\u30c9\u3092\u30ed\u30fc\u30c9\u3001\u30b3\u30f3\u30d1\u30a4\u30eb\u3001\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u5316\u3057\u3001\u30d6\u30e9\u30a6\u30b6\u306b\u51fa\u529b\u3059\u308b\u305f\u3081\u306e HTML \u30d5\u30a1\u30a4\u30eb\u00a0(hello.html)<\/p>\n<h4>\u6700\u5f8c\u306b<\/h4>\n<p><strong>Webassembly<\/strong>\u306e\u7279\u5fb4\u306e\u4e00\u3064\u3068\u3057\u3066\u3001AOT\u30b3\u30f3\u30d1\u30a4\u30e9\u306b\u3088\u308b\u5b9f\u884c\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u52b9\u7387\u5316\u304c\u6319\u3052\u3089\u308c\u308b\u3067\u3057\u3087\u3046\u3002<\/p>\n<p>JIT\u30b3\u30f3\u30d1\u30a4\u30e9\uff08Just-in-Time\u30b3\u30f3\u30d1\u30a4\u30e9\uff1d\u5b9f\u884c\u6642\u30b3\u30f3\u30d1\u30a4\u30e9\uff09\u3067\u306f\u306a\u304f\u3001<strong>AOT\u30b3\u30f3\u30d1\u30a4\u30e9<\/strong>\uff08Ahead-of-Time\u30b3\u30f3\u30d1\u30a4\u30e9\uff1d\u4e8b\u524d\u30b3\u30f3\u30d1\u30a4\u30e9\uff09\u3067\u3042\u308a\u3001\u3053\u308c\u306b\u3088\u308a\u5927\u5e45\u306a\u30b7\u30f3\u30d7\u30eb\u5316\u3068\u30cd\u30a4\u30c6\u30a3\u30d6\u30b3\u30fc\u30c9\u5b9f\u884c\u6642\u306e\u30aa\u30fc\u30d0\u30fc\u30d8\u30c3\u30c9\u3092\u5b9f\u73fe\u3067\u304d\u305f\u3068\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u307e\u305f\u3001\u6c17\u3092\u4ed8\u3051\u306a\u3044\u3068\u3044\u3051\u306a\u3044\u70b9\u306f\u3001Emscripten\u3067\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b\u5bfe\u8c61\u306eC\u306a\u3069\u306e\u30bd\u30fc\u30b9\u5074\u306b\u306fDOM\u3092\u6271\u3046API\u304c\u306a\u3044\u306e\u3067\u3001DOM\u306e\u30a4\u30d9\u30f3\u30c8\u306a\u3069\u3092\u6271\u3046\u5834\u5408\u306fHTML5\u5074\u3067UI\u3092\u4f5c\u6210\u3057\u3001DOM\u30a4\u30d9\u30f3\u30c8\u3092\u5236\u5fa1\u3057\u3001C\u306a\u3069\u306e\u30bd\u30fc\u30b9\u5074\u306b\u30a4\u30d9\u30f3\u30c8\u3092\u9001\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>\u56f3\u3067\u66f8\u304f\u3068\u4ee5\u4e0b\u306e\u901a\u308a\u3002<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10403\" src=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2020\/08\/webAssembly-2.png\" alt=\"\" width=\"660\" height=\"489\" srcset=\"https:\/\/www.webcyou.com\/wp-content\/uploads\/2020\/08\/webAssembly-2.png 819w, https:\/\/www.webcyou.com\/wp-content\/uploads\/2020\/08\/webAssembly-2-300x222.png 300w, https:\/\/www.webcyou.com\/wp-content\/uploads\/2020\/08\/webAssembly-2-768x569.png 768w\" sizes=\"auto, (max-width: 660px) 100vw, 660px\" \/><\/p>\n<p>\u3064\u307e\u308a\u3001\u51e6\u7406\u3068\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u306f\u884c\u3048\u308b\u3051\u3069\u3001DOMAPI\u306a\u3069\u5b58\u5728\u3057\u306a\u3044\u306e\u3067 UI\u306fHTML\u3067\u4f5c\u6210\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>Web\u5074\u304b\u3089\u3001C\/C++\u5074\u306e\u95a2\u6570\u3092\u76f4\u63a5\u547c\u3073\u51fa\u3059\u3068\u304d\u306f\u3001Module\u306eccall\u95a2\u6570\u3092\u4f7f\u3063\u3066\u547c\u3073\u51fa\u3059\u5f62\u3068\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u3001<\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">Module.ccall('myFunction',\u00a0\/\/ \u95a2\u6570\u540d\r\n'',\u00a0\/\/ \u623b\u308a\u5024\u306e\u578b\r\n&#x5B;'string'],\u00a0\/\/ \u5f15\u6570\u306e\u578b\u540d\u306e\u914d\u5217\r\n&#x5B;'\u30c6\u30b9\u30c8']); \/\/ \u5f15\u6570\u306e\u914d\u5217<\/pre>\n<p><strong>C\/C++\u5074<\/strong><\/p>\n<pre class=\"brush: plain; title: ; notranslate\" title=\"\">int myFunction() {\r\n    \u4f55\u304b\u3057\u3089\u306e\u51e6\u7406\r\n}<\/pre>\n<p>\u3068\u3044\u3046\u98a8\u306b\u547c\u3073\u51fa\u3059\u306e\u3067\u3001web\u5074\u306eDOM\u30a4\u30d9\u30f3\u30c8\u306b\u30d0\u30a4\u30f3\u30c9\u3055\u305b\u5b9f\u884c\u3059\u308b\u5f62\u306b\u306a\u308b\u3067\u3057\u3087\u3046\u3002<\/p>\n<p>\u3068\u3044\u3063\u305f\u69d8\u306b\u4eca\u56de\u306f\u3001\u89e6\u308a\u3060\u3051\u3067\u306f\u3042\u308a\u307e\u3059\u304c\u3001<strong>Webassembly<\/strong>\u95a2\u9023\u306e\u304a\u8a71\u3067\u3057\u305f\u3002<\/p>\n<p>\u4eca\u5f8c\u3082\u3063\u3068\u89e6\u3063\u3066\u3044\u3051\u308c\u3070\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p>\u3067\u306f\u3067\u306f\u3041\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u3069\u3082\u3067\u3059\u3002 \u304a\u4ed5\u4e8b\u3067\u3001\u3061\u3087\u3044\u3068Webassembly\u6271\u3046\u6a5f\u4f1a\uff08\u524d\u306e\u8a71\u306b\u306a\u308a\u307e\u3059\u304c\u3002\u3002\uff09\u3042\u308a\u307e\u3057\u305f\u306e\u3067\u30e1\u30e2\u7a0b\u5ea6\u306b\u3068\u3002 \u3082\u308d\u3082\u308d\u8abf\u3079\u3066\u3044\u307e\u3057\u305f\u3089\u3001SDL 2.0\u3082\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3067\u304d\u308b\u3068\u306e\u4e8b\u3067\u3057\u305f\u306e\u3067\u3001\u65e9\u901f\u30c6\u30b9\u30c8\u3002 \u74b0\u5883 mac [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[168,176,37,50,46,169,107,180,44,45,111,95,39,55,178,114,118],"class_list":{"0":"post-10401","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"hentry","6":"category-c","7":"tag-html","8":"tag-html5","9":"tag-iphone-","10":"tag-jquery-mobile","11":"tag-js","12":"tag-mac","13":"tag-mamp","14":"tag-mysql","15":"tag-web","17":"tag-wordpress-2","18":"tag-95","19":"tag-39","20":"tag-55","21":"tag-178","22":"tag-114","23":"tag-118"},"_links":{"self":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/10401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10401"}],"version-history":[{"count":15,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/10401\/revisions"}],"predecessor-version":[{"id":10422,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=\/wp\/v2\/posts\/10401\/revisions\/10422"}],"wp:attachment":[{"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=10401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcyou.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=10401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}