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

HTML5の基礎と応用 Open Web Platform WebSocket / WebRTC / Web Audio API / WebGL 2014/06/27 金城雄 NTTアドバンステクノロジ情報機器テクノロジセンタ所属 http://www.ntt-at.co.jp/ 第三版

この資料は、先のスライドを見られない事を前提に書かれています。発表内容も同様です。できれば、このままそっと閉じて下さい。もちろん、文字が小さい・画面が見えない等であれば見て頂いて構いません。この資料を手元に持っている人へ N O T IC E N O T IC E

内容 HTML5の概要休憩 HTML5のAPI 2つ (デモ込み) 時間があれば休憩 HTML5のAPI 2つ (デモ込み) HTML5のAPIの組み合わせ (デモ込み)

前半イノベーションを振り返る／HTML5のもたらす世界 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 machine

三種の神器と炊飯器 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_Rothenstein_NDL,_Port_Sudan_1960.png

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_schwierigen_Arbeitsbedingungen.jpg

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_-_Container_Train.JPG http://en.wikipedia.org/wiki/Double-stack_rail_transport http://en.wikipedia.org/wiki/File:Cajon_Intermodal.jpg

流通革命

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_miners_(1908)_crop.jpg

電話交換手

http://www.ﬂickr.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

イノベーションは既存の仕組みを破壊することがある

繰り返される歴史

近年では?

例えばコンパクトカセット (カセットテープ)

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.ﬂickr.com/photos/kismihok/8928946658/

ITが破壊したもの

例えば写真フィルム

http://en.wikipedia.org/wiki/135_ﬁlm http://en.wikipedia.org/wiki/File:135_fuji_ﬁlm_macro.jpg

イノベーションデジタルカメラ

http://www.ﬂickr.com/photos/jvcamerica/6193351840/

富士フィルム事業縮小現在は、液晶フィルム・医療機器・化粧品等コニカ現:コニカミノルタ DPE部門と共に譲渡現在は、複合機・カメラ・計測機器・医療機器等コダック破綻アグファカメラ事業から撤退現在は、医療機器・印刷機器・製版・印刷材料等

携帯電話

http://www.toledoblade.com/Technology/2011/10/05/Apple-co-founder-Steve-Jobs- dead-at-56.html

破壊的イノベーション

最初期から真っ当に評価されていたか

世界で最初のデジタルカメラ

http://www.ﬂickr.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.ﬂickr.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は?

ネットワーク効果ネットワーク効果とは、同じ製品・サービスを利用するユーザが増えると、それ自体の効用や価値が高まる効果のこと。ネットワーク外部性・バンドワゴン効果ロックイン効果ロックイン効果とは、顧客（ユーザ）がある商品を購入すると、その商品から他社の製品への乗り換えが困難となり、顧客との継続的関係が維持されやすくなる効果。 http://www.exbuzzwords.com/static/keyword_3631.html http://www.exbuzzwords.com/static/keyword_3632.html

人為的なロックイン効果。 IT業界的にはベンダーロックとも。同時にネットワーク効果を狙う事も。囲い込み戦略

業界を破壊する革新が存在する。革新は最初は低機能に見える。革新は業界の発展に寄与。業界に必要な制限を解決することも。革新が起こった業界ではなく他業界を破壊する事も。ここまでのまとめ1

革新は市場を統合することがある。グローバル化もその一貫でしかない。水平統合と垂直統合は繰り返されている。水平統合されると群雄割拠。やがて収束し垂直統合。既存企業も否応なく巻き込まれる。ここまでのまとめ2

ここまでを復習しながらもう一段階広い視点で!

ところでグローバル化って?

https://www.ﬂickr.com/photos/suewaters/7564724934

https://www.ﬂickr.com/photos/xlibber/2962488972

https://www.ﬂickr.com/photos/simonehudson/1353033710

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 より改変して引用

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 より改変して引用

