C++で作るWebアプリケーション

C++をJavaScriptにコンパイルするコンパイラEmscriptenを使って、C++でWebアプリケーションを開発する手順を解説します

Transcript

1. ͦΜͳC++ͷਐग़ΛڋΜͰ͖ͨྖҬ
   C++͸ͱͯͭ΋ͳ͘൚༻తͳݴޠͰ͋Δ
   

   View Slide

2. WEB
   

   View Slide

3. αʔό ΫϥΠΞϯτ
   ͬͪ͜͸
   ׂͱͲΜͳݴޠͰ΋ॻ͚Δ
   ໰୊͸ͬͪ͜
   

   View Slide

4. JavaScript
   8ϒϥ΢βͰಈ͘෺Λ࡞ΔͨΊʹ
   ௕Β͘࢖ΘΕ͖ͯͨݴޠ
   ۙ୅తͳଟ͘ͷϒϥ΢β͕ڞ௨ͯ͠ରԠ͍ͯ͠Δ
   །Ұͷݴޠ
   

   View Slide

5. JavaScript͸
   8ϖʔδʹ؆୯ͳಈ͖Λ
   ༩͑ΔͨΊʹߟ͑ͩ͞Εͨ
   ੈلͷ຤
   !
   <!--!<br/>var step = 0;!<br/>function update() {!<br/>step++;!<br/>var block = document.getElementById( "marquee" );!<br/>block.style.left = step % 200;!<br/>}!<br/>-->!
   !
   !
   Hello, World!!
   !
   !
   
   

   View Slide

6. WEB͸มΘͬͨ
   

   View Slide

7. WEB͸ߏ଄Խ͞ΕͨจॻΛ
   දݱ͢Δ͚ͩͷ෺Ͱ͸ͳ͘ͳͬͨ
   

   View Slide

8. WEB͸
   ϢʔβΠϯλʔϑΣʔε
   Λఆٛ͢Δ΋ͷʹͳΓ
   

   View Slide

9. WEB͸
   ΞϓϦέʔγϣϯ
   ͷ࣮ߦ؀ڥʹͳͬͨ
   

   View Slide

10. ͜ͷWEBͷ໾ׂͷ֦େʹ൐͍
    JavaScript
    ͸ΑΓ
    ෳࡶʹԠ༻͞ΕΔΑ͏ʹͳ͍ͬͯͬͨ
    

    View Slide

11. ͔͠͠
    JavaScript
    ͷ࢓༷͸ͦͷԠ༻ʹ௥ैͯ͜͠ͳ͔ͬͨ
    

    View Slide

12. JavaScriptΛखͰॻ͍ͯ
    ۙ୅తͳWEBΞϓϦέʔγϣϯΛ࡞Δͷ͸
    ۤ௧ͱݴͬͯྑ͍࡞ۀͰ͋Δ
    ۤ௧Λආ͚Δํ๏͕ز͔ͭߟ͑ͩ͞Εͨ
    JavaScriptͷϥΠϒϥϦͰԿͱ͔͢Δ
    JavaScriptʹม׵͞ΕΔΑΓߴڃͳݴޠ
    JavaScriptʹ୅ΘΔಈతͳWEBΛ࣮ݱ͢Δٕज़
    

    View Slide

13. JavaScriptͷϥΠϒϥϦͰԿͱ͔͢Δ
    JavaScriptʹม׵͞ΕΔΑΓߴڃͳݴޠ
    JavaScriptʹ୅ΘΔಈతͳWEBΛ࣮ݱ͢Δٕज़
    Native Client
    

    View Slide

14. Կނطʹ޿͘
    ࢖ΘΕ͍ͯΔݴޠ
    Λ࢖Θͳ͍ͷ͔
    JavaScriptʹม׵͞ΕΔΑΓߴڃͳݴޠ
    

    View Slide

15. Google WEB Toolkit
    

    View Slide

16. JavaΛJavaScriptʹίϯύΠϧ͢Δ
    Google WEB Toolkit
    

    View Slide

17. JavaΛJavaScriptʹίϯύΠϧ͢Δ
    Google WEB Toolkit
    C++
    ͸JavaScriptʹίϯύΠϧͰ͖ͳ͍ͷ͔
    

    View Slide

18. Emscripten
    

    View Slide

