HTML5の基礎と応用
Open Web Platform
2013/11/11
金城 雄
NTTアドバンステクノロジ
情報機器テクノロジセンタ所属
http://www.ntt-at.co.jp/
IC
E
T
O
N

この資料を
手元に持っている人へ

この資料は、先のスライドを見られない事
を前提に書かれています。
発表内容も同様です。

N

O

T

IC

E

できれば、このままそっと閉じて下さい。
もちろん、文字が小さい...
内容
HTML5の概要
休憩
HTML5のAPI 2つ

(デモ込み)

時間があれば休憩
HTML5のAPI 2つ

(デモ込み)

HTML5のAPIの組み合わせ

(デモ込み)
N
IO
新しい仕様が今も増え続けています。

C
A

U

T

IO

N

T
A
U
C

機能一覧が
何度か
出てきますが
全ての機能を
網羅していません。
HTML5前史
N

N
IO
T
U
C
A

C

A
U

T

IO

注意
所属会社や
所属部署・業務
全て忘れて下さい。
HTML5の
インパクトを
理解するために
しばらく
お付き合い下さい。
かなりの量に
なりますが
これでも相当
絞りました。
細部に
間違いが
含まれている
可能性があります。
他分野の
イノベーションを
大局的に振り返る。
20世紀後半
荷役・湾岸労働者

古くは沖仲仕(おきなかし/おきなかせ)と言っていましたが、
現在では差別用語として扱われるそうです。
http://en.wikipedia.org/wiki/Stevedore
http://en.wikipedia.org/wiki/File:Hafenarbeiter_bei_der_Verladung_von_Sackgut__MS_R...
http://en.wikipedia.org/wiki/Stevedore
http://en.wikipedia.org/wiki/File:Stevedores_ny_1912.jpg
http://en.wikipedia.org/wiki/Container_ship
http://en.wikipedia.org/wiki/File:Korean-war-merchant-marine-load.jpg
イノベーション
コンテナリゼーション
統一規格
積み替えが容易に
積み替えが迅速に
梱包コストの削減
積み重ねが容易
荷抜き・盗難が困難に
インターモーダル輸送
複合一貫輸送
http://en.wikipedia.org/wiki/Stevedore
http://en.wikipedia.org/wiki/
File:Starker_Gezeitenstrom,_Ladungsarbeiten_bei_schwi...
http://en.wikipedia.org/wiki/Semi-trailer_truck
http://en.wikipedia.org/wiki/File:Artic.lorry.arp.750pix.jpg
http://en.wikipedia.org/wiki/Double-stack_rail_transport
http://en.wikipedia.org/wiki/File:Cajon_Intermodal.jpg

http://en...
コンテナリゼーションは
多くの荷役の職を奪った。
坑夫
http://en.wikipedia.org/wiki/History_of_coal_mining_in_the_United_States
http://en.wikipedia.org/wiki/File:Child_coal_mine...
電話交換手
http://www.flickr.com/photos/24256351@N04/2680257100/in/
photolist-55R24j-57gjm3-5fp9zV-5g8iNR-5jYcKK-5Hte1R-65Mqqi-68MrFn-...
イノベーションは
既存の仕組みを
破壊することがある
繰り返される歴史
近年では?
例えば
コンパクト
カセット
(カセットテープ)
http://en.wikipedia.org/wiki/Compact_Cassette
http://en.wikipedia.org/wiki/File:Philips_EL3302.jpg
http://en.wikipedia.org/wiki/Compact_Cassette
http://en.wikipedia.org/wiki/File:CassetteTypes1.jpg
イノベーション
コンパクトディスク
http://www.flickr.com/photos/kismihok/8928946658/
ITが破壊したもの
例えば
写真フィルム
http://en.wikipedia.org/wiki/135_film
http://en.wikipedia.org/wiki/File:135_fuji_film_macro.jpg
イノベーション
デジタルカメラ
http://www.flickr.com/photos/jvcamerica/6193351840/
富士フィルム

コダック

事業縮小

破綻

現在は、
液晶フィルム・医療機器・
化粧品等

コニカ

現:コニカミノルタ

アグファ

DPE部門と共に譲渡

カメラ事業から撤退

現在は、
複合機・カメラ・計測機器・
医療機器等

現在は...
携帯電話
http://www.toledoblade.com/Technology/2011/10/05/Apple-co-founder-Steve-Jobsdead-at-56.html
破壊的イノベーション
最初期から
真っ当に
評価されていたか
世界で最初の
デジタルカメラ
http://www.flickr.com/photos/x1brett/4928370431/
http://www.digitaltrends.com/photography/two-pioneers-of-digital-photographyhonored-by-national-inventors-hall-of-fame/
解像度は100 x 100
白黒
カセットテープに記録
QV-10
デジタルカメラの
普及の切っ掛けを
作った。
http://www.flickr.com/photos/ume-y/5439197136/
解像度は320 x 240
ストロボなし
ピント固定
2MBの内蔵メモリに96枚
バッテリが保たない
(単3電池4本が96枚保たない)
『本日、Appleが
電話を
再発明します』
http://blog.livedoor.jp/ma_oyabu/archives/1749687.html
2G/2.5G(GSM/GPRS/EDGE)
Appsがinstall不可
Copy&Pasteが不可
Flashをサポートなし
バッテリの交換が不可
発表時のドコモはFOMA(3G)の903iシリーズ。発売時は904iシリーズ。
既存技術と比べると
当初は
低機能に見える。
本質を
理解しなくては
予想を誤る。
業界が成立するには
ある種の制限が
業界の成立に
大きく寄与している
ことが多い。
例
物理的制約
社会的制約
初期投資
専門性
比較的特殊な事例
資格
法律
イノベーション
とある業界内の問題を解決。
業界の発展に貢献。
とある業界が成り立つための
制限を解決する。
業界存続の危機。
音楽業界
DTMの製作現場への寄与。
CD化による市場拡大。
後に
CDという物理的制約が
ITにより取り払われた。
著作権保護技術(DRM)
技術が、
制限を取り除くのではなく、
特定の業界を守る目的で
制限を作るために用いられた
比較的珍しい事例。
セキュリティ技術は用途が違うため、珍しい事例には含みません。
リサイクルショップ
ネットオークションに
出品する一般消費者と
競争することになった。
流通
昔は山の向こうは別の市場。
交通網の発達は
物理的制約の緩和。
市場は吸収されるか
結合する。
1889年
05月01日

2001年
01月21日

市町村変遷パラパラ地図より島嶼部と地図外文字を削除して引用
http://mujina.sakura.ne.jp/history/
交通網以外の理由もあります。傾向としてみて下さい。
グローバル化
特別なことではない。
これまでの延長上の事象。
但し、交通網だけでなく
通信網も制限緩和に関与。
言葉の壁はまだありますが...。
水平統合
と
垂直統合
水平統合され
主戦場が
ひとつ上のレイヤーに
移動すると
その分野の勢力図を
一旦リセットする
ことがある。
例
Windows登場以前と
登場以後とでは
市場のプレイヤーが
大きく違う。
レイヤーが変わると
群雄割拠に。
市場は混沌とするが
やがてプレイヤーは
淘汰されていく。
既存企業は
参加するかどうかの
選択が迫られる。
新レイヤーは
主戦場となるのか。
コモディティ化しないか。
革新により
制限が取り払われた場合。
ビジネスのルールが変わる。
それまでの常識が
通用しないことも。
ひとつの経済圏・分野の
プレイヤー数
淘汰後は

3 10前後 or 1
3 10前後
市場は健全である事が多い。
囲い込みで垂直統合を計るが
上手くいかないことが多い。
不便さは上のレイヤーの
水平統合の遠因にも。
ポイントカード
他企業も真似するのですぐに横並びに。

電話料金
価格競争からLCRにレイヤーが変化。
その後、マイライン・IP電話...
1
プロプライエタリなら独占。
独占した上のレイヤーも
圧勝することが多い。
(ソフトウェア分野は特に。)

