hello, c++ + javascript world! - boost.勉強会 #11 東京

++ + C++ と JavaScript で広がる世界

@hecomi

Boost.勉強会 #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 の世界感

Browser Browser

JavaScript と言えばブラウザ…


Browser Browser

JavaScript

エンジン

C++ で書かれている！


Browser Browser

JavaScript

エンジン

ゲーム用途

例: SimCity (WebKit + v8 で UI

を記述)

ブラウザ以外でも…


Browser Browser

JavaScript

エンジン

ゲーム用途


を記述)

サーバサイド

JavaScript

他にも有名ドコロで…


Browser Browser

JavaScript

エンジン

ゲーム用途


を記述)

サーバサイド

JavaScript

アプリケーション開発

フレームワーク

他にも有名ドコロで…


Browser Browser

JavaScript

エンジン

ゲーム用途


を記述)

サーバサイド

JavaScript



NativeClient

ネイティブアプリをブラウザ上で動かす

ブラウザの話に戻ると…


Browser Browser

JavaScript

エンジン

ゲーム用途


を記述)

サーバサイド

JavaScript



NativeClient


Emscripten

C++ を JS に変換

ブラウザの話に戻ると…


Browser Browser

JavaScript

エンジン

mobile

JavaScript

Java

C++

JNI

ゲーム用途


を記述)

サーバサイド

JavaScript



NativeClient


Emscripten

C++ を JS に変換

モバイル周りは更に色々ありますが省略

ex.) Android


Browser Browser

JavaScript

エンジン

ゲーム用途


を記述)

サーバサイド

JavaScript



NativeClient


Emscripten

C++ を JS に変換 mobile

JavaScript

Java

C++

JNI

ex.) Android

V8 Chrome でおなじみの 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

この辺りは何となく分かるけど…


Context??

•  独立した 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


Handle??

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>


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 からは見えないフィールドを 1 個作成しています

new 時に呼ばれるコンストラクタを見てみます


こんな風 this オブジェクトにインスタンスを埋め込みます

( 0 はインデックス )


参照されなくなったら削除する処理を書きます


getter / setter では内部に保存したインスタンスを取り出して使います


メソッドでも同じです


$ ./hellohogehoge から fuga に書き換えられました fugapiyopiyo

実行 :

参考文献 •  Chrome V8 Embedder’s Guide

–  https://developers.google.com/v8/embed?hl=ja

NODE.JS サーバサイド JavaScript 環境


•  Node.js の世界観

•  C++ モジュールの作成

Introduction •  V8 をエンジンとして利用したサーバサイドの

JavaScript プラットフォーム

•  ブラウザの JavaScript では出来なそうなことが色々簡単に出来る環境です

Introduction •  ファイルを読み込んだり…

Introduction •  HTTP サーバを立てたり…

h#p://nodejs.jp/nodejs.org_ja/

Introduction - インストール

h#ps://github.com/hokaccha/nodebrew

or

バージョン指定出来るのでこっちがオススメ

Node.js の世界観

JS でつくりたいもの



コアモジュール

fs, h#p などの組み込みモジュール




npm モジュール

$ npm install hoge で追加できるモジュール


※ Node Packaged Modules

31,184 個 (2013/05/31 時点) も

登録されている。

WebSocket を使ったり、DB とつないだり、各サービスにアクセスしたり…




npm モジュール自作モジュール

$ npm install hoge で追加できるモジュール



未来っぽいお部屋



twi#er, socket.io, express, serialport, …


音声認識、発話、各種ガジェット操作、…

例えば冒頭紹介した


未来っぽいお部屋



twi#er, socket.io, express, serialport, …


C++ と組み合わせれば出来ることの幅が拡がる！

音声認識、発話、各種ガジェット操作、…

例えば冒頭紹介した

どうやって作るの？

C++ モジュールの作成


JS の世界へ送り出す関数

Node.js の世界へ C++ の関数を送り出す処理


v8 で global に関数をセットした時と同じ形に展開


hello という名前のモジュールを作成 & JS 側へ変数/関数をセットする関数を指定（init）


$ npm install node-gyp -g$ node-gyp configure build

binding.gyp

コンパイル :

先ほどと同じモジュール名

gyp (generate your projects) 用の設定を json 形式で記述

ビルドは node 用の gyp (node-gyp) を用いる


$ node helloworld

hello.js

実行 :

参考文献 •  Node.js マニュアル & ドキュメンテーション

–  http://nodejs.jp/nodejs.org_ja/api/addons.html

QT QUICK UI 記述言語 QML でクロスプラットフォームアプリを簡単に作成


