SlideShare a Scribd company logo
1 of 29
Download to read offline
openFrameworkes emscripten setup!
JSオジサン #6
登壇資料
中農稔/ねろ
技術部・人事部
JS、AS、Node.js、C#(Unity)、oF、Arduino、Swift
www.kayac.com/team/nakano-minoru
@nenjiru
http://www.slideshare.net/minorunakanou/
http://qiita.com/nenjiru
https://twitter.com/nenjiru
http://jsdo.it/nenjiru
本日のテーマ
openFrameworker のみなさん
ブラウザですよ、ブラウザっ!
openFrameworks ?
https://vimeo.com/4446798
クリエイティブコーディング界の人気ツール
Processing MAX vvvv oF Cinder
Processing MAX vvvv oF Cinder
Processing.js(p5.js) John Resig
openFrameworks 0.9 が Emscripten に対応
Emscripten とは?
C/C++からLLVMを生成し、それをJavaScriptに変換するコンパイラ。
ちなみに、えむすくりぷてんが正解っぽい
Emscripten とは?
つまり oF がブラウザで動く!
やってみた
oF 0.9 をダウンロード
http://openframeworks.cc/download/
emscriptenをダウンロード
http://kripken.github.io/emscripten-site
公式セットアップガイド
http://openframeworks.jp/setup/emscripten/
python2 のシンボリックリンク
 sudo ln -s /usr/bin/python2.7 /usr/bin/python2
※ バージョンは適宜変えてください
emscripten のパスを通す
 local EMSCRIPTEN_PATH="$HOME/(emscriptenディレクトリ)/emscripten/1.35.0"
 export PATH="$EMSCRIPTEN_PATH:$PATH"
※ バージョンは適宜変えてください
まずは普通に Xcode でビルド
デモ
Emscripten でビルド
デモ
その他のデモ
http://arturocastro.net/files/of-emscripten/
所感
・基本的な2D/3D描画は大丈夫
・画像や3Dモデルの読み込みも問題なさそう
・Safari、Chrome でのデバイスへのアクセスがだめ
・GL がすべてだめ。OSC もシリアル通信もだめ
・ofRect→ofDrawRectangle、ofCircle→ofDrawCircle
今後に期待!(強調)
http://yoppa.org/works/of_emscripten/Perlin3DTest/
ありがとうございました!

More Related Content

What's hot

Remote Development with Visual Studio Code & A clean dev env, working every ...
Remote Development with Visual Studio Code &  A clean dev env, working every ...Remote Development with Visual Studio Code &  A clean dev env, working every ...
Remote Development with Visual Studio Code & A clean dev env, working every ...Hiroyuki Ohnaka
 
LIGにおけるフロントエンドチーム構築
LIGにおけるフロントエンドチーム構築LIGにおけるフロントエンドチーム構築
LIGにおけるフロントエンドチーム構築Hayashi Yuichi
 
フロントエンドの技術で始めるデスクトップアプリ
フロントエンドの技術で始めるデスクトップアプリフロントエンドの技術で始めるデスクトップアプリ
フロントエンドの技術で始めるデスクトップアプリTomotaka Kusaka
 
業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日Mitsuru Ogawa
 
OWIN - .NETにおけるPSGI -
OWIN - .NETにおけるPSGI -OWIN - .NETにおけるPSGI -
OWIN - .NETにおけるPSGI -将 高野
 
これさえあれば大丈夫!Visual Studio Code 徹底解説
これさえあれば大丈夫!Visual Studio Code 徹底解説これさえあれば大丈夫!Visual Studio Code 徹底解説
これさえあれば大丈夫!Visual Studio Code 徹底解説Saki Homma
 
Write slides and books in VSCode + Markdown
Write slides and books in VSCode + MarkdownWrite slides and books in VSCode + Markdown
Write slides and books in VSCode + Markdownロフト くん
 
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?Fumio SAGAWA
 
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分松田 千尋
 
DroidKaigi - Welcome talk
DroidKaigi - Welcome talkDroidKaigi - Welcome talk
DroidKaigi - Welcome talkMasahiro Hidaka
 
Visual studio 2019 updates pickup!
Visual studio 2019 updates pickup!Visual studio 2019 updates pickup!
Visual studio 2019 updates pickup!一希 大田
 
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おうHayashi Yuichi
 
これからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへこれからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへMitsuru Ogawa
 
VSCodeへコントリビュート / Contribute to VSCode
VSCodeへコントリビュート / Contribute to VSCodeVSCodeへコントリビュート / Contribute to VSCode
VSCodeへコントリビュート / Contribute to VSCodeYusuke Yamada
 