発展の速度が遅くなる。
思わぬ所から独占が崩れる。
IBM互換機 (PC/AT互換機)
ハードからソフトへの
主戦場の変化を見誤る。

PC-98
国内独占。Windowsの来襲による没落。

Windows
上位のオフィススイートとブラウザも独占。
別カテゴリのOS台頭と
上位レイヤーの標準化...
2は?
まずない。
A < B + C である限り
どこかが
キャスティングボードを
握る。
ネットワーク効果
ネットワーク効果とは、同じ製品・サービ
スを利用するユーザが増えると、それ自体
の効用や価値が高まる効果のこと。
ネットワーク外部性・バンドワゴン効果
http://www.exbuzzwords.com/static/key...
囲い込み戦略
人為的なロックオン効果。
IT業界的には
ベンダーロックとも。
同時にネットワーク効果を
狙う事も。
ここまでのまとめ1
業界を破壊する革新が存在する。
革新は最初は低機能に見える。
革新は業界の発展に寄与。
業界に必要な制限を解決することも。
革新が起こった業界ではなく
他業界を破壊する事も。
ここまでのまとめ2
革新は市場を統合することがある。
グローバル化もその一貫でしかない。
水平統合と垂直統合は繰り返されている。
水平統合されると群雄割拠。
やがて収束し垂直統合。
既存企業も否応なく巻き込まれる。
ここまでの参考資料
と
没にしたスライドの一部
コンテナ
物語
世界を変えたのは
「箱」の発明だった

http://amazon.jp/dp/4822245640
イノベー
ションの
ジレンマ
技術革新が
巨大企業を滅ぼすとき
http://amazon.jp/dp/4798100234
http://www.seshop.com/product/detail/2241
父の子供時代には、会社の寿命は60年と
いわれていた。ところが1970年代に入
ると会社の寿命は30年になり、現在では
15年になってしまっている。これが20
10年には10年にまで短命化するらし
い。
ピーター・ドラッカーによれば、このよう
...
米デューク大教授のキャ
シー・デビッドソン(63)によ
ると、いま、小学校に入る子
供の65%は現在まだない職業
に就くという。
日本経済新聞 2013/01/28
http://www.w3.org/html/logo/
狭義のHTML5
と
広義のHTML5
HTML5 = HTML5 + CSS + JS
狭義
HTML5 = HTML5 + CSS + JS

広義
狭義

マークアップ言語の仕様
従来のHTMLの改訂

HTML5 = HTML5 + CSS + JS

広義

新しいAPIも含まれる
バズワード(マーケティング用語)
Khronos

WebCL

SMIL

WebGL

other
WHATWG

Canvas

Multi
Media
HTML5
Forms

HTML5
Parser

HTML5

Offline
Support

Semantic
E...
Multi
Media
HTML5
Forms

HTML5
Parser

W3C

Mouse,
Key ev.

HTML5

XHTML5

Semantic
Elements

Offline
Support

WAIARIA

http...
本日のコンテキスト
HTML5 = HTML5 + CSS + JS

