• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Hello, C++ + JavaScript World! - Boost.勉強会 #11 東京
 

Hello, C++ + JavaScript World! - Boost.勉強会 #11 東京

on

  • 6,791 views

Boost.勉強会 #11 東京(http://partake.in/events/e75cde86-75c8-47ce-b647-2dbd0495b053)で発表した資料です。補足資料はこちら: http://d.hatena.ne.jp/hecomi/20130604/1370356501

Boost.勉強会 #11 東京(http://partake.in/events/e75cde86-75c8-47ce-b647-2dbd0495b053)で発表した資料です。補足資料はこちら: http://d.hatena.ne.jp/hecomi/20130604/1370356501

Statistics

Views

Total Views
6,791
Views on SlideShare
5,406
Embed Views
1,385

Actions

Likes
16
Downloads
58
Comments
0

5 Embeds 1,385

http://d.hatena.ne.jp 1060
https://twitter.com 220
http://tips.hecomi.com 102
http://s.deeeki.com 2
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Hello, C++ + JavaScript World! - Boost.勉強会 #11 東京 Hello, C++ + JavaScript World! - Boost.勉強会 #11 東京 Presentation Transcript

    • ++ +C++ とJavaScript で広がる世界@hecomiBoost.勉強会 #11 東京
    • Introduction•  C++ と JavaScript が関連するお話について、 広く浅く簡単に世界観を紹介したいと思います
    • Introduction•  対象者–  C++, JavaScript 知ってる人・興味がある人•  内容–  C++ と JS が関連した技術群それぞれについて、 Hello world に毛が生えたくらいの内容を紹介します–  ちなみに Boost 成分 1 ㍉ もありません…
    • 自己紹介•  Name : @hecomi•  Blog : http://d.hatena.ne.jp/hecomi/
    • 自己紹介 – 未来っぽいお部屋Node.js 上で動作する自作 C++ モジュールと組み合わせて作った未来っぽいお部屋
    • 目次•  C++ + JS の世界感•  V8•  Node.js•  Qt Quick•  Native Client•  Emscripten
    • C++ + JS の世界感BrowserBrowserJavaScript と言えばブラウザ…
    • C++ + JS の世界感BrowserBrowserJavaScriptエンジンC++ で書かれている!
    • C++ + JS の世界感BrowserBrowserJavaScriptエンジンゲーム用途例: SimCity(WebKit + v8 で UIを記述)ブラウザ以外でも…
    • C++ + JS の世界感BrowserBrowserJavaScriptエンジンゲーム用途例: SimCity(WebKit + v8 で UIを記述)サーバサイドJavaScript他にも有名ドコロで…
    • C++ + JS の世界感BrowserBrowserJavaScriptエンジンゲーム用途例: SimCity(WebKit + v8 で UIを記述)サーバサイドJavaScriptアプリケーション開発フレームワーク他にも有名ドコロで…
    • C++ + JS の世界感BrowserBrowserJavaScriptエンジンゲーム用途例: SimCity(WebKit + v8 で UIを記述)サーバサイドJavaScriptアプリケーション開発フレームワークNativeClientネイティブアプリをブラウザ上で動かすブラウザの話に戻ると…
    • C++ + JS の世界感BrowserBrowserJavaScriptエンジンゲーム用途例: SimCity(WebKit + v8 で UIを記述)サーバサイドJavaScriptアプリケーション開発フレームワークNativeClientネイティブアプリをブラウザ上で動かすEmscriptenC++ を JS に変換ブラウザの話に戻ると…
    • C++ + JS の世界感BrowserBrowserJavaScriptエンジンmobileJavaScriptJavaC++JNIゲーム用途例: SimCity(WebKit + v8 で UIを記述)サーバサイドJavaScriptアプリケーション開発フレームワークNativeClientネイティブアプリをブラウザ上で動かすEmscriptenC++ を JS に変換モバイル周りは更に色々ありますが省略ex.) Android
    • C++ + JS の世界感BrowserBrowserJavaScriptエンジンゲーム用途例: SimCity(WebKit + v8 で UIを記述)サーバサイドJavaScriptアプリケーション開発フレームワークNativeClientネイティブアプリをブラウザ上で動かすEmscriptenC++ を JS に変換mobileJavaScriptJavaC++JNIex.) Android
    • C++ + JS の世界感BrowserBrowserJavaScriptエンジンゲーム用途例: SimCity(WebKit + v8 で UIを記述)サーバサイドJavaScriptアプリケーション開発フレームワークNativeClientネイティブアプリをブラウザ上で動かすEmscriptenC++ を JS に変換mobileJavaScriptJavaC++JNIex.) Android
    • V8Chrome でおなじみの JavaScript エンジン
    • 内容•  Introduction•  V8 を使った JS の実行•  C++ の関数 à JavaScript の関数•  C++ のクラス à JavaScript のクラス
    • Introduction•  V8 は、Chrome にも搭載されている C++ で書かれた JavaScript エンジンその他のオープンなエンジンには SpiderMonkey (C),Rhino (Java), JavaScriptCore (C++) 等があります
    • Introduction - インストール                        h#ps://github.com/v8/v8 or                    %  brew  install  v8                      %  sudo  ap;tude  install  libv8-­‐dev
    • 動かしてみる
    • V8 を使った JS の実行※ 最近は Context.Dispose で Isolate を引数に指定しない場合は Warning が出るようになったようです
    • Sample Codeこの辺りは何となく分かるけど…
    • V8 を使った JS の実行Context??
    • •  独立した JS をある V8 インスタンスの中で実行する環境•  JS は built-in 変数/関数も書換可能なのでグローバル空間を分離•  2 つ目以降の Context の生成はローコストで可能•  iframe とかイメージすると分かりやすいですContextContext ABuilt-in func / objCustom func / objContext BBuilt-in func / objCustom func / obj
    • V8 を使った JS の実行Handle??
    • Handle•  ヒープ内の JS オブジェクトの位置の参照–  GC する度に JS オブジェクトの実体のヒープ位置は変わってしまうので–  JS の世界の変数とのやり取りはこの Handle を通じて行う•  Local Handle と Persistent Handle の 2 種類がある–  Local の寿命は Handle Scope で決定–  Persistent は明示的に Dispose するまで破棄されないHeap“hogehoge”100FunctionHandle ScopeLocal<String>Local<Number>Persistent<Function>
    • V8 を使った JS の実行Persistent ハンドルを返すLocal ハンドルを返す
    • 関数を追加したい!
    • こんな風にやります
    • こんな風にやりますこの戻り値、引数で関数をつくります
    • こんな風にやりますValue は JS の基本型(Number, Array,Object…) の基底クラスで、IsNumber()等で型を確かめ、ToNumber() 等でアップキャスト出来ます。Arguments は各引数(Value 型)に [ ]演算子でアクセスでき、This や Calleeなどを参照できます。
    • こんな風にやりますContext 生成時に global オブジェクトを指定することができます。
    • こんな風にやりますprint という関数を JS で呼ぶと、↑の print が実行されるようにglobal オブジェクトにセットします
    • こんな風にやります$ clang++ print_test.cpp –o print_test$ ./print_test100 + 200 = 300実行 :
    • lambda 版
    • クラスを追加したい!
    • クラスの追加 概要myClass の internal field に void* で保存が呼ばれ、C++ 側であらかじめ登録しておいた関数内で、プロパティの読み書きやメソッド呼び出しのタイミングで、事前に登録しておいた C++ の関数が呼ばれる。その内部では、void* から my_class* へキャストして、メンバ変数 hoge の読み書きや、メンバ関数 piyo() の呼び出しをする。
    • 例えばこんなクラスを…
    • 例えばこんなクラスを…メンバ変数setter / getter
    • 例えばこんなクラスを…なんか凄いことするメンバ関数
    • こんな風にします
    • こんな風にしますクラス内部の static 関数経由でのみ呼ばれるようになるので private 化setter / getter を JS 側から呼ばれる形に変換
    • こんな風にしますJS の世界へ送り出す処理を記述JS 側で new された時と GC された時の処理piyo を JS 側から呼べるようにする
    • JS の世界とつなぐ処理my_class::ctor を元にした関数を作成
    • JS の世界とつなぐ処理JS のインスタンス変数、プロトタイプ変数に相当する変数を取得
    • JS の世界とつなぐ処理そこへプロパティやそのアクセサをセットしたりメソッドをセットしたりします
    • JS の世界とつなぐ処理この関数をグローバル空間に追加します
    • JS の世界とつなぐ処理さっきは飛ばしましたが、ここでは内部に JS からは見えないフィールドを 1 個作成していますnew 時に呼ばれるコンストラクタを見てみます
    • JS の世界とつなぐ処理こんな風 this オブジェクトにインスタンスを埋め込みます( 0 はインデックス )
    • JS の世界とつなぐ処理参照されなくなったら削除する処理を書きます
    • JS の世界とつなぐ処理getter / setter では内部に保存したインスタンスを取り出して使います
    • JS の世界とつなぐ処理getter / setter では内部に保存したインスタンスを取り出して使います
    • JS の世界とつなぐ処理メソッドでも同じです
    • JS の世界とつなぐ処理$ ./hellohogehoge から fuga に書き換えられました fugapiyopiyo実行 :
    • 参考文献•  Chrome V8 Embedder’s Guide–  https://developers.google.com/v8/embed?hl=ja
    • NODE.JSサーバサイド JavaScript 環境
    • 内容•  Introduction•  Node.js の世界観•  C++ モジュールの作成
    • Introduction•  V8 をエンジンとして利用したサーバサイドのJavaScript プラットフォーム•  ブラウザの JavaScript では出来なそうなことが色々簡単に出来る環境です
    • Introduction•  ファイルを読み込んだり…
    • Introduction•  HTTP サーバを立てたり…
    • Introduction•  HTTP サーバを立てたり…
    •                                              h#p://nodejs.jp/nodejs.org_ja/ Introduction - インストール                        h#ps://github.com/hokaccha/nodebrew or バージョン指定出来るのでこっちがオススメ
    • Node.js の世界観JS  でつくりたいもの
    • Node.js の世界観JS  でつくりたいもの コアモジュール fs,  h#p  などの組み込みモジュール
    • Node.js の世界観JS  でつくりたいもの コアモジュール npm  モジュール $  npm  install  hoge  で追加できるモジュール fs,  h#p  などの組み込みモジュール ※ Node Packaged Modules31,184 個 (2013/05/31 時点) も登録されている。WebSocket を使ったり、DB とつないだり、各サービスにアクセスしたり…
    • Node.js の世界観JS  でつくりたいもの コアモジュール npm  モジュール 自作モジュール $  npm  install  hoge  で追加できるモジュール fs,  h#p  などの組み込みモジュール
    • Node.js の世界観未来っぽいお部屋 コアモジュール npm  モジュール 自作モジュール twi#er,  socket.io,  express,  serialport,  …   fs,  h#p  などの組み込みモジュール 音声認識、発話、各種ガジェット操作、… 例えば冒頭紹介した
    • Node.js の世界観未来っぽいお部屋 コアモジュール npm  モジュール 自作モジュール twi#er,  socket.io,  express,  serialport,  …   fs,  h#p  などの組み込みモジュール C++ と組み合わせれば出来ることの幅が拡がる!音声認識、発話、各種ガジェット操作、… 例えば冒頭紹介した
    • どうやって作るの?
    • C++ モジュールの作成
    • C++ モジュールの作成JS の世界へ送り出す関数Node.js の世界へ C++ の関数を送り出す処理
    • C++ モジュールの作成v8 で global に関数をセットした時と同じ形に展開
    • C++ モジュールの作成hello という名前のモジュールを作成 &JS 側へ変数/関数をセットする関数を指定(init)
    • C++ モジュールの作成hello という名前のモジュールを作成 &JS 側へ変数/関数をセットする関数を指定(init)
    • C++ モジュールの作成$ npm install node-gyp -g$ node-gyp configure buildbinding.gypコンパイル :先ほどと同じモジュール名gyp (generate your projects) 用の設定を json 形式で記述ビルドは node 用の gyp (node-gyp)を用いる
    • C++ モジュールの作成$ node helloworld hello.js実行 :
    • C++ モジュールの作成$ node helloworld hello.js実行 :
    • 参考文献•  Node.js マニュアル & ドキュメンテーション–  http://nodejs.jp/nodejs.org_ja/api/addons.html
    • QT QUICKUI 記述言語 QML でクロスプラットフォームアプリを簡単に作成
    • 内容•  Introduction•  QML の例•  C++ バインディング
    • Introduction•  Qt–  C++ で書かれたクロスプラットフォーム対応のアプリケーション開発フレームワーク•  実績: Skype / Google Earth / Photoshop Elements•  Qt Quick–  C++ でなく QML という JavaScriptをベースにした言語でUI 周りを記述する環境•  Qt 4.x (Qt Quick 1) では WebKit の JavaScriptCore がエンジンだったが、Qt 5 (Qt Quick 2) からは V8 がエンジンになりました
    • Introduction•  インストール–  開発には C++ と JS の世界をまたがってコード補完してくれる Qt Creator が便利です•  http://qt-project.org/downloads
    • QML の例ProgressBar.qml main.qml
    • QML の例ProgressBar.qml main.qmlJS が使える!
    • QML の例ProgressBar.qml main.qmlプロパティの値でも!
    • QML の例ProgressBar.qml main.qmlプログレスバーつき WebView
    • QML の例ProgressBar.qml main.qmlプログレスバーつき WebView簡単!
    • C++ バインディング•  QML だけでは込み入ったことは出来ない–  例えばローカルファイル IO とか•  そこで C++ バインディング!
    • C++ バインディング•  色々な方法がある–  QML の要素を C++ で使う–  QML の関数を C++ から呼ぶ–  C++ のクラスを QML から使う–  C++ で QML で使える型を定義する
    • C++ バインディング•  色々な方法がある–  QML の要素を C++ で使う–  QML の関数を C++ から呼ぶ–  C++ のクラスを QML から使う–  C++ で QML で使える型を定義するその他の方法については以下を参照!:http://d.hatena.ne.jp/hecomi/20130503/1367594609JS に関係する所
    • QML の関数を C++ から呼ぶC++ QML
    • QML の関数を C++ から呼ぶarr と obj を受け取りoutput に出力する関数C++ QML
    • QML の関数を C++ から呼ぶQMLを表示C++ QML
    • QML の関数を C++ から呼ぶ配列とオブジェクトを作成C++ QML
    • QML の関数を C++ から呼ぶsetText を呼ぶ!C++ QML
    • QML の関数を C++ から呼ぶsetText を呼ぶ!C++ QML
    • QML の関数を C++ から呼ぶsetText を呼ぶ!簡単!C++ QML
    • C++ のクラスを QML から使うmyclass.hmain.qmlmain.cpp
    • C++ のクラスを QML から使うmyclass.hmain.qmlmain.cppmy という名前でMyClass をセット
    • C++ のクラスを QML から使うmyclass.hmain.qmlmain.cppmy という名前でMyClass をセットそのまま使える!
    • C++ のクラスを QML から使うmyclass.hmain.qmlmain.cpp超簡単!
    • C++ のクラスを QML から使うmyclass.hmain.qmlmain.cpp超簡単!このオマジナイは何?
    • moc•  Qt には Meta Object Compiler (moc) というツールがある•  qmake すると C++ から C++ を吐き出す–  Q_INVOKABLE や signal / slot などのキーワードをアノーテーションとして解釈してコードを生成•  キーワードは C++ に影響を与えないよう define されている–  Q_OBJECT はそこに必要な幾つかのメンバを展開する•  例えば qt_static_metacall という静的なメンバ関数を展開、この中で Q_INVOKABLE のついたメンバ関数を呼ぶ
    • 自動生成されたコード例moc_myclass.cppmyclass.h 内の Q_OBJECT で qt_static_metacall の宣言が生成され、定義は別途生成された moc_myclass.cpp にて行われる。ここで呼ばれる
    • 参考文献•  Using QML Bindings in C++ Applications–  http://harmattan-dev.nokia.com/docs/platform-api-reference/xml/daily-docs/libqt4/qtbinding.html•  QtQuick での C++ × QML バインディングについてまとめてみた–  http://d.hatena.ne.jp/hecomi/20130503/1367594609
    • NATIVE CLIENTブラウザ上でネイティブアプリを動かす
    • 内容•  Introduction•  Hello World を動かしてみる
    • Introduction•  Native Client (NaCl: 塩) はブラウザ上で安全にネイティブコードを実行–  サンプル: https://developers.google.com/showcase/•  JS とやり取りも出来る!Chrome extension としても利用可能(↑ SSH Client が動く Secure Shell)
    • Install•  参照–  Native Client の導入と Hello World までのまとめ•  http://d.hatena.ne.jp/hecomi/20130128/1359372772
    • Native Client の世界観 ①HTMLnmfC++nexemakeアーキの振り分けembed タグを起点としてロード
    • Native Client の世界観 ②NaClPepper APIJavaScriptローカルファイル IO2D/3D グラフィックス(OpenGL ES 2.0)オーディオマウス/キーボード/ゲームパッド等々…Pepper Plugin API (PPAPI) を経由してブラウザを超えた機能にアクセスする
    • Native Client の世界観 ②NaClPepper APINaCl (塩) に対し Pepper (胡椒)JavaScriptローカルファイル IO2D/3D グラフィックス(OpenGL ES 2.0)オーディオマウス/キーボード/ゲームパッド等々…Pepper Plugin API (PPAPI) を経由してブラウザを超えた機能にアクセスする
    • Native Client の世界観 ③JavaScript C++PostMessage()postMessage()HandleMessage‘message’ Event Listener
    • Hello World を動かしてみる
    • Hello World を動かしてみるまず embed タグ生成時にpp::CreateModule が呼ばれるpp::Module* を返すので継承したクラスを作成
    • Hello World を動かしてみるpp::Module::CreateInstanceが呼ばれる
    • Hello World を動かしてみるpp::Instance* を返すので継承したクラスを作成する
    • Hello World を動かしてみる
    • Hello World を動かしてみるJavaScript からのメッセージを受け取る
    • Hello World を動かしてみる渡されたメッセージの処理
    • Hello World を動かしてみるJS からのメッセージを受け取ったので今度は JS 側へメッセージを送ってみる
    • Hello World を動かしてみる
    • Hello World を動かしてみる読み込まれたら hello をC++ 側へ送る(HandleMessage が呼ばれる)
    • Hello World を動かしてみるC++ 側からのメッセージを受け取る(HandleMessage 内の PostMessage)
    • Hello World を動かしてみるC++ 側からのメッセージを受け取る(HandleMessage 内の PostMessage)
    • 参考文献•  Native Client の導入と Hello World までのまとめ–  http://d.hatena.ne.jp/hecomi/20130128/1359372772•  Native Client — Google Developers–  https://developers.google.com/native-client/
    • EMSCRIPTENC++ のコードを JavaScript へ変換
    • 内容•  Introduction•  変換して動かしてみる
    • Introduction•  LLVM-IR を JavaScript に変換!–  LLVM … Clang のバックエンドにもなっているコンパイラ基盤–  LLVM-IR … LLVM の中間表現LLVM のロゴかこいい
    • IntroductionC++ LLVM-IR JavaScriptClang Emscripten
    • Introduction•  色々なものが変換されています–  https://github.com/kripken/emscripten/wiki
    • Introduction•  色々なものが変換されています–  https://github.com/kripken/emscripten/wikimruby
    • Introduction•  色々なものが変換されています–  https://github.com/kripken/emscripten/wikimrubygnuplot
    • Introduction•  色々なものが変換されています–  https://github.com/kripken/emscripten/wikimrubygnuplotunreal engine
    • Introduction•  色々なものが変換されています–  https://github.com/kripken/emscripten/wikimrubygnuplotunreal engineQt
    • インストール•  参照–  Emscripten で C++ の Hello World を JavaScript に変換してみた•  http://d.hatena.ne.jp/hecomi/20130416/1366124901
    • Hello world を変換してみるhello.cpp
    • Hello world を変換してみる$ em++ hello.cpp –o hello.js$ node hello.jsHello, world! hello.cpp
    • Hello world を変換してみる$ em++ hello.cpp –o hello.js$ node hello.jsHello, world! $ em++ hello.cpp –o hello.html$ open hello.htmlhello.cpp
    • Hello world を変換してみる$ em++ hello.cpp –o hello.js$ node hello.jsHello, world! $ em++ hello.cpp –o hello.html$ open hello.htmlhello.cpp
    • Hello world を変換してみる$ em++ hello.cpp –o hello.js$ node hello.jsHello, world! $ em++ hello.cpp –o hello.html$ open hello.htmlhello.cpp( ^ω^)cpp ここに cpp があるじゃろ?
    • Hello world を変換してみる$ em++ hello.cpp –o hello.js$ node hello.jsHello, world! $ em++ hello.cpp –o hello.html$ open hello.htmlhello.cpp( ^ω^)これを em++ すると…
    • Hello world を変換してみる$ em++ hello.cpp –o hello.js$ node hello.jsHello, world! $ em++ hello.cpp –o hello.html$ open hello.htmlmain 関数hello.cpp hello.js( ^ω^)こうじゃ
    • Hello world を変換してみる$ em++ hello.cpp –o hello.js$ node hello.jsHello, world! $ em++ hello.cpp –o hello.html$ open hello.htmlmain 関数123536  行! hello.jshello.cpp( ^ω^)こうじゃ
    • 速度どうなの?•  普通に JS 書くよりは数倍程度遅い…、が、
    • 速度どうなの?•  Emscripten は asm.js 形式の js を吐き出す–  asm.js は JavaScript を拡張せずに型付をして高速化をはかる JavaScript のサブセット–  ex.(x + y) | 0 // int32•  asm.js 実装した JS エンジン OdinMonkey を積むFirefox (nightly) でデモ動かすとヌルヌル–  http://www.unrealengine.com/html5/
    • 速度どうなの?
    • 参考文献•  “実戦 Emscripten–  http://www.mozilla.jp/static/docs/events/vision/2012/06-ushiroad.pdf•  asm.js spec–  http://asmjs.org/spec/latest/•  BIG WEB APP? COMPILE IT!–  http://kripken.github.io/mloc_emscripten_talk/
    • まとめ•  C++ と JavaScript が関連する世界を幾つか紹介–  V8–  Node.js–  Qt Quick–  NaCl–  Emscripten•  コレ以外にも色々あると思いますのでご存知でしたら教えて下さい m(_ _)m
    • ++ +C++ とJavaScript で広がる世界@hecomiBoost.勉強会 #11 東京