Web制作者がandriodのcddを読んでみた
Web制作者がandriodのcddを読んでみたWeb制作者がandriodのcddを読んでみた
Web制作者がandriodのcddを読んでみたMasakazu Muraoka
 
20150926 uwpストア攻略
20150926 uwpストア攻略20150926 uwpストア攻略
20150926 uwpストア攻略Makoto Nishimura
 
【PlayFab】UnityAdsのリワード広告を統合する方法
【PlayFab】UnityAdsのリワード広告を統合する方法【PlayFab】UnityAdsのリワード広告を統合する方法
【PlayFab】UnityAdsのリワード広告を統合する方法TakuyaNakajo
 
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発Masakazu Muraoka
 
Blazor Server テンプレート解説
Blazor Server テンプレート解説Blazor Server テンプレート解説
Blazor Server テンプレート解説Yuta Matsumura
 
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情我が家のフロントエンド開発事情
我が家のフロントエンド開発事情Naoki Yamada
 

What's hot (20)

Remote Development with Visual Studio Code & A clean dev env, working every ...
Remote Development with Visual Studio Code &  A clean dev env, working every ...Remote Development with Visual Studio Code &  A clean dev env, working every ...
Remote Development with Visual Studio Code & A clean dev env, working every ...
 
LIGにおけるフロントエンドチーム構築
LIGにおけるフロントエンドチーム構築LIGにおけるフロントエンドチーム構築
LIGにおけるフロントエンドチーム構築
 
フロントエンドの技術で始めるデスクトップアプリ
フロントエンドの技術で始めるデスクトップアプリフロントエンドの技術で始めるデスクトップアプリ
フロントエンドの技術で始めるデスクトップアプリ
 
業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日業務系WebアプリケーションがStrutsから旅立つ日
業務系WebアプリケーションがStrutsから旅立つ日
 
OWIN - .NETにおけるPSGI -
OWIN - .NETにおけるPSGI -OWIN - .NETにおけるPSGI -
OWIN - .NETにおけるPSGI -
 
これさえあれば大丈夫!Visual Studio Code 徹底解説
これさえあれば大丈夫!Visual Studio Code 徹底解説これさえあれば大丈夫!Visual Studio Code 徹底解説
これさえあれば大丈夫!Visual Studio Code 徹底解説
 
Write slides and books in VSCode + Markdown
Write slides and books in VSCode + MarkdownWrite slides and books in VSCode + Markdown
Write slides and books in VSCode + Markdown
 
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
業務アプリケーションにおけるモダンWeb開発の現状ーHTML5開発って簡単なの?
 
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
SeleniumIDEとSelenium WebDriver × Node.js Seleniumで業務効率化する15分
 
DroidKaigi - Welcome talk
DroidKaigi - Welcome talkDroidKaigi - Welcome talk
DroidKaigi - Welcome talk
 
Visual studio 2019 updates pickup!
Visual studio 2019 updates pickup!Visual studio 2019 updates pickup!
Visual studio 2019 updates pickup!
 
今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう今すぐブラウザでES6を使おう
今すぐブラウザでES6を使おう
 
これからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへこれからフロントエンジニアを目指すあなたへ
これからフロントエンジニアを目指すあなたへ
 
VSCodeへコントリビュート / Contribute to VSCode
VSCodeへコントリビュート / Contribute to VSCodeVSCodeへコントリビュート / Contribute to VSCode
VSCodeへコントリビュート / Contribute to VSCode
 
Web制作者がandriodのcddを読んでみた
Web制作者がandriodのcddを読んでみたWeb制作者がandriodのcddを読んでみた
Web制作者がandriodのcddを読んでみた
 
20150926 uwpストア攻略
20150926 uwpストア攻略20150926 uwpストア攻略
20150926 uwpストア攻略
 
【PlayFab】UnityAdsのリワード広告を統合する方法
【PlayFab】UnityAdsのリワード広告を統合する方法【PlayFab】UnityAdsのリワード広告を統合する方法
【PlayFab】UnityAdsのリワード広告を統合する方法
 
Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発Yeomanではじめる爆速webアプリ開発
Yeomanではじめる爆速webアプリ開発
 
Blazor Server テンプレート解説
Blazor Server テンプレート解説Blazor Server テンプレート解説
Blazor Server テンプレート解説
 
我が家のフロントエンド開発事情
我が家のフロントエンド開発事情我が家のフロントエンド開発事情
我が家のフロントエンド開発事情
 

Similar to JSオジサン openframeworks emscripten

20140712 knockoutjs-hands-on-in-osaka
20140712 knockoutjs-hands-on-in-osaka20140712 knockoutjs-hands-on-in-osaka
20140712 knockoutjs-hands-on-in-osakaSeiji Noro
 
Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例
Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例
Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例Joni
 