•  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 の例


JS が使える！

QML の例


プロパティの値でも！

QML の例


プログレスバーつき WebView

QML の例


プログレスバーつき WebView 簡単！

C++ バインディング

•  QML だけでは込み入ったことは出来ない

– 例えばローカルファイル IO とか

•  そこで C++ バインディング！


•  色々な方法がある

–  QML の要素を C++ で使う

–  QML の関数を C++ から呼ぶ

–  C++ のクラスを QML から使う

–  C++ で QML で使える型を定義する


•  色々な方法がある

–  QML の要素を C++ で使う

–  QML の関数を C++ から呼ぶ

–  C++ のクラスを QML から使う

–  C++ で QML で使える型を定義する

その他の方法については以下を参照！：

http://d.hatena.ne.jp/hecomi/20130503/1367594609

JS に関係する所

QML の関数を C++ から呼ぶ

C++ QML


arr と obj を受け取り output に出力する関数

C++ QML


QMLを表示 C++ QML


配列とオブジェクトを作成

C++ QML


setText を呼ぶ！

C++ QML


setText を呼ぶ！

簡単！

C++ QML

C++ のクラスを QML から使う

myclass.h

main.qml

main.cpp


myclass.h

main.qml

main.cpp

my という名前で MyClass をセット


myclass.h

main.qml

main.cpp

my という名前で MyClass をセット

そのまま使える！


myclass.h

main.qml

main.cpp

超簡単！


myclass.h

main.qml

main.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.cpp

myclass.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 ブラウザ上でネイティブアプリを動かす


•  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 の世界観 ①

HTML

nmf

C++

nexe

make

アーキの振り分け

embed タグを起点としてロード

Native Client の世界観 ②

NaCl Pepper API JavaScript

ローカルファイル IO

2D/3D グラフィックス (OpenGL ES 2.0)

オーディオ

マウス/キーボード/

ゲームパッド

等々…

Pepper Plugin API (PPAPI) を経由して

ブラウザを超えた機能にアクセスする

Native Client の世界観 ②

NaCl Pepper API

NaCl (塩) に対し Pepper (胡椒)

JavaScript

ローカルファイル IO

2D/3D グラフィックス (OpenGL ES 2.0)

オーディオ

マウス/キーボード/

ゲームパッド

等々…

Pepper Plugin API (PPAPI) を経由して

ブラウザを超えた機能にアクセスする

Native Client の世界観 ③

JavaScript C++

PostMessage()

postMessage()

HandleMessage

‘message’ Event Listener

Hello World を動かしてみる


まず embed タグ生成時に pp::CreateModule が呼ばれる

pp::Module* を返すので継承したクラスを作成


pp::Module::CreateInstance が呼ばれる


pp::Instance* を返すので継承したクラスを作成する


JavaScript からのメッセージを受け取る


渡されたメッセージの処理


JS からのメッセージを受け取ったので今度は JS 側へメッセージを送ってみる


読み込まれたら ‘hello’ を C++ 側へ送る (HandleMessage が呼ばれる)


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/

EMSCRIPTEN C++ のコードを JavaScript へ変換


•  変換して動かしてみる

Introduction •  LLVM-IR を JavaScript に変換！

–  LLVM … Clang のバックエンドにもなっているコンパイラ基盤

–  LLVM-IR … LLVM の中間表現

LLVM のロゴかこいい

Introduction

C++ LLVM-IR JavaScript Clang Emscripten

Introduction •  色々なものが変換されています

–  https://github.com/kripken/emscripten/wiki



mruby



mruby

gnuplot



mruby

gnuplot

unreal engine



mruby

gnuplot

unreal engine

Qt

インストール •  参照

–  Emscripten で C++ の Hello World を JavaScript に変換してみた

•  http://d.hatena.ne.jp/hecomi/20130416/1366124901

Hello world を変換してみる

hello.cpp


$ em++ hello.cpp –o hello.js$ node hello.jsHello, world!

hello.cpp



$ em++ hello.cpp –o hello.html$ open hello.html

hello.cpp




hello.cpp

( ＾ω＾)

⊃ cpp ⊂ ここに cpp があるじゃろ？




hello.cpp

( ＾ω＾)

≡⊃⊂≡ これを em++ すると…




main 関数

hello.cpp hello.js

( ＾ω＾)

⊃ ⊂ こうじゃ




main 関数

123536 行！

hello.js hello.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 で広がる世界

@hecomi

Boost.勉強会 #11 東京

hello, c++ + javascript world! - boost.勉強会 #11 東京

Technology