19. C++Ͱ࡞Δ
    WEBΞϓϦέʔγϣϯ
    #include >
    int m
    ain() { std::cout <<
    “Hello, W
    orld!” <<
    std::endl; }
    Naomasa Matsubayashi
    

    View Slide

20. @fadis_
    Naomasa Matsubayashi
    

    View Slide

21. LLVM
    

    View Slide

22. LLVM ࠷దԽ
    clang
    llvm-
    pytho
    lawk ghc perl6 flang ldc
    x86
    Power
    PC
    ARM MIPS SPARC JVM
    DCPU-
    16
    

    View Slide

23. LLVM
    clang
    ࠷దԽ
    JavaScript
    JavaScriptͱ͍͏ϚγϯޠΛ
    ੜ੒͢ΔόοΫΤϯυ
    Emscripten
    

    View Slide

24. LLVM
    clang
    ࠷దԽ
    JavaScript
    C͔ΒWebϒϥ΢βͷ
    ػೳΛୟ͘ҝͷϥΠϒϥϦ
    Emscripten
    ϥΠϒϥϦ Emscripten
    

    View Slide

25. ༻ҙ͢Δ΋ͷ
    OPEFKT HJU QZUIPO DMPTVSFDPNQJMFS
    $ git clone git://github.com/kripken/emscripten.git
    EmscriptenΛೖख
    FNDD͕$ίϯύΠϥ
    FN͕$ίϯύΠϥ
    MMWN DMBOH ۙ୅తͳ8FCϒϥ΢β
    

    View Slide

26. $ ../emscripten/em++ hello.cpp
    $ ls!
    a.out.js hello.cpp
    $ node a.out.js!
    Hello, World!
    #include !
    !
    int main() {!
    std::cout << “Hello, World!” << std::endl;!
    }
    

    View Slide

27. function _main() {!
    var label = 0;!
    var $this_addr_i;!
    var $__pf_addr_i;!
    var
    $call=__ZNSt3__1lsINS_11char_traitsIcEEEERNS_1
    3basic_ostreamIcT_EES6_PKc(13760, ((2096)|0));!
    $this_addr_i=$call;!
    $__pf_addr_i=12;!
    var $this1_i=$this_addr_i;!
    var $0=$__pf_addr_i;!
    var $call_i=FUNCTION_TABLE[$0]($this1_i);!
    return 0;!
    }!
    Module["_main"] = _main;
    std::__1::basic_ostreamchar,!
    std::__1::char_traits!
    >& std::__1::operator<< std::__1::char_traits!
    >(!
    std::__1::basic_ostreamchar,!
    std::__1::char_traits!
    >&,!
    char const*!
    )
    

    View Slide

28. -O2ͰGoogle Closure Compiler
    

    View Slide

29. HTMLܗࣜͰཉ͍࣌͠
    $ ../emscripten/em++ hello.cpp -o hello.html
    ग़ྗϑΝΠϧͷ֦ுࢠΛ.htmlʹ͠Α͏
    

    View Slide

30. IUUQXXXVTBLVSBOFKQFNIFMMP
    

    View Slide

31. int main() {!
    while( 1 ) {!
    // ͳΜ͔ॲཧ!
    }!
    }
    ϝΠϯϧʔϓ
    μϝɺθολΠ
    

    View Slide

32. ฦͬͯ͜ͳ͍JavaScriptϋϯάͨ͠Webϖʔδ
    

    View Slide

33. #include !
    int main_loop {!
    // ͳΜ͔ॲཧ!
    }!
    int main() {!
    emscripten_set_main_loop( &main_loop, 60, 0 );!
    }
    JavaScriptͷTFU*OUFSWBMͰNBJO@MPPQΛఆظతʹݺͿ
    emscripten_set_main_loop
    

    View Slide

34. ଟ͘ͷ৔߹WebͷσβΠϯͱ
    εΫϦϓτ͸ผʑʹ࡞ΒΕΔ
    طʹ༻ҙ͞ΕͨhtmlϑΝΠϧ͔Β
    ੜ੒ͨ͠JavaScriptΛ࢖͍͍ͨ
    

    View Slide

35. खͰॻ͍ͨJavaScript͔Β
    Emscripten͕ੜ੒ͨؔ͠਺Λݺͼग़͢
    C++ JavaScript
    extern “C”!
    int hoge( int a ) {!
    /* ͳΜ͔ॲཧ */!
    return 5;!
    }
    var b =!
    Module._hoge( 3 );
    γϯϘϧ໊
    

    View Slide