【18-C-5】C# で iOS/Androidアプリ開発 - Visual Studio 2015 + Xamarin + MVVMCross -
【18-C-5】C# で iOS/Androidアプリ開発 - Visual Studio 2015 + Xamarin + MVVMCross -【18-C-5】C# で iOS/Androidアプリ開発 - Visual Studio 2015 + Xamarin + MVVMCross -
【18-C-5】C# で iOS/Androidアプリ開発 - Visual Studio 2015 + Xamarin + MVVMCross -ShinichiAoyagi
 
React.jsを勉強しよう
React.jsを勉強しようReact.jsを勉強しよう
React.jsを勉強しようHikaru Sato
 
Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)Tokuhiro Matsuno
 
20140517 knockoutjs hands-on
20140517 knockoutjs hands-on20140517 knockoutjs hands-on
20140517 knockoutjs hands-onSeiji Noro
 
2016/12/17 ASP.NET フロントエンドタスク入門
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門miso- soup3
 
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考えるNetラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考えるdavid9142
 
Getting started with node.js
Getting started with node.jsGetting started with node.js
Getting started with node.jskouzouman
 
Hokuriku.net 2013 01-26 node.js
Hokuriku.net 2013 01-26 node.jsHokuriku.net 2013 01-26 node.js
Hokuriku.net 2013 01-26 node.jsTadahiro Ishisaka
 
Node.js基礎の基礎 - Miyazaki.js vol.2
Node.js基礎の基礎 - Miyazaki.js vol.2Node.js基礎の基礎 - Miyazaki.js vol.2
Node.js基礎の基礎 - Miyazaki.js vol.2Nobuhiro Nakashima
 
JavaScript.Next Returns
JavaScript.Next ReturnsJavaScript.Next Returns
JavaScript.Next Returnsdynamis
 
Node.jsで始める Modern JavaScript Framework
Node.jsで始める Modern JavaScript FrameworkNode.jsで始める Modern JavaScript Framework
Node.jsで始める Modern JavaScript Frameworkkamiyam .
 
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejsTakayoshi Tanaka
 
.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組みKouji Matsui
 
Node.js で Web アプリ開発
Node.js で Web アプリ開発Node.js で Web アプリ開発
Node.js で Web アプリ開発Tatsumi Naganuma
 
めんどうな viewport や 端末判別の ために sagen.js
めんどうな viewport や 端末判別の ために sagen.jsめんどうな viewport や 端末判別の ために sagen.js
めんどうな viewport や 端末判別の ために sagen.jsHiroaki Okubo
 
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイルJavaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイルMaaya Ishida
 
Using SockJS(Websocket) with Sencha Ext JS
Using SockJS(Websocket) with Sencha Ext JSUsing SockJS(Websocket) with Sencha Ext JS
Using SockJS(Websocket) with Sencha Ext JSKazuhiro Kotsutsumi
 

Similar to JSオジサン openframeworks emscripten (20)

20140712 knockoutjs-hands-on-in-osaka
20140712 knockoutjs-hands-on-in-osaka20140712 knockoutjs-hands-on-in-osaka
20140712 knockoutjs-hands-on-in-osaka
 
Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例
Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例
Fukuoka.NET Conf 2018: 挑み続ける!Dockerコンテナによる ASP.NET Core アプリケーション開発事例
 
【18-C-5】C# で iOS/Androidアプリ開発 - Visual Studio 2015 + Xamarin + MVVMCross -
【18-C-5】C# で iOS/Androidアプリ開発 - Visual Studio 2015 + Xamarin + MVVMCross -【18-C-5】C# で iOS/Androidアプリ開発 - Visual Studio 2015 + Xamarin + MVVMCross -
【18-C-5】C# で iOS/Androidアプリ開発 - Visual Studio 2015 + Xamarin + MVVMCross -
 
React.jsを勉強しよう
React.jsを勉強しようReact.jsを勉強しよう
React.jsを勉強しよう
 
Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)Javaで1から10まで書いた話(sanitized)
Javaで1から10まで書いた話(sanitized)
 
20140517 knockoutjs hands-on
20140517 knockoutjs hands-on20140517 knockoutjs hands-on
20140517 knockoutjs hands-on
 
2016/12/17 ASP.NET フロントエンドタスク入門
 2016/12/17 ASP.NET フロントエンドタスク入門 2016/12/17 ASP.NET フロントエンドタスク入門
2016/12/17 ASP.NET フロントエンドタスク入門
 
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考えるNetラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
 
Getting started with node.js
Getting started with node.jsGetting started with node.js
Getting started with node.js
 