これ
本日のコンテキスト
最近では
バズワードを
避けて、
HTML5 = HTML5 + CSS + JS
一部の人は
Open Web Platform
これと呼んでいる。
で、HTML5で
何ができるように
なるの?
できることは
これまでと
変わらない
これまで
ブラウザで
できなかったことが
できるようになる
だけ
元々はWeb Pageを
閲覧するためのものだった
ブラウザで、
Web Applicationを
実行できるように
するために、
必要なものを追加
( ・`ω・´)ドヤァ

Typed Arrays

ブラウザ上でバイナリデータを
操作できるようにしたよ

今まで出来なかったことがおかしい

('・ω・` ) ('・ω・` )
( ・`ω・´)ドヤァ

Web Audio API

ブラウザ上で音声データを
操作・再生できるようにしたよ

今まで出来なかったことがおかしい

('・ω・` ) ('・ω・` )
( ・`ω・´)ドヤァ

Web Workers

バッググランドで処理が
できるようになったよ

今まで出来なかったことがおかしい

('・ω・` ) ('・ω・` )
( ・`ω・´)ドヤァ

CSS3

画像を使わなくても、
角丸・グラデーション使えるよ

今まで出来なかったことがおかしい

('・ω・` ) ('・ω・` )
SVG

( ・`ω・´)ドヤァ

ベクターデータが
使えるようになったよ

今まで出来なかったことがおかしい

('・ω・` ) ('・ω・` )
( ・`ω・´)ドヤァ

(広義の)HTML5

色々できるようになったよ

でも、まだまだ全然機能足りてないじゃん!

('・ω・` ) ('・ω・` )
機能一覧だけ
見ていると
本質を見失う。
機能一覧には
現れない
HTML5の特徴
HTML5
OSの機能がブラウザ上で使える
低レイヤーのAPIがWeb APIで共通化
特許に制限されない
誰もが利用可能
Webプラットフォーム上で統合
OSの機能がブラウザ上で
OSの機能が、ブラウザを介してサイト
に提供される
アドレス帳 ネットワーク情報 バッテリー状態 通知
ストリーム メディアデータ オーディオ ビデオ 字幕
Webカメラ マイク Audioの波形操作
2D(ラスター,...
Web APIで共通化
低レイヤーのAPIがWeb APIで共通化
される
OSに非依存
実行環境に基本的に非依存
環境による制限はありえる
センサ未搭載・端末性能等の理由や用途による理由(例:電子書籍)等が
制限として考えられます。
特許に制限されない
Openであることが特徴
パテント・フリー
ロイヤリティ・フリー
いわゆる業界団体よりもオープン
仕様だけでなく策定過程も公開
特定の組織の利益よりも人類の利益を
市場原理に左右される側面もあり。理想と現実は違う...。
誰もが利用可能
世界中の誰もが利用可能な機能
限られた組織の限られた人しか使えな
い仕様はオープンではない
今も100年後も自由に使える
「古文書の一部が、DRMで保護され
ていて見られない」のない未来に(電
子書籍の仕様にも関連しているため)...
Web P/F上で統合
これら全てが、OpenWebプラット
フォーム上で統合
アイディア次第で新しい物が誰にでも
日曜プログラミングで音声合成
夏休みの宿題でビデオチャット作成
これらの知見はWeb上に蓄積
HTML5そのものの
インパクト
ポテンシャルを
最大限に発揮した場合を考察
新しいレイヤーと
成りうるか
充分成りうる。
適度に抽象化されたAPI。
新興企業にとって魅力的。
既存企業も移らざるを得ない可能性。
機能面だけ見れば既存企業にとっても、
得意領域以外の機能が簡単に使える魅力。
IT業界への影響は?
多大。
これまでの常識、コンパイルが前提で
実行ファイルを売買が通用しない。
これまでも、スクリプト言語もあったが
サーバサイド。
今後、コードのオープンが前提になる。
コンテンツ保護の議論、コードにはない。
コーデック等...
他業界への影響は?

多分多大。
破壊的イノベーションになる可能性。
既にITに巻き込まれているなら尚更。
プレイヤー

他業界との距離が接近する可能性。
IT系でも棲み分けが出来ていた
他分野とも距離が接近。
敷居が下がることで一般の人の参入も。
壁
今後も国境を越えた競争。
言葉の壁は有り得る。
英語圏でシェアを取られると、
ネットワーク効果で
太刀打ちできなくなる。
これまで言語の壁で守られていたが、
今度はそれが仇に成りうる。
開発スタイル
コードが見られるため、
サービスのクローンが容易。
速く市場にリリースし、市場を握る事が
これまで以上に重要に。
技術力よりもアイディア勝負。
(もちろん技術力も大事だが...)
IT史上最大の水平統合
オープンなレイヤー
Open Web Platform
http://platform.html5.org/ より引用 (2013/04/04 版)
http://platform.html5.org/ より引用 (2013/04/04 版)
インパクトの強そうな
仕様の一部
WebSocket
WebRTC
Web Audio API
WebGL
休憩
インパクトの強そうな
仕様の一部
WebSocket
WebRTC
Web Audio API
WebGL
WebSocket
WebSocket
高速・双方向通信
2つの仕様
WebSocket Protocol
WebSocket API
Cometよりも低負荷

<- 今回は詳細にはふれません
DEMO
何故双方向通信が可能か
FireWall
NAT
Proxy
access

access
request

Client

response

Server

サーバ側から情報を送るには
request/responseでないと届きにくい
何故双方向通信が可能か
GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrade
(略)

request
handshake

response

Client

HTTP/1.1 101 S...
何故双方向通信が可能か
Switching
Protocols
request
handshake

response

Client

Server

ハンドシェイク後、双方向通信が可能となる
何故双方向通信が可能か
request
handshake

response

Client

Server

切断しない限り、双方向通信が可能
何故双方向通信が可能か
HTTPを模しているため
通過しやすいが100%ではない
HTTP (port 80)
67%
HTTP (port 61985) 86%
HTTPS (port 443)
95%
http://www.ietf.org...
何故高速通信が可能か
あるHTTP requestのHeader
GET / HTTP/1.1
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*...
何故高速通信が可能か
WebSocketのHeader
FIN
RSV1
RSV2
RSV3
Opcode
Mask
Payload length
Masking-key

1
1
1
1
4
1
7
0

bit
bit
bit
bit
bi...
何故高速通信が可能か
送信データが「Hello, world」の場合
HTTP
12 bytes + 400 bytes

→ 412 Bytes

97.1%がHeader
WebSocket (Client => Server)
12 by...
何故高速通信が可能か
送信データが「Hello, world」の場合
HTTP

同じ文字列を → 412 Bytes
12 bytes + 400 bytes
97.1%がHeader
送信するために
WebSocket (Client =>...
Cometよりも低負荷

今回は詳細にはふれません
SAMPLE
WebSocket Chat 作成
WebSocket Server
node.js サーバサイドJavaScript
ws WebSocketライブラリ)
以下はインストール済みとする
nvm nodeのバージョン切り替えツール
npm no...
node.jsとwsの
セットアップ
%
%
%
%

mkdir chat
cd chat
nvm use v0.10.21
npm install ws

←ディレクトリ作成
←ディレクトリ移動
←バージョン指定
←wsインストール
サーバ側
var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection...
var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection...
var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection...
var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection...
var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection...
var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection...
var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection...
var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection...
var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection...
var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection...
var WebSocketServer = require('ws').Server
, wss = new WebSocketServer({port: 8080});
var clients = [];
wss.on('connection...
クライアント側
Client

<!DOCTYPE html>
<input id="msg" />
<input type="button" value="send" id="send" />
<div id="disp"></div>
<script>
v...
Client

<!DOCTYPE html>
<input id="msg" />
<input type="button" value="send" id="send" />
<div id="disp"></div>
<script>
v...
Client

<!DOCTYPE html>
<input id="msg" />
<input type="button" value="send" id="send" />
<div id="disp"></div>
<script>
v...
Client

<!DOCTYPE html>
<input id="msg" />
<input type="button" value="send" id="send" />
<div id="disp"></div>
<script>
v...
Client

<!DOCTYPE html>
<input id="msg" />
<input type="button" value="send" id="send" />
<div id="disp"></div>
<script>
v...
Client

<!DOCTYPE html>
<input id="msg" />
<input type="button" value="send" id="send" />
<div id="disp"></div>
<script>
v...
Client

<!DOCTYPE html>
<input id="msg" />
<input type="button" value="send" id="send" />
<div id="disp"></div>
<script>
v...
Client

<!DOCTYPE html>
<input id="msg" />
<input type="button" value="send" id="send" />
<div id="disp"></div>
<script>
v...
WebSocket まとめ
高速・双方向通信
HTTPからSwitching Protocols
HTTPSなら95%で接続可能
Headerが小さいことが高速通信の理
由のひとつ
Cometよりも低負荷
WebRTC
WebRTC
ボイス・ビデオチャット / P2P
2つの仕様
Media Capture and Streams
(getUserMedia)
WebRTC 1.0: Real-time
Communication Between
Browse...
Media Capture and Streams
(getUserMesia)
ブラウザからマイクやカメラにアクセス
利用範囲はWebRTC以外とも
音声処理(with Web Audio API)
ボイスチェンジャー etc.
画像処理(w...
DEMO
SAMPLE
<!DOCTYPE html>
<video id="video" />
<script>
navigator.getUserMedia(
{video: true, audio: true},
function(stream) {
var v...
<!DOCTYPE html>
<video id="video" />
<script>
navigator.getUserMedia(
{video: true, audio: true},
function(stream) {
var v...
<!DOCTYPE html>
<video id="video" />
<script>
navigator.getUserMedia(
{video: true, audio: true},
function(stream) {
var v...
<!DOCTYPE html>
<video id="video" />
<script>
navigator.getUserMedia(
{video: true, audio: true},
function(stream) {
var v...
<!DOCTYPE html>
<video id="video" />
ユーザメディア取得時の動作を指定
<script>
navigator.getUserMedia(
{video: true, audio: true},
functio...
<!DOCTYPE html>
ビデオ要素の取得 />
<video id="video"
ユーザメディアの指定
<script>
navigator.getUserMedia(
再生開始
{video: true, audio: true},...
<!DOCTYPE html>
<video id="video" />
<script>
navigator.getUserMedia(
{video: true, audio: true},
function(stream) {
var v...
WebRTC 1.0: Real-time
Communication Between
Browsers
ブラウザとブラウザを接続
シグナリング
SIP
XMPP
WebSocket
etc.

<- 今のところ一番使われている
DEMO
WebRTC 1.0: Real-time
Communication Between
Browsers
NAT通過・ ネゴシエーション
ICE(STUN + TURN + α)
STUN
P2P・UDPホールパンチング
TURN
サーバ経由
WebRTC 1.0: Real-time
Communication Between
Browsers
データ通信
MediaStream
音声データ・映像データ
DataChannel
テキストデータ・バイナリデータ
Web Server
HTML+JS+CSS

HTML+JS+CSS

ICE Server
(STUN)
Global IP/Port

Global IP/Port

WebSocket
Server
signaling

NAT

Br...
別資料

WebRTC Data
Black Magic
P18 53 をご覧下さい
https://speakerdeck.com/feross/webrtc-data-black-magic
WebRTC 1.0: Real-time
Communication Between
Browsers

APIが複雑でわかりにくい
抽象化した仕様の多い
HTML5のAPIの中では
非常に複雑
WebRTC まとめ
ボイス・ビデオチャットが可能
テキスト・バイナリの通信も可能
P2P
NAT通過の仕組み
APIが複雑
ライブラリを使うという選択肢も
定番と言われるようなライブラリはまだありません。
Web Audio API
Web Audio API
オーディオ波形操作
フィルタリング
ミキシング
加工
動的に波形を生成することも可能
SE等の短い音声に特に威力を発揮
音声処理の種類
双2次フィルタ
ローパスフィルタ
ハイパスフィルタ
バンドパスフィルタ

ウェーブシェイパー
コンボルバ(畳み込み)
リバーブ(残響)

ディレイ(遅延)

ローシェフフィルタ
ハイシェフフィルタ

ダイナミックコンプレッサー
...
in/out間をノードで接続
input

Echo
Delay
0.2s

Gain
20%

output
in側とout側の種類
input

output

マイク

スピーカー

MediaStream

MediaStream

バイナリデータ
オシレータ
Audio要素
Video要素
プログラマブル
ScriptProcessorNode
inputとoutputの両方で使える
input and/or output
input例
getUserMediaから取得した音声を加工
WebRTCで取得した遠隔地の音声を解析
ou...
解析

output
加工

input
生成
音源とリスナーを
3D空間上に
PannerNode・AudioListener
音源とリスナーを3D空間上に配置
音源の方向・移動速度も指定可能
左右の音量差・ドップラー効果等
WebGLと同時によく使われる
OpenALに近い
◎
◎

◎

音源とリスナーを
3D空間上に
音源とリスナーを
3D空間上に

◎

◎
◎

左右スピーカーの
音量の差
ドップラー効果
SAMPLE
<!DOCTYPE html>
<script>
var context = new AudioContext();
var gain = context.createGainNode();
var delay = context.create...
<!DOCTYPE html>
<script>
var context = new AudioContext();
var gain = context.createGainNode();
var delay = context.create...
<!DOCTYPE html>
<script>
var context = new AudioContext();
var gain = context.createGainNode();
var delay = context.create...
<!DOCTYPE html>
<script>
var context = new AudioContext();
var gain = context.createGainNode();
var delay = context.create...
<!DOCTYPE html>
<script>
var context = new AudioContext();
var gain = context.createGainNode();
var delay = context.create...
<!DOCTYPE html>
<script>
var context = new AudioContext();
var gain = context.createGainNode();
var delay = context.create...
<!DOCTYPE html>
<script>
var context = new AudioContext();
var gain = context.createGainNode();
var delay = context.create...
<!DOCTYPE html>
<script>
var context = new AudioContext();
var gain = context.createGainNode();
メディアストリームから
var delay = co...
<!DOCTYPE html>
<script>
第一のルート
var context = new AudioContext();
var gain = context.createGainNode();
source(インプット)を
var ...
<!DOCTYPE html>
<script>
第二のルート
var context = new AudioContext();
var gain = context.createGainNode();
source・ディレイ・ゲイン・
va...
<!DOCTYPE html>
<script>
第三のルート
var context = new AudioContext();
var gain = context.createGainNode();
ゲインからディレイに接続
var de...
<!DOCTYPE html>
<script>
var context = new AudioContext();
var gain = context.createGainNode();
var delay = context.create...
Web Audo API まとめ
ノードを接続し処理を行なう
多数のinput/output
音声データの編集ができる
JavaScriptで直接編集も可能
3D空間にも対応
WebGL
WebGL
3DグラフィックのAPI
OpenGLのサブセット的な位置付け
GPUを利用する
互換レイヤーを挟んでいる
DirectX(Windows)でも利用可能
GLSLの知識が必要で非常に高難度
three.js
デファクトスタンダードのライブラリ
WebGL界のjQuery
3DCDの知識があればハードルは低い
CSS3D等のレンダラーも選択可能
geometry
環境光の色
ハイライトの色
mesh

テクスチャ
透明度・屈折率 etc.

material
環境光の色
遠景の処理 etc.

mesh

camera

light
geometry(形状)
テキスト
円

円環体(トーラス)
リング等 四面体

平面

八面体

立方体

二十面体

円柱

多面体

チューブ

パラメトリック曲線

球体

etc.
material
物体の色
ハイライトの色
ハイライトの大きさ

map
テクスチャ画像
バンプ(表面の凹凸)

発光色

画像

金属か否か

スケール

環境光の色
屈折率
透明度

環境マッピング(擬似的
な背景)
etc.
scene & etc.
カメラ
ライト(照明)
環境光
メッシュ
フォグ
パーティクル
レンズフレア

レンダラー
選択可能
ピッキング
マウスによる選択等
軌道制御
マウスでカメラ移動
ポストプロセス
etc.
SAMPLE
<!DOCTYPE html>
<div id="disp"></div>
<script src="three.min.js"></script>
<script>
// next slide...
</script>

表示と
three....
var renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500, 500);
renderer.setClearColorHex(0xcccccc,...
var renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500, 500);
renderer.setClearColorHex(0xcccccc,...
var renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500, 500);
renderer.setClearColorHex(0xcccccc,...
var renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500, 500);
renderer.setClearColorHex(0xcccccc,...
var renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500, 500);
renderer.setClearColorHex(0xcccccc,...
var renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500, 500);
renderer.setClearColorHex(0xcccccc,...
var renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500, 500);
renderer.setClearColorHex(0xcccccc,...
var renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500, 500);
renderer.setClearColorHex(0xcccccc,...
var renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500, 500);
renderer.setClearColorHex(0xcccccc,...
var renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500, 500);
renderer.setClearColorHex(0xcccccc,...
var renderer =
new THREE.WebGLRenderer({antialias: true});
renderer.setSize(500, 500);
renderer.setClearColorHex(0xcccccc,...
WebGL まとめ
OpenGLのサブセット
GPUを利用
Windowsでも使える
GLSLは難解
three.jsを使おう
Combination
APIを組み合わせて使う

色々
見てみよう!
HTML5の効能
Webプラットフォーム上
組み合わせて使いやすい
APIが適度に抽象化されている
一部例外あり

やりたい事が簡単にできる
参入障壁が非常に低い
今後はアイディアが重要に...?
完
質疑応答
もう一度聞きたいところはありますか?
もっと詳しく聞きたいところはありますか?
ご清聴
ありがとう
ございました
付録
WebSocket
WebRTC
getUserMedia
An AR Game
https://developer.mozilla.org/ja/demos/detail/an-ar-game/launch
Real-time Communi...
HTML5の基礎と応用 ~Open Web Platform~
Upcoming SlideShare
Loading in …5
×

HTML5の基礎と応用 ~Open Web Platform~

4,564 views

Published on

簡易版はこちら => http://www.slideshare.net/You_Kinjoh/html5-websocket-webrtc-web-audio-api-webgl

Published in: Technology

HTML5の基礎と応用 ~Open Web Platform~

  1. 1. HTML5の基礎と応用 Open Web Platform 2013/11/11 金城 雄 NTTアドバンステクノロジ 情報機器テクノロジセンタ所属 http://www.ntt-at.co.jp/
  2. 2. IC E T O N この資料を 手元に持っている人へ この資料は、先のスライドを見られない事 を前提に書かれています。 発表内容も同様です。 N O T IC E できれば、このままそっと閉じて下さい。 もちろん、文字が小さい・画面が見えない 等であれば見て頂いて構いません。
  3. 3. 内容 HTML5の概要 休憩 HTML5のAPI 2つ (デモ込み) 時間があれば休憩 HTML5のAPI 2つ (デモ込み) HTML5のAPIの組み合わせ (デモ込み)
  4. 4. N IO 新しい仕様が今も増え続けています。 C A U T IO N T A U C 機能一覧が 何度か 出てきますが 全ての機能を 網羅していません。
  5. 5. HTML5前史
  6. 6. N N IO T U C A C A U T IO 注意 所属会社や 所属部署・業務 全て忘れて下さい。
  7. 7. HTML5の インパクトを 理解するために しばらく お付き合い下さい。
  8. 8. かなりの量に なりますが これでも相当 絞りました。
  9. 9. 細部に 間違いが 含まれている 可能性があります。
  10. 10. 他分野の イノベーションを 大局的に振り返る。
  11. 11. 20世紀後半
  12. 12. 荷役・湾岸労働者 古くは沖仲仕(おきなかし/おきなかせ)と言っていましたが、 現在では差別用語として扱われるそうです。
  13. 13. http://en.wikipedia.org/wiki/Stevedore http://en.wikipedia.org/wiki/File:Hafenarbeiter_bei_der_Verladung_von_Sackgut__MS_Rothenstein_NDL,_Port_Sudan_1960.png
  14. 14. http://en.wikipedia.org/wiki/Stevedore http://en.wikipedia.org/wiki/File:Stevedores_ny_1912.jpg
  15. 15. http://en.wikipedia.org/wiki/Container_ship http://en.wikipedia.org/wiki/File:Korean-war-merchant-marine-load.jpg
  16. 16. イノベーション コンテナリゼーション
  17. 17. 統一規格 積み替えが容易に 積み替えが迅速に 梱包コストの削減 積み重ねが容易 荷抜き・盗難が困難に
  18. 18. インターモーダル輸送 複合一貫輸送
  19. 19. http://en.wikipedia.org/wiki/Stevedore http://en.wikipedia.org/wiki/ File:Starker_Gezeitenstrom,_Ladungsarbeiten_bei_schwierigen_Arbeitsbedingungen.jpg
  20. 20. http://en.wikipedia.org/wiki/Semi-trailer_truck http://en.wikipedia.org/wiki/File:Artic.lorry.arp.750pix.jpg
  21. 21. http://en.wikipedia.org/wiki/Double-stack_rail_transport http://en.wikipedia.org/wiki/File:Cajon_Intermodal.jpg http://en.wikipedia.org/wiki/Double-stack_rail_transport http://en.wikipedia.org/wiki/File:Panama_Canal_Railway_-_Container_Train.JPG
  22. 22. コンテナリゼーションは 多くの荷役の職を奪った。
  23. 23. 坑夫
  24. 24. http://en.wikipedia.org/wiki/History_of_coal_mining_in_the_United_States http://en.wikipedia.org/wiki/File:Child_coal_miners_(1908)_crop.jpg
  25. 25. 電話交換手
  26. 26. http://www.flickr.com/photos/24256351@N04/2680257100/in/ photolist-55R24j-57gjm3-5fp9zV-5g8iNR-5jYcKK-5Hte1R-65Mqqi-68MrFn-6RT2ZZ-6Thg 79-7mmujZ-7nkBSM-9uNQfa-9uRS6E-c6dR8j-9uNU5t-9zxT76-9yMWGo-fhqNsN-ad3ak2frFrqi-fsBVc3-8V9DoA-cWLv4G-a1Pcua-8zCatd-djKVDF-9uMwMX-dX8YR4cwbDVu-7Unejv-7UcBqs-89vVUr-9dYPWE-a9Z1v5-a8Z9yKa9WcZv-9djc1S-9dJZ9n-8c6WdX-aqT2Hn-8XMCsQ-9d3LHi-bibXap-b3Kbup-abavwfabavKw-cWLjQ9-f12PUU-dwNpHJ-8mppYJ
  27. 27. イノベーションは 既存の仕組みを 破壊することがある
  28. 28. 繰り返される歴史
  29. 29. 近年では?
  30. 30. 例えば コンパクト カセット (カセットテープ)
  31. 31. http://en.wikipedia.org/wiki/Compact_Cassette http://en.wikipedia.org/wiki/File:Philips_EL3302.jpg
  32. 32. http://en.wikipedia.org/wiki/Compact_Cassette http://en.wikipedia.org/wiki/File:CassetteTypes1.jpg
  33. 33. イノベーション コンパクトディスク
  34. 34. http://www.flickr.com/photos/kismihok/8928946658/
  35. 35. ITが破壊したもの
  36. 36. 例えば 写真フィルム
  37. 37. http://en.wikipedia.org/wiki/135_film http://en.wikipedia.org/wiki/File:135_fuji_film_macro.jpg
  38. 38. イノベーション デジタルカメラ
  39. 39. http://www.flickr.com/photos/jvcamerica/6193351840/
  40. 40. 富士フィルム コダック 事業縮小 破綻 現在は、 液晶フィルム・医療機器・ 化粧品等 コニカ 現:コニカミノルタ アグファ DPE部門と共に譲渡 カメラ事業から撤退 現在は、 複合機・カメラ・計測機器・ 医療機器等 現在は、 医療機器・印刷機器・ 製版・印刷材料等
  41. 41. 携帯電話
  42. 42. http://www.toledoblade.com/Technology/2011/10/05/Apple-co-founder-Steve-Jobsdead-at-56.html
  43. 43. 破壊的イノベーション
  44. 44. 最初期から 真っ当に 評価されていたか
  45. 45. 世界で最初の デジタルカメラ
  46. 46. http://www.flickr.com/photos/x1brett/4928370431/
  47. 47. http://www.digitaltrends.com/photography/two-pioneers-of-digital-photographyhonored-by-national-inventors-hall-of-fame/
  48. 48. 解像度は100 x 100 白黒 カセットテープに記録
  49. 49. QV-10 デジタルカメラの 普及の切っ掛けを 作った。
  50. 50. http://www.flickr.com/photos/ume-y/5439197136/
  51. 51. 解像度は320 x 240 ストロボなし ピント固定 2MBの内蔵メモリに96枚 バッテリが保たない (単3電池4本が96枚保たない)
  52. 52. 『本日、Appleが 電話を 再発明します』
  53. 53. http://blog.livedoor.jp/ma_oyabu/archives/1749687.html
  54. 54. 2G/2.5G(GSM/GPRS/EDGE) Appsがinstall不可 Copy&Pasteが不可 Flashをサポートなし バッテリの交換が不可 発表時のドコモはFOMA(3G)の903iシリーズ。発売時は904iシリーズ。
  55. 55. 既存技術と比べると 当初は 低機能に見える。
  56. 56. 本質を 理解しなくては 予想を誤る。
  57. 57. 業界が成立するには
  58. 58. ある種の制限が 業界の成立に 大きく寄与している ことが多い。
  59. 59. 例 物理的制約 社会的制約 初期投資 専門性
  60. 60. 比較的特殊な事例 資格 法律
  61. 61. イノベーション とある業界内の問題を解決。 業界の発展に貢献。 とある業界が成り立つための 制限を解決する。 業界存続の危機。
  62. 62. 音楽業界 DTMの製作現場への寄与。 CD化による市場拡大。 後に CDという物理的制約が ITにより取り払われた。
  63. 63. 著作権保護技術(DRM) 技術が、 制限を取り除くのではなく、 特定の業界を守る目的で 制限を作るために用いられた 比較的珍しい事例。 セキュリティ技術は用途が違うため、珍しい事例には含みません。
  64. 64. リサイクルショップ ネットオークションに 出品する一般消費者と 競争することになった。
  65. 65. 流通 昔は山の向こうは別の市場。 交通網の発達は 物理的制約の緩和。 市場は吸収されるか 結合する。
  66. 66. 1889年 05月01日 2001年 01月21日 市町村変遷パラパラ地図より島嶼部と地図外文字を削除して引用 http://mujina.sakura.ne.jp/history/ 交通網以外の理由もあります。傾向としてみて下さい。
  67. 67. グローバル化 特別なことではない。 これまでの延長上の事象。 但し、交通網だけでなく 通信網も制限緩和に関与。 言葉の壁はまだありますが...。
  68. 68. 水平統合 と 垂直統合
  69. 69. 水平統合され 主戦場が ひとつ上のレイヤーに 移動すると その分野の勢力図を 一旦リセットする ことがある。
  70. 70. 例 Windows登場以前と 登場以後とでは 市場のプレイヤーが 大きく違う。
  71. 71. レイヤーが変わると 群雄割拠に。 市場は混沌とするが やがてプレイヤーは 淘汰されていく。
  72. 72. 既存企業は 参加するかどうかの 選択が迫られる。 新レイヤーは 主戦場となるのか。 コモディティ化しないか。
  73. 73. 革新により 制限が取り払われた場合。 ビジネスのルールが変わる。 それまでの常識が 通用しないことも。
  74. 74. ひとつの経済圏・分野の プレイヤー数 淘汰後は 3 10前後 or 1
  75. 75. 3 10前後 市場は健全である事が多い。 囲い込みで垂直統合を計るが 上手くいかないことが多い。 不便さは上のレイヤーの 水平統合の遠因にも。
  76. 76. ポイントカード 他企業も真似するのですぐに横並びに。 電話料金 価格競争からLCRにレイヤーが変化。 その後、マイライン・IP電話...
  77. 77. 1 プロプライエタリなら独占。 独占した上のレイヤーも 圧勝することが多い。 (ソフトウェア分野は特に。) 発展の速度が遅くなる。 思わぬ所から独占が崩れる。
  78. 78. IBM互換機 (PC/AT互換機) ハードからソフトへの 主戦場の変化を見誤る。 PC-98 国内独占。Windowsの来襲による没落。 Windows 上位のオフィススイートとブラウザも独占。 別カテゴリのOS台頭と 上位レイヤーの標準化で...。
  79. 79. 2は? まずない。 A < B + C である限り どこかが キャスティングボードを 握る。
  80. 80. ネットワーク効果 ネットワーク効果とは、同じ製品・サービ スを利用するユーザが増えると、それ自体 の効用や価値が高まる効果のこと。 ネットワーク外部性・バンドワゴン効果 http://www.exbuzzwords.com/static/keyword_3632.html ロックイン効果 ロックイン効果とは、顧客(ユーザ)があ る商品を購入すると、その商品から他社の 製品への乗り換えが困難となり、顧客との 継続的関係が維持されやすくなる効果。 http://www.exbuzzwords.com/static/keyword_3631.html
  81. 81. 囲い込み戦略 人為的なロックオン効果。 IT業界的には ベンダーロックとも。 同時にネットワーク効果を 狙う事も。
  82. 82. ここまでのまとめ1 業界を破壊する革新が存在する。 革新は最初は低機能に見える。 革新は業界の発展に寄与。 業界に必要な制限を解決することも。 革新が起こった業界ではなく 他業界を破壊する事も。
  83. 83. ここまでのまとめ2 革新は市場を統合することがある。 グローバル化もその一貫でしかない。 水平統合と垂直統合は繰り返されている。 水平統合されると群雄割拠。 やがて収束し垂直統合。 既存企業も否応なく巻き込まれる。
  84. 84. ここまでの参考資料 と 没にしたスライドの一部
  85. 85. コンテナ 物語 世界を変えたのは 「箱」の発明だった http://amazon.jp/dp/4822245640
  86. 86. イノベー ションの ジレンマ 技術革新が 巨大企業を滅ぼすとき http://amazon.jp/dp/4798100234 http://www.seshop.com/product/detail/2241
  87. 87. 父の子供時代には、会社の寿命は60年と いわれていた。ところが1970年代に入 ると会社の寿命は30年になり、現在では 15年になってしまっている。これが20 10年には10年にまで短命化するらし い。 ピーター・ドラッカーによれば、このよう に会社や事業の寿命が個人の労働可能寿命 よりも短くなることは歴史上はじめてのこ とである。これまではひとつの仕事、たと えば印刷工になれば一生そのスキルひとつ で食っていけた。しかし今では、スキルを 身につけても、まだ働けるのに会社のほう が先に寿命がきてしまう。それは一生の間 に、いくつもの異なる分野で異なる能力を 発揮しなければならないという、まったく 新しい時代に生まれたことを意味する。 http://amazon.jp/dp/4062810530
  88. 88. 米デューク大教授のキャ シー・デビッドソン(63)によ ると、いま、小学校に入る子 供の65%は現在まだない職業 に就くという。 日本経済新聞 2013/01/28
  89. 89. http://www.w3.org/html/logo/
  90. 90. 狭義のHTML5 と 広義のHTML5
  91. 91. HTML5 = HTML5 + CSS + JS
  92. 92. 狭義 HTML5 = HTML5 + CSS + JS 広義
  93. 93. 狭義 マークアップ言語の仕様 従来のHTMLの改訂 HTML5 = HTML5 + CSS + JS 広義 新しいAPIも含まれる バズワード(マーケティング用語)
  94. 94. Khronos WebCL SMIL WebGL other WHATWG Canvas Multi Media HTML5 Forms HTML5 Parser HTML5 Offline Support Semantic Elements MicroData RDF Math ML Opus H.264 Web Audio Web RTC IETF Web Sockets ServerSent ev. Web Workers OGP RSS Orientation Web Sockets MP3 Webm SPDY XHR2 CSP ECMA Indexed DB Layout CSS3~ Trans form XPath Anim ation WOFF DOM4 Regions Net Info Flex Box Tel Radio NFC ECMA 6th Web SQL Media Queries Notification TCP Socket DNT FileAPI ECMA Script Web Storage WAIARIA HTML Schema .org Web Messaging Mouse, Key ev. W3C XHTML5 Geolocation SVG Vibration Device Storage File Sys USB Battery Status Proximity http://www.slideshare.net/dynamis/toward-firefox-os/26 より引用
  95. 95. Multi Media HTML5 Forms HTML5 Parser W3C Mouse, Key ev. HTML5 XHTML5 Semantic Elements Offline Support WAIARIA http://www.slideshare.net/dynamis/toward-firefox-os/22 より引用
  96. 96. 本日のコンテキスト HTML5 = HTML5 + CSS + JS これ
  97. 97. 本日のコンテキスト 最近では バズワードを 避けて、 HTML5 = HTML5 + CSS + JS 一部の人は Open Web Platform これと呼んでいる。
  98. 98. で、HTML5で 何ができるように なるの?
  99. 99. できることは これまでと 変わらない
  100. 100. これまで ブラウザで できなかったことが できるようになる だけ
  101. 101. 元々はWeb Pageを 閲覧するためのものだった ブラウザで、 Web Applicationを 実行できるように するために、 必要なものを追加
  102. 102. ( ・`ω・´)ドヤァ Typed Arrays ブラウザ上でバイナリデータを 操作できるようにしたよ 今まで出来なかったことがおかしい ('・ω・` ) ('・ω・` )
  103. 103. ( ・`ω・´)ドヤァ Web Audio API ブラウザ上で音声データを 操作・再生できるようにしたよ 今まで出来なかったことがおかしい ('・ω・` ) ('・ω・` )
  104. 104. ( ・`ω・´)ドヤァ Web Workers バッググランドで処理が できるようになったよ 今まで出来なかったことがおかしい ('・ω・` ) ('・ω・` )
  105. 105. ( ・`ω・´)ドヤァ CSS3 画像を使わなくても、 角丸・グラデーション使えるよ 今まで出来なかったことがおかしい ('・ω・` ) ('・ω・` )
  106. 106. SVG ( ・`ω・´)ドヤァ ベクターデータが 使えるようになったよ 今まで出来なかったことがおかしい ('・ω・` ) ('・ω・` )
  107. 107. ( ・`ω・´)ドヤァ (広義の)HTML5 色々できるようになったよ でも、まだまだ全然機能足りてないじゃん! ('・ω・` ) ('・ω・` )
  108. 108. 機能一覧だけ 見ていると 本質を見失う。
  109. 109. 機能一覧には 現れない HTML5の特徴
  110. 110. HTML5 OSの機能がブラウザ上で使える 低レイヤーのAPIがWeb APIで共通化 特許に制限されない 誰もが利用可能 Webプラットフォーム上で統合
  111. 111. OSの機能がブラウザ上で OSの機能が、ブラウザを介してサイト に提供される アドレス帳 ネットワーク情報 バッテリー状態 通知 ストリーム メディアデータ オーディオ ビデオ 字幕 Webカメラ マイク Audioの波形操作 2D(ラスター,ベクター) 3DCG 音声入力 音声合成 暗号化 ファイルシステム データベース スレッド 通信(WebSocket,TCP,UDP) Bluetooth 加速度センサ 傾きセンサ ジャイロ バイブレーション GPS 電子コンパス 温度センサ 湿度センサ 気圧センサ 環境光センサ 近接センサ 磁気センサ etc. ネット接続が前提のもの・仕様策定中のもの・WebOS向けのものも含まれています。
  112. 112. Web APIで共通化 低レイヤーのAPIがWeb APIで共通化 される OSに非依存 実行環境に基本的に非依存 環境による制限はありえる センサ未搭載・端末性能等の理由や用途による理由(例:電子書籍)等が 制限として考えられます。
  113. 113. 特許に制限されない Openであることが特徴 パテント・フリー ロイヤリティ・フリー いわゆる業界団体よりもオープン 仕様だけでなく策定過程も公開 特定の組織の利益よりも人類の利益を 市場原理に左右される側面もあり。理想と現実は違う...。
  114. 114. 誰もが利用可能 世界中の誰もが利用可能な機能 限られた組織の限られた人しか使えな い仕様はオープンではない 今も100年後も自由に使える 「古文書の一部が、DRMで保護され ていて見られない」のない未来に(電 子書籍の仕様にも関連しているため) DRMについての議論が始まったそうです。
  115. 115. Web P/F上で統合 これら全てが、OpenWebプラット フォーム上で統合 アイディア次第で新しい物が誰にでも 日曜プログラミングで音声合成 夏休みの宿題でビデオチャット作成 これらの知見はWeb上に蓄積
  116. 116. HTML5そのものの インパクト ポテンシャルを 最大限に発揮した場合を考察
  117. 117. 新しいレイヤーと 成りうるか 充分成りうる。 適度に抽象化されたAPI。 新興企業にとって魅力的。 既存企業も移らざるを得ない可能性。 機能面だけ見れば既存企業にとっても、 得意領域以外の機能が簡単に使える魅力。
  118. 118. IT業界への影響は? 多大。 これまでの常識、コンパイルが前提で 実行ファイルを売買が通用しない。 これまでも、スクリプト言語もあったが サーバサイド。 今後、コードのオープンが前提になる。 コンテンツ保護の議論、コードにはない。 コーデック等の特許も組み込めない。
  119. 119. 他業界への影響は? 多分多大。 破壊的イノベーションになる可能性。 既にITに巻き込まれているなら尚更。
  120. 120. プレイヤー 他業界との距離が接近する可能性。 IT系でも棲み分けが出来ていた 他分野とも距離が接近。 敷居が下がることで一般の人の参入も。
  121. 121. 壁 今後も国境を越えた競争。 言葉の壁は有り得る。 英語圏でシェアを取られると、 ネットワーク効果で 太刀打ちできなくなる。 これまで言語の壁で守られていたが、 今度はそれが仇に成りうる。
  122. 122. 開発スタイル コードが見られるため、 サービスのクローンが容易。 速く市場にリリースし、市場を握る事が これまで以上に重要に。 技術力よりもアイディア勝負。 (もちろん技術力も大事だが...)
  123. 123. IT史上最大の水平統合 オープンなレイヤー Open Web Platform
  124. 124. http://platform.html5.org/ より引用 (2013/04/04 版)
  125. 125. http://platform.html5.org/ より引用 (2013/04/04 版)
  126. 126. インパクトの強そうな 仕様の一部 WebSocket WebRTC Web Audio API WebGL
  127. 127. 休憩
  128. 128. インパクトの強そうな 仕様の一部 WebSocket WebRTC Web Audio API WebGL
  129. 129. WebSocket
  130. 130. WebSocket 高速・双方向通信 2つの仕様 WebSocket Protocol WebSocket API Cometよりも低負荷 <- 今回は詳細にはふれません
  131. 131. DEMO
  132. 132. 何故双方向通信が可能か FireWall NAT Proxy access access request Client response Server サーバ側から情報を送るには request/responseでないと届きにくい
  133. 133. 何故双方向通信が可能か GET / HTTP/1.1 Upgrade: websocket Connection: Upgrade (略) request handshake response Client HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade (略) Server HTTPでWebSocketのハンドシェイクを行なう 厳密にはHTTPと完全互換ではありません。
  134. 134. 何故双方向通信が可能か Switching Protocols request handshake response Client Server ハンドシェイク後、双方向通信が可能となる
  135. 135. 何故双方向通信が可能か request handshake response Client Server 切断しない限り、双方向通信が可能
  136. 136. 何故双方向通信が可能か 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
  137. 137. 何故高速通信が可能か ある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!
  138. 138. 何故高速通信が可能か WebSocketのHeader FIN RSV1 RSV2 RSV3 Opcode Mask Payload length Masking-key 1 1 1 1 4 1 7 0 bit bit bit bit bits bit bits, 7+16 bits, or 7+64 bits bytes or 4 bytes 2 14 Bytes
  139. 139. 何故高速通信が可能か 送信データが「Hello, world」の場合 HTTP 12 bytes + 400 bytes → 412 Bytes 97.1%がHeader WebSocket (Client => Server) 12 bytes + 6 bytes → 18 Bytes 33.3%がHeader
  140. 140. 何故高速通信が可能か 送信データが「Hello, world」の場合 HTTP 同じ文字列を → 412 Bytes 12 bytes + 400 bytes 97.1%がHeader 送信するために WebSocket (Client => Server) 約23倍の 12 bytes + 6 bytes → 18 Bytes データ量 33.3%がHeader
  141. 141. Cometよりも低負荷 今回は詳細にはふれません
  142. 142. SAMPLE
  143. 143. WebSocket Chat 作成 WebSocket Server node.js サーバサイドJavaScript ws WebSocketライブラリ) 以下はインストール済みとする nvm nodeのバージョン切り替えツール npm nodeのパッケージ管理ツール
  144. 144. node.jsとwsの セットアップ % % % % mkdir chat cd chat nvm use v0.10.21 npm install ws ←ディレクトリ作成 ←ディレクトリ移動 ←バージョン指定 ←wsインストール
  145. 145. サーバ側
  146. 146. 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
  147. 147. 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); }); WebSocket Serverクラス取得 }); ws.on('close', function() { clients = clients.filter(function(c) { return c !== ws; }); }); }); 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 Server
  148. 148. 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) { WebSocket Serverクラスの c.send(message); }); インスタンス化 }); ws.on('close', function() { (ポート番号8080) clients = clients.filter(function(c) { return c !== ws; }); }); }); 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 Server
  149. 149. 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
  150. 150. 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
  151. 151. 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
  152. 152. 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
  153. 153. 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
  154. 154. 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
  155. 155. 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
  156. 156. 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
  157. 157. クライアント側
  158. 158. Client <!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> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
  159. 159. Client <!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) { Script要素 document.getElementById('msg'); var msg = ws.send(msg.value); msg.value = ''; }, false); </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
  160. 160. Client <!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); WebSocketで接続 msg.value = ''; }, false); </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
  161. 161. Client <!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> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
  162. 162. Client <!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> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
  163. 163. Client <!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> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
  164. 164. Client <!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> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
  165. 165. Client <!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> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
  166. 166. WebSocket まとめ 高速・双方向通信 HTTPからSwitching Protocols HTTPSなら95%で接続可能 Headerが小さいことが高速通信の理 由のひとつ Cometよりも低負荷
  167. 167. WebRTC
  168. 168. WebRTC ボイス・ビデオチャット / P2P 2つの仕様 Media Capture and Streams (getUserMedia) WebRTC 1.0: Real-time Communication Between Browsers
  169. 169. Media Capture and Streams (getUserMesia) ブラウザからマイクやカメラにアクセス 利用範囲はWebRTC以外とも 音声処理(with Web Audio API) ボイスチェンジャー etc. 画像処理(with Canvas) 顔検出 etc. 顔認識ができるようになるのも時間の問題か?
  170. 170. DEMO
  171. 171. SAMPLE
  172. 172. <!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(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  173. 173. <!DOCTYPE html> <video id="video" /> <script> navigator.getUserMedia( {video: true, audio: true}, function(stream) { var video = document .getElementById('video'); ビデオ要素の表示と video.src = window.URL Script要素 .createObjectURL(stream); video.play(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  174. 174. <!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(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  175. 175. <!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(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  176. 176. <!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(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  177. 177. <!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(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  178. 178. <!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(); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  179. 179. WebRTC 1.0: Real-time Communication Between Browsers ブラウザとブラウザを接続 シグナリング SIP XMPP WebSocket etc. <- 今のところ一番使われている
  180. 180. DEMO
  181. 181. WebRTC 1.0: Real-time Communication Between Browsers NAT通過・ ネゴシエーション ICE(STUN + TURN + α) STUN P2P・UDPホールパンチング TURN サーバ経由
  182. 182. WebRTC 1.0: Real-time Communication Between Browsers データ通信 MediaStream 音声データ・映像データ DataChannel テキストデータ・バイナリデータ
  183. 183. Web Server HTML+JS+CSS HTML+JS+CSS ICE Server (STUN) Global IP/Port Global IP/Port WebSocket Server signaling NAT Browser signaling data NAT Browser
  184. 184. 別資料 WebRTC Data Black Magic P18 53 をご覧下さい https://speakerdeck.com/feross/webrtc-data-black-magic
  185. 185. WebRTC 1.0: Real-time Communication Between Browsers APIが複雑でわかりにくい 抽象化した仕様の多い HTML5のAPIの中では 非常に複雑
  186. 186. WebRTC まとめ ボイス・ビデオチャットが可能 テキスト・バイナリの通信も可能 P2P NAT通過の仕組み APIが複雑 ライブラリを使うという選択肢も 定番と言われるようなライブラリはまだありません。
  187. 187. Web Audio API
  188. 188. Web Audio API オーディオ波形操作 フィルタリング ミキシング 加工 動的に波形を生成することも可能 SE等の短い音声に特に威力を発揮
  189. 189. 音声処理の種類 双2次フィルタ ローパスフィルタ ハイパスフィルタ バンドパスフィルタ ウェーブシェイパー コンボルバ(畳み込み) リバーブ(残響) ディレイ(遅延) ローシェフフィルタ ハイシェフフィルタ ダイナミックコンプレッサー ピーキングフィルタ ゲイン ノッチフィルタ オールパスフィルタ
  190. 190. in/out間をノードで接続 input Echo Delay 0.2s Gain 20% output
  191. 191. in側とout側の種類 input output マイク スピーカー MediaStream MediaStream バイナリデータ オシレータ Audio要素 Video要素
  192. 192. プログラマブル ScriptProcessorNode inputとoutputの両方で使える input and/or output input例 getUserMediaから取得した音声を加工 WebRTCで取得した遠隔地の音声を解析 output例 ゼロから音声データの生成が可能
  193. 193. 解析 output 加工 input 生成
  194. 194. 音源とリスナーを 3D空間上に PannerNode・AudioListener 音源とリスナーを3D空間上に配置 音源の方向・移動速度も指定可能 左右の音量差・ドップラー効果等 WebGLと同時によく使われる OpenALに近い
  195. 195. ◎ ◎ ◎ 音源とリスナーを 3D空間上に
  196. 196. 音源とリスナーを 3D空間上に ◎ ◎ ◎ 左右スピーカーの 音量の差 ドップラー効果
  197. 197. SAMPLE
  198. 198. <!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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  199. 199. <!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); Script要素 delay.connect(gain); gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  200. 200. <!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); AudioContextクラスの source.connect(delay); delay.connect(gain); インスタンス化 gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  201. 201. <!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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  202. 202. <!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); ゲイン(音量調整)に20%を指定 source.connect(delay); delay.connect(gain); ディレイ(遅延)に0.2秒を指定 gain.connect(context.destination); gain.connect(delay); } ); </script> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  203. 203. <!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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  204. 204. <!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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  205. 205. <!DOCTYPE html> <script> var context = new AudioContext(); var gain = context.createGainNode(); メディアストリームから var delay = context.createDelayNode(); gain.gain.value = 0.2; Web Audio APIのオブジェクトを作成 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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  206. 206. <!DOCTYPE html> <script> 第一のルート var context = new AudioContext(); var gain = context.createGainNode(); source(インプット)を var delay = context.createDelayNode(); gain.gain.value = 0.2; destination(アウトプット)に接続 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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  207. 207. <!DOCTYPE html> <script> 第二のルート var context = new AudioContext(); var gain = context.createGainNode(); source・ディレイ・ゲイン・ var delay = context.createDelayNode(); gain.gain.value = 0.2; destinationの順に接続 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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  208. 208. <!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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  209. 209. <!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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  210. 210. Web Audo API まとめ ノードを接続し処理を行なう 多数のinput/output 音声データの編集ができる JavaScriptで直接編集も可能 3D空間にも対応
  211. 211. WebGL
  212. 212. WebGL 3DグラフィックのAPI OpenGLのサブセット的な位置付け GPUを利用する 互換レイヤーを挟んでいる DirectX(Windows)でも利用可能 GLSLの知識が必要で非常に高難度
  213. 213. three.js デファクトスタンダードのライブラリ WebGL界のjQuery 3DCDの知識があればハードルは低い CSS3D等のレンダラーも選択可能
  214. 214. geometry 環境光の色 ハイライトの色 mesh テクスチャ 透明度・屈折率 etc. material
  215. 215. 環境光の色 遠景の処理 etc. mesh camera light
  216. 216. geometry(形状) テキスト 円 円環体(トーラス) リング等 四面体 平面 八面体 立方体 二十面体 円柱 多面体 チューブ パラメトリック曲線 球体 etc.
  217. 217. material 物体の色 ハイライトの色 ハイライトの大きさ map テクスチャ画像 バンプ(表面の凹凸) 発光色 画像 金属か否か スケール 環境光の色 屈折率 透明度 環境マッピング(擬似的 な背景) etc.
  218. 218. scene & etc. カメラ ライト(照明) 環境光 メッシュ フォグ パーティクル レンズフレア レンダラー 選択可能 ピッキング マウスによる選択等 軌道制御 マウスでカメラ移動 ポストプロセス etc.
  219. 219. SAMPLE
  220. 220. <!DOCTYPE html> <div id="disp"></div> <script src="three.min.js"></script> <script> // next slide... </script> 表示と three.jsの読み込みと Script要素 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
  221. 221. 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);
  222. 222. 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);
  223. 223. 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}); 描画領域をDOMに追加 var mesh = new THREE.Mesh(geometry, material); var scene = new THREE.Scene(); scene.add(light); scene.add(mesh); renderer.render(scene, camera);
  224. 224. 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);
  225. 225. 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);
  226. 226. 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);
  227. 227. 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);
  228. 228. 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);
  229. 229. 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(); シーンに追加= new THREE.Vector3(0, 0, 8); camera.position 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);
  230. 230. 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);
  231. 231. 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);
  232. 232. WebGL まとめ OpenGLのサブセット GPUを利用 Windowsでも使える GLSLは難解 three.jsを使おう
  233. 233. Combination
  234. 234. APIを組み合わせて使う 色々 見てみよう!
  235. 235. HTML5の効能 Webプラットフォーム上 組み合わせて使いやすい APIが適度に抽象化されている 一部例外あり やりたい事が簡単にできる 参入障壁が非常に低い 今後はアイディアが重要に...?
  236. 236.
  237. 237. 質疑応答 もう一度聞きたいところはありますか? もっと詳しく聞きたいところはありますか?
  238. 238. ご清聴 ありがとう ございました
  239. 239. 付録
  240. 240. WebSocket WebRTC getUserMedia An AR Game https://developer.mozilla.org/ja/demos/detail/an-ar-game/launch 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 WebGL 3D Interactive Asteroid Space Visualization - Asterank http://www.asterank.com/3d/ +360º - Car Visualizer - Three.js http://carvisualizer.plus360degrees.com/threejs/ Aquarium http://webglsamples.googlecode.com/hg/aquarium/aquarium.html Water/Ocean http://oos.moxiecode.com/js_webgl/water_noise/ Epic Citadel http://www.unrealengine.com/html5/ Combination Chrome World Wide Maze for Machine http://chrome.com/maze/ for Android http://g.co/maze Cube Slam https://www.cubeslam.com/

×