HTML5の基礎と応用
Open Web Platform
WebSocket / WebRTC / Web Audio API / WebGL
2014/06/27
金城 雄
NTTアドバンステクノロジ
情報機器テクノロジセンタ所属
http...
この資料は、先のスライドを見られない事
を前提に書かれています。
発表内容も同様です。
できれば、このままそっと閉じて下さい。
もちろん、文字が小さい・画面が見えない
等であれば見て頂いて構いません。
この資料を
手元に持っている人へ
N
O
...
内容
HTML5の概要
休憩
HTML5のAPI 2つ (デモ込み)
時間があれば休憩
HTML5のAPI 2つ (デモ込み)
HTML5のAPIの組み合わせ (デモ込み)
前半
イノベーションを振り返る/HTML5のもたらす世界
HTML5とはいったい何?何が変わるの?この新たなイノ
ベーションを知るにあたり、これまで発生してきた様々な
技術革新と、その結果何が起こったのか?について振り返
ります。さらに、過去の...
後半
HTML5 インパクトの強そうな技術紹介
後半のセッションでは、HTML5の中でも特にインパクト
の強そうな「WebSocket」「WebRTC」「Web
Audio API」「WebGL」について、これらの技術概
要、仕様、用途、プログ...
デモ参加のお願い
IN
FO
R
M
A
T
IO
N
IN
FO
R
M
A
T
IO
N
WebSocketのデモです。
スマートフォンをご準備下さい。
参加型デモ1
IN
FO
R
M
A
T
IO
N
IN
FO
R
M
A
T
IO
N
iOS
Safari
Android
Chrome
Firefox
Opera
WebRTCのデモです。
カメラ付きの端末でお願いします。
参加型デモ2
IN
FO
R
M
A
T
IO
N
IN
FO
R
M
A
T
IO
N
Android
パソコン
できるだけ
新しい
Chrome
機能一覧が
何度か
出てきますが
全ての機能を
網羅していません。
新しい仕様が今も増え続けています。
C
A
U
T
IO
N
C
A
U
T
IO
N
HTML5前史
所属会社や
所属部署・業務
全て忘れて下さい。
C
A
U
T
IO
N
C
A
U
T
IO
N
注意
HTML5の
インパクトを
理解するために
しばらく
お付き合い下さい。
かなりの量に
なりますが
これでも相当
絞りました。
細部に
間違いが
含まれている
可能性があります。
他分野の
イノベーションを
大局的に振り返る。
イノベーションが
人々の生活に
与えた影響
ハンス・ロスリングと
魔法の洗濯機
http://www.ted.com/talks/hans_rosling_and_the_magic_washing_machine
Hans Rosling:
The magic washing mach...
三種の神器と炊飯器
http://www.rekishikan.museum.ibk.ed.jp/10_kanndayori/documents/suihannki.pdf
三種の神器と炊飯器
http://www.rekishikan.museum.ibk.ed.jp/10_kanndayori/documents/suihannki.pdf
イノベーションが
人々の
可処分時間を
増やした
イノベーションの
別の側面
20世紀後半
荷役・湾岸労働者
古くは沖仲仕(おきなかし/おきなかせ)と言っていましたが、
現在では差別用語として扱われるそうです。
http://en.wikipedia.org/wiki/Stevedore
http://en.wikipedia.org/wiki/File:Hafenarbeiter_bei_der_Verladung_von_Sackgut_-
_MS...
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:Panama_Canal_Railway_-_Containe...
流通革命
ISBN : 978-4822245641
http://amazon.jp/dp/4822245640
巨大なコンテナ
専用船の荷役は、
半世紀前の小さな
在来船と比べ、
人手も時間も
六〇分の一で済む。
コンテナリゼーションは
多くの荷役の職を奪った。
坑夫
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-Jobs-
dead-at-56.html
破壊的イノベーション
最初期から
真っ当に
評価されていたか
世界で最初の
デジタルカメラ
http://www.flickr.com/photos/x1brett/4928370431/
http://www.digitaltrends.com/photography/two-pioneers-of-digital-photography-
honored-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)
セキュリティ技術は用途が違うため、珍しい事例には含みません。
ネットオークションに
出品する一般消費者と
競争することになった。
リサイクルショップ
昔は山の向こうは別の市場。
交通網の発達は
物理的制約の緩和。
市場は吸収されるか
結合する。
流通
市町村変遷パラパラ地図より島嶼部と地図外文字を削除して引用
http://mujina.sakura.ne.jp/history/
交通網以外の理由もあります。傾向としてみて下さい。
2001年
01月21日
1889年
05月01日
市町村変遷パラパラ地図より島嶼部と地図外文字を削除して引用
http://mujina.sakura.ne.jp/history/
交通網以外の理由もあります。傾向としてみて下さい。
2001年
01月21日
市町村変遷パラパラ地図より島嶼部と地図外文字を削除して引用
http://mujina.sakura.ne.jp/history/
交通網以外の理由もあります。傾向としてみて下さい。
1889年
05月01日
特別なことではない。
これまでの延長上の事象。
但し、交通網だけでなく
通信網も制限緩和に関与。
グローバル化
言葉の壁はまだありますが...。
水平統合
と
垂直統合
水平統合され
主戦場が
ひとつ上のレイヤーに
移動すると
その分野の勢力図を
一旦リセットする
ことがある。
Windows登場以前と
登場以後とでは
市場のプレイヤーが
大きく違う。
例
レイヤーが変わると
群雄割拠に。
市場は混沌とするが
やがてプレイヤーは
淘汰されていく。
既存企業は
参加するかどうかの
選択が迫られる。
新レイヤーは
主戦場となるのか。
コモディティ化しないか。
革新により
制限が取り払われた場合。
ビジネスのルールが変わる。
それまでの常識が
通用しないことも。
ひとつの経済圏・分野の
プレイヤー数
淘汰後は
3 10前後 or 1
市場は健全である事が多い。
囲い込みで垂直統合を計るが
上手くいかないことが多い。
不便さは上のレイヤーの
水平統合の遠因にも。
3 10前後
ポイントカード
他企業も真似するのですぐに横並びに。
電話料金
価格競争からLCRにレイヤーが変化。
その後、マイライン・IP電話...
プロプライエタリなら独占。
独占した上のレイヤーも
圧勝することが多い。
(ソフトウェア分野は特に。)
発展の速度が遅くなる。
思わぬ所から独占が崩れる。
1
IBM互換機 (PC/AT互換機)
ハードからソフトへの
主戦場の変化を見誤る。
PC-98
国内独占。Windowsの来襲による没落。
Windows
上位のオフィススイートとブラウザも独占。
別カテゴリのOS台頭と
上位レイヤーの標準化で....
まずない。
A < B + C である限り
どこかが
キャスティングボードを
握る。
2は?
ネットワーク効果
ネットワーク効果とは、同じ製品・サービ
スを利用するユーザが増えると、それ自体
の効用や価値が高まる効果のこと。
ネットワーク外部性・バンドワゴン効果
ロックイン効果
ロックイン効果とは、顧客(ユーザ)があ
る商品を購入すると...
人為的なロックイン効果。
IT業界的には
ベンダーロックとも。
同時にネットワーク効果を
狙う事も。
囲い込み戦略
業界を破壊する革新が存在する。
革新は最初は低機能に見える。
革新は業界の発展に寄与。
業界に必要な制限を解決することも。
革新が起こった業界ではなく
他業界を破壊する事も。
ここまでのまとめ1
革新は市場を統合することがある。
グローバル化もその一貫でしかない。
水平統合と垂直統合は繰り返されている。
水平統合されると群雄割拠。
やがて収束し垂直統合。
既存企業も否応なく巻き込まれる。
ここまでのまとめ2
ここまでを
復習しながら
もう一段階
広い視点で!
ところで
グローバル化って?
https://www.flickr.com/photos/suewaters/7564724934
https://www.flickr.com/photos/xlibber/2962488972
https://www.flickr.com/photos/simonehudson/1353033710
World?
開発援助委員会(DAC : Development Assistance Committee)
http://en.wikipedia.org/wiki/Development_Assistance_Committee
http:...
World!
開発援助委員会(DAC : Development Assistance Committee)
http://en.wikipedia.org/wiki/Development_Assistance_Committee
http:...
こう語る人が多い...
開発援助委員会(DAC : Development Assistance Committee)
http://en.wikipedia.org/wiki/Development_Assistance_Committee
...
https://www.flickr.com/photos/shawnleishman/2349218847
https://www.flickr.com/photos/ianz/3988940325
https://www.flickr.com/photos/69583224@N05/7386519508
https://www.flickr.com/photos/jmenj/9460355596
https://www.flickr.com/photos/69583224@N05/8140823868
The Next Billion
次の10億人
The Next 4 Billion
次の40億人
BOP : Base of the Pyramid
一人当たり年間所得が
2002年購買力平価で
3,000ドル以下の階層であり、
全世界人口の約7割である
約40億人が属するとされる。
BOP層
Bottom of the Pyramid
Base of the Pyramid
Base of...
コモディディ化
家電の
コモディディ化
三種の神器と炊飯器
http://www.rekishikan.museum.ibk.ed.jp/10_kanndayori/documents/suihannki.pdf
当時の値段と収入
http://www.rekishikan.museum.ibk.ed.jp/10_kanndayori/documents/suihannki.pdf
電機洗濯機
日立製作所製
昭和32年製造
販売価格
23,000円
白黒...
当時の値段と収入
http://www.stat.go.jp/data/kakei/longtime/
http://www.rekishikan.museum.ibk.ed.jp/10_kanndayori/documents/suihann...
現在の値段と収入
http://www.stat.go.jp/data/kakei/longtime/
値段は https://www.amazon.co.jp/ の各カテゴリの最人気商品(2014/04/15現在) ※ 最安商品ではない
電機...
ICTの
コモディディ化
携帯電話人口 ??? 億人
インターネット人口 ??? 億人
ブロードバンド人口 ??? 億人
世界のICT市場
http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html
総務省 情報...
携帯電話人口 53.6 億人
インターネット人口 ??? 億人
ブロードバンド人口 ??? 億人
世界のICT市場
http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html
総務省 情...
携帯電話人口 53.6 億人
インターネット人口 20.3 億人
ブロードバンド人口 ??? 億人
世界のICT市場
http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html
総務省 ...
携帯電話人口 53.6 億人
インターネット人口 20.3 億人
ブロードバンド人口 5.2 億人
世界のICT市場
http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html
総務省 ...
携帯電話人口 7.2 億人 ⇒ 53.6 億人
インターネット人口 3.9 億人 ⇒ 20.3 億人
ブロードバンド人口 0.2 億人 ⇒ 5.2 億人
2000年 ⇒ 2010年
http://www.soumu.go.jp/johotsus...
https://www.flickr.com/photos/kiwanja/3170269018
https://www.flickr.com/photos/iicd/8244401384
https://www.flickr.com/photos/kiwanja/3170258578
http://en.wikipedia.org/wiki/Internet_access
http://en.wikipedia.org/wiki/File:Ghana_satellite.jpg
https://www.flickr.com/photos/87913776@N00/305425495
https://www.flickr.com/photos/kiwanja/3170244160
スマートフォンの
コモディディ化
https://www.flickr.com/photos/whiteafrican/3401121885/
Android
HuaweiのIDEOSを
ケニアのSafaricomが
80ドルで発売 (2011年)
Firefox OS
新興国市場向けの端末を発表 (2014年)
25ドルのスマートフォン向けの
チップセットを発表 (2014年)
洗濯機
79% (23,000円)
テレビ
199% (58,000円)
冷蔵庫
214% (62,500円)
炊飯器
15% (4500円)
収入に対する比率
日本 (1955年)
世帯あたりの所得
29,169円/月
製品の性質は
一世帯に...
Android
32% (80ドル)
Firefox OS
10% (25ドル)
収入に対する比率
BOP層 (3000ドル以下/年)
一人あたりの所得
250ドル以下/月
製品の性質は
ひとりに一台
Android
32% (80ドル)
Firefox OS
10% (25ドル)
洗濯機
79% (23,000円)
テレビ
199% (58,000円)
冷蔵庫
214% (62,500円)
炊飯器
15% (4500円)
収入に対する比率
...
インターネットへの
アクセス手段
スマートフォンは
インターネットに
アクセスする手段のひとつ
アクセス手段
スマートフォンは
インターネットに
アクセスする手段のひとつ
アクセス手段
本当?
スマートフォンは
インターネットに
アクセスする唯一の手段
アクセス手段
スマートフォンは
インターネットに
アクセスする唯一の手段
アクセス手段
こういう人が
多数派に
なるのでは?
ここまでの参考資料
と
没にしたスライドの一部
ISBN : 978-4822245641
http://amazon.jp/dp/4822245640
コンテナ
物語
世界を変えたのは
「箱」の発明だった
ISBN : 978-4798100234
http://amazon.jp/dp/4798100234
http://www.seshop.com/product/detail/2241
イノベーシ
ョンの
ジレンマ
技術革新が
巨大企業を滅...
http://www.wri.org/sites/default/files/pdf/
n4b-j.pdf
THE NEXT
4 BILLION
次なる40億人
ピラミッドの
底辺(BOP)の
市場規模と
ビジネス戦略
THENEXT4BILLI...
ISBN : 978-4062810531
http://amazon.jp/dp/4062810530
父の子供時代には、会社の寿命は60年と
いわれていた。ところが1970年代に入
ると会社の寿命は30年になり、現在では
15年になってしま...
米デューク大教授のキャシ
ー・デビッドソン(63)による
と、いま、小学校に入る子供
の65%は現在まだない職業に
就くという。
日本経済新聞 2013/01/28
http://www.w3.org/html/logo/
狭義のHTML5
と
広義のHTML5
HTML5 = HTML5 + CSS + JS
HTML5 = HTML5 + CSS + JS
広義
狭義
HTML5 = HTML5 + CSS + JS
広義
狭義 マークアップ言語の仕様
従来のHTMLの改訂
新しいAPIも含まれる
バズワード(マーケティング用語)
Semantic
Elements
Multi
Media
Canvas
HTML5
Forms
Offline
Support
Webm
H.264
Micro-
Data
WebGL
Web
SQL
Indexed
DB
SVG
Server-...
http://www.slideshare.net/dynamis/toward-firefox-os/22 より引用
Semantic
Elements
Multi
Media
HTML5
Forms
Offline
SupportHTML5HTM...
HTML5 = HTML5 + CSS + JS
本日のコンテキスト
これ
HTML5 = HTML5 + CSS + JS
本日のコンテキスト
これ
最近では
バズワードを避けて
一部の人は
OpenWebPlatform
と呼んでいる。
で、HTML5で
何ができるように
なるの?
できることは
これまでと
変わらない
これまで
ブラウザで
できなかったことが
できるようになる
だけ
browse / braʊz /
1 【本雑誌などを】拾い読みする; 立ち読みする.
2 インターネット (ブラウザを使って)閲覧する.
3 (店で)商品を眺めて見て回る.
4 〈家畜が〉【草葉などを】食べる.
ウィズダム英和辞典 OS X M...
元々はWeb Pageを
閲覧するためのものだった
ブラウザで、
Web Applicationを
実行できるように
するために、
必要なものを追加
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
Typed Arrays
ブラウザ上でバイナリデータを
操作できるようにしたよ
今まで出来なかったことがおかしい
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
Web Audio API
ブラウザ上で音声データを
操作・再生できるようにしたよ
今まで出来なかったことがおかしい
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
Web Workers
バッググランドで処理が
できるようになったよ
今まで出来なかったことがおかしい
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
CSS3
画像を使わなくても、
角丸・グラデーション使えるよ
今まで出来なかったことがおかしい
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
SVG
ベクターデータが
使えるようになったよ
今まで出来なかったことがおかしい
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
(広義の)HTML5
色々できるようになったよ
でも、まだまだ全然機能足りてないじゃん!
よくある会話
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
HTML5って
最近騒がれているけど
何が凄いの?
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
これこれ
こういうことが
できるようになるんです。
( ・`ω・´)ドヤァ
('・ω・` ) ('・ω・` )
今までもできたよね。
何も目新しくないよね?
機能一覧だけ
見ていると
本質を見失う。
(機能一覧を)
見るんじゃない!
(本質を)
感じるんだ!
DON'T LOOK, FEEL!
https://www.flickr.com/photos/juanma/2929703890
機能一覧には
現れない
HTML5の特徴
HTML5
OSの機能がブラウザ上で使える
低レイヤーのAPIがWeb APIで共通化
特許に制限されない
誰もが利用可能
Webプラットフォーム上で統合
Mobile OSのAppが作成可能
OSの機能がブラウザ上で
OSの機能が、ブラウザを介してサイト
に提供される
アドレス帳 ネットワーク情報 バッテリー状態 通知
ストリーム メディアデータ オーディオ ビデオ 字幕
Webカメラ マイク Audioの波形操作
2D(ラスター,...
Web APIで共通化
低レイヤーのAPIがWeb APIで共通化
される
OSに非依存
実行環境に基本的に非依存
環境による制限はありえる
センサ未搭載・端末性能等の理由や用途による理由(例:電子書籍)等が
制限として考えられます。
特許に制限されない
Openであることが特徴
パテント・フリー
ロイヤリティ・フリー
いわゆる業界団体よりもオープン
仕様だけでなく策定過程も公開
特定の組織の利益よりも人類の利益を
市場原理に左右される側面もあり。理想と現実は違う...。
誰もが利用可能
世界中の誰もが利用可能な機能
限られた組織の限られた人しか使えな
い仕様はオープンではない
今も100年後も自由に使える
「古文書の一部が、DRMで保護され
ていて見られない」のない未来に(電
子書籍の仕様にも関連しているため)...
Web P/F上で統合
これら全てが、OpenWebプラットフ
ォーム上で統合
アイディア次第で新しい物が誰にでも
日曜プログラミングで音声合成
夏休みの宿題でビデオチャット作成
これらの知見はWeb上に蓄積
Mobile OSとの関係
iOS
Android
Native Appが基本
UIWebView/WebViewを使ってできなくはない
HTML5で記述し、両OSを含む複数のOS向けのApp
に加工するApache Cordovaというツール...
2大勢力を追う第3勢力
Firefox OS
Windows Phone
Ubuntu Touch
TIZEN Mobile
BlackBerry
第3勢力のApp作成手段
HTML5でNative Appを作成HTML5でNative Appを作成
Native Appあり HTML5でも可能
Native Appあり HTML5でも可能
Native Appあり HTML5でも可能
N...
HTML5そのものの
インパクト
ポテンシャルを
最大限に発揮した場合を考察
充分成りうる。
適度に抽象化されたAPI。
新興企業にとって魅力的。
既存企業も移らざるを得ない可能性。
機能面だけ見れば既存企業にとっても、
得意領域以外の機能が簡単に使える魅力。
新しいレイヤーと
成りうるか
多大。
これまでの常識、「コンパイルが前提で
実行ファイルを売買」が通用しない。
これまでも、スクリプト言語もあったが
サーバサイド。
今後、コードのオープンが前提になる。
IT業界への影響は?
多分多大。
破壊的イノベーションになる可能性。
既にITに巻き込まれているなら尚更。
他業界への影響は?
他業界との距離が接近する可能性。
IT系内でも棲み分けが出来ていた
他の分野とも距離が接近。
敷居が下がることで一般の人の参入も。
プレイヤー
今後も国境を越えた競争。
言葉の壁は有り得る。
英語圏でシェアを取られると、
ネットワーク効果で
太刀打ちできなくなる。
これまで言語の壁で守られていたが、
今度はそれが仇に成りうる。
壁
コードが見られるため、
サービスのクローンが容易。
速く市場にリリースし、市場を握る事が
これまで以上に重要に。
技術力よりもアイディア勝負。
(もちろん技術力も大事だが...)
開発スタイル
IT史上最大の水平統合
オープンなレイヤー
Open Web Platform
http://platform.html5.org/ より引用 (2013/04/04 版)
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
何故双方向通信が可能か
サーバ側から情報を送るには
request/responseでないと届きにくい
Client Server
request
response
FireWall
NAT
Proxy
access
access
何故双方向通信が可能か
HTTPでWebSocketのハンドシェイクを行なう
Client Server
request
response
GET / HTTP/1.1
Upgrade: websocket
Connection: Upgrad...
何故双方向通信が可能か
ハンドシェイク後、双方向通信が可能となる
Client Server
request
response
handshake
Switching
Protocols
何故双方向通信が可能か
切断しない限り、双方向通信が可能
Client Server
request
response
handshake
何故双方向通信が可能か
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 1 bit
RSV1 1 bit
RSV2 1 bit
RSV3 1 bit
Opcode 4 bits
Mask 1 bit
Payload length 7 bits, 7+1...
何故高速通信が可能か
送信データが「Hello, world」の場合
HTTP
12 bytes + 400 bytes → 412 Bytes
97.1%がHeader
WebSocket (Client => Server)
12 byte...
何故高速通信が可能か
送信データが「Hello, world」の場合
HTTP
12 bytes + 400 bytes → 412 Bytes
97.1%がHeader
WebSocket (Client => Server)
12 byte...
Cometよりも低負荷
今回は詳細にはふれません
Comet
Ajax(XHR)
による
long
polling
=
SAMPLE
WebSocket Server
node.js サーバサイドJavaScript
ws WebSocketライブラリ
以下はインストール済みとする
nvm nodeのバージョン切り替えツール
npm nodeのパッケージ管理ツール
WebSo...
% mkdir chat ←ディレクトリ作成
% cd chat ←ディレクトリ移動
% nvm use v0.10.21 ←バージョン指定
% npm install ws ←wsインストール
node.jsと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...
クライアント側
<!DOCTYPE html>
<input id="msg" />
<input type="button" value="send" id="send" />
<div id="disp"></div>
<script>
var ws = ...
<!DOCTYPE html>
<input id="msg" />
<input type="button" value="send" id="send" />
<div id="disp"></div>
<script>
var ws = ...
<!DOCTYPE html>
<input id="msg" />
<input type="button" value="send" id="send" />
<div id="disp"></div>
<script>
var ws = ...
<!DOCTYPE html>
<input id="msg" />
<input type="button" value="send" id="send" />
<div id="disp"></div>
<script>
var ws = ...
<!DOCTYPE html>
<input id="msg" />
<input type="button" value="send" id="send" />
<div id="disp"></div>
<script>
var ws = ...
<!DOCTYPE html>
<input id="msg" />
<input type="button" value="send" id="send" />
<div id="disp"></div>
<script>
var ws = ...
<!DOCTYPE html>
<input id="msg" />
<input type="button" value="send" id="send" />
<div id="disp"></div>
<script>
var ws = ...
<!DOCTYPE html>
<input id="msg" />
<input type="button" value="send" id="send" />
<div id="disp"></div>
<script>
var ws = ...
WebSocket まとめ
高速・双方向通信
HTTPからSwitching Protocols
HTTPSなら95%で接続可能
Headerが小さいことが高速通信の理
由のひとつ
Cometよりも低負荷
WebRTC
WebRTC
リアルタイムコミュニケーションのAPI
ボイス・ビデオチャット
P2P
http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 より引用
キャリア型通信
手段の例
市場
ユーザ
メリット
事業者
メリット
利用方法
固定電話 携帯電話 (TV放送)
インフラを持つキャリアが支配
世界中の人と会話できる
×
単独で利用
http://www.slideshare.net/mgane...
Over The Top
手段の例
市場
ユーザ
メリット
事業者
メリット
利用方法
Skype, WebEx
(YouTube, Ustream)
キャリアに縛られない独自の仕組みを
提供する少数のベンダーが参加可能
世界中の人と無料/安価...
Webブラウザ型
手段の例
市場
ユーザ
メリット
事業者
メリット
利用方法
WebRTC
特別な仕組みは不要
誰でも参加可能
専用アプリ無しで会話できる
完全にプログラマブル部品として
利用可能
製品/サービスに組み込んで利用
http:/...
キャリア型通信 Over The Top Webブラウザ型
手段の例
市場
ユーザ
メリット
事業者
メリット
利用方法
固定電話
携帯電話
(TV放送)
Skype, WebEx
(Youtube,
Ustream)
WebRTC
インフラを...
WebRTC
2つの仕様
Media Capture and Streams
(getUserMedia)
WebRTC 1.0: Real-time
Communication Between
Browsers
Media Capture and Streams
(getUserMedia)
ブラウザからマイクやカメラにアクセス
利用範囲は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},
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...
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
SDP
セッション開始に必要な情報を記述
DTLS
UDP版TLS
WebRTC 1.0: Real-time
Communication Between
Browsers
データ通信
DTLSで全て暗号化される
MediaStream (SRTP・SRTCP)
音声データ・映像データ
DataChannel ...
WebRTC 1.0: Real-time
Communication Between
Browsers
SRTP・SRTCP
リアルタイムデータ転送プロトコル
SCTP
TCPに似たプロトコル
設定で、信頼性と引き換えにリアルタ
イム性の向上...
Web Server
WebSocket
Server
ICE Server
(STUN)
Browser Browser
NAT NAT
HTML+JS+CSS
Global IP/Port
signaling
HTML+JS+CSS
Glo...
WebRTCData
BlackMagic
別資料
https://speakerdeck.com/feross/webrtc-data-black-magic
P18 53 をご覧下さい
WebRTC 1.0: Real-time
Communication Between
Browsers
APIが複雑でわかりにくい
抽象化した仕様の多い
HTML5の他のAPIと比べると
非常に複雑
それでも、従来のリアルタイム通信の
処理よ...
WebRTC まとめ1
シグナリング経路が別途必要
NAT通過の仕組みがある
P2Pでセキュアに通信
ボイス・ビデオチャットが可能
テキスト・バイナリの通信も可能
WebRTC まとめ2
APIが複雑
ライブラリを使うという選択肢も
特に面倒な部分はブラウザが処理
ジッタ・パケットロス等の対策
メディアの最適化等も
定番と言われるようなライブラリはまだありません。
Web Audio API
Web Audio API
オーディオ波形操作
フィルタリング
ミキシング
加工
動的に波形を生成することも可能
SE等の短い音声に特に威力を発揮
DEMO
音声処理の種類
ウェーブシェイパー
コンボルバ(畳み込み)
リバーブ(残響)
ディレイ(遅延)
ダイナミックコンプレッサー
ゲイン
双2次フィルタ
ローパスフィルタ
ハイパスフィルタ
バンドパスフィルタ
ローシェフフィルタ
ハイシェフフィルタ
...
in/out間をノードで接続
outputinput Echo
Delay
0.2s
Gain
20%
in側とout側の種類
input
マイク
MediaStream
バイナリデータ
オシレータ
Audio要素
Video要素
output
スピーカー
MediaStream
プログラマブル
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 = 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...
Web Audo API まとめ
ノードを接続し処理を行なう
多数のinput/output
音声データの編集ができる
JavaScriptで直接編集も可能
3D空間にも対応
WebGL
WebGL
3DグラフィックのAPI
OpenGLのサブセット的な位置付け
GPUを利用する
互換レイヤーを挟んでいる
DirectX(Windows)でも利用可能
GLSLの知識が必要で非常に高難度
DEMO
three.js
デファクトスタンダードのライブラリ
WebGL界のjQuery
3DCDの知識があればハードルは低い
CSS3D等のレンダラーも選択可能
geometry
mesh
環境光の色
ハイライトの色
テクスチャ
透明度・屈折率 etc. material
mesh
環境光の色
遠景の処理 etc.
light
camera
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>
解説用に書いた問題のあ...
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を組み合わせて使う
色々
見てみよう!
DEMO
HTML5の効能
Webプラットフォーム上
組み合わせて使いやすい
APIが適度に抽象化されている
一部例外あり
やりたい事が簡単にできる
参入障壁が非常に低い
今後はアイディアが重要に...?
完
質疑応答
もう一度聞きたいところはありますか?
もっと詳しく聞きたいところはありますか?
最期に
ちょっとだけ...
人間はなぜ、
学ばなければならないのでしょう?
人間は一生、学び続けるべきです。
人間には好奇心、知る喜びがある。
肩書きや、出世して大臣になるために、
学ぶのでないのです……。
では、なぜ学び続けるのでしょう?
…………
それが人間の使命だか...
ご清聴
ありがとう
ございました
付録
付録1
WebSocket
WebRTC
getUserMedia
An AR Game
https://developer.mozilla.org/ja/demos/detail/an-ar-game/launch
Facetracking ...
付録2
WebGL
3D Interactive Asteroid Space Visualization - Asterank
http://www.asterank.com/3d/
+360º - Car Visualizer - Thre...
付録3
Combination
Color Monoliths
https://github.com/youkinjoh/color-monoliths
VCMap - Video Chat on The Map
http://vcmap.ne...
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版
Upcoming SlideShare
Loading in...5
×

HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版

7,609

Published on

Published in: Technology

HTML5の基礎と応用 ~Open Web Platform~ WebSocket / WebRTC / Web Audio API / WebGL 第三版

  1. 1. HTML5の基礎と応用 Open Web Platform WebSocket / WebRTC / Web Audio API / WebGL 2014/06/27 金城 雄 NTTアドバンステクノロジ 情報機器テクノロジセンタ所属 http://www.ntt-at.co.jp/ 第三版
  2. 2. この資料は、先のスライドを見られない事 を前提に書かれています。 発表内容も同様です。 できれば、このままそっと閉じて下さい。 もちろん、文字が小さい・画面が見えない 等であれば見て頂いて構いません。 この資料を 手元に持っている人へ N O T IC E N O T IC E
  3. 3. 内容 HTML5の概要 休憩 HTML5のAPI 2つ (デモ込み) 時間があれば休憩 HTML5のAPI 2つ (デモ込み) HTML5のAPIの組み合わせ (デモ込み)
  4. 4. 前半 イノベーションを振り返る/HTML5のもたらす世界 HTML5とはいったい何?何が変わるの?この新たなイノ ベーションを知るにあたり、これまで発生してきた様々な 技術革新と、その結果何が起こったのか?について振り返 ります。さらに、過去の歴史を踏まえながら、急速に変化 する人々の暮らしや、今後生き残るために考えるべきビジ ネスの方向や、求められる技術、そしてHTML5のもたら す世界について考えます。 技術講習会のお知らせ より引用
  5. 5. 後半 HTML5 インパクトの強そうな技術紹介 後半のセッションでは、HTML5の中でも特にインパクト の強そうな「WebSocket」「WebRTC」「Web Audio API」「WebGL」について、これらの技術概 要、仕様、用途、プログラムコード実装例、などなど、利 用するにあたり知っておくべき技術をがっつりと学習しま す。また、サンプルプログラム用いたデモを行い、実際に 技術を体験していきます。 技術講習会のお知らせ より引用
  6. 6. デモ参加のお願い IN FO R M A T IO N IN FO R M A T IO N
  7. 7. WebSocketのデモです。 スマートフォンをご準備下さい。 参加型デモ1 IN FO R M A T IO N IN FO R M A T IO N iOS Safari Android Chrome Firefox Opera
  8. 8. WebRTCのデモです。 カメラ付きの端末でお願いします。 参加型デモ2 IN FO R M A T IO N IN FO R M A T IO N Android パソコン できるだけ 新しい Chrome
  9. 9. 機能一覧が 何度か 出てきますが 全ての機能を 網羅していません。 新しい仕様が今も増え続けています。 C A U T IO N C A U T IO N
  10. 10. HTML5前史
  11. 11. 所属会社や 所属部署・業務 全て忘れて下さい。 C A U T IO N C A U T IO N 注意
  12. 12. HTML5の インパクトを 理解するために しばらく お付き合い下さい。
  13. 13. かなりの量に なりますが これでも相当 絞りました。
  14. 14. 細部に 間違いが 含まれている 可能性があります。
  15. 15. 他分野の イノベーションを 大局的に振り返る。
  16. 16. イノベーションが 人々の生活に 与えた影響
  17. 17. ハンス・ロスリングと 魔法の洗濯機 http://www.ted.com/talks/hans_rosling_and_the_magic_washing_machine Hans Rosling: The magic washing machine
  18. 18. 三種の神器と炊飯器 http://www.rekishikan.museum.ibk.ed.jp/10_kanndayori/documents/suihannki.pdf
  19. 19. 三種の神器と炊飯器 http://www.rekishikan.museum.ibk.ed.jp/10_kanndayori/documents/suihannki.pdf
  20. 20. イノベーションが 人々の 可処分時間を 増やした
  21. 21. イノベーションの 別の側面
  22. 22. 20世紀後半
  23. 23. 荷役・湾岸労働者 古くは沖仲仕(おきなかし/おきなかせ)と言っていましたが、 現在では差別用語として扱われるそうです。
  24. 24. 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
  25. 25. http://en.wikipedia.org/wiki/Stevedore http://en.wikipedia.org/wiki/File:Stevedores_ny_1912.jpg
  26. 26. http://en.wikipedia.org/wiki/Container_ship http://en.wikipedia.org/wiki/File:Korean-war-merchant-marine-load.jpg
  27. 27. イノベーション コンテナリゼーション
  28. 28. 積み替えが容易に 積み替えが迅速に 梱包コストの削減 積み重ねが容易 荷抜き・盗難が困難に 統一規格
  29. 29. インターモーダル輸送 複合一貫輸送
  30. 30. http://en.wikipedia.org/wiki/Stevedore http://en.wikipedia.org/wiki/ File:Starker_Gezeitenstrom,_Ladungsarbeiten_bei_schwierigen_Arbeitsbedingungen.jpg
  31. 31. http://en.wikipedia.org/wiki/Semi-trailer_truck http://en.wikipedia.org/wiki/File:Artic.lorry.arp.750pix.jpg
  32. 32. http://en.wikipedia.org/wiki/Double-stack_rail_transport http://en.wikipedia.org/wiki/File:Panama_Canal_Railway_-_Container_Train.JPG http://en.wikipedia.org/wiki/Double-stack_rail_transport http://en.wikipedia.org/wiki/File:Cajon_Intermodal.jpg
  33. 33. 流通革命
  34. 34. ISBN : 978-4822245641 http://amazon.jp/dp/4822245640 巨大なコンテナ 専用船の荷役は、 半世紀前の小さな 在来船と比べ、 人手も時間も 六〇分の一で済む。
  35. 35. コンテナリゼーションは 多くの荷役の職を奪った。
  36. 36. 坑夫
  37. 37. 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
  38. 38. 電話交換手
  39. 39. 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-ad3ak2- frFrqi-fsBVc3-8V9DoA-cWLv4G-a1Pcua-8zCatd-djKVDF-9uMwMX-dX8YR4- cwbDVu-7Unejv-7UcBqs-89vVUr-9dYPWE-a9Z1v5-a8Z9yK- a9WcZv-9djc1S-9dJZ9n-8c6WdX-aqT2Hn-8XMCsQ-9d3LHi-bibXap-b3Kbup-abavwf- abavKw-cWLjQ9-f12PUU-dwNpHJ-8mppYJ
  40. 40. イノベーションは 既存の仕組みを 破壊することがある
  41. 41. 繰り返される歴史
  42. 42. 近年では?
  43. 43. 例えば コンパクト カセット (カセットテープ)
  44. 44. http://en.wikipedia.org/wiki/Compact_Cassette http://en.wikipedia.org/wiki/File:Philips_EL3302.jpg
  45. 45. http://en.wikipedia.org/wiki/Compact_Cassette http://en.wikipedia.org/wiki/File:CassetteTypes1.jpg
  46. 46. イノベーション コンパクトディスク
  47. 47. http://www.flickr.com/photos/kismihok/8928946658/
  48. 48. ITが破壊したもの
  49. 49. 例えば 写真フィルム
  50. 50. http://en.wikipedia.org/wiki/135_film http://en.wikipedia.org/wiki/File:135_fuji_film_macro.jpg
  51. 51. イノベーション デジタルカメラ
  52. 52. http://www.flickr.com/photos/jvcamerica/6193351840/
  53. 53. 富士フィルム 事業縮小 現在は、 液晶フィルム・医療機器・ 化粧品等 コニカ現:コニカミノルタ DPE部門と共に譲渡 現在は、 複合機・カメラ・計測機器・ 医療機器等 コダック 破綻 アグファ カメラ事業から撤退 現在は、 医療機器・印刷機器・ 製版・印刷材料等
  54. 54. 携帯電話
  55. 55. http://www.toledoblade.com/Technology/2011/10/05/Apple-co-founder-Steve-Jobs- dead-at-56.html
  56. 56. 破壊的イノベーション
  57. 57. 最初期から 真っ当に 評価されていたか
  58. 58. 世界で最初の デジタルカメラ
  59. 59. http://www.flickr.com/photos/x1brett/4928370431/
  60. 60. http://www.digitaltrends.com/photography/two-pioneers-of-digital-photography- honored-by-national-inventors-hall-of-fame/
  61. 61. 解像度は100 x 100 白黒 カセットテープに記録
  62. 62. QV-10 デジタルカメラの 普及の切っ掛けを 作った。
  63. 63. http://www.flickr.com/photos/ume-y/5439197136/
  64. 64. 解像度は320 x 240 ストロボなし ピント固定 2MBの内蔵メモリに96枚 バッテリが保たない (単3電池4本が96枚保たない)
  65. 65. 『本日、Appleが 電話を 再発明します』
  66. 66. http://blog.livedoor.jp/ma_oyabu/archives/1749687.html
  67. 67. 2G/2.5G(GSM/GPRS/EDGE) Appsがinstall不可 Copy&Pasteが不可 Flashをサポートなし バッテリの交換が不可 発表時のドコモはFOMA(3G)の903iシリーズ。発売時は904iシリーズ。
  68. 68. 既存技術と比べると 当初は 低機能に見える。
  69. 69. 本質を 理解しなくては 予想を誤る。
  70. 70. 業界が成立するには
  71. 71. ある種の制限が 業界の成立に 大きく寄与している ことが多い。
  72. 72. 物理的制約 社会的制約 初期投資 専門性 例
  73. 73. 資格 法律 比較的特殊な事例
  74. 74. とある業界内の問題を解決。 業界の発展に貢献。 とある業界が成り立つための 制限を解決する。 業界存続の危機。 イノベーション
  75. 75. DTMの製作現場への寄与。 CD化による市場拡大。 後に CDという物理的制約が ITにより取り払われた。 音楽業界
  76. 76. 技術が、 制限を取り除くのではなく、 特定の業界を守る目的で 制限を作るために用いられた 比較的珍しい事例。 著作権保護技術(DRM) セキュリティ技術は用途が違うため、珍しい事例には含みません。
  77. 77. ネットオークションに 出品する一般消費者と 競争することになった。 リサイクルショップ
  78. 78. 昔は山の向こうは別の市場。 交通網の発達は 物理的制約の緩和。 市場は吸収されるか 結合する。 流通
  79. 79. 市町村変遷パラパラ地図より島嶼部と地図外文字を削除して引用 http://mujina.sakura.ne.jp/history/ 交通網以外の理由もあります。傾向としてみて下さい。 2001年 01月21日 1889年 05月01日
  80. 80. 市町村変遷パラパラ地図より島嶼部と地図外文字を削除して引用 http://mujina.sakura.ne.jp/history/ 交通網以外の理由もあります。傾向としてみて下さい。 2001年 01月21日
  81. 81. 市町村変遷パラパラ地図より島嶼部と地図外文字を削除して引用 http://mujina.sakura.ne.jp/history/ 交通網以外の理由もあります。傾向としてみて下さい。 1889年 05月01日
  82. 82. 特別なことではない。 これまでの延長上の事象。 但し、交通網だけでなく 通信網も制限緩和に関与。 グローバル化 言葉の壁はまだありますが...。
  83. 83. 水平統合 と 垂直統合
  84. 84. 水平統合され 主戦場が ひとつ上のレイヤーに 移動すると その分野の勢力図を 一旦リセットする ことがある。
  85. 85. Windows登場以前と 登場以後とでは 市場のプレイヤーが 大きく違う。 例
  86. 86. レイヤーが変わると 群雄割拠に。 市場は混沌とするが やがてプレイヤーは 淘汰されていく。
  87. 87. 既存企業は 参加するかどうかの 選択が迫られる。 新レイヤーは 主戦場となるのか。 コモディティ化しないか。
  88. 88. 革新により 制限が取り払われた場合。 ビジネスのルールが変わる。 それまでの常識が 通用しないことも。
  89. 89. ひとつの経済圏・分野の プレイヤー数 淘汰後は 3 10前後 or 1
  90. 90. 市場は健全である事が多い。 囲い込みで垂直統合を計るが 上手くいかないことが多い。 不便さは上のレイヤーの 水平統合の遠因にも。 3 10前後
  91. 91. ポイントカード 他企業も真似するのですぐに横並びに。 電話料金 価格競争からLCRにレイヤーが変化。 その後、マイライン・IP電話...
  92. 92. プロプライエタリなら独占。 独占した上のレイヤーも 圧勝することが多い。 (ソフトウェア分野は特に。) 発展の速度が遅くなる。 思わぬ所から独占が崩れる。 1
  93. 93. IBM互換機 (PC/AT互換機) ハードからソフトへの 主戦場の変化を見誤る。 PC-98 国内独占。Windowsの来襲による没落。 Windows 上位のオフィススイートとブラウザも独占。 別カテゴリのOS台頭と 上位レイヤーの標準化で...。
  94. 94. まずない。 A < B + C である限り どこかが キャスティングボードを 握る。 2は?
  95. 95. ネットワーク効果 ネットワーク効果とは、同じ製品・サービ スを利用するユーザが増えると、それ自体 の効用や価値が高まる効果のこと。 ネットワーク外部性・バンドワゴン効果 ロックイン効果 ロックイン効果とは、顧客(ユーザ)があ る商品を購入すると、その商品から他社の 製品への乗り換えが困難となり、顧客との 継続的関係が維持されやすくなる効果。 http://www.exbuzzwords.com/static/keyword_3631.html http://www.exbuzzwords.com/static/keyword_3632.html
  96. 96. 人為的なロックイン効果。 IT業界的には ベンダーロックとも。 同時にネットワーク効果を 狙う事も。 囲い込み戦略
  97. 97. 業界を破壊する革新が存在する。 革新は最初は低機能に見える。 革新は業界の発展に寄与。 業界に必要な制限を解決することも。 革新が起こった業界ではなく 他業界を破壊する事も。 ここまでのまとめ1
  98. 98. 革新は市場を統合することがある。 グローバル化もその一貫でしかない。 水平統合と垂直統合は繰り返されている。 水平統合されると群雄割拠。 やがて収束し垂直統合。 既存企業も否応なく巻き込まれる。 ここまでのまとめ2
  99. 99. ここまでを 復習しながら もう一段階 広い視点で!
  100. 100. ところで グローバル化って?
  101. 101. https://www.flickr.com/photos/suewaters/7564724934
  102. 102. https://www.flickr.com/photos/xlibber/2962488972
  103. 103. https://www.flickr.com/photos/simonehudson/1353033710
  104. 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. 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. 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 より改変して引用
  107. 107. https://www.flickr.com/photos/shawnleishman/2349218847
  108. 108. https://www.flickr.com/photos/ianz/3988940325
  109. 109. https://www.flickr.com/photos/69583224@N05/7386519508
  110. 110. https://www.flickr.com/photos/jmenj/9460355596
  111. 111. https://www.flickr.com/photos/69583224@N05/8140823868
  112. 112. The Next Billion 次の10億人
  113. 113. The Next 4 Billion 次の40億人 BOP : Base of the Pyramid
  114. 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. 115. コモディディ化
  116. 116. 家電の コモディディ化
  117. 117. 三種の神器と炊飯器 http://www.rekishikan.museum.ibk.ed.jp/10_kanndayori/documents/suihannki.pdf
  118. 118. 当時の値段と収入 http://www.rekishikan.museum.ibk.ed.jp/10_kanndayori/documents/suihannki.pdf 電機洗濯機 日立製作所製 昭和32年製造 販売価格 23,000円 白黒テレビ 早川電気製 昭和35年製造 販売価格 58,000円 電気冷蔵庫 日立製作所製 昭和32年製造 販売価格 62,500円 自動式電気 東芝製 昭和30年製造 販売価格 4,500円
  119. 119. 当時の値段と収入 http://www.stat.go.jp/data/kakei/longtime/ http://www.rekishikan.museum.ibk.ed.jp/10_kanndayori/documents/suihannki.pdf 電機洗濯機 日立製作所製 昭和32年製造 販売価格 23,000円 白黒テレビ 早川電気製 昭和35年製造 販売価格 58,000円 電気冷蔵庫 日立製作所製 昭和32年製造 販売価格 62,500円 自動式電気 東芝製 昭和30年製造 販売価格 4,500円 世帯収入(月) 昭和30年(1955年) 29,169円
  120. 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. 121. ICTの コモディディ化
  122. 122. 携帯電話人口 ??? 億人 インターネット人口 ??? 億人 ブロードバンド人口 ??? 億人 世界のICT市場 http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 総務省 情報通信白書 平成24年版 より 元のデータはITUの統計データ World Telecommunication/ICT Indicators Database 2011(15th Edition)
  123. 123. 携帯電話人口 53.6 億人 インターネット人口 ??? 億人 ブロードバンド人口 ??? 億人 世界のICT市場 http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 総務省 情報通信白書 平成24年版 より 元のデータはITUの統計データ World Telecommunication/ICT Indicators Database 2011(15th Edition)
  124. 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. 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. 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)
  127. 127. https://www.flickr.com/photos/kiwanja/3170269018
  128. 128. https://www.flickr.com/photos/iicd/8244401384
  129. 129. https://www.flickr.com/photos/kiwanja/3170258578
  130. 130. http://en.wikipedia.org/wiki/Internet_access http://en.wikipedia.org/wiki/File:Ghana_satellite.jpg
  131. 131. https://www.flickr.com/photos/87913776@N00/305425495
  132. 132. https://www.flickr.com/photos/kiwanja/3170244160
  133. 133. スマートフォンの コモディディ化
  134. 134. https://www.flickr.com/photos/whiteafrican/3401121885/
  135. 135. Android HuaweiのIDEOSを ケニアのSafaricomが 80ドルで発売 (2011年) Firefox OS 新興国市場向けの端末を発表 (2014年) 25ドルのスマートフォン向けの チップセットを発表 (2014年)
  136. 136. 洗濯機 79% (23,000円) テレビ 199% (58,000円) 冷蔵庫 214% (62,500円) 炊飯器 15% (4500円) 収入に対する比率 日本 (1955年) 世帯あたりの所得 29,169円/月 製品の性質は 一世帯に一台
  137. 137. Android 32% (80ドル) Firefox OS 10% (25ドル) 収入に対する比率 BOP層 (3000ドル以下/年) 一人あたりの所得 250ドル以下/月 製品の性質は ひとりに一台
  138. 138. Android 32% (80ドル) Firefox OS 10% (25ドル) 洗濯機 79% (23,000円) テレビ 199% (58,000円) 冷蔵庫 214% (62,500円) 炊飯器 15% (4500円) 収入に対する比率 要考慮項目 通信費 所有台数/世帯
  139. 139. インターネットへの アクセス手段
  140. 140. スマートフォンは インターネットに アクセスする手段のひとつ アクセス手段
  141. 141. スマートフォンは インターネットに アクセスする手段のひとつ アクセス手段 本当?
  142. 142. スマートフォンは インターネットに アクセスする唯一の手段 アクセス手段
  143. 143. スマートフォンは インターネットに アクセスする唯一の手段 アクセス手段 こういう人が 多数派に なるのでは?
  144. 144. ここまでの参考資料 と 没にしたスライドの一部
  145. 145. ISBN : 978-4822245641 http://amazon.jp/dp/4822245640 コンテナ 物語 世界を変えたのは 「箱」の発明だった
  146. 146. ISBN : 978-4798100234 http://amazon.jp/dp/4798100234 http://www.seshop.com/product/detail/2241 イノベーシ ョンの ジレンマ 技術革新が 巨大企業を滅ぼすとき
  147. 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億人
  148. 148. ISBN : 978-4062810531 http://amazon.jp/dp/4062810530 父の子供時代には、会社の寿命は60年と いわれていた。ところが1970年代に入 ると会社の寿命は30年になり、現在では 15年になってしまっている。これが20 10年には10年にまで短命化するらし い。 ピーター・ドラッカーによれば、このよう に会社や事業の寿命が個人の労働可能寿命 よりも短くなることは歴史上はじめてのこ とである。これまではひとつの仕事、たと えば印刷工になれば一生そのスキルひとつ で食っていけた。しかし今では、スキルを 身につけても、まだ働けるのに会社のほう が先に寿命がきてしまう。それは一生の間 に、いくつもの異なる分野で異なる能力を 発揮しなければならないという、まったく 新しい時代に生まれたことを意味する。
  149. 149. 米デューク大教授のキャシ ー・デビッドソン(63)による と、いま、小学校に入る子供 の65%は現在まだない職業に 就くという。 日本経済新聞 2013/01/28
  150. 150. http://www.w3.org/html/logo/
  151. 151. 狭義のHTML5 と 広義のHTML5
  152. 152. HTML5 = HTML5 + CSS + JS
  153. 153. HTML5 = HTML5 + CSS + JS 広義 狭義
  154. 154. HTML5 = HTML5 + CSS + JS 広義 狭義 マークアップ言語の仕様 従来のHTMLの改訂 新しいAPIも含まれる バズワード(マーケティング用語)
  155. 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 より引用
  156. 156. http://www.slideshare.net/dynamis/toward-firefox-os/22 より引用 Semantic Elements Multi Media HTML5 Forms Offline SupportHTML5HTML5 Parser Mouse, Key ev. XHTML5 WAI- ARIA W3C
  157. 157. HTML5 = HTML5 + CSS + JS 本日のコンテキスト これ
  158. 158. HTML5 = HTML5 + CSS + JS 本日のコンテキスト これ 最近では バズワードを避けて 一部の人は OpenWebPlatform と呼んでいる。
  159. 159. で、HTML5で 何ができるように なるの?
  160. 160. できることは これまでと 変わらない
  161. 161. これまで ブラウザで できなかったことが できるようになる だけ
  162. 162. browse / braʊz / 1 【本雑誌などを】拾い読みする; 立ち読みする. 2 インターネット (ブラウザを使って)閲覧する. 3 (店で)商品を眺めて見て回る. 4 〈家畜が〉【草葉などを】食べる. ウィズダム英和辞典 OS X Mavericks(v10.9)同梱版 より改変して引用
  163. 163. 元々はWeb Pageを 閲覧するためのものだった ブラウザで、 Web Applicationを 実行できるように するために、 必要なものを追加
  164. 164. ( ・`ω・´)ドヤァ ('・ω・` ) ('・ω・` ) Typed Arrays ブラウザ上でバイナリデータを 操作できるようにしたよ 今まで出来なかったことがおかしい
  165. 165. ( ・`ω・´)ドヤァ ('・ω・` ) ('・ω・` ) Web Audio API ブラウザ上で音声データを 操作・再生できるようにしたよ 今まで出来なかったことがおかしい
  166. 166. ( ・`ω・´)ドヤァ ('・ω・` ) ('・ω・` ) Web Workers バッググランドで処理が できるようになったよ 今まで出来なかったことがおかしい
  167. 167. ( ・`ω・´)ドヤァ ('・ω・` ) ('・ω・` ) CSS3 画像を使わなくても、 角丸・グラデーション使えるよ 今まで出来なかったことがおかしい
  168. 168. ( ・`ω・´)ドヤァ ('・ω・` ) ('・ω・` ) SVG ベクターデータが 使えるようになったよ 今まで出来なかったことがおかしい
  169. 169. ( ・`ω・´)ドヤァ ('・ω・` ) ('・ω・` ) (広義の)HTML5 色々できるようになったよ でも、まだまだ全然機能足りてないじゃん!
  170. 170. よくある会話
  171. 171. ( ・`ω・´)ドヤァ ('・ω・` ) ('・ω・` ) HTML5って 最近騒がれているけど 何が凄いの?
  172. 172. ( ・`ω・´)ドヤァ ('・ω・` ) ('・ω・` ) これこれ こういうことが できるようになるんです。
  173. 173. ( ・`ω・´)ドヤァ ('・ω・` ) ('・ω・` ) 今までもできたよね。 何も目新しくないよね?
  174. 174. 機能一覧だけ 見ていると 本質を見失う。
  175. 175. (機能一覧を) 見るんじゃない! (本質を) 感じるんだ! DON'T LOOK, FEEL! https://www.flickr.com/photos/juanma/2929703890
  176. 176. 機能一覧には 現れない HTML5の特徴
  177. 177. HTML5 OSの機能がブラウザ上で使える 低レイヤーのAPIがWeb APIで共通化 特許に制限されない 誰もが利用可能 Webプラットフォーム上で統合 Mobile OSのAppが作成可能
  178. 178. OSの機能がブラウザ上で OSの機能が、ブラウザを介してサイト に提供される アドレス帳 ネットワーク情報 バッテリー状態 通知 ストリーム メディアデータ オーディオ ビデオ 字幕 Webカメラ マイク Audioの波形操作 2D(ラスター,ベクター) 3DCG 音声入力 音声合成 暗号化 ファイルシステム データベース スレッド 通信(WebSocket,TCP,UDP) Bluetooth 加速度センサ 傾きセンサ ジャイロ バイブレーション GPS 電子コンパス 温度センサ 湿度センサ 気圧センサ 環境光センサ 近接センサ 磁気センサ etc. ネット接続が前提のもの・仕様策定中のもの・WebOS向けのものも含まれています。
  179. 179. Web APIで共通化 低レイヤーのAPIがWeb APIで共通化 される OSに非依存 実行環境に基本的に非依存 環境による制限はありえる センサ未搭載・端末性能等の理由や用途による理由(例:電子書籍)等が 制限として考えられます。
  180. 180. 特許に制限されない Openであることが特徴 パテント・フリー ロイヤリティ・フリー いわゆる業界団体よりもオープン 仕様だけでなく策定過程も公開 特定の組織の利益よりも人類の利益を 市場原理に左右される側面もあり。理想と現実は違う...。
  181. 181. 誰もが利用可能 世界中の誰もが利用可能な機能 限られた組織の限られた人しか使えな い仕様はオープンではない 今も100年後も自由に使える 「古文書の一部が、DRMで保護され ていて見られない」のない未来に(電 子書籍の仕様にも関連しているため) DRMについての議論が始まったそうです。
  182. 182. Web P/F上で統合 これら全てが、OpenWebプラットフ ォーム上で統合 アイディア次第で新しい物が誰にでも 日曜プログラミングで音声合成 夏休みの宿題でビデオチャット作成 これらの知見はWeb上に蓄積
  183. 183. Mobile OSとの関係 iOS Android Native Appが基本 UIWebView/WebViewを使ってできなくはない HTML5で記述し、両OSを含む複数のOS向けのApp に加工するApache Cordovaというツールがある その他にも似たようなツール多数
  184. 184. 2大勢力を追う第3勢力 Firefox OS Windows Phone Ubuntu Touch TIZEN Mobile BlackBerry
  185. 185. 第3勢力のApp作成手段 HTML5でNative Appを作成HTML5でNative Appを作成 Native Appあり HTML5でも可能 Native Appあり HTML5でも可能 Native Appあり HTML5でも可能 Native Appあり HTML5でも可能
  186. 186. HTML5そのものの インパクト ポテンシャルを 最大限に発揮した場合を考察
  187. 187. 充分成りうる。 適度に抽象化されたAPI。 新興企業にとって魅力的。 既存企業も移らざるを得ない可能性。 機能面だけ見れば既存企業にとっても、 得意領域以外の機能が簡単に使える魅力。 新しいレイヤーと 成りうるか
  188. 188. 多大。 これまでの常識、「コンパイルが前提で 実行ファイルを売買」が通用しない。 これまでも、スクリプト言語もあったが サーバサイド。 今後、コードのオープンが前提になる。 IT業界への影響は?
  189. 189. 多分多大。 破壊的イノベーションになる可能性。 既にITに巻き込まれているなら尚更。 他業界への影響は?
  190. 190. 他業界との距離が接近する可能性。 IT系内でも棲み分けが出来ていた 他の分野とも距離が接近。 敷居が下がることで一般の人の参入も。 プレイヤー
  191. 191. 今後も国境を越えた競争。 言葉の壁は有り得る。 英語圏でシェアを取られると、 ネットワーク効果で 太刀打ちできなくなる。 これまで言語の壁で守られていたが、 今度はそれが仇に成りうる。 壁
  192. 192. コードが見られるため、 サービスのクローンが容易。 速く市場にリリースし、市場を握る事が これまで以上に重要に。 技術力よりもアイディア勝負。 (もちろん技術力も大事だが...) 開発スタイル
  193. 193. IT史上最大の水平統合 オープンなレイヤー Open Web Platform
  194. 194. http://platform.html5.org/ より引用 (2013/04/04 版)
  195. 195. http://platform.html5.org/ より引用 (2013/04/04 版)
  196. 196. http://platform.html5.org/ より引用 (2013/04/04 版)
  197. 197. インパクトの強そうな 仕様の一部 WebSocket WebRTC Web Audio API WebGL
  198. 198. 休憩
  199. 199. インパクトの強そうな 仕様の一部 WebSocket WebRTC Web Audio API WebGL
  200. 200. WebSocket
  201. 201. WebSocket 高速・双方向通信 2つの仕様 WebSocket Protocol WebSocket API Cometよりも低負荷 <- 今回は詳細にはふれません
  202. 202. DEMO
  203. 203. 何故双方向通信が可能か サーバ側から情報を送るには request/responseでないと届きにくい Client Server request response FireWall NAT Proxy access access
  204. 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と完全互換ではありません。
  205. 205. 何故双方向通信が可能か ハンドシェイク後、双方向通信が可能となる Client Server request response handshake Switching Protocols
  206. 206. 何故双方向通信が可能か 切断しない限り、双方向通信が可能 Client Server request response handshake
  207. 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. 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. 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. 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. 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倍の データ量
  212. 212. Cometよりも低負荷 今回は詳細にはふれません Comet Ajax(XHR) による long polling =
  213. 213. SAMPLE
  214. 214. WebSocket Server node.js サーバサイドJavaScript ws WebSocketライブラリ 以下はインストール済みとする nvm nodeのバージョン切り替えツール npm nodeのパッケージ管理ツール WebSocket Chat 作成
  215. 215. % mkdir chat ←ディレクトリ作成 % cd chat ←ディレクトリ移動 % nvm use v0.10.21 ←バージョン指定 % npm install ws ←wsインストール node.jsとwsの セットアップ
  216. 216. サーバ側
  217. 217. 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解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。
  218. 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解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 WebSocket Serverクラス取得
  219. 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クラスの インスタンス化 (ポート番号8080)
  220. 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解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 コネクションの格納領域作成
  221. 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. 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. 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. 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. 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. 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. 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. 228. クライアント側
  229. 229. <!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
  230. 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 テキストボックス・ボタン・ メッセージエリアの表示と Script要素
  231. 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 WebSocketで接続
  232. 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 メッセージ受信時の動作を指定
  233. 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. 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. 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. 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. 237. WebSocket まとめ 高速・双方向通信 HTTPからSwitching Protocols HTTPSなら95%で接続可能 Headerが小さいことが高速通信の理 由のひとつ Cometよりも低負荷
  238. 238. WebRTC
  239. 239. WebRTC リアルタイムコミュニケーションのAPI ボイス・ビデオチャット P2P
  240. 240. http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 より引用
  241. 241. キャリア型通信 手段の例 市場 ユーザ メリット 事業者 メリット 利用方法 固定電話 携帯電話 (TV放送) インフラを持つキャリアが支配 世界中の人と会話できる × 単独で利用 http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用
  242. 242. Over The Top 手段の例 市場 ユーザ メリット 事業者 メリット 利用方法 Skype, WebEx (YouTube, Ustream) キャリアに縛られない独自の仕組みを 提供する少数のベンダーが参加可能 世界中の人と無料/安価で会話できる 限定的なAPI提供 一部連携可能 ユーザが組み合わせて利用 http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用
  243. 243. Webブラウザ型 手段の例 市場 ユーザ メリット 事業者 メリット 利用方法 WebRTC 特別な仕組みは不要 誰でも参加可能 専用アプリ無しで会話できる 完全にプログラマブル部品として 利用可能 製品/サービスに組み込んで利用 http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用
  244. 244. キャリア型通信 Over The Top Webブラウザ型 手段の例 市場 ユーザ メリット 事業者 メリット 利用方法 固定電話 携帯電話 (TV放送) Skype, WebEx (Youtube, Ustream) WebRTC インフラを持つ キャリアが支配 キャリアに縛られない 独自の仕組みを提供 する少数のベンダー が参加可能 特別な仕組みは不要 誰でも参加可能 世界中の人と 会話できる 世界中の人と無料/ 安価で会話できる 専用アプリ無しで 会話できる × 限定的なAPI提供 一部連携可能 完全にプログラマブル 部品として利用可能 単独で利用 ユーザが組み合わせて 利用 製品/サービスに 組み込んで利用 http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用
  245. 245. WebRTC 2つの仕様 Media Capture and Streams (getUserMedia) WebRTC 1.0: Real-time Communication Between Browsers
  246. 246. Media Capture and Streams (getUserMedia) ブラウザからマイクやカメラにアクセス 利用範囲はWebRTC以外とも 音声処理(with Web Audio API) ボイスチェンジャー etc. 画像処理(with Canvas) 顔検出 etc. 顔認識ができるようになるのも時間の問題か?
  247. 247. DEMO
  248. 248. SAMPLE
  249. 249. <!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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  250. 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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ビデオ要素の表示と Script要素
  251. 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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ユーザメディアの取得開始
  252. 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. 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. 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. 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. 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. 257. WebRTC 1.0: Real-time Communication Between Browsers ブラウザとブラウザを接続 シグナリングの仕組みは別途必要 SIP XMPP WebSocket <- 今のところ一番使われている etc.
  258. 258. DEMO
  259. 259. WebRTC 1.0: Real-time Communication Between Browsers NAT通過・ ネゴシエーション ICE(STUN + TURN + α) STUN P2P・UDPホールパンチング TURN サーバ経由
  260. 260. WebRTC 1.0: Real-time Communication Between Browsers SDP セッション開始に必要な情報を記述 DTLS UDP版TLS
  261. 261. WebRTC 1.0: Real-time Communication Between Browsers データ通信 DTLSで全て暗号化される MediaStream (SRTP・SRTCP) 音声データ・映像データ DataChannel (SCTP) テキストデータ・バイナリデータ
  262. 262. WebRTC 1.0: Real-time Communication Between Browsers SRTP・SRTCP リアルタイムデータ転送プロトコル SCTP TCPに似たプロトコル 設定で、信頼性と引き換えにリアルタ イム性の向上が可能
  263. 263. 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
  264. 264. WebRTCData BlackMagic 別資料 https://speakerdeck.com/feross/webrtc-data-black-magic P18 53 をご覧下さい
  265. 265. WebRTC 1.0: Real-time Communication Between Browsers APIが複雑でわかりにくい 抽象化した仕様の多い HTML5の他のAPIと比べると 非常に複雑 それでも、従来のリアルタイム通信の 処理よりは断然楽 ジッタやパケットロス等の対策は、 ブラウザが全て対応してくれる
  266. 266. WebRTC まとめ1 シグナリング経路が別途必要 NAT通過の仕組みがある P2Pでセキュアに通信 ボイス・ビデオチャットが可能 テキスト・バイナリの通信も可能
  267. 267. WebRTC まとめ2 APIが複雑 ライブラリを使うという選択肢も 特に面倒な部分はブラウザが処理 ジッタ・パケットロス等の対策 メディアの最適化等も 定番と言われるようなライブラリはまだありません。
  268. 268. Web Audio API
  269. 269. Web Audio API オーディオ波形操作 フィルタリング ミキシング 加工 動的に波形を生成することも可能 SE等の短い音声に特に威力を発揮
  270. 270. DEMO
  271. 271. 音声処理の種類 ウェーブシェイパー コンボルバ(畳み込み) リバーブ(残響) ディレイ(遅延) ダイナミックコンプレッサー ゲイン 双2次フィルタ ローパスフィルタ ハイパスフィルタ バンドパスフィルタ ローシェフフィルタ ハイシェフフィルタ ピーキングフィルタ ノッチフィルタ オールパスフィルタ
  272. 272. in/out間をノードで接続 outputinput Echo Delay 0.2s Gain 20%
  273. 273. in側とout側の種類 input マイク MediaStream バイナリデータ オシレータ Audio要素 Video要素 output スピーカー MediaStream
  274. 274. プログラマブル ScriptProcessorNode inputとoutputの両方で使える input and/or output input例 getUserMediaから取得した音声を加工 WebRTCで取得した遠隔地の音声を解析 output例 ゼロから音声データの生成が可能
  275. 275. output input 生成 加工 解析
  276. 276. 音源とリスナーを 3D空間上に PannerNode・AudioListener 音源とリスナーを3D空間上に配置 音源の方向・移動速度も指定可能 左右の音量差・ドップラー効果等 WebGLと同時によく使われる OpenALに近い
  277. 277. 音源とリスナーを 3D空間上に ◎ ◎ ◎
  278. 278. 音源とリスナーを 3D空間上に ◎ ◎ ◎ 左右スピーカーの 音量の差 ドップラー効果
  279. 279. SAMPLE
  280. 280. <!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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  281. 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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 Script要素
  282. 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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 AudioContextクラスの インスタンス化
  283. 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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ゲイン(音量調整)ノード作成 ディレイ(遅延)ノード作成
  284. 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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ゲイン(音量調整)に20%を指定 ディレイ(遅延)に0.2秒を指定
  285. 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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ユーザメディアの取得開始 取得するユーザメディアはマイク
  286. 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. 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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 メディアストリームから Web Audio APIのオブジェクトを作成
  288. 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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 source(インプット)を destination(アウトプット)に接続 第一のルート outputinput Gain 20% Delay 0.2s
  289. 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. 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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。 ゲインからディレイに接続 (遅延・音量調整をループ) 第三のルート outputinput Gain 20% Delay 0.2s
  291. 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> 解説用に書いたコードです。 ベンダープレフィックスがないため動きません。
  292. 292. Web Audo API まとめ ノードを接続し処理を行なう 多数のinput/output 音声データの編集ができる JavaScriptで直接編集も可能 3D空間にも対応
  293. 293. WebGL
  294. 294. WebGL 3DグラフィックのAPI OpenGLのサブセット的な位置付け GPUを利用する 互換レイヤーを挟んでいる DirectX(Windows)でも利用可能 GLSLの知識が必要で非常に高難度
  295. 295. DEMO
  296. 296. three.js デファクトスタンダードのライブラリ WebGL界のjQuery 3DCDの知識があればハードルは低い CSS3D等のレンダラーも選択可能
  297. 297. geometry mesh 環境光の色 ハイライトの色 テクスチャ 透明度・屈折率 etc. material
  298. 298. mesh 環境光の色 遠景の処理 etc. light camera
  299. 299. geometry(形状) テキスト 円 平面 立方体 円柱 チューブ 球体 円環体(トーラス) リング等 四面体 八面体 二十面体 多面体 パラメトリック曲線 etc.
  300. 300. material 物体の色 ハイライトの色 ハイライトの大きさ 発光色 金属か否か 環境光の色 屈折率 透明度 map テクスチャ画像 バンプ(表面の凹凸) 画像 スケール 環境マッピング(擬似的 な背景) etc.
  301. 301. scene & etc. カメラ ライト(照明) 環境光 メッシュ フォグ パーティクル レンズフレア レンダラー 選択可能 ピッキング マウスによる選択等 軌道制御 マウスでカメラ移動 ポストプロセス etc.
  302. 302. SAMPLE
  303. 303. <!DOCTYPE html> <div id="disp"></div> <script src="three.min.js"></script> <script> // next slide... </script> 解説用に書いた問題のあるコードです。 このままでも動きますが使わないで下さい。 表示と three.jsの読み込みと Script要素
  304. 304. 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);
  305. 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. 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); 描画領域をDOM Treeに追加
  307. 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); カメラを作成 カメラの位置と方向を指定
  308. 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. 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. 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. 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. 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. 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. 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. 315. WebGL まとめ OpenGLのサブセット GPUを利用 Windowsでも使える GLSLは難解 three.jsを使おう
  316. 316. Combination
  317. 317. APIを組み合わせて使う 色々 見てみよう!
  318. 318. DEMO
  319. 319. HTML5の効能 Webプラットフォーム上 組み合わせて使いやすい APIが適度に抽象化されている 一部例外あり やりたい事が簡単にできる 参入障壁が非常に低い 今後はアイディアが重要に...?
  320. 320.
  321. 321. 質疑応答 もう一度聞きたいところはありますか? もっと詳しく聞きたいところはありますか?
  322. 322. 最期に ちょっとだけ...
  323. 323. 人間はなぜ、 学ばなければならないのでしょう? 人間は一生、学び続けるべきです。 人間には好奇心、知る喜びがある。 肩書きや、出世して大臣になるために、 学ぶのでないのです……。 では、なぜ学び続けるのでしょう? ………… それが人間の使命だからです。 平賀=キートン・太一
  324. 324. ご清聴 ありがとう ございました
  325. 325. 付録
  326. 326. 付録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
  327. 327. 付録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/
  328. 328. 付録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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×