Emscriptenと不思議のダンジョン 札幌C++勉強会 #8 2014/12/27(土) の発表資料です。 http://sapporocpp.connpass.com/event/10070/

1. Emscripten
と不思議のダンジョン
C++/Everywhere - おおっと！ … SEGV!!
札幌C++勉強会 #8
2 0 1 4 - 1 2 - 2 7 T 1 6 : 0 0 + 0 9 : 0 0 / 2 0 1 4 - 1 2 - 2 7 T 1 6 : 3 0 + 0 9 : 0 0
U s a g i I t o < u s a g i @ W o n d e r R a b b i t P r o j e c t . n e t >

2. お知らせ:(C)ATLUS (C)SEGA Allrights reserved. // スクリーンショット引用元はそれぞれのオフィシャルウェブサイトです。
• 発売されます:
• 世界樹と不思議のダンジョン
• 世界樹の迷宮V

3. お疲れ様でした。
• 続きは余談です。
• I: Emscripten の紹介
• 1: Emscripten のはじめ方
• リポジトリーは？ドキュメントは？ほかの情報源は？
• 開発環境の準備の仕方
• 2: Emscripten で Hello, World!
• ソースを書いて翻訳: C++ --> LLVM-IR --> JS
• 実行: node.js, spidermonkey / Firefox, etc.
• II: Emscripten の迷宮へようこそ！
• 1: Emscripten 仕組みと構造
• 2: C++ ソースコードにおける翻訳器 em++ への特殊化
• 3: キミはこの奥へ進んでもいいし、一旦街へ引き返して万全を期してもいい
• 事例紹介 a: cross-platform mainloop の書き方
• 事例紹介 b: cross-platform std::future による非同期URLダウンローダーの書き方

4. わたしは誰？
• 伊藤 兎
• Facebook でいつでも会えます。 → https://www.facebook.com/usagi.wrp
• Twitter にも居ます。 → https://twitter.com/usagi_wrp
• GitHub で語り合いましょう。 → https://github.com/usagi
• OSS
• Emscripten の Authors のひとり。（いっぱいいる。いっしょにつくりましょう (*´∀｀*) ）
• おしごと
• さいきんは地球を作っています。（EmscriptenやClang++やMSVC++で。）
• くわしくは、うまくいったらまた来年☆（ゝω・）vｷｬﾋﾟ

5. わたしは誰？
• 伊藤 兎
• Facebook でいつでも会えます。 → https://www.facebook.com/usagi.wrp
• Twitter にも居ます。 → https://twitter.com/usagi_wrp
• GitHub で語り合いましょう。 → https://github.com/usagi
• 贈り物はこちらです。 → http://www.amazon.co.jp/registry/wishlist/2ZTSIH6FEUAV0
• お茶が好きです。
• 青茶は大禹嶺・阿里山あたりの金萱、武夷岩茶、紅茶は阿薩姆、緑茶は八女が喜ばれます。
• 辛いものが好きです。
• 激辛というのはブレアーズ・サドンデスソースやアカハチ・辛すぎホットソースくらいの事を言います。

6. I: Emscripten の紹介
その始め方と"Hello, World!"にいたるまで

7. Emscripten とは？
C++
• .hxx
• .cxx
em++
• LLVM-IR
• js-runtime
JS
• .js (asm.js)
• .html
• C++のソースコードを
• somthing.hxx
• something.cxx
• em++ (≈g++, clang++, cl++)
• LLVMバックエンド（≈技術魔法）を利用して
• jsの実行時ライブラリーと結合しつつ
• JavaScriptへ
• 翻訳☆（ゝω・）vｷｬﾋﾟ
• std, boost, etc. → おおよそ使えます！
• glDrawArrays, etc. → WebGL1 へ！
• SDL2, GLFW3, → いろいろあるけど使えます！

8. Emscripten の何が嬉しいことか？
C++
• 強力な翻訳器
• さいきょークラスの自動最適化
• 呪文: -O3 -arch=native
• 高い可搬性
• + Emscripten/Web
• 強力なライブラリー
• 超兵器（あーてぃふぁくと）
• マ・ク・ロ, メモリー操作, テンプレート
JavaScript
• 10年間も進化できなかった可哀
想な言語仕様
• 悲しみのECMA4
• ムズカシイ言語機能
• ダック・タイピング
• this コンテキスト問題
• 普及しなかったレアなOOP機構
• プロトタイプベースのOOP
• 基本的にシングルファイル
• インタープリター風味
• 氾濫した Web API