36. खͰॻ͍ͨJavaScript͔Β
    Emscripten͕ੜ੒ͨؔ͠਺Λݺͼग़͢
    C++Ͱͷܕ͕૊ΈࠐΈͷ੔਺ܕɺුಈখ਺఺਺ܕɺ
    ϙΠϯλܕͳΒ
    JavaScriptͷ਺஋ΛҾ਺ʹ౉ͤΔ
    JavaScriptͷม਺Ͱ਺஋ѻ͍Ͱ໭Γ஋Λड͚ͱΕΔ
    C++Ͱͷܕ͕DIBSܕ΁ͷϙΠϯλͳΒ
    JavaScriptͷจࣈྻΛҾ਺ʹ౉ͤΔ
    JavaScriptͷม਺Ͱจࣈྻѻ͍Ͱ໭Γ஋Λड͚ͱΕΔ
    

    View Slide

37. खͰॻ͍ͨJavaScript͔Β
    Emscripten͕ੜ੒ͨؔ͠਺Λݺͼग़͢
    C++Ͱॻ͔Εͨߴ଎ϑʔϦΤม׵ΛJavaScript͔Β࢖͏ྫ
    #include !
    #include !
    #include !
    #include !
    #include !
    #include "kissfft.hh"!
    constexpr size_t fft_size = 2048u; !
    extern "C" void fft( float *in, float *out ) {!
    typedef kissfft< float >::cpx_type cpx;!
    std::array< cpx, fft_size > in_complex;!
    boost::copy(!
    boost::iterator_range< float* >( in, in + fft_size ),!
    boost::begin( in_complex )!
    );!
    std::array< cpx, fft_size > out_complex;!
    kissfft< float > fft_( fft_size, false );!
    fft_.transform( in_complex.data(), out_complex.data() );!
    boost::transform( out_complex, out, []( const cpx &e ) {!
    return e.real();!
    } );!
    }
    

    View Slide

38. खͰॻ͍ͨJavaScript͔Β
    Emscripten͕ੜ੒ͨؔ͠਺Λݺͼग़͢
    C++Ͱॻ͔Εͨߴ଎ϑʔϦΤม׵ΛJavaScript͔Β࢖͏ྫ
    $ ../emscripten/em++ -std=c++0x!
    -I../boost/include fft.cpp -o fft.js
    -s EXPORTED_FUNCTIONS="['_fft']"!
    -s ASM_JS=1 -O2
    CPPTUͷϔομ࢖͏ΜͰΑΖ͘͠
    +BWB4DSJQUϑΝΠϧܗࣜͰग़ྗͯ͠Ͷ
    γϯϘϧ@⒎U͸֎෦͔ΒࢀরՄೳͰͳ͚Ε͹ͳΒͳ͍
    BTNKT࢖ͬͯͶ
    

    View Slide

39. खͰॻ͍ͨJavaScript͔Β
    Emscripten͕ੜ੒ͨؔ͠਺Λݺͼग़͢
    C++Ͱॻ͔Εͨߴ଎ϑʔϦΤม׵ΛJavaScript͔Β࢖͏ྫ
    ...!
    !
    !
    FFT!
    src="./fft.js">!
    ...
    ⒎UKT
    

    View Slide