こう語る人が多い... 開発援助委員会(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 より改変して引用

https://www.ﬂickr.com/photos/shawnleishman/2349218847

https://www.ﬂickr.com/photos/ianz/3988940325

https://www.ﬂickr.com/photos/69583224@N05/7386519508

https://www.ﬂickr.com/photos/jmenj/9460355596

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 the Economic Pyramid 経済産業省 BOPビジネス支援センターポータルサイトより http://www.bop.go.jp/bop

コモディディ化

家電のコモディディ化

三種の神器と炊飯器 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円白黒テレビ早川電気製昭和35年製造販売価格 58,000円電気冷蔵庫日立製作所製昭和32年製造販売価格 62,500円自動式電気東芝製昭和30年製造販売価格 4,500円

当時の値段と収入 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円

現在の値段と収入 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円

ICTのコモディディ化

携帯電話人口 ??? 億人インターネット人口 ??? 億人ブロードバンド人口 ??? 億人世界のICT市場 http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 総務省情報通信白書平成24年版より元のデータはITUの統計データ World Telecommunication/ICT Indicators Database 2011(15th Edition)

携帯電話人口 53.6 億人インターネット人口 ??? 億人ブロードバンド人口 ??? 億人世界のICT市場 http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 総務省情報通信白書平成24年版より元のデータはITUの統計データ World Telecommunication/ICT Indicators Database 2011(15th Edition)

携帯電話人口 53.6 億人インターネット人口 20.3 億人ブロードバンド人口 ??? 億人世界のICT市場 http://www.soumu.go.jp/johotsusintokei/whitepaper/h24.html 総務省情報通信白書平成24年版より元のデータはITUの統計データ World Telecommunication/ICT Indicators Database 2011(15th Edition)

携帯電話人口 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)

携帯電話人口 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)

https://www.ﬂickr.com/photos/kiwanja/3170269018

https://www.ﬂickr.com/photos/iicd/8244401384

http://en.wikipedia.org/wiki/Internet_access http://en.wikipedia.org/wiki/File:Ghana_satellite.jpg

スマートフォンのコモディディ化

https://www.ﬂickr.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/ﬁles/pdf/ n4b-j.pdf THE NEXT 4 BILLION 次なる40億人ピラミッドの底辺（BOP）の市場規模とビジネス戦略 THENEXT4BILLION―次なる40億人|ピラミッドの底辺（BOP）の市場規模とビジネス戦略 W R I ピラミッドの底辺（BOP）の市場規模とビジネス戦略 THE NEXT 4 BILLION 次なる40億人

ISBN : 978-4062810531 http://amazon.jp/dp/4062810530 父の子供時代には、会社の寿命は６０年といわれていた。ところが１９７０年代に入ると会社の寿命は３０年になり、現在では１５年になってしまっている。これが２０１０年には１０年にまで短命化するらしい。ピーター・ドラッカーによれば、このように会社や事業の寿命が個人の労働可能寿命よりも短くなることは歴史上はじめてのことである。これまではひとつの仕事、たとえば印刷工になれば一生そのスキルひとつで食っていけた。しかし今では、スキルを身につけても、まだ働けるのに会社のほうが先に寿命がきてしまう。それは一生の間に、いくつもの異なる分野で異なる能力を発揮しなければならないという、まったく新しい時代に生まれたことを意味する。