Walking front end
Walking front endWalking front end
Walking front end
 
Hokuriku.net 2013 01-26 node.js
Hokuriku.net 2013 01-26 node.jsHokuriku.net 2013 01-26 node.js
Hokuriku.net 2013 01-26 node.js
 
Node.js基礎の基礎 - Miyazaki.js vol.2
Node.js基礎の基礎 - Miyazaki.js vol.2Node.js基礎の基礎 - Miyazaki.js vol.2
Node.js基礎の基礎 - Miyazaki.js vol.2
 
JavaScript.Next Returns
JavaScript.Next ReturnsJavaScript.Next Returns
JavaScript.Next Returns
 
Node.jsで始める Modern JavaScript Framework
Node.jsで始める Modern JavaScript FrameworkNode.jsで始める Modern JavaScript Framework
Node.jsで始める Modern JavaScript Framework
 
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
 
.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み
 
Node.js で Web アプリ開発
Node.js で Web アプリ開発Node.js で Web アプリ開発
Node.js で Web アプリ開発
 
めんどうな viewport や 端末判別の ために sagen.js
めんどうな viewport や 端末判別の ために sagen.jsめんどうな viewport や 端末判別の ために sagen.js
めんどうな viewport や 端末判別の ために sagen.js
 
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイルJavaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
 
Using SockJS(Websocket) with Sencha Ext JS
Using SockJS(Websocket) with Sencha Ext JSUsing SockJS(Websocket) with Sencha Ext JS
Using SockJS(Websocket) with Sencha Ext JS
 

More from minoru nakanou

MAX-JSオジサン#5
MAX-JSオジサン#5MAX-JSオジサン#5
MAX-JSオジサン#5minoru nakanou
 
IoTでいうところのIよりの知識でTする
IoTでいうところのIよりの知識でTするIoTでいうところのIよりの知識でTする
IoTでいうところのIよりの知識でTするminoru nakanou
 
面白法人カヤックのウェブフロントエンド術
面白法人カヤックのウェブフロントエンド術面白法人カヤックのウェブフロントエンド術
面白法人カヤックのウェブフロントエンド術minoru nakanou
 
Web Speech API でおっさんの声を美少女化してみた
Web Speech API でおっさんの声を美少女化してみたWeb Speech API でおっさんの声を美少女化してみた
Web Speech API でおっさんの声を美少女化してみたminoru nakanou
 
Unity パーティクルシステム超入門
Unity パーティクルシステム超入門Unity パーティクルシステム超入門
Unity パーティクルシステム超入門minoru nakanou
 
レスポンシブおっぱいでまなぶスケーラブルグラフィックス
レスポンシブおっぱいでまなぶスケーラブルグラフィックスレスポンシブおっぱいでまなぶスケーラブルグラフィックス
レスポンシブおっぱいでまなぶスケーラブルグラフィックスminoru nakanou
 
ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料
ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料
ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料minoru nakanou
 
Grunt task Unite-Coffee
Grunt task Unite-CoffeeGrunt task Unite-Coffee
Grunt task Unite-Coffeeminoru nakanou
 

More from minoru nakanou (8)

MAX-JSオジサン#5
MAX-JSオジサン#5MAX-JSオジサン#5
MAX-JSオジサン#5
 
IoTでいうところのIよりの知識でTする
IoTでいうところのIよりの知識でTするIoTでいうところのIよりの知識でTする
IoTでいうところのIよりの知識でTする
 
面白法人カヤックのウェブフロントエンド術
面白法人カヤックのウェブフロントエンド術面白法人カヤックのウェブフロントエンド術
面白法人カヤックのウェブフロントエンド術
 
Web Speech API でおっさんの声を美少女化してみた
Web Speech API でおっさんの声を美少女化してみたWeb Speech API でおっさんの声を美少女化してみた
Web Speech API でおっさんの声を美少女化してみた
 
Unity パーティクルシステム超入門
Unity パーティクルシステム超入門Unity パーティクルシステム超入門
Unity パーティクルシステム超入門
 
レスポンシブおっぱいでまなぶスケーラブルグラフィックス
レスポンシブおっぱいでまなぶスケーラブルグラフィックスレスポンシブおっぱいでまなぶスケーラブルグラフィックス
レスポンシブおっぱいでまなぶスケーラブルグラフィックス
 
ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料
ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料
ぱんちら.js -JavaScriptでテクスチャマッピング- HTML5飯発表資料
 
Grunt task Unite-Coffee
Grunt task Unite-CoffeeGrunt task Unite-Coffee
Grunt task Unite-Coffee
 

JSオジサン openframeworks emscripten