9. I.1: Emscripten の始め方
• ドキュメント（≈新オフィシャルウェブサイト）
• http://kripken.github.io/emscripten-site/
• いまのところ完全に英語
• ちょっと余裕できたら個人的に → emscripten.jp とかやろうかとは考えています。
• だいたいの表向きの事はここにしっかりと書いてある
• よほど深い階層へ潜ろうとしなければアンドキュメント仕様やAPIの心配は不要
• ・・・たまにドキュメントが最近の仕様変更に追い付いて居ない罠はあります。
• <emscripten/emscripten.h>読みましょう。そうしましょう (*´∀｀*)
• github （≈ソースコードとTiDD開発のオンライン拠点）
• https://github.com/kripken/emscripten
• wiki（≈旧オフィシャルウェブサイト＆ドキュメンテーション）
• ほかに新標準の翻訳器の repos などもある
kripken こと Alon Zakai は
Mozilla の Researcher で
Emscripten 開発のボス
MIT License

10. I.1: Emscripten の始め方
• 開発環境の準備
• NG
• Ubuntu-14.10: emscripten/utopic-1.10.0
• GOOD
• arch-AUR: emscripten, emscripten-git
• Homebrew: Emscripten
• Better(Official Method)
• The Emscripten SDK
• Windows, OSX, GNU/Linux
• Building Emscripten from Source
• 開発者向け・いますぐ最新版を試したい方向け
旧過ぎ！
仕様変更・バグ修正
たくさん
通常は
この方法で！
まあまあ
保守されていそう
素人にはおすすめし
ないけど、それほど
難しくないよ！

11. I.1: Emscripten の始め方
Web Installer なら
ドキュメントが未更新で
1.25.0
とか書いてあっても
その時点での最新版を
インストール
してくれます。

12. I.1: Emscripten の始め方
<Win-key>
"EmscriptenCommand Prompt"emsdk
emcc --version
すでに使えます！
emcc が invalid syntax と
か言ったら、emsdkとは
別にpython3が居る可能
性を疑いましょう。

13. I.2: Emscripten で Hello, World!
• mkdir hello
• cd hello
• vim hello.cxx
• em++ -o hello.js hello.cxx
• node hello.js
• em++ -o hello.html hello.cxx
• ( access to "hello.html" with modern graphical web browser as you like )
標準出力はここへ。
標準エラー出力だと
js-console へ。

14. II: Emscripten の迷宮へようこそ！
Emscriptenの迷宮の入り口を少しだけ歩いてみましょう

15. II.1: Emscripten の仕組みと構造
• emscripten // .cxx --> .js
• 実行時にリンクされているライブラリーはどこにある？
• emscripten/system
• bin, include, lib, local/include
• emscripten/emscripten.h
• libcxx/array
• GLFW/glfw3.h
• GL
• emscripten/src
• library_gl.js
• library_glfw3.js
C++コードレベル
から直接扱うのは
ここらへんに
翻訳された .js に
リンクされるのは
ここらへんに
ライブラリーが
挙動不審な時は
疑う余地アリ

16. II.1: Emscripten の仕組みと構造
• もっと濃ゆい仕組みについて
• asm.js への最適化
• LLVM-backend
• emscripten-fastcomp
• 実行時のARM風OPコードと仮想マシン
• x86ではない（メモリーアライメントに触れるような低レベル処理は落ちる可能性がある）
• emscripten-ports （パッケージ管理システム）
• SDL2はこの仕組みで対応を実験中の最初の例
• <thread> と WebWorker と 共有メモリー と 例外ポインター
• Firefox との協調、 Chromium/pNaCl の成果の取り込み
次回もお楽しみに♡

17. II.2: C++ ソースコードにおける
翻訳器 em++ への特殊化
• #ifndef EMSCRIPTEN
• em++ を使うと自動的に定義される CPP マクロ
• em++ と他のツールチェインや非Webプラットフォーム向けとの実装分岐に使う
• 可搬性を損なわない為にはこれが必要となる機能は独立したライブラリーとして実装詳
細を隠蔽する方針を個人的にはおすすめします
• embind // ref.
• C++ の関数やクラスのシンボルを JavaScript からシームレスにそれらしく扱うための
FFI 機構
• EM_ASM & emscripten_run_script // ref.
• インライン・アセンブラーを模して .cxx 内で JS コードを em++ にとっての機械語と見
做して実行する最終手段的な機能。戻り値を C++ コードへ得ることも可能

18. II.3: 事例紹介
• 事例紹介
• a: cross-platform mainloop の書き方
• ref: wonderland.subsystem の 一部構造
• b: cross-platform std::future による非同期URLダウンローダーの書き方
• wonderland.loader
• ref: https://github.com/usagi/wonderland.loader
• c: cross-platform read/write 可能な簡易ストレージの書き方
• wonderland.storage
• ref: https://github.com/usagi/wonderland.storage
• ほか、時間があれば
• GLFW3 等の高級ラッパーライブラリー wonderland.subsystem
• ref: https://github.com/usagi/wonderland.subsystem

19. おしまい
つづく