Contenu connexe
Similaire à Hello, C++ + JavaScript World! - Boost.勉強会 #11 東京 (20)
Hello, C++ + JavaScript World! - Boost.勉強会 #11 東京
- 3. Introduction
• 対象者
– C++, JavaScript 知ってる人・興味がある人
• 内容
– C++ と JS が関連した技術群それぞれについて、
Hello world に毛が生えたくらいの内容を紹介します
– ちなみに Boost 成分 1 ㍉ もありません…
- 6. 目次
• C++ + JS の世界感
• V8
• Node.js
• Qt Quick
• Native Client
• Emscripten
- 7. C++ + JS の世界感
BrowserBrowser
JavaScript と言えばブラウザ…
- 8. C++ + JS の世界感
BrowserBrowser
JavaScript
エンジン
C++ で書かれている!
- 9. C++ + JS の世界感
BrowserBrowser
JavaScript
エンジン
ゲーム用途
例: SimCity
(WebKit + v8 で UI
を記述)
ブラウザ以外でも…
- 10. C++ + JS の世界感
BrowserBrowser
JavaScript
エンジン
ゲーム用途
例: SimCity
(WebKit + v8 で UI
を記述)
サーバサイド
JavaScript
他にも有名ドコロで…
- 11. C++ + JS の世界感
BrowserBrowser
JavaScript
エンジン
ゲーム用途
例: SimCity
(WebKit + v8 で UI
を記述)
サーバサイド
JavaScript
アプリケーション開発
フレームワーク
他にも有名ドコロで…
- 12. C++ + JS の世界感
BrowserBrowser
JavaScript
エンジン
ゲーム用途
例: SimCity
(WebKit + v8 で UI
を記述)
サーバサイド
JavaScript
アプリケーション開発
フレームワーク
NativeClient
ネイティブアプリを
ブラウザ上で動かす
ブラウザの話に戻ると…
- 13. C++ + JS の世界感
BrowserBrowser
JavaScript
エンジン
ゲーム用途
例: SimCity
(WebKit + v8 で UI
を記述)
サーバサイド
JavaScript
アプリケーション開発
フレームワーク
NativeClient
ネイティブアプリを
ブラウザ上で動かす
Emscripten
C++ を JS に変換
ブラウザの話に戻ると…
- 14. C++ + JS の世界感
BrowserBrowser
JavaScript
エンジン
mobile
JavaScript
Java
C++
JNI
ゲーム用途
例: SimCity
(WebKit + v8 で UI
を記述)
サーバサイド
JavaScript
アプリケーション開発
フレームワーク
NativeClient
ネイティブアプリを
ブラウザ上で動かす
Emscripten
C++ を JS に変換
モバイル周りは更に色々ありますが省略
ex.) Android
- 15. C++ + JS の世界感
BrowserBrowser
JavaScript
エンジン
ゲーム用途
例: SimCity
(WebKit + v8 で UI
を記述)
サーバサイド
JavaScript
アプリケーション開発
フレームワーク
NativeClient
ネイティブアプリを
ブラウザ上で動かす
Emscripten
C++ を JS に変換
mobile
JavaScript
Java
C++
JNI
ex.) Android
- 16. C++ + JS の世界感
BrowserBrowser
JavaScript
エンジン
ゲーム用途
例: SimCity
(WebKit + v8 で UI
を記述)
サーバサイド
JavaScript
アプリケーション開発
フレームワーク
NativeClient
ネイティブアプリを
ブラウザ上で動かす
Emscripten
C++ を JS に変換
mobile
JavaScript
Java
C++
JNI
ex.) Android
- 19. Introduction
• V8 は、Chrome にも搭載されている C++ で書か
れた JavaScript エンジン
その他のオープンなエンジンには SpiderMonkey (C),
Rhino (Java), JavaScriptCore (C++) 等があります
- 20. Introduction - インストール
h#ps://github.com/v8/v8
or
%
brew
install
v8
%
sudo
ap;tude
install
libv8-‐dev
- 22. V8 を使った JS の実行
※ 最近は Context.Dispose で Isolate を引数に指定しない場合は Warning が出るようになったようです
- 25. • 独立した JS をある V8 インスタンスの中で実行する環境
• JS は built-in 変数/関数も書換可能なのでグローバル空間を分離
• 2 つ目以降の Context の生成はローコストで可能
• iframe とかイメージすると分かりやすいです
Context
Context A
Built-in func / obj
Custom func / obj
Context B
Built-in func / obj
Custom func / obj
- 27. Handle
• ヒープ内の JS オブジェクトの位置の参照
– GC する度に JS オブジェクトの実体のヒープ位置は変わってしまうので
– JS の世界の変数とのやり取りはこの Handle を通じて行う
• Local Handle と Persistent Handle の 2 種類がある
– Local の寿命は Handle Scope で決定
– Persistent は明示的に Dispose するまで破棄されない
Heap
“hogehoge”
100
Function
Handle Scope
Local<String>
Local<Number>
Persistent<Function>
- 28. V8 を使った JS の実行
Persistent ハンドルを返す
Local ハンドルを返す
- 32. こんな風にやります
Value は JS の基本型(Number, Array,
Object…) の基底クラスで、IsNumber()
等で型を確かめ、ToNumber() 等でアッ
プキャスト出来ます。
Arguments は各引数(Value 型)に [ ]
演算子でアクセスでき、This や Callee
などを参照できます。
- 38. クラスの追加 概要
myClass の internal field に void* で保存
が呼ばれ、
C++ 側であらかじめ登録しておいた関数内で、
プロパティの読み書きやメソッド呼び出しのタイミングで、
事前に登録しておいた C++ の関数が呼ばれる。その内部では、
void* から my_class* へキャストして、メンバ変数 hoge の
読み書きや、メンバ関数 piyo() の呼び出しをする。
- 56. 参考文献
• Chrome V8 Embedder’s Guide
– https://developers.google.com/v8/embed?hl=ja
- 63.
h#p://nodejs.jp/nodejs.org_ja/
Introduction - インストール
h#ps://github.com/hokaccha/nodebrew
or
バージョン指定出来るのでこっちがオススメ
- 66. Node.js の世界観
JS
でつくりたいもの
コアモジュール
npm
モジュール
$
npm
install
hoge
で追加できるモジュール
fs,
h#p
などの組み込みモジュール
※ Node Packaged Modules
31,184 個 (2013/05/31 時点) も
登録されている。
WebSocket を使ったり、DB とつない
だり、各サービスにアクセスしたり…
- 76. C++ モジュールの作成
$ npm install node-gyp -g
$ node-gyp configure build
binding.gyp
コンパイル :
先ほどと同じモジュール名
gyp (generate your projects) 用の
設定を json 形式で記述
ビルドは node 用の gyp (node-gyp)
を用いる
- 82. 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 がエンジンになりました
- 91. C++ バインディング
• 色々な方法がある
– QML の要素を C++ で使う
– QML の関数を C++ から呼ぶ
– C++ のクラスを QML から使う
– C++ で QML で使える型を定義する
その他の方法については以下を参照!:
http://d.hatena.ne.jp/hecomi/20130503/1367594609
JS に関係する所
- 93. QML の関数を C++ から呼ぶ
arr と obj を受け取り
output に出力する関数
C++ QML
- 100. C++ のクラスを QML から使う
myclass.h
main.qml
main.cpp
my という名前で
MyClass をセット
- 101. C++ のクラスを QML から使う
myclass.h
main.qml
main.cpp
my という名前で
MyClass をセット
そのまま使える!
- 103. C++ のクラスを QML から使う
myclass.h
main.qml
main.cpp
超簡単!
このオマジナイは何?
- 104. moc
• Qt には Meta Object Compiler (moc) という
ツールがある
• qmake すると C++ から C++ を吐き出す
– Q_INVOKABLE や signal / slot などのキーワードをア
ノーテーションとして解釈してコードを生成
• キーワードは C++ に影響を与えないよう define されている
– Q_OBJECT はそこに必要な幾つかのメンバを展開する
• 例えば qt_static_metacall という静的なメンバ関数を展開、こ
の中で Q_INVOKABLE のついたメンバ関数を呼ぶ
- 106. 参考文献
• 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
- 109. Introduction
• Native Client (NaCl: 塩) はブラウザ上で安全にネ
イティブコードを実行
– サンプル: https://developers.google.com/showcase/
• JS とやり取りも出来る!
Chrome extension としても利用可能
(↑ SSH Client が動く Secure Shell)
- 110. Install
• 参照
– Native Client の導入と Hello World までのまとめ
• http://d.hatena.ne.jp/hecomi/20130128/1359372772
- 112. Native Client の世界観 ②
NaClPepper APIJavaScript
ローカルファイル IO
2D/3D グラフィックス
(OpenGL ES 2.0)
オーディオ
マウス/キーボード/
ゲームパッド
等々…
Pepper Plugin API (PPAPI) を経由して
ブラウザを超えた機能にアクセスする
- 113. Native Client の世界観 ②
NaClPepper API
NaCl (塩) に対し Pepper (胡椒)
JavaScript
ローカルファイル IO
2D/3D グラフィックス
(OpenGL ES 2.0)
オーディオ
マウス/キーボード/
ゲームパッド
等々…
Pepper Plugin API (PPAPI) を経由して
ブラウザを超えた機能にアクセスする
- 114. Native Client の世界観 ③
JavaScript C++
PostMessage()
postMessage()
HandleMessage
‘message’ Event Listener
- 127. 参考文献
• Native Client の導入と Hello World までのまとめ
– http://d.hatena.ne.jp/hecomi/20130128/1359372772
• Native Client — Google Developers
– https://developers.google.com/native-client/
- 137. インストール
• 参照
– Emscripten で C++ の Hello World を JavaScript に
変換してみた
• http://d.hatena.ne.jp/hecomi/20130416/1366124901
- 140. Hello world を変換してみる
$ em++ hello.cpp –o hello.js
$ node hello.js
Hello, world!
$ em++ hello.cpp –o hello.html
$ open hello.html
hello.cpp
- 141. Hello world を変換してみる
$ em++ hello.cpp –o hello.js
$ node hello.js
Hello, world!
$ em++ hello.cpp –o hello.html
$ open hello.html
hello.cpp
- 142. Hello world を変換してみる
$ em++ hello.cpp –o hello.js
$ node hello.js
Hello, world!
$ em++ hello.cpp –o hello.html
$ open hello.html
hello.cpp
( ^ω^)
cpp ここに cpp があるじゃろ?
- 143. Hello world を変換してみる
$ em++ hello.cpp –o hello.js
$ node hello.js
Hello, world!
$ em++ hello.cpp –o hello.html
$ open hello.html
hello.cpp
( ^ω^)
これを em++ すると…
- 144. Hello world を変換してみる
$ em++ hello.cpp –o hello.js
$ node hello.js
Hello, world!
$ em++ hello.cpp –o hello.html
$ open hello.html
main 関数
hello.cpp hello.js
( ^ω^)
こうじゃ
- 145. Hello world を変換してみる
$ em++ hello.cpp –o hello.js
$ node hello.js
Hello, world!
$ em++ hello.cpp –o hello.html
$ open hello.html
main 関数
123536
行!
hello.jshello.cpp
( ^ω^)
こうじゃ
- 147. 速度どうなの?
• Emscripten は asm.js 形式の js を吐き出す
– asm.js は JavaScript を拡張せずに型付をして高速化を
はかる JavaScript のサブセット
– ex.
(x + y) | 0 // int32
• asm.js 実装した JS エンジン OdinMonkey を積む
Firefox (nightly) でデモ動かすとヌルヌル
– http://www.unrealengine.com/html5/
- 149. 参考文献
• “実戦 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/
- 150. まとめ
• C++ と JavaScript が関連する世界を幾つか紹介
– V8
– Node.js
– Qt Quick
– NaCl
– Emscripten
• コレ以外にも色々あると思いますのでご存知でしたら
教えて下さい m(_ _)m