![var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection', function(ws) {
clients.push(ws);
ws.on('message', function(message) {
console.log(message);
clients.forEach(function(c) {
c.send(message);
});
});
ws.on('close', function() {
clients = clients.filter(function(c) {
return c !== ws;
});
});
});
Server解説用に書いた問題のあるコードです。
このままでも動きますが使わないで下さい。](https://image.slidesharecdn.com/fundamentalsandapplicationsofhtml5thirdedition-140630012915-phpapp01/85/HTML5-Open-Web-Platform-WebSocket-WebRTC-Web-Audio-API-WebGL-218-320.jpg)
![var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection', function(ws) {
clients.push(ws);
ws.on('message', function(message) {
console.log(message);
clients.forEach(function(c) {
c.send(message);
});
});
ws.on('close', function() {
clients = clients.filter(function(c) {
return c !== ws;
});
});
});
Server解説用に書いた問題のあるコードです。
このままでも動きますが使わないで下さい。
WebSocket Serverクラス取得](https://image.slidesharecdn.com/fundamentalsandapplicationsofhtml5thirdedition-140630012915-phpapp01/85/HTML5-Open-Web-Platform-WebSocket-WebRTC-Web-Audio-API-WebGL-219-320.jpg)
![var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection', function(ws) {
clients.push(ws);
ws.on('message', function(message) {
console.log(message);
clients.forEach(function(c) {
c.send(message);
});
});
ws.on('close', function() {
clients = clients.filter(function(c) {
return c !== ws;
});
});
});
Server解説用に書いた問題のあるコードです。
このままでも動きますが使わないで下さい。
WebSocket Serverクラスの
インスタンス化
(ポート番号8080)](https://image.slidesharecdn.com/fundamentalsandapplicationsofhtml5thirdedition-140630012915-phpapp01/85/HTML5-Open-Web-Platform-WebSocket-WebRTC-Web-Audio-API-WebGL-220-320.jpg)
![var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection', function(ws) {
clients.push(ws);
ws.on('message', function(message) {
console.log(message);
clients.forEach(function(c) {
c.send(message);
});
});
ws.on('close', function() {
clients = clients.filter(function(c) {
return c !== ws;
});
});
});
Server解説用に書いた問題のあるコードです。
このままでも動きますが使わないで下さい。
コネクションの格納領域作成](https://image.slidesharecdn.com/fundamentalsandapplicationsofhtml5thirdedition-140630012915-phpapp01/85/HTML5-Open-Web-Platform-WebSocket-WebRTC-Web-Audio-API-WebGL-221-320.jpg)
![var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection', function(ws) {
clients.push(ws);
ws.on('message', function(message) {
console.log(message);
clients.forEach(function(c) {
c.send(message);
});
});
ws.on('close', function() {
clients = clients.filter(function(c) {
return c !== ws;
});
});
});
Server解説用に書いた問題のあるコードです。
このままでも動きますが使わないで下さい。
接続時の動作を指定](https://image.slidesharecdn.com/fundamentalsandapplicationsofhtml5thirdedition-140630012915-phpapp01/85/HTML5-Open-Web-Platform-WebSocket-WebRTC-Web-Audio-API-WebGL-222-320.jpg)
![var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection', function(ws) {
clients.push(ws);
ws.on('message', function(message) {
console.log(message);
clients.forEach(function(c) {
c.send(message);
});
});
ws.on('close', function() {
clients = clients.filter(function(c) {
return c !== ws;
});
});
});
Server解説用に書いた問題のあるコードです。
このままでも動きますが使わないで下さい。
接続時に
コネクションを格納](https://image.slidesharecdn.com/fundamentalsandapplicationsofhtml5thirdedition-140630012915-phpapp01/85/HTML5-Open-Web-Platform-WebSocket-WebRTC-Web-Audio-API-WebGL-223-320.jpg)
![var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection', function(ws) {
clients.push(ws);
ws.on('message', function(message) {
console.log(message);
clients.forEach(function(c) {
c.send(message);
});
});
ws.on('close', function() {
clients = clients.filter(function(c) {
return c !== ws;
});
});
});
Server解説用に書いた問題のあるコードです。
このままでも動きますが使わないで下さい。
メッセージ受信時の動作を指定](https://image.slidesharecdn.com/fundamentalsandapplicationsofhtml5thirdedition-140630012915-phpapp01/85/HTML5-Open-Web-Platform-WebSocket-WebRTC-Web-Audio-API-WebGL-224-320.jpg)
![var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection', function(ws) {
clients.push(ws);
ws.on('message', function(message) {
console.log(message);
clients.forEach(function(c) {
c.send(message);
});
});
ws.on('close', function() {
clients = clients.filter(function(c) {
return c !== ws;
});
});
});
Server解説用に書いた問題のあるコードです。
このままでも動きますが使わないで下さい。
メッセージ受信時に
受け取ったメッセージの表示と
格納しているコネクションに送信](https://image.slidesharecdn.com/fundamentalsandapplicationsofhtml5thirdedition-140630012915-phpapp01/85/HTML5-Open-Web-Platform-WebSocket-WebRTC-Web-Audio-API-WebGL-225-320.jpg)
![var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection', function(ws) {
clients.push(ws);
ws.on('message', function(message) {
console.log(message);
clients.forEach(function(c) {
c.send(message);
});
});
ws.on('close', function() {
clients = clients.filter(function(c) {
return c !== ws;
});
});
});
Server解説用に書いた問題のあるコードです。
このままでも動きますが使わないで下さい。
切断時の動作を指定](https://image.slidesharecdn.com/fundamentalsandapplicationsofhtml5thirdedition-140630012915-phpapp01/85/HTML5-Open-Web-Platform-WebSocket-WebRTC-Web-Audio-API-WebGL-226-320.jpg)
![var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection', function(ws) {
clients.push(ws);
ws.on('message', function(message) {
console.log(message);
clients.forEach(function(c) {
c.send(message);
});
});
ws.on('close', function() {
clients = clients.filter(function(c) {
return c !== ws;
});
});
});
Server解説用に書いた問題のあるコードです。
このままでも動きますが使わないで下さい。
切断時に
コネクションを削除](https://image.slidesharecdn.com/fundamentalsandapplicationsofhtml5thirdedition-140630012915-phpapp01/85/HTML5-Open-Web-Platform-WebSocket-WebRTC-Web-Audio-API-WebGL-227-320.jpg)
![var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection', function(ws) {
clients.push(ws);
ws.on('message', function(message) {
console.log(message);
clients.forEach(function(c) {
c.send(message);
});
});
ws.on('close', function() {
clients = clients.filter(function(c) {
return c !== ws;
});
});
});
Server解説用に書いた問題のあるコードです。
このままでも動きますが使わないで下さい。](https://image.slidesharecdn.com/fundamentalsandapplicationsofhtml5thirdedition-140630012915-phpapp01/85/HTML5-Open-Web-Platform-WebSocket-WebRTC-Web-Audio-API-WebGL-228-320.jpg)
![WebGL (Three.js) Code Lab - Intro. [ GTUG Girls 10th]](https://cdn.slidesharecdn.com/ss_thumbnails/webglgtug10th-130122052159-phpapp01-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (17)
Viewers also liked (20)
Similar to HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版 (20)
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
- 1. HTML5の基礎と応用 Open Web Platform WebSocket / WebRTC / Web Audio API / WebGL 2014/06/27 金城 雄 NTTアドバンステクノロジ 情報機器テクノロジセンタ所属 http://www.ntt-at.co.jp/ 第三版
- 3. 内容 HTML5の概要 休憩 HTML5のAPI 2つ (デモ込み) 時間があれば休憩 HTML5のAPI 2つ (デモ込み) HTML5のAPIの組み合わせ (デモ込み)
- 10. HTML5前史
- 17. ハンス・ロスリングと 魔法の洗濯機 http://www.ted.com/talks/hans_rosling_and_the_magic_washing_machine Hans Rosling: The magic washing machine
- 21. イノベーションの 別の側面
- 22. 20世紀後半
- 33. 流通革命
- 36. 坑夫
- 38. 電話交換手
- 41. 繰り返される歴史
- 42. 近年では?
- 48. ITが破壊したもの
- 49. 例えば 写真フィルム
- 51. イノベーション デジタルカメラ
- 54. 携帯電話
- 56. 破壊的イノベーション
- 58. 世界で最初の デジタルカメラ
- 70. 業界が成立するには
- 73. 資格 法律 比較的特殊な事例
- 76. 技術が、 制限を取り除くのではなく、 特定の業界を守る目的で 制限を作るために用いられた 比較的珍しい事例。 著作権保護技術(DRM) セキュリティ技術は用途が違うため、珍しい事例には含みません。
- 83. 水平統合 と 垂直統合
- 94. まずない。 A < B + C である限り どこかが キャスティングボードを 握る。 2は?
- 97. 業界を破壊する革新が存在する。 革新は最初は低機能に見える。 革新は業界の発展に寄与。 業界に必要な制限を解決することも。 革新が起こった業界ではなく 他業界を破壊する事も。 ここまでのまとめ1
- 100. ところで グローバル化って?
- 104. World? 開発援助委員会(DAC : Development Assistance Committee) http://en.wikipedia.org/wiki/Development_Assistance_Committee http://ja.wikipedia.org/wiki/%E9%96%8B%E7%99%BA%E6%8F%B4%E5%8A %A9%E5%A7%94%E5%93%A1%E4%BC%9A http://en.wikipedia.org/wiki/File:DAC_members.svg より改変して引用
- 105. World! 開発援助委員会(DAC : Development Assistance Committee) http://en.wikipedia.org/wiki/Development_Assistance_Committee http://ja.wikipedia.org/wiki/%E9%96%8B%E7%99%BA%E6%8F%B4%E5%8A %A9%E5%A7%94%E5%93%A1%E4%BC%9A http://en.wikipedia.org/wiki/File:DAC_members.svg より改変して引用
- 106. こう語る人が多い... 開発援助委員会(DAC : Development Assistance Committee) http://en.wikipedia.org/wiki/Development_Assistance_Committee http://ja.wikipedia.org/wiki/%E9%96%8B%E7%99%BA%E6%8F%B4%E5%8A %A9%E5%A7%94%E5%93%A1%E4%BC%9A http://en.wikipedia.org/wiki/File:DAC_members.svg より改変して引用
- 113. The Next 4 Billion 次の40億人 BOP : Base of the Pyramid
- 114. 一人当たり年間所得が 2002年購買力平価で 3,000ドル以下の階層であり、 全世界人口の約7割である 約40億人が属するとされる。 BOP層 Bottom of the Pyramid Base of the Pyramid Base of the Economic Pyramid 経済産業省 BOPビジネス支援センター ポータルサイトより http://www.bop.go.jp/bop
- 115. コモディディ化
- 116. 家電の コモディディ化
- 120. 現在の値段と収入 http://www.stat.go.jp/data/kakei/longtime/ 値段は https://www.amazon.co.jp/ の各カテゴリの最人気商品(2014/04/15現在) ※ 最安商品ではない 電機洗濯機 ハイアール製 JW-K42H(W) 販売価格 18,880円 液晶テレビ シャープ製 LC-19K90-B 販売価格 23,168円 電気冷蔵庫 ハイアール製 JR-N106H(K) 販売価格 20,152円 炊飯器 パナソニック製 SR-ML051-W 販売価格 5,671円 世帯収入(月) 平成25年(2013年) 523,736円
- 121. ICTの コモディディ化
- 122. 携帯電話人口 ??? 億人 インターネット人口 ??? 億人 ブロードバンド人口 ??? 億人 世界のICT市場 http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 総務省 情報通信白書 平成24年版 より 元のデータはITUの統計データ World Telecommunication/ICT Indicators Database 2011(15th Edition)
- 123. 携帯電話人口 53.6 億人 インターネット人口 ??? 億人 ブロードバンド人口 ??? 億人 世界のICT市場 http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 総務省 情報通信白書 平成24年版 より 元のデータはITUの統計データ World Telecommunication/ICT Indicators Database 2011(15th Edition)
- 124. 携帯電話人口 53.6 億人 インターネット人口 20.3 億人 ブロードバンド人口 ??? 億人 世界のICT市場 http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 総務省 情報通信白書 平成24年版 より 元のデータはITUの統計データ World Telecommunication/ICT Indicators Database 2011(15th Edition)
- 125. 携帯電話人口 53.6 億人 インターネット人口 20.3 億人 ブロードバンド人口 5.2 億人 世界のICT市場 http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 総務省 情報通信白書 平成24年版 より 元のデータはITUの統計データ World Telecommunication/ICT Indicators Database 2011(15th Edition)
- 126. 携帯電話人口 7.2 億人 ⇒ 53.6 億人 インターネット人口 3.9 億人 ⇒ 20.3 億人 ブロードバンド人口 0.2 億人 ⇒ 5.2 億人 2000年 ⇒ 2010年 http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 総務省 情報通信白書 平成24年版 より 元のデータはITUの統計データ World Telecommunication/ICT Indicators Database 2011(15th Edition)
- 133. スマートフォンの コモディディ化
- 135. Android HuaweiのIDEOSを ケニアのSafaricomが 80ドルで発売 (2011年) Firefox OS 新興国市場向けの端末を発表 (2014年) 25ドルのスマートフォン向けの チップセットを発表 (2014年)
- 136. 洗濯機 79% (23,000円) テレビ 199% (58,000円) 冷蔵庫 214% (62,500円) 炊飯器 15% (4500円) 収入に対する比率 日本 (1955年) 世帯あたりの所得 29,169円/月 製品の性質は 一世帯に一台
- 137. Android 32% (80ドル) Firefox OS 10% (25ドル) 収入に対する比率 BOP層 (3000ドル以下/年) 一人あたりの所得 250ドル以下/月 製品の性質は ひとりに一台
- 138. Android 32% (80ドル) Firefox OS 10% (25ドル) 洗濯機 79% (23,000円) テレビ 199% (58,000円) 冷蔵庫 214% (62,500円) 炊飯器 15% (4500円) 収入に対する比率 要考慮項目 通信費 所有台数/世帯
- 139. インターネットへの アクセス手段
- 147. http://www.wri.org/sites/default/files/pdf/ n4b-j.pdf THE NEXT 4 BILLION 次なる40億人 ピラミッドの 底辺（BOP）の 市場規模と ビジネス戦略 THENEXT4BILLION―次なる40億人|ピラミッドの底辺（BOP）の市場規模とビジネス戦略 W R I ピラミッドの底辺（BOP）の市場規模と ビジネス戦略 THE NEXT 4 BILLION 次なる40億人
- 151. 狭義のHTML5 と 広義のHTML5
- 152. HTML5 = HTML5 + CSS + JS
- 153. HTML5 = HTML5 + CSS + JS 広義 狭義
- 154. HTML5 = HTML5 + CSS + JS 広義 狭義 マークアップ言語の仕様 従来のHTMLの改訂 新しいAPIも含まれる バズワード(マーケティング用語)
- 155. Semantic Elements Multi Media Canvas HTML5 Forms Offline Support Webm H.264 Micro- Data WebGL Web SQL Indexed DB SVG Server- Sent ev. Web Sockets Web Sockets Geo- location FileAPI Web Storage XHR2 Math ML Web Audio Layout Media Queries HTML5 CSS3~Trans form Anim ation Regions Flex Box HTML5 Parser Mouse, Key ev. Opus ECMA Script ECMA 6th USB CSP SPDY WebCL Web RTC Net Info MP3 Device Storage TCP Socket NFC File Sys Notifi- cation XHTML5 Orien- tation Web Workers Web Messag- ing DOM4 SMIL Vibra- tion Proxi- mity XPath RSS RDF OGP Schema .org WAI- ARIA W3C WHATWG other Khronos ECMA IETF WOFF Battery Status Radio Tel HTML DNT http://www.slideshare.net/dynamis/toward-firefox-os/26 より引用
- 157. HTML5 = HTML5 + CSS + JS 本日のコンテキスト これ
- 158. HTML5 = HTML5 + CSS + JS 本日のコンテキスト これ 最近では バズワードを避けて 一部の人は OpenWebPlatform と呼んでいる。
- 160. できることは これまでと 変わらない
- 162. browse / braʊz / 1 【本雑誌などを】拾い読みする; 立ち読みする. 2 インターネット (ブラウザを使って)閲覧する. 3 (店で)商品を眺めて見て回る. 4 〈家畜が〉【草葉などを】食べる. ウィズダム英和辞典 OS X Mavericks(v10.9)同梱版 より改変して引用
- 170. よくある会話
- 174. 機能一覧だけ 見ていると 本質を見失う。
- 176. 機能一覧には 現れない HTML5の特徴
- 177. HTML5 OSの機能がブラウザ上で使える 低レイヤーのAPIがWeb APIで共通化 特許に制限されない 誰もが利用可能 Webプラットフォーム上で統合 Mobile OSのAppが作成可能
- 178. OSの機能がブラウザ上で OSの機能が、ブラウザを介してサイト に提供される アドレス帳 ネットワーク情報 バッテリー状態 通知 ストリーム メディアデータ オーディオ ビデオ 字幕 Webカメラ マイク Audioの波形操作 2D(ラスター,ベクター) 3DCG 音声入力 音声合成 暗号化 ファイルシステム データベース スレッド 通信(WebSocket,TCP,UDP) Bluetooth 加速度センサ 傾きセンサ ジャイロ バイブレーション GPS 電子コンパス 温度センサ 湿度センサ 気圧センサ 環境光センサ 近接センサ 磁気センサ etc. ネット接続が前提のもの・仕様策定中のもの・WebOS向けのものも含まれています。
- 183. Mobile OSとの関係 iOS Android Native Appが基本 UIWebView/WebViewを使ってできなくはない HTML5で記述し、両OSを含む複数のOS向けのApp に加工するApache Cordovaというツールがある その他にも似たようなツール多数
- 184. 2大勢力を追う第3勢力 Firefox OS Windows Phone Ubuntu Touch TIZEN Mobile BlackBerry
- 185. 第3勢力のApp作成手段 HTML5でNative Appを作成HTML5でNative Appを作成 Native Appあり HTML5でも可能 Native Appあり HTML5でも可能 Native Appあり HTML5でも可能 Native Appあり HTML5でも可能
- 188. 多大。 これまでの常識、「コンパイルが前提で 実行ファイルを売買」が通用しない。 これまでも、スクリプト言語もあったが サーバサイド。 今後、コードのオープンが前提になる。 IT業界への影響は?
- 192. コードが見られるため、 サービスのクローンが容易。 速く市場にリリースし、市場を握る事が これまで以上に重要に。 技術力よりもアイディア勝負。 (もちろん技術力も大事だが...) 開発スタイル
- 198. 休憩
- 200. WebSocket
- 201. WebSocket 高速・双方向通信 2つの仕様 WebSocket Protocol WebSocket API Cometよりも低負荷 <- 今回は詳細にはふれません
- 202. DEMO
- 204. 何故双方向通信が可能か HTTPでWebSocketのハンドシェイクを行なう Client Server request response GET / HTTP/1.1 Upgrade: websocket Connection: Upgrade (略) HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade (略) handshake 厳密にはHTTPと完全互換ではありません。
- 207. 何故双方向通信が可能か HTTPを模しているため 通過しやすいが100%ではない HTTP (port 80) 67% HTTP (port 61985) 86% HTTPS (port 443) 95% http://www.ietf.org/mail-archive/web/tls/current/msg05593.html
- 208. 何故高速通信が可能か あるHTTP requestのHeader GET / HTTP/1.1 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/ *;q=0.8 Accept-Encoding: gzip,deflate,sdch Accept-Language: ja,en-US;q=0.8,en;q=0.6 Cache-Control: max-age=0 Connection: keep-alive Host: localhost If-Modified-Since: Tue, 08 Oct 2013 17:46:38 GMT If-None-Match: "3e031b2-13a1-4e83e59bcbb80" User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36 400 Bytes over!
- 209. 何故高速通信が可能か WebSocketのHeader FIN 1 bit RSV1 1 bit RSV2 1 bit RSV3 1 bit Opcode 4 bits Mask 1 bit Payload length 7 bits, 7+16 bits, or 7+64 bits Masking-key 0 bytes or 4 bytes 2 14 Bytes
- 210. 何故高速通信が可能か 送信データが「Hello, world」の場合 HTTP 12 bytes + 400 bytes → 412 Bytes 97.1%がHeader WebSocket (Client => Server) 12 bytes + 6 bytes → 18 Bytes 33.3%がHeader
- 211. 何故高速通信が可能か 送信データが「Hello, world」の場合 HTTP 12 bytes + 400 bytes → 412 Bytes 97.1%がHeader WebSocket (Client => Server) 12 bytes + 6 bytes → 18 Bytes 33.3%がHeader 送信データが「Hello, world」の場合 HTTP 12 bytes + 400 bytes → 412 Bytes 97.1%がHeader WebSocket (Client => Server) 12 bytes + 6 bytes → 18 Bytes 33.3%がHeader 同じ文字列を 送信するために 約23倍の データ量
- 214. SAMPLE
- 215. WebSocket Server node.js サーバサイドJavaScript ws WebSocketライブラリ 以下はインストール済みとする nvm nodeのバージョン切り替えツール npm nodeのパッケージ管理ツール WebSocket Chat 作成
- 216. % mkdir chat ←ディレクトリ作成 % cd chat ←ディレクトリ移動 % nvm use v0.10.21 ←バージョン指定 % npm install ws ←wsインストール node.jsとwsの セットアップ
- 217. サーバ側
- 218. var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
- 219. var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 WebSocket Serverクラス取得
- 220. var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 WebSocket Serverクラスの インスタンス化 (ポート番号8080)
- 221. var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 コネクションの格納領域作成
- 222. var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 接続時の動作を指定
- 223. var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 接続時に コネクションを格納
- 224. var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 メッセージ受信時の動作を指定
- 225. var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 メッセージ受信時に 受け取ったメッセージの表示と 格納しているコネクションに送信
- 226. var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 切断時の動作を指定
- 227. var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 切断時に コネクションを削除
- 228. var WebSocketServer = require('ws').Server , wss = new WebSocketServer({port: 8080}); var clients = []; wss.on('connection', function(ws) { clients.push(ws); ws.on('message', function(message) { console.log(message); clients.forEach(function(c) { c.send(message); }); }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); Server解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
- 229. クライアント側
- 230. <!DOCTYPE html> <input id="msg" /> <input type="button" value="send" id="send" /> <div id="disp"></div> <script> var ws = new WebSocket('ws://localhost:8080'); ws.addEventListener('message', function(e) { var disp = document.getElementById('disp'); var text = document.createTextNode(e.data); disp.appendChild(text); }, false); document.getElementById('send') .addEventListener('click', function(e) { var msg = document.getElementById('msg'); ws.send(msg.value); msg.value = ''; }, false); </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 Client
- 231. <!DOCTYPE html> <input id="msg" /> <input type="button" value="send" id="send" /> <div id="disp"></div> <script> var ws = new WebSocket('ws://localhost:8080'); ws.addEventListener('message', function(e) { var disp = document.getElementById('disp'); var text = document.createTextNode(e.data); disp.appendChild(text); }, false); document.getElementById('send') .addEventListener('click', function(e) { var msg = document.getElementById('msg'); ws.send(msg.value); msg.value = ''; }, false); </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 Client テキストボックス・ボタン・ メッセージエリアの表示と Script要素
- 232. <!DOCTYPE html> <input id="msg" /> <input type="button" value="send" id="send" /> <div id="disp"></div> <script> var ws = new WebSocket('ws://localhost:8080'); ws.addEventListener('message', function(e) { var disp = document.getElementById('disp'); var text = document.createTextNode(e.data); disp.appendChild(text); }, false); document.getElementById('send') .addEventListener('click', function(e) { var msg = document.getElementById('msg'); ws.send(msg.value); msg.value = ''; }, false); </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 Client WebSocketで接続
- 233. <!DOCTYPE html> <input id="msg" /> <input type="button" value="send" id="send" /> <div id="disp"></div> <script> var ws = new WebSocket('ws://localhost:8080'); ws.addEventListener('message', function(e) { var disp = document.getElementById('disp'); var text = document.createTextNode(e.data); disp.appendChild(text); }, false); document.getElementById('send') .addEventListener('click', function(e) { var msg = document.getElementById('msg'); ws.send(msg.value); msg.value = ''; }, false); </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 Client メッセージ受信時の動作を指定
- 234. <!DOCTYPE html> <input id="msg" /> <input type="button" value="send" id="send" /> <div id="disp"></div> <script> var ws = new WebSocket('ws://localhost:8080'); ws.addEventListener('message', function(e) { var disp = document.getElementById('disp'); var text = document.createTextNode(e.data); disp.appendChild(text); }, false); document.getElementById('send') .addEventListener('click', function(e) { var msg = document.getElementById('msg'); ws.send(msg.value); msg.value = ''; }, false); </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 Client メッセージ受信時に 受け取ったメッセージを表示
- 235. <!DOCTYPE html> <input id="msg" /> <input type="button" value="send" id="send" /> <div id="disp"></div> <script> var ws = new WebSocket('ws://localhost:8080'); ws.addEventListener('message', function(e) { var disp = document.getElementById('disp'); var text = document.createTextNode(e.data); disp.appendChild(text); }, false); document.getElementById('send') .addEventListener('click', function(e) { var msg = document.getElementById('msg'); ws.send(msg.value); msg.value = ''; }, false); </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 Client ボタンクリック時の動作を指定
- 236. <!DOCTYPE html> <input id="msg" /> <input type="button" value="send" id="send" /> <div id="disp"></div> <script> var ws = new WebSocket('ws://localhost:8080'); ws.addEventListener('message', function(e) { var disp = document.getElementById('disp'); var text = document.createTextNode(e.data); disp.appendChild(text); }, false); document.getElementById('send') .addEventListener('click', function(e) { var msg = document.getElementById('msg'); ws.send(msg.value); msg.value = ''; }, false); </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 Client ボタンクリック時に メッセージを送信して入力欄を空に
- 237. <!DOCTYPE html> <input id="msg" /> <input type="button" value="send" id="send" /> <div id="disp"></div> <script> var ws = new WebSocket('ws://localhost:8080'); ws.addEventListener('message', function(e) { var disp = document.getElementById('disp'); var text = document.createTextNode(e.data); disp.appendChild(text); }, false); document.getElementById('send') .addEventListener('click', function(e) { var msg = document.getElementById('msg'); ws.send(msg.value); msg.value = ''; }, false); </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 Client
- 239. WebRTC
- 243. Over The Top 手段の例 市場 ユーザ メリット 事業者 メリット 利用方法 Skype, WebEx (YouTube, Ustream) キャリアに縛られない独自の仕組みを 提供する少数のベンダーが参加可能 世界中の人と無料/安価で会話できる 限定的なAPI提供 一部連携可能 ユーザが組み合わせて利用 http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用
- 245. キャリア型通信 Over The Top Webブラウザ型 手段の例 市場 ユーザ メリット 事業者 メリット 利用方法 固定電話 携帯電話 (TV放送) Skype, WebEx (Youtube, Ustream) WebRTC インフラを持つ キャリアが支配 キャリアに縛られない 独自の仕組みを提供 する少数のベンダー が参加可能 特別な仕組みは不要 誰でも参加可能 世界中の人と 会話できる 世界中の人と無料/ 安価で会話できる 専用アプリ無しで 会話できる × 限定的なAPI提供 一部連携可能 完全にプログラマブル 部品として利用可能 単独で利用 ユーザが組み合わせて 利用 製品/サービスに 組み込んで利用 http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用
- 246. WebRTC 2つの仕様 Media Capture and Streams (getUserMedia) WebRTC 1.0: Real-time Communication Between Browsers
- 247. Media Capture and Streams (getUserMedia) ブラウザからマイクやカメラにアクセス 利用範囲はWebRTC以外とも 音声処理(with Web Audio API) ボイスチェンジャー etc. 画像処理(with Canvas) 顔検出 etc. 顔認識ができるようになるのも時間の問題か?
- 248. DEMO
- 249. SAMPLE
- 250. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document.getElementById('video'); video.src = window.URL.createObjectURL(stream); video.play(); }, function(error) { console.log(error); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 251. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document.getElementById('video'); video.src = window.URL.createObjectURL(stream); video.play(); }, function(error) { console.log(error); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ビデオ要素の表示と Script要素
- 252. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document.getElementById('video'); video.src = window.URL.createObjectURL(stream); video.play(); }, function(error) { console.log(error); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ユーザメディアの取得開始
- 253. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document.getElementById('video'); video.src = window.URL.createObjectURL(stream); video.play(); }, function(error) { console.log(error); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 取得するユーザメディアは カメラとマイク
- 254. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document.getElementById('video'); video.src = window.URL.createObjectURL(stream); video.play(); }, function(error) { console.log(error); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ユーザメディア取得時の動作を指定
- 255. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document.getElementById('video'); video.src = window.URL.createObjectURL(stream); video.play(); }, function(error) { console.log(error); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ビデオ要素の取得 ユーザメディアの指定 再生開始
- 256. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document.getElementById('video'); video.src = window.URL.createObjectURL(stream); video.play(); }, function(error) { console.log(error); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ユーザメディア取得エラーの動作を指定
- 257. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document.getElementById('video'); video.src = window.URL.createObjectURL(stream); video.play(); }, function(error) { console.log(error); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 258. WebRTC 1.0: Real-time Communication Between Browsers ブラウザとブラウザを接続 シグナリングの仕組みは別途必要 SIP XMPP WebSocket <- 今のところ一番使われている etc.
- 259. DEMO
- 260. WebRTC 1.0: Real-time Communication Between Browsers NAT通過・ ネゴシエーション ICE(STUN + TURN + α) STUN P2P・UDPホールパンチング TURN サーバ経由
- 261. WebRTC 1.0: Real-time Communication Between Browsers SDP セッション開始に必要な情報を記述 DTLS UDP版TLS
- 262. WebRTC 1.0: Real-time Communication Between Browsers データ通信 DTLSで全て暗号化される MediaStream (SRTP・SRTCP) 音声データ・映像データ DataChannel (SCTP) テキストデータ・バイナリデータ
- 263. WebRTC 1.0: Real-time Communication Between Browsers SRTP・SRTCP リアルタイムデータ転送プロトコル SCTP TCPに似たプロトコル 設定で、信頼性と引き換えにリアルタ イム性の向上が可能
- 264. Web Server WebSocket Server ICE Server (STUN) Browser Browser NAT NAT HTML+JS+CSS Global IP/Port signaling HTML+JS+CSS Global IP/Port signaling data
- 266. WebRTC 1.0: Real-time Communication Between Browsers APIが複雑でわかりにくい 抽象化した仕様の多い HTML5の他のAPIと比べると 非常に複雑 それでも、従来のリアルタイム通信の 処理よりは断然楽 ジッタやパケットロス等の対策は、 ブラウザが全て対応してくれる
- 269. Web Audio API
- 271. DEMO
- 280. SAMPLE
- 281. <!DOCTYPE html> <script> var context = new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 282. <!DOCTYPE html> <script> var context = new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 Script要素
- 283. <!DOCTYPE html> <script> var context = new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 AudioContextクラスの インスタンス化
- 284. <!DOCTYPE html> <script> var context = new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ゲイン(音量調整)ノード作成 ディレイ(遅延)ノード作成
- 285. <!DOCTYPE html> <script> var context = new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ゲイン(音量調整)に20%を指定 ディレイ(遅延)に0.2秒を指定
- 286. <!DOCTYPE html> <script> var context = new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ユーザメディアの取得開始 取得するユーザメディアはマイク
- 287. <!DOCTYPE html> <script> var context = new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ユーザメディア取得時の動作を指定
- 288. <!DOCTYPE html> <script> var context = new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 メディアストリームから Web Audio APIのオブジェクトを作成
- 289. <!DOCTYPE html> <script> var context = new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 source(インプット)を destination(アウトプット)に接続 第一のルート outputinput Gain 20% Delay 0.2s
- 290. <!DOCTYPE html> <script> var context = new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 source・ディレイ・ゲイン・ destinationの順に接続 第二のルート outputinput Gain 20% Delay 0.2s
- 291. <!DOCTYPE html> <script> var context = new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ゲインからディレイに接続 (遅延・音量調整をループ) 第三のルート outputinput Gain 20% Delay 0.2s
- 292. <!DOCTYPE html> <script> var context = new AudioContext(); var gain = context.createGainNode(); var delay = context.createDelayNode(); gain.gain.value = 0.2; delay.delayTime.value = 0.2; navigator.getUserMedia( {audio: true}, function(stream) { var source = context.createMediaStreamSource(stream); source.connect(context.destination); source.connect(delay); delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
- 293. Web Audo API まとめ ノードを接続し処理を行なう 多数のinput/output 音声データの編集ができる JavaScriptで直接編集も可能 3D空間にも対応
- 294. WebGL
- 295. WebGL 3DグラフィックのAPI OpenGLのサブセット的な位置付け GPUを利用する 互換レイヤーを挟んでいる DirectX(Windows)でも利用可能 GLSLの知識が必要で非常に高難度
- 296. DEMO
- 303. SAMPLE
- 304. <!DOCTYPE html> <div id="disp"></div> <script src="three.min.js"></script> <script> // next slide... </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 表示と three.jsの読み込みと Script要素
- 305. var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(500, 500); renderer.setClearColorHex(0xcccccc, 1); var disp = document.getElementById('disp'); disp.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(); camera.position = new THREE.Vector3(0, 0, 8); camera.lookAt(new THREE.Vector3(0, 0, 0)); var light = new THREE.DirectionalLight(0xcccccc); light.position = new THREE.Vector3(1, 1, 1); var geometry = new THREE.SphereGeometry(3, 32, 16); var material = new THREE.MeshPhongMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera);
- 306. var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(500, 500); renderer.setClearColorHex(0xcccccc, 1); var disp = document.getElementById('disp'); disp.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(); camera.position = new THREE.Vector3(0, 0, 8); camera.lookAt(new THREE.Vector3(0, 0, 0)); var light = new THREE.DirectionalLight(0xcccccc); light.position = new THREE.Vector3(1, 1, 1); var geometry = new THREE.SphereGeometry(3, 32, 16); var material = new THREE.MeshPhongMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera); レンダラーを作成し、サイズと色を指定
- 307. var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(500, 500); renderer.setClearColorHex(0xcccccc, 1); var disp = document.getElementById('disp'); disp.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(); camera.position = new THREE.Vector3(0, 0, 8); camera.lookAt(new THREE.Vector3(0, 0, 0)); var light = new THREE.DirectionalLight(0xcccccc); light.position = new THREE.Vector3(1, 1, 1); var geometry = new THREE.SphereGeometry(3, 32, 16); var material = new THREE.MeshPhongMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera); 描画領域をDOM Treeに追加
- 308. var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(500, 500); renderer.setClearColorHex(0xcccccc, 1); var disp = document.getElementById('disp'); disp.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(); camera.position = new THREE.Vector3(0, 0, 8); camera.lookAt(new THREE.Vector3(0, 0, 0)); var light = new THREE.DirectionalLight(0xcccccc); light.position = new THREE.Vector3(1, 1, 1); var geometry = new THREE.SphereGeometry(3, 32, 16); var material = new THREE.MeshPhongMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera); カメラを作成 カメラの位置と方向を指定
- 309. var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(500, 500); renderer.setClearColorHex(0xcccccc, 1); var disp = document.getElementById('disp'); disp.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(); camera.position = new THREE.Vector3(0, 0, 8); camera.lookAt(new THREE.Vector3(0, 0, 0)); var light = new THREE.DirectionalLight(0xcccccc); light.position = new THREE.Vector3(1, 1, 1); var geometry = new THREE.SphereGeometry(3, 32, 16); var material = new THREE.MeshPhongMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera); 色を指定し、ライトを作成 ライトの位置を指定
- 310. var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(500, 500); renderer.setClearColorHex(0xcccccc, 1); var disp = document.getElementById('disp'); disp.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(); camera.position = new THREE.Vector3(0, 0, 8); camera.lookAt(new THREE.Vector3(0, 0, 0)); var light = new THREE.DirectionalLight(0xcccccc); light.position = new THREE.Vector3(1, 1, 1); var geometry = new THREE.SphereGeometry(3, 32, 16); var material = new THREE.MeshPhongMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera); 大きさと目の細かさを指定し、 形状(球)を作成
- 311. var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(500, 500); renderer.setClearColorHex(0xcccccc, 1); var disp = document.getElementById('disp'); disp.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(); camera.position = new THREE.Vector3(0, 0, 8); camera.lookAt(new THREE.Vector3(0, 0, 0)); var light = new THREE.DirectionalLight(0xcccccc); light.position = new THREE.Vector3(1, 1, 1); var geometry = new THREE.SphereGeometry(3, 32, 16); var material = new THREE.MeshPhongMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera); 色を指定し、マテリアルを作成
- 312. var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(500, 500); renderer.setClearColorHex(0xcccccc, 1); var disp = document.getElementById('disp'); disp.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(); camera.position = new THREE.Vector3(0, 0, 8); camera.lookAt(new THREE.Vector3(0, 0, 0)); var light = new THREE.DirectionalLight(0xcccccc); light.position = new THREE.Vector3(1, 1, 1); var geometry = new THREE.SphereGeometry(3, 32, 16); var material = new THREE.MeshPhongMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera); 形状とマテリアルから メッシュを作成
- 313. var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(500, 500); renderer.setClearColorHex(0xcccccc, 1); var disp = document.getElementById('disp'); disp.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(); camera.position = new THREE.Vector3(0, 0, 8); camera.lookAt(new THREE.Vector3(0, 0, 0)); var light = new THREE.DirectionalLight(0xcccccc); light.position = new THREE.Vector3(1, 1, 1); var geometry = new THREE.SphereGeometry(3, 32, 16); var material = new THREE.MeshPhongMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera); シーンを作成し、 ライト・メッシュを シーンに追加
- 314. var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(500, 500); renderer.setClearColorHex(0xcccccc, 1); var disp = document.getElementById('disp'); disp.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(); camera.position = new THREE.Vector3(0, 0, 8); camera.lookAt(new THREE.Vector3(0, 0, 0)); var light = new THREE.DirectionalLight(0xcccccc); light.position = new THREE.Vector3(1, 1, 1); var geometry = new THREE.SphereGeometry(3, 32, 16); var material = new THREE.MeshPhongMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera); シーンとカメラと指定し レンダリング(描画)
- 315. var renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setSize(500, 500); renderer.setClearColorHex(0xcccccc, 1); var disp = document.getElementById('disp'); disp.appendChild(renderer.domElement); var camera = new THREE.PerspectiveCamera(); camera.position = new THREE.Vector3(0, 0, 8); camera.lookAt(new THREE.Vector3(0, 0, 0)); var light = new THREE.DirectionalLight(0xcccccc); light.position = new THREE.Vector3(1, 1, 1); var geometry = new THREE.SphereGeometry(3, 32, 16); var material = new THREE.MeshPhongMaterial({color: 0xff0000}); var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera);
- 318. Combination
- 320. DEMO
- 321. HTML5の効能 Webプラットフォーム上 組み合わせて使いやすい APIが適度に抽象化されている 一部例外あり やりたい事が簡単にできる 参入障壁が非常に低い 今後はアイディアが重要に...?
- 322. 完
- 324. 最期に ちょっとだけ...
- 326. ご清聴 ありがとう ございました
- 327. 付録
- 328. 付録1 WebSocket WebRTC getUserMedia An AR Game https://developer.mozilla.org/ja/demos/detail/an-ar-game/launch Facetracking example http://auduno.github.io/clmtrackr/clm_video.html Emotion detection example http://auduno.github.io/clmtrackr/examples/clm_emotiondetection.html Real-time Communication Between Browsers Video Chat with getUserMedia https://apprtc.appspot.com/ Web Audio API Pitch Detector with getUserMedia http://webaudiodemos.appspot.com/pitchdetect/index.html
- 329. 付録2 WebGL 3D Interactive Asteroid Space Visualization - Asterank http://www.asterank.com/3d/ +360º - Car Visualizer - Three.js http://carvisualizer.plus360degrees.com/threejs/ HelloRacer™ WebGL http://helloracer.com/webgl/ Water/Ocean http://oos.moxiecode.com/js_webgl/water_noise/ Md5 Test http://oos.moxiecode.com/js_webgl/md5_test/ Alcatraz Radiotherapy http://scoopex1988.org/released/prods/2012/RadioTherapy/ ACTISKU ¦ 3D Real-time Crypt demo ¦ WebGL http://crypt-webgl.unigine.com/game.html Quake 3 WebGL Demo http://media.tojicode.com/q3bsp/
- 330. 付録3 Combination Color Monoliths https://github.com/youkinjoh/color-monoliths VCMap - Video Chat on The Map http://vcmap.net/ Face substitution http://auduno.github.io/clmtrackr/examples/facesubstitution.html PhiloGL - Real time color 3D histogram http://www.senchalabs.org/philogl/PhiloGL/examples/histogram/ Chrome World Wide Maze for Machine http://chrome.com/maze/ for Android http://g.co/maze Cube Slam https://www.cubeslam.com/ DOM Visualizer - Leap https://github.com/youkinjoh/leap-motion-multiplace-dom-visualizer