20161203-emscripten

Transcript

1. C言語で行うWebフロントエンドプログラミング Mozilla Japan N. Shimizu (nshimizu@mozilla-japan.org) builderscon 2016/12/03
2. FNDD
   P
   JOEFYIUNM
   IFMMPXPSMED
3. /
   4IJNJ[V
   
   
   !DIJLPTLJ ˖ ⛆加㖩ח֮׷8FC׾⡲׷⠓爡ד⫴ְגְתׅ
   ˖ 'JSFGPY
   'JSFGPY
   GPS
   J04
   %FW5PPMT
   ˖ 3VTU
   
   BTNKT
   
   8FC"TTFNCMZ
   
   8FC73
   
   ˖ فؚٗٓىؚٝ鎉铂ה؟حؕ٦鋅׷ךָ㥨ֹדׅ
   ˖ 㘗ך䓼ְ鎉铂ָ㥨ֹדׅ
   ˖ רֻךַ׿ִָ׷ְֹׁ׳ֲךفؚٗٓىؚٝ鎉铂ח
 ⠓ִ׷ך׾嚂׃׫ח׃גְתׅ
   ˖ IUUQTTQFBLFSEFDLDPNDIJLPTLJ
6. Open Source Project
7. Proudly non-profit, Mozilla makes products like Firefox with a mission to keep the power of the Web in the hands of users everywhere. Mozilla Mission (https://www.mozilla.org/en-US/mission/)
8. To ensure the Internet is a global public resource, open and accessible to all. Mozilla Mission(https://www.mozilla.org/en-US/mission/)
9. HTML5の成長と、NPAPIの終焉 • NPAPI (Netscape Plugin Application Programming Interface) • ブラウザープラグインに対して提供されるAPI • 利用例：Adobe Flash Player、Unity Web Player、Microsoft Sliverlight, etc • ブラウザーのできないことをプラグインで補完してきた • HTML5の成長によって、ブラウザーだけでできることが増えてきた • NPAPIはクラッシュや脆弱性の要因でもあった • NPAPIの廃止
10. The Expanding World of Web Standard Technologies and Platforms ts - r r U r In r- f IETF Full- screen Brotli HTTP/2 TLS SSL URL HTTP Origin data URL Real-Time Communications Progressive Web Apps Extensible to Anything! Progressive Enhancement Device Control Game, VR & High Performance Apps Proxy Module QUIC Net Info CSP Beacon Navi. Timing DNT CORS block scope Class Gene- rators Itera- tors Collec- tions DOM UI Events File RDF RSS RDFa Indexed DB WOFF Shared Workers fetch Public Key Pinning HSTS Web Socket Protocol - Web Anima- tions Arrow Func. Pro- mise Template Literals ECMA Script 2015 CSS Snapshot 2015 HTML W3C HTML5 SIMD Khronos Async Func. Push Service Worker HTML Components Custom Elements Generic Sensor Blue- tooth USB Speech Media Recorder MIDI FIDO Game- pad Shared Mem. Web Assembly asm.js WebVR Typed Array WebGL Shadow DOM temp- lates EME vibra- tion Web Crypto Web Audio Orienta- tion WebRTC ORTC data channel Media Stream Battery Status Presen- tation Pointer Events Writing Mode Shapes Tran- sitions & Anima- tions Fonts Layout Media Queries text decora- tion trans- form Mask- ing Flex Box Filter User Inter- face Open Media Multi Column Permi- ssions Notifi- cations geo- location Page Visibility Web App Manifest Exclu- sions Grid Layout Math ML Quarks Mode SMIL SVG P PNG APNG OGP Opus H.264 VP10 WebM VP8 mp3 VP9 multi media Web Sockets API WHATWG Server- Sent ev. HTML5 Parser Elements & Syntax sections HTML5 Forms Canvas 2D Web Workers WAI- ARIA Content Model app cache Micro- data Web Storage
11. IUUQTCMPHNP[JMMBPSHGVUVSFSFMFBTFTSFEVDJOHBEPCFBTIVTBHFJOSFGPY
12. VRコンテンツに対する要求 プラットフォームへの要求 没入感 高リフレッシュレート、低遅延性、ヘッドトラッキング、 入力インタフェースへの対応 臨場感 3Dグラフィックス、立体音響 開始までのハードルの低さ アセットの非同期ロード、キャッシュコントロール、
 フットプリントの小ささ
13. プラットフォームへの要求 Web技術 高リフレッシュレート、ヘッドトラ ッキング WebVR API 低遅延性、小フットプリント asm.js / WebAssembly 
 Web Workers / SharedArrayBuffer /Atomics 入力インタフェース Gamepad API 3D表現 WebGL / WebGL2 / Web Audio API キャッシュコントロール Service Worker / IndexedDB / IndexedDB2
14. ߏจղੳ μ΢ϯϩʔυ ίϯύΠϧ ࣮ߦ ߏจղੳ μ΢ϯϩʔυ ίϯύΠϧ ࣮ߦ asm.js JavaScript
15. asm.js： JavaScriptの「低水準」なサブセット • 可能な処理 • 整数演算、浮動小数点演算 • 関数定義と呼び出し、関数表の利用 • Math オブジェクトに実装されている数学関数の呼び出し • 線形メモリへのバイト単位でのアクセス • JavaScriptからは、モジュールの定義関数として利用できます • FFIを利用したJavaScriptの関数呼び出し • 高度な最適化を可能にする型アノテーション
16. asm.js function Peano(stdlib, ffi, heap){ "use asm"; function zero(){ return 0; } function succ(a){ a = a | 0; return (a + 1) | 0; } return {zero: zero, succ: succ}; } asm.js によるモジュール定義例
17. asm.js function someModule(stdlib, ffi, heap){ var memo = new stdlib.Uint32Array(heap); // snip function f(n){ if(memo[n >> 2] | 0 != 0){ return memo[n >> 2] | 0; } memo[n >> 2] = doSometing(n) | 0; } // snip メモリへのバイト単位でのアクセス
19. 厣加귓㶨
    괏讒
    ֹאיׁ׿ד׮׻ַ׷--7._؝ٝػ؎ٓ׾荈⡲ׅ׷׋׭ךؖ؎سـحؙ
    
 ؎ٝفٖأآٍػٝ
    
    *4#/
    
    
20. コマンドライン 
    DVSM
    IUUQTTBNB[POBXTDPNNP[JMMBHBNFT FNTDSJQUFOSFMFBTFTFNTELQPSUBCMFUBSH[
    
    
    UBS
    [YG
    FNTELQPSUBCMFUBSH[
    
    DE
    FNTELQPSUBCMF
    
    FNTEL
    JOTUBMM
    MBUFTU
    
    FNTEL
    BDUJWBUF
    MBUFTUH
    
    TPVSDF
    FNTEL@FOWTI Emscripten のインストールと、最新版の利用
21. コマンドライン 
    FNDD
    P
    IFMMPKT
    IFMMPD
    
    OPEF
    IFMMPKT
    IFMMP
    XPSME
    
    FNDD
    P
    IFMMPIUNM
    IFMMPD
    
    PQFO
    IFMMPIUNM -o オプションで html / js へ出力
22. Emscripten が提供する機能 • C / C++ で書かれたソースコードの asm.js へのコンパイル • 標準ライブラリの提供 • libc / libc++ の asm.js へのコンパイル • OpenGL ES2 の WebGL 化 • 仮想的なファイルシステムの提供：memory FS / IndexedDB FS • 特別ファイルのエミュレーション、標準入出力 / 標準エラー出力のエミュレーション • コンパイルされたコードのJSへのエキスポート • emscripten.h
23. コンパイルできるプログラムの制約 • 共有メモリーが必要なプログラムのポートはできません • 共有メモリーの機能がブラウザーに（まだ）実装されていないためです • message passingを行うようなプログラムは移植できます • ビッグエンディアンに依存するプログラムは、リトルエンディアンに書き換える必要 があります • x86の環境に依存するものや、低水準な機能を利用したものの移植は難しいと思い ます • 64bitのintは利用できますが、asm.jsで利用できる整数型の上限は32bitなので遅 くなります • 例外を出力するコードも遅くなります
24. VimをUIの一部として利用している例：http://rhysd.github.io/react-vimjs/
25. フロントエンドでC/C++で書かれたコードを利用するパターン • ロジックの一部として利用する • 動機： 高速な処理が必要、C / C++ で書かれた資産を流用したい • 利用方法：エキスポートされた関数を利用する / クラス定義を利用する • グラフィックフレームワークやゲームエンジンを利用してUIを構築する • 動機：OpenFrameworksを利用したい / SDL2 を利用したい • 利用方法：コンパイルしたコードと、canvas などの要素をコンポーネントとして 組み込む • 一から全部 C / C++ で書きたい
26. C++ FYUFSO
    $
    \
    
    
    VOTJHOFE
    JOU
    C VOTJHOFE
    JOU
    O \
    
    
    
    
    JG O
    
     \
    
    
    
    
    
    
    SFUVSO
    
    
    
    
    
    ^
    
    
    
    
    SFUVSO
    C O
    
    
    
    C O
    
     
    
    
    ^
    ^ 関数のエキスポート：エキスポートする関数は、マングリングされないようにしておきます
27. コマンドライン 
    FNDD
    P
    CIUNM
    =
    
    
    
    
    
    
    
    T
    
    &91035&%@'6/$5*0/4<@C>
    =
    
    
    
    
    
    
    
    CDQQ 関数のエキスポート：-s オプションでエキスポートする関数を指定します　
28. JS WBS
    C
    
    .PEVMFDXSBQ C
    OVNCFS
    <OVNCFS> 
    DPOTPMFMPH C  
    WBS
    SFTVMU
    
    .PEVMFDDBMM C
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    OVNCFS
    <OVNCFS>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <> 
    DPOTPMFMPH SFTVMU 
    エキスポートされた関数の利用： ccallで直接呼び出すか、cwrapでラッパーを作って利用します
29. C++で定義されたクラスを、JSから利用するには 1. C++でクラスを定義します 2. そのクラスのインタフェースを別のファイルに記述します •記述にはWebIDLと呼ばれるインタフェース記述言語を利用します •この言語は、ブラウザーの提供するAPIの定義記述に利用されています 3. Emscripten 付属のツールで、インタフェース記述を処理し、グルーコードを生成しま す 4. 生成したグルーコードを読み込むためのC++ファイルを作成します 5. 作成したC++コードを含めて、プロジェクト全体をビルドします
30. C++ WebIDL DMBTT
    1FBOP\
    QVCMJD
    
    
    1FBOP 
    
    
    JOU
    DVSSFOU 
    
    
    WPJE
    TVD 
    ^ JOUFSGBDF
    1FBOP\
    
    
    WPJE
    1FBOP 
    
    
    MPOH
    DVSSFOU 
    
    
    WPJE
    TVD 
    ^ .h ファイルと、それに対応する WebIDL
31. コマンドライン 
    QZUIPO
    UPPMTXFCJEM@CJOEFSQZ
    QFBOPXFCJEM
    QFBOPHMVF
    
    FNDD
    P
    QFBOPIUNM
    =
    
    
    
    
    
    
    
    QPTUKT
    QFBOPHMVFKT
    =
    
    
    
    
    
    
    
    QFBOPDQQ
    =
    
    
    
    
    
    
    
    QFBOPXSBQQFSDQQ
    グルーコードをつけてコンパイル
32. 外部関数の実装をJavaScriptで与えることも可能です • 実行時に実装が、ダイナミックリンクされるような関数に対して利用できます • 利用方法： • 実装をJavaScriptで与える関数を外部関数として宣言します • C / C++ コード内で、通常の関数と同様に利用します • library.js 内で、JavaScriptの関数を実装として登録します • 利用例 • データ通信部分の実装を、WebScoketを用いたもので与える • センサーの値取得をJavaScriptで行う
33. JS JGEFG
    &.4$3*15&/
    FNTDSJQUFO@TFU@NBJO@MPPQ VQEBUF"OJNBUJPO'SBNF
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    USVF 
    FMTF
    XIJMF USVF \
    
    
    VQEBUF"OJNBUJPO'SBNF 
    
    
    VTMFFQ  
    ^
    FOEJG ブラウザーの制限に合わせて、メインループの実装を切り替える必要があります
34. C++ DPOTU
    TUETUSJOH
    VSM
    
    IUUQFYBNQMFDPNGPPCBS
    JGEFG
    &.4$3*15&/
    FNTDSJQUFO@XHFU@BTZOD@EBUB VSMD@TUS
    /6--
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    POMPBE@DC
    POSSPS@DC 
    WPJE
    POMPBE@DC WPJE
    BSH
    WPJE
    EBUB
    JOU
    TJ[F \
    ^
    WPJE
    POFSSPS@DC WPJE
    BSH \^
    FMTF
    )5513FTQOPTF
    SFT
    
    HFU VSM 
    
    ֿֿך鿇ⴓכ黝䔲דׅ˘
    FOE
    HTTP通信
35. まとめ