40. खͰॻ͍ͨJavaScript͔Β
    Emscripten͕ੜ੒ͨؔ͠਺Λݺͼग़͢
    C++Ͱॻ͔Εͨߴ଎ϑʔϦΤม׵ΛJavaScript͔Β࢖͏ྫ
    ...!
    !
    <!--!<br/>function run() {!<br/>var before = document.getElementById('before');!<br/>var after = document.getElementById('after');!<br/>var input = Module._malloc( 2048 * 4 );!<br/>var output = Module._malloc( 2048 * 4 );!<br/>var i;!<br/>for( i = 0; i != 2048; i++ ) {!<br/>setValue( input + i * 4, Math.random(), 'float' );!<br/>before.innerText += Math.floor( getValue( input + i * 4, 'float'<br/>) * 1000 ) / 1000 + ',';!<br/>if( i % 16 == 15 ) {!<br/>before.innerText += '\n';!<br/>}!<br/>}!<br/>Module._fft( input, output );!<br/>for( i = 0; i != 2048; i++ ) {!<br/>ϝϞϦྖҬΛ֬อ<br/>C++ଆͷؔ਺Λݺͼग़͢<br/>JOQVUʹཚ਺Λઃఆͯ͠<br/>͍ͭͰʹදࣔ<br/>TFU7BMVF ΞυϨε ஋ --7.Ͱͷܕ<br/><br/>ࢦఆͨ͠ΞυϨεʹɺ஋Ληοτ͢Δɻ<br/>ܕ͸ୈࡾҾ਺Ͱࢦఆͨ͠ܕͩͬͨ͜ͱʹ͢Δɻ<br/>HFU7BMVF ΞυϨε --7.Ͱͷܕ<br/><br/>ࢦఆͨ͠ΞυϨε͔Β஋ΛಡΈग़͢ɻ<br/>ܕ͸ୈࡾҾ਺Ͱࢦఆͨ͠ܕͩͬͨ͜ͱʹ͢Δɻ<br/>

    View Slide

41. खͰॻ͍ͨJavaScript͔Β
    Emscripten͕ੜ੒ͨؔ͠਺Λݺͼग़͢
    C++Ͱॻ͔Εͨߴ଎ϑʔϦΤม׵ΛJavaScript͔Β࢖͏ྫ
    for( i = 0; i != 2048; i++ ) {!
    setValue( input + i * 4, Math.random(), 'float' );!
    before.innerText += Math.floor( getValue( input + i * 4, 'float'
    ) * 1000 ) / 1000 + ',';!
    if( i % 16 == 15 ) {!
    before.innerText += '\n';!
    }!
    }!
    Module._fft( input, output );!
    for( i = 0; i != 2048; i++ ) {!
    after.innerText += Math.floor( getValue( output + i * 4, 'float'
    ) * 1000 ) / 1000 + ',';!
    if( i % 16 == 15 ) {!
    after.innerText += '\n';!
    }!
    }!
    Module._free( input );!
    Module._free( output );!
    }!
    -->!
    !
    !
    !
    !
    !
    

    View Slide

42. खͰॻ͍ͨJavaScriptͰ͔Β
    Emscripten͕ੜ੒ͨؔ͠਺Λݺͼग़͢
    C++Ͱॻ͔Εͨߴ଎ϑʔϦΤม׵ΛJavaScript͔Β࢖͏ྫ
    IUUQXXXVTBLVSBOFKQFNJOUFSPQ
    

    View Slide

43. Embind
    C++ JavaScript
    

    View Slide

44. #include
    #include
    size_t calc_hash( const std::string &src ) {
    return boost::hash< std::string >()( src );
    }
    using namespace emscripten;
    EMSCRIPTEN_BINDINGS(mod) {
    function("hash", &calc_hash);
    } ͜ΕΛ
    ͜ͷ໊લͰ
    ؔ਺Λࢦఆ໊ͨ͠લͰJavaScriptଆʹݟͤΔ
    Module.hash( value );
    

    View Slide

45. C++ͷߏ଄ମʹJavaScript͔ΒΞΫηε͢Δ
    #include !
    #include !
    using namespace emscripten;!
    EMSCRIPTEN_BINDINGS(mod) {!
    value_struct< std::pair >("float2")!
    .field("first", &std::pair::first )!
    .field("second", &std::pair::second );!
    function( "create_float2", &std::make_pair< float, float > );!
    }
    var i = Module.create_float2( 2.0, 3.0 );!
    i.first = 5;
    

    View Slide

46. C++ͷΫϥεʹJavaScript͔ΒΞΫηε͢Δ
    #include !
    class Hoge {!
    const int a;!
    public:!
    Hoge( int a_ ) : a( a_ ) {}!
    int run( int b ) { return a * b; }!
    };!
    using namespace emscripten;!
    EMSCRIPTEN_BINDINGS(mod) {!
    class_("Hoge")!
    .constructor()!
    .function("run", &Hoge::run );!
    }
    var hoge = new Module.Hoge( 3 );!
    var result = hoge.run( 4 );!
    // result = 12
    

    View Slide

47. C++ͷΫϥεʹJavaScript͔ΒΞΫηε͢Δ
    #include !
    class Fuga {!
    int a;!
    public:!
    Fuga( int a_ ) : a( a_ ) {}!
    void set( int a_ ) { a = a_; }!
    int get() const { return a*2; }!
    };!
    using namespace emscripten;!
    EMSCRIPTEN_BINDINGS(mod) {!
    class_("Fuga")!
    .constructor()!
    .property( "x", &Fuga::get, &Fuga::set );!
    } var fuga = new Module.Fuga( 3 );!
    fuga.a = 5;!
    var result = fuga.a;!
    // result = 10
    

    View Slide

48. Emscriptenͷώʔϓ
    var fuga =!
    new Module.Fuga
    ώʔϓͷ
    ΞυϨεۭؒ
    'VHBͷΞυϨε
    'VHB
    GVHB
    'VHBͷΞυϨε
    JavaScript C++
    fuga.delete() delete 'VHBͷΞυϨε
    fuga.run()
    'VHBͷΞυϨε ->run()
    ΦϒδΣΫτ͸ഁغ͢ΔલʹEFMFUF
    
    

    View Slide

49. Emscriptenͷώʔϓ
    'VHB
    ώʔϓͷ
    ΞυϨεۭؒ
    'VHBͷΞυϨε
    var fuga =!
    new Module.Fuga
    GVHB
    'VHBͷΞυϨε
    fuga.run()
    JavaScript C++
    'VHBͷΞυϨε ->run()
    ͜͜ͷΞυϨεͷอ࣋ʹ
    εϚʔτϙΠϯλΛ࢖͍͍ͨ
    var fuga = new Module.Fuga();!
    Module.do_something( fuga );!
    // C++ͷؔ਺ʹϙΠϯλ౉͠!
    fuga.delete();!
    // ຊ౰ʹ͜͜Ͱdeleteͯ͠΋େৎ෉?
    

    View Slide

50. struct Piyo {!
    int run( int a ) { return a + 3; }!
    };!
    using namespace emscripten;!
    EMSCRIPTEN_BINDINGS(piyo) {!
    class_("Piyo")!
    // class PiyoΛόΠϯυ!
    .smart_ptr>()!
    // std::shared_ptrΛ࢖ͬͯͶ!
    .constructor<>()!
    // Ҿ਺ແ͠ͷίϯετϥΫλΛόΠϯυ!
    .function( "run", &Piyo::run );!
    // ϝϯόؔ਺runΛόΠϯυ!
    }
    

    View Slide

51. void do_something( std::shared_ptr< Piyo > piyo ) {!
    ...!
    }
    var piyo = Module.get_piyo();!
    Module.do_something( piyo );!
    piyo.delete();!
    // ͜͜Ͱ͸ࢀরΧ΢ϯτ͕1ݮΔ͚ͩ
    std::shared_ptr< Piyo > get_piyo() {!
    return std::shared_ptr< Piyo >( new Piyo() );!
    }
    

    View Slide

52. EMSCRIPTEN_BINDINGS(piyo) {!
    class_("Piyo")!
    .smart_ptr_constructor(!
    &std::make_shared< Piyo >!
    )!
    // JavaScriptଆʹstd::shared_ptrͳ!
    // ΦϒδΣΫτΛฦ͢ίϯετϥΫλ!
    .function( "run", &Piyo::run );!
    }
    var piyo = new Module.Piyo();!
    Module.do_something( piyo );!
    piyo.delete();!
    // ͜͜Ͱ͸ࢀরΧ΢ϯτ͕1ݮΔ͚ͩ
    

    View Slide

53. Emscripten͕ੜ੒ͨ͠JavaScript͔Β
    ࠷ॳ͔ΒJavaScriptͰॻ͔Εͨؔ਺Λݺͼग़͢
    #include !
    extern "C"!
    void entry() {!
    emscripten_run_script(!
    "document.getElementById('output').innerText="!
    "'Hello, World!';"!
    );!
    }
    emscripten_run_script
    

    View Slide

54. Emscripten͕ੜ੒ͨ͠JavaScript͔Β
    ࠷ॳ͔ΒJavaScriptͰॻ͔Εͨؔ਺Λݺͼग़͢
    C++͔ΒHTMLͷϒϩοΫཁૉͷத਎Λॻ͖׵͑Δ
    IUUQXXXVTBLVSBOFKQFNJOUFSPQ
    

    View Slide

55. ϥΠϒϥϦ
    

    View Slide

56. ϥΠϒϥϦΛ࢖͍ͨ͘ͳͬͨΒ
    $ ../emscripten/emconfigure ./configure --prefix=(ུ)!
    $ ../emscripten/emmake make!
    $ ../emscripten/emmake make install
    --7.தؒίʔυͷঢ়ଶͷϥΠϒϥϦ͕ੜ੒͞ΕΔ
    $ ../emscripten/em++ hoge.cpp -o hoge.bc!
    $ llvm-link hoge.bc libz.so.1.2.8 -o linked.bc!
    $ ../emscripten/em++ composite.bc -o hoge.html
    LLVM LinkerͰϦϯΫ͠Α͏
    

    View Slide

57. ڞ༗ϥΠϒϥϦͷ࢓૊Έ͸
    ݕ౼͞Ε͍ͯΔ͕·ͩυϥϑτ
    IUUQTHJUIVCDPNLSJQLFOFNTDSJQUFOXJLJ-JCSBSZ4VQQPSU
    

    View Slide

58. BoostͷϏϧυ͸΍΍໘౗
    IUUQDPNNFOUTHNBOFPSHHNBOFDPNQDPNQJMFSTFNTDSJQUFO
    BUPNJD
    DISPOP
    EBUF@UJNF
    pMFTZTUFN
    HSBQI
    QSPHSBN@PQUJPO
    SBOEPN
    SFHFY
    TFSJBMJ[BUJPO
    TJHOBMT
    TZTUFN
    UJNFS
    XTFSJBMJ[BUJPO
    গͳ͘ͱ΋Ϗϧυ͸௨ΔϥΠϒϥϦ
    

    View Slide

59. Ծ૝ϑΝΠϧγεςϜ
    

    View Slide

60. Emscripten͸طଘͷC++ͷϥΠϒϥϦΛͦͷ··
    WEBʹྲྀ༻͢Δ͜ͱΛ໨ࢦ͍ͯ͠Δ
    طଘͷଟ͘ͷC++ͷϥΠϒϥϦ͕
    ϑΝΠϧೖग़ྗΛඞཁͱ͍ͯ͠Δ
    Emscriptenʹ͸ϝϞϦ্Ͱಈ࡞͢Δ
    Ծ૝తͳϑΝΠϧγεςϜ͕༻ҙ͞Ε͍ͯΔ
    

    View Slide

61. #include
    #include
    #include
    #include
    int main() {
    boost::filesystem::directory_iterator iter(
    boost::filesystem::path( "/dev" )
    );
    const boost::filesystem::directory_iterator
    end;
    for( ; iter != end; ++iter )
    std::cout << iter->path() << std::endl;
    }
    ͜ΜͳίʔυΛॻ͍ͯ΋
    

    View Slide

62. ಈ͘
    IUUQXXXVTBLVSBOFKQFNGT
    

    View Slide

63. ϑΝΠϧγεςϜʹϑΝΠϧΛ௥Ճ͢Δʹ͸
    $ ../emscripten/em++ -std=c++0x fft.cpp !
    -o hoge.cpp --preload-file hoge.txt
    --preload-file
    

    View Slide

64. কདྷతʹWebStorageͱ
    ࿈ܞ͢ΔҊ͸͋Δ͕ະରԠ
    

    View Slide

65. Emscripten͕ੜ੒͢ΔJavaScript͸
    Ͱ͔ͯ͘نଇత
    

    View Slide

66. ѹॖͤΑ
    

    View Slide

67. $ ../emscripten/em++ -O2 hoge.cpp -o hoge.html!
    --compression ../emscripten/third_party/
    lzma.js/lzma-native,../emscripten/third_party/
    lzma.js/lzma-decoder.js,LZMA.decompress
    Emscriptenʹಉࠝ͞Ε͍ͯΔ
    LZMA.js
    --compression
    

    View Slide

68. IPHFIUNM EFDPNQSFTTKT
    ຊମ
    ϑΝΠϧγεςϜ
    

    View Slide

69. Canvas
    

    View Slide

70. Canvas͸SDLͷϑϨʔϜόοϑΝͩ
    #include
    ͯ͠
    SDL_Init( SDL_INIT_VIDEO );
    ॳظԽ͠
    screen = SDL_SetVideoMode(512, 512, 32, SDL_SWSURFACE );
    ιϑτ΢ΣΞαʔϑΣεΛ࡞Ε͹
    

    View Slide

71. ඳ͚Δ
    IUUQXXXVTBLVSBOFKQFNTEM
    

    View Slide

72. ը૾
    

    View Slide

73. Ծ૝ϑΝΠϧγεςϜ্ͷը૾ΛಡΈࠐΉʹ͸
    libjpegͱ͔ΛJavaScriptʹίϯύΠϧͯ͠΋͍͍͚Ͳ
    SDL_image
    ϒϥ΢βͷը૾σίʔμΛ࢖͏
    ଎͍
    

    View Slide

74. CanvasʹJPEGը૾Λදࣔ
    IUUQXXXVTBLVSBOFKQFNKQFH
    

    View Slide

75. Ի
    

    View Slide

76. SDL_Audio
    WebAudio
    OpenAL
    WebAL
    

    View Slide

77. OpenAL͕WebALʹϚοϓ͞Ε͍ͯΔ
    #include
    #include
    ͯ͠
    device = alcOpenDevice ( NULL );
    context = alcCreateContext( device, NULL );
    ίϯςΩετΛ࡞ͬͯ
    alGenSources( 1, &source );
    alGenBuffers( 1, &buffer );
    alBufferData( buffer, AL_FORMAT_MONO16, brass, 76833 * 2, 48000 );
    alSourceQueueBuffers( source, 1, &buffer );
    ιʔεͱόοϑΝΛ࡞ͬͯ
    ೾ܗσʔλΛॻ͖ࠐΜͰ
    alSourcePlay( source );
    ࠶ੜ͢Δͱ
    

    View Slide

78. Ի͕ग़Δ
    IUUQXXXVTBLVSBOFKQFNBM
    

    View Slide

79. %άϥϑΟοΫε
    

    View Slide

80. OpenGL
    WebGL
    OpenGL ES
    

    View Slide

81. OpenGL͕WebGLʹϚοϓ͞Ε͍ͯΔ
    OpenGL ESʹ؆୯ʹஔ͖׵͑ΒΕΔͱ͜Ζ͚ͩ
    std::cout << glGetString( GL_VERSION ) << std::endl;
    WebGL 1.0 (OpenGL ES 2.0 Chromium)
    WARNING: using emscripten GL emulation. This is a
    collection of limited workarounds, do not expect it
    to work
    ܯࠂEmscriptenͷ(-ΤϛϡϨʔγϣϯΛ࢖༻தɻ
    ͜Ε͸·ͩ࡞Γ͔͚ͩʂಈ͘ͱࢥ͏ͳΑʂ
    WARNING: using emscripten GL immediate mode
    emulation. This is very limited in what it supports
    ܯࠂEmscriptenͷ(-JNNFEJBUFϞʔυͷ
    ΤϛϡϨʔγϣϯΛ࢖༻தɻ
    ͜ͷ෦෼ͷαϙʔτঢ়گ͸ۃΊͯݶఆతͩʂ
    ωΠςΟϒͰಈ͍ͯΔͷʹϒϥ΢βͰಈ͔ͳ͍ͱ͖͸
    Emscriptenͷ࠷৽൛ΛQVMMͯ͘͠Δͱಈ͘ࣄ͕
    Α͋͘Δ
    

    View Slide

82. ࠷৽൛Ͱ΋όάͬͯΔ͜ͱ͕
    Α͋͘Δ
    OpenGL͕௖఺ΠϯσοΫεʹ࢖͑Δܕ
    CJU੔਺ CJU੔਺ CJU੔਺
    OpenGL ES͕௖఺ΠϯσοΫεʹ࢖͑Δܕ
    CJU੔਺ CJU੔਺
    EmscriptenͷOpenGLΤϛϡϨʔγϣϯʹ
    CJU௖఺ΠϯσοΫεΛ৯΂ͤ͞Δͱ
    CJUͬͯݴͬͯΔͷʹCJU۠੾ΓͰಡΜͰ͘ΕΔ
    

    View Slide

83. OpenGL ESͷؾ࣋ͪΛߟ͑ͯ
    OpenGLΛॻ͜͏
    ෆ޾ʹͳΒͳ͍ͨΊͷίπ
    

    View Slide

84. OpenGL ESͷؾ࣋ͪΛߟ͑ͨ݁Ռ
    IUUQXXXVTBLVSBOFKQFNHM
    

    View Slide

85. ιέοτ
    

    View Slide

86. 
    ௨৴Λதܧ͢Δ͚ͩͷ
    σʔϞϯ
    WebSocket WebSocket
    Զαʔό
    ԶΫϥΠΞϯτ
    

    View Slide

87. 
    WebRTC
    https://github.com/kripken/emscripten/pull/1070
    

    View Slide

88. try {!
    throw hoge();!
    } catch( const hoge& ) {!
    std::cerr << “oops” << std::endl;!
    }
    ͦͷଞ
    

    View Slide

89. Emscripten͸σϑΥϧτͰ
    ྫ֎͕DBUDIͰ͖ͳ͘ͳ͍ͬͯΔ
    -s DISABLE_EXCEPTION_CATCHING=0
    DBUDIͰ͖ΔΑ͏ʹ͠Α͏
    

    View Slide

90. ྫ֎͕ඈΜͩ࣌ʹඈΜͩྫ֎Λදࣔ͢Δ
    -s EXCEPTION_DEBUG=1
    ؔ਺ͷग़ೖΓΛදࣔ͢Δ
    -s LABEL_DEBUG=1
    -s CORRUPTION_CHECK=1
    όοϑΝΦʔόʔϥϯΛݕग़͢Δ
    -s SAFE_HEAP=1
    ൣғ֎ࢀরٴͼΞϥΠϯϝϯτͷෆҰகΛݕग़͢Δ
    -s ASSERTIONS=1
    ͳΜ͔࣮ߦ࣌ͷνΣοΫ͕૿͑Δ ৄࡉෆ໌
    
    

    View Slide

91. طʹ৭ʑͳιϑτ΢ΣΞ͕
    Webϒϥ΢β্Ͱಈ͍͍ͯΔ
    

    View Slide

92. IUUQTHJUIVCDPNLSJQLFOTRMKT
    

    View Slide

93. IUUQNBOVFMTHJUIVCJPUFYMJWFKTXFCTJUF
    

    View Slide

94. IUUQLSJQLFOHJUIVCJPBNNPKTFYBNQMFT
    OFXBNNPIUNM
    

    View Slide

95. IUUQLSJQLFOHJUIVCJPMMWNKTEFNPIUNM
    

    View Slide

96. IUUQSFQMJUMBOHVBHFT1ZUIPO
    

    View Slide

97. IUUQSFQMJUMBOHVBHFT3VCZ
    

    View Slide

98. IUUQWQTFUPUIFJQJQMVTPOFDPN
    SFENJOFQSPKFDUTFNTDSJQUFORUXJLJ
    %FNPT
    

    View Slide

99. IUUQXXXVOSFBMFOHJOFDPNIUNM
    

    View Slide

100. ଞʹ΋༷ʑͳιϑτ΢ΣΞ͕ϒϥ΢β্Ͱಈ͍͍ͯΔ
     IUUQTHJUIVCDPNLSJQLFOFNTDSJQUFOXJLJ
     

     View Slide

101. ղܾ͞Ε͍ͯͳ͍໰୊
     

     View Slide

102. JavaScriptʹ͸εϨου͕ͳ͍
     

     View Slide

103. http://dl.acm.org/citation.cfm?id=2048224
     

     View Slide

104. ·ͱΊ
     

     View Slide

105. ωΠςΟϒΞϓϦέʔγϣϯ΋
     WebΞϓϦέʔγϣϯ΋
     ಉ͡Α͏ʹॻ͚Δ࣌୅͕΍ͬͯ͘
     Δ
     

     View Slide

106. JavaScriptΛखͰॻ͘ͷ͸΍Ίͯ
     C++Λॻ͜͏
     

     View Slide

107. Thank you for listening
     ϒϥ΢β্ͰuARMΛ࢖ͬͯ
     LinuxΛىಈ͠Α͏ͱ͚ͨ͠Ͳ
     ϒʔτதʹϋϯάͨ͠ਤ
     IUUQXXXVTBLVSBOFKQFNV"3.
     IUUQXXXVTBLVSBOFKQFN
     ࠓ೔ͷൃදͷαϯϓϧҰཡ
     

     View Slide