米デューク大教授のキャシー・デビッドソン(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- 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 より引用

http://www.slideshare.net/dynamis/toward-ﬁrefox-os/22 より引用 Semantic Elements Multi Media HTML5 Forms Oﬄine SupportHTML5HTML5 Parser Mouse, Key ev. XHTML5 WAI- ARIA W3C

HTML5 = HTML5 + CSS + JS 本日のコンテキストこれ

HTML5 = HTML5 + CSS + JS 本日のコンテキストこれ最近ではバズワードを避けて一部の人は OpenWebPlatform と呼んでいる。

で、HTML5で何ができるようになるの?

できることはこれまでと変わらない

これまでブラウザでできなかったことができるようになるだけ

browse / braʊz / 1 【本雑誌などを】拾い読みする; 立ち読みする. 2 インターネット (ブラウザを使って)閲覧する. 3 (店で)商品を眺めて見て回る. 4 〈家畜が〉【草葉などを】食べる. ウィズダム英和辞典 OS X Mavericks(v10.9)同梱版より改変して引用

元々はWeb Pageを閲覧するためのものだったブラウザで、 Web Applicationを実行できるようにするために、必要なものを追加

( ･`ω･´)ドヤァ ('・ω・` ) ('・ω・` ) Typed Arrays ブラウザ上でバイナリデータを操作できるようにしたよ今まで出来なかったことがおかしい

( ･`ω･´)ドヤァ ('・ω・` ) ('・ω・` ) Web Audio API ブラウザ上で音声データを操作・再生できるようにしたよ今まで出来なかったことがおかしい

( ･`ω･´)ドヤァ ('・ω・` ) ('・ω・` ) Web Workers バッググランドで処理ができるようになったよ今まで出来なかったことがおかしい

( ･`ω･´)ドヤァ ('・ω・` ) ('・ω・` ) CSS3 画像を使わなくても、角丸・グラデーション使えるよ今まで出来なかったことがおかしい

( ･`ω･´)ドヤァ ('・ω・` ) ('・ω・` ) SVG ベクターデータが使えるようになったよ今まで出来なかったことがおかしい

( ･`ω･´)ドヤァ ('・ω・` ) ('・ω・` ) (広義の)HTML5 色々できるようになったよでも、まだまだ全然機能足りてないじゃん!

よくある会話

( ･`ω･´)ドヤァ ('・ω・` ) ('・ω・` ) HTML5って最近騒がれているけど何が凄いの?

( ･`ω･´)ドヤァ ('・ω・` ) ('・ω・` ) これこれこういうことができるようになるんです。

( ･`ω･´)ドヤァ ('・ω・` ) ('・ω・` ) 今までもできたよね。何も目新しくないよね?

機能一覧だけ見ていると本質を見失う。

(機能一覧を) 見るんじゃない! (本質を) 感じるんだ! DON'T LOOK, FEEL! https://www.ﬂickr.com/photos/juanma/2929703890

機能一覧には現れない HTML5の特徴

HTML5 OSの機能がブラウザ上で使える低レイヤーのAPIがWeb APIで共通化特許に制限されない誰もが利用可能 Webプラットフォーム上で統合 Mobile OSのAppが作成可能

OSの機能がブラウザ上で OSの機能が、ブラウザを介してサイトに提供されるアドレス帳ネットワーク情報バッテリー状態通知ストリームメディアデータオーディオビデオ字幕 Webカメラマイク Audioの波形操作 2D(ラスター,ベクター) 3DCG 音声入力音声合成暗号化ファイルシステムデータベーススレッド通信(WebSocket,TCP,UDP) Bluetooth 加速度センサ傾きセンサジャイロバイブレーション GPS 電子コンパス温度センサ湿度センサ気圧センサ環境光センサ近接センサ磁気センサ etc. ネット接続が前提のもの・仕様策定中のもの・WebOS向けのものも含まれています。

Web APIで共通化低レイヤーのAPIがWeb APIで共通化される OSに非依存実行環境に基本的に非依存環境による制限はありえるセンサ未搭載・端末性能等の理由や用途による理由(例:電子書籍)等が制限として考えられます。

特許に制限されない Openであることが特徴パテント・フリーロイヤリティ・フリーいわゆる業界団体よりもオープン仕様だけでなく策定過程も公開特定の組織の利益よりも人類の利益を市場原理に左右される側面もあり。理想と現実は違う...。

誰もが利用可能世界中の誰もが利用可能な機能限られた組織の限られた人しか使えない仕様はオープンではない今も100年後も自由に使える「古文書の一部が、DRMで保護されていて見られない」のない未来に(電子書籍の仕様にも関連しているため) 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でも可能 Native Appあり HTML5でも可能

HTML5そのもののインパクトポテンシャルを最大限に発揮した場合を考察

充分成りうる。適度に抽象化されたAPI。新興企業にとって魅力的。既存企業も移らざるを得ない可能性。機能面だけ見れば既存企業にとっても、得意領域以外の機能が簡単に使える魅力。新しいレイヤーと成りうるか

多大。これまでの常識、「コンパイルが前提で実行ファイルを売買」が通用しない。これまでも、スクリプト言語もあったがサーバサイド。今後、コードのオープンが前提になる。 IT業界への影響は?

多分多大。破壊的イノベーションになる可能性。既にITに巻き込まれているなら尚更。他業界への影響は?

他業界との距離が接近する可能性。 IT系内でも棲み分けが出来ていた他の分野とも距離が接近。敷居が下がることで一般の人の参入も。プレイヤー

今後も国境を越えた競争。言葉の壁は有り得る。英語圏でシェアを取られると、ネットワーク効果で太刀打ちできなくなる。これまで言語の壁で守られていたが、今度はそれが仇に成りうる。壁

コードが見られるため、サービスのクローンが容易。速く市場にリリースし、市場を握る事がこれまで以上に重要に。技術力よりもアイディア勝負。 (もちろん技術力も大事だが...) 開発スタイル

IT史上最大の水平統合オープンなレイヤー Open Web Platform

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よりも低負荷 <- 今回は詳細にはふれません

何故双方向通信が可能かサーバ側から情報を送るには request/responseでないと届きにくい Client Server request response FireWall NAT Proxy access access

何故双方向通信が可能か 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と完全互換ではありません。

何故双方向通信が可能かハンドシェイク後、双方向通信が可能となる 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/mail-archive/web/tls/current/msg05593.html

何故高速通信が可能かある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,deﬂate,sdch Accept-Language: ja,en-US;q=0.8,en;q=0.6 Cache-Control: max-age=0 Connection: keep-alive Host: localhost If-Modiﬁed-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!

何故高速通信が可能か 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

何故高速通信が可能か送信データが「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 送信データが「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倍のデータ量

Cometよりも低負荷今回は詳細にはふれません Comet Ajax(XHR) による long polling =

SAMPLE

WebSocket Server node.js サーバサイドJavaScript ws WebSocketライブラリ以下はインストール済みとする nvm nodeのバージョン切り替えツール npm nodeのパッケージ管理ツール WebSocket Chat 作成

% mkdir chat ←ディレクトリ作成 % cd chat ←ディレクトリ移動 % nvm use v0.10.21 ←バージョン指定 % npm install ws ←wsインストール node.jsとwsのセットアップ

サーバ側

クライアント側

<!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

<!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要素

<!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で接続

<!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 メッセージ受信時の動作を指定

<!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 メッセージ受信時に受け取ったメッセージを表示

<!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 ボタンクリック時の動作を指定

<!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 ボタンクリック時にメッセージを送信して入力欄を空に

<!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 まとめ高速・双方向通信 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/mganeko/2013-web-rtctechcross/6 を改変して引用

Over The Top 手段の例市場ユーザメリット事業者メリット利用方法 Skype, WebEx (YouTube, Ustream) キャリアに縛られない独自の仕組みを提供する少数のベンダーが参加可能世界中の人と無料/安価で会話できる限定的なAPI提供一部連携可能ユーザが組み合わせて利用 http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用

Webブラウザ型手段の例市場ユーザメリット事業者メリット利用方法 WebRTC 特別な仕組みは不要誰でも参加可能専用アプリ無しで会話できる完全にプログラマブル部品として利用可能製品/サービスに組み込んで利用 http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用

キャリア型通信 Over The Top Webブラウザ型手段の例市場ユーザメリット事業者メリット利用方法固定電話携帯電話 (TV放送) Skype, WebEx (Youtube, Ustream) WebRTC インフラを持つキャリアが支配キャリアに縛られない独自の仕組みを提供する少数のベンダーが参加可能特別な仕組みは不要誰でも参加可能世界中の人と会話できる世界中の人と無料/ 安価で会話できる専用アプリ無しで会話できる × 限定的なAPI提供一部連携可能完全にプログラマブル部品として利用可能単独で利用ユーザが組み合わせて利用製品/サービスに組み込んで利用 http://www.slideshare.net/mganeko/2013-web-rtctechcross/6 を改変して引用

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. 画像処理(with Canvas) 顔検出 etc. 顔認識ができるようになるのも時間の問題か?

SAMPLE

<!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> 解説用に書いたコードです。ベンダープレフィックスがないため動きません。

<!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要素

<!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> 解説用に書いたコードです。ベンダープレフィックスがないため動きません。ユーザメディアの取得開始

<!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> 解説用に書いたコードです。ベンダープレフィックスがないため動きません。取得するユーザメディアはカメラとマイク

<!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> 解説用に書いたコードです。ベンダープレフィックスがないため動きません。ユーザメディア取得時の動作を指定

<!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> 解説用に書いたコードです。ベンダープレフィックスがないため動きません。ビデオ要素の取得ユーザメディアの指定再生開始

<!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> 解説用に書いたコードです。ベンダープレフィックスがないため動きません。ユーザメディア取得エラーの動作を指定

<!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> 解説用に書いたコードです。ベンダープレフィックスがないため動きません。

WebRTC 1.0: Real-time Communication Between Browsers ブラウザとブラウザを接続シグナリングの仕組みは別途必要 SIP XMPP WebSocket <- 今のところ一番使われている etc.

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 (SCTP) テキストデータ・バイナリデータ

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 Global IP/Port signaling data

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等の短い音声に特に威力を発揮

音声処理の種類ウェーブシェイパーコンボルバ(畳み込み) リバーブ(残響) ディレイ(遅延) ダイナミックコンプレッサーゲイン双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で取得した遠隔地の音声を解析 output例ゼロから音声データの生成が可能

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.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> 解説用に書いたコードです。ベンダープレフィックスがないため動きません。

<!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要素

<!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クラスのインスタンス化

<!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> 解説用に書いたコードです。ベンダープレフィックスがないため動きません。ゲイン(音量調整)ノード作成ディレイ(遅延)ノード作成

<!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秒を指定

<!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> 解説用に書いたコードです。ベンダープレフィックスがないため動きません。ユーザメディアの取得開始取得するユーザメディアはマイク

<!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> 解説用に書いたコードです。ベンダープレフィックスがないため動きません。ユーザメディア取得時の動作を指定

<!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のオブジェクトを作成

<!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

<!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

<!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

<!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 Audo API まとめノードを接続し処理を行なう多数のinput/output 音声データの編集ができる JavaScriptで直接編集も可能 3D空間にも対応

WebGL 3DグラフィックのAPI OpenGLのサブセット的な位置付け GPUを利用する互換レイヤーを挟んでいる DirectX(Windows)でも利用可能 GLSLの知識が必要で非常に高難度

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> 解説用に書いた問題のあるコードです。このままでも動きますが使わないで下さい。表示と three.jsの読み込みと Script要素

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);

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); レンダラーを作成し、サイズと色を指定

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に追加

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); カメラを作成カメラの位置と方向を指定

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); 色を指定し、ライトを作成ライトの位置を指定

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); 大きさと目の細かさを指定し、形状(球)を作成

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); 色を指定し、マテリアルを作成

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); 形状とマテリアルからメッシュを作成

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); シーンを作成し、ライト・メッシュをシーンに追加

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); シーンとカメラと指定しレンダリング(描画)

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);

WebGL まとめ OpenGLのサブセット GPUを利用 Windowsでも使える GLSLは難解 three.jsを使おう

Combination

APIを組み合わせて使う色々見てみよう!

HTML5の効能 Webプラットフォーム上組み合わせて使いやすい APIが適度に抽象化されている一部例外ありやりたい事が簡単にできる参入障壁が非常に低い今後はアイディアが重要に...?

質疑応答もう一度聞きたいところはありますか? もっと詳しく聞きたいところはありますか?

最期にちょっとだけ...

人間はなぜ、学ばなければならないのでしょう？人間は一生、学び続けるべきです。人間には好奇心、知る喜びがある。肩書きや、出世して大臣になるために、学ぶのでないのです……。では、なぜ学び続けるのでしょう？ ………… それが人間の使命だからです。平賀＝キートン・太一

ご清聴ありがとうございました

付録

付録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

付録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/

付録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

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

by You_Kinjoh

on Jun 30, 2014

Statistics

Views

Actions

2 Embeds 112

Accessibility

Categories

Upload Details

Usage Rights

Report content

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

https://twitter.com	105
http://s.deeeki.com	8