Más contenido relacionado La actualidad más candente (20) Similar a HTML5開発最前線 (20) HTML5開発最前線2. Who?
吉川 徹 / Toru Yoshikawa
@yoshikawa_̲t
html5j 代表
Google Developer Experts (Chrome)
HTML5 Experts.jp 副編集⻑⾧長兼エキスパー
ト
html5j ビギナー部(副部⻑⾧長)/Web先端
技術味⾒見見部 (顧問)/⽇日本jQuery Mobile
ユーザー会 (管理理⼈人)/Sublime Text 2
Japan Users Group (管理理⼈人)などなど
Blog: http://d.hatena.ne.jp/pikotea/
12. Unreal Engine 3を
HTML5に移植
Unreal Engine 3はC++で
記述されたゲームエンジン
わずか5⽇日で移植終了了
Emscripten
asm.js
http://www.youtube.com/watch?v=XsyogXtyU9o#t=24
http://www.4gamer.net/games/032/G003263/20130328081/
20. デバイスとつながる(API)
DAP (Device APIs Working Group)
Battery Status API
Network Information API
Ambient Light Events
Proximity Events
Vibration API
Menu API
Network Service Discovery
SysApps (System Applications Working Group)
Alarm API
Contacts API
Messaging API
Telephony API
Raw Sockets API
Bluetooth API
Browser API
Calendar API
Device Capabilities API
Idle API
Media Storage API
Network Interface API
Secure Elements API
System Settings API
WebApps (Web Applications Working Group)
Clipboard API and events
Fullscreen API
Input Method (IME) API
Pointer Lock API
Gamepad API
25. WebRTC
Hello Chrome, itʼ’s Firefox calling!
https://hacks.mozilla.org/2013/02/hello-chrome-its-firefox-calling/
http://blog.chromium.org/2013/02/hello-firefox-this-is-chrome-calling.html
29. WebRTC
WebRTC = Web Real-‐‑‒Time Communications
ブラウザ上でリアルタイムコミュニケーションを実現するための仕様
双⽅方向性のあるコミュニケーションを必要とする様々なアプリケー
ションを開発できる
ビデオ/⾳音声チャット
テキストの共同編集
ゲーム
etc...
34. WebRTCの2つの仕様
「Media Capture and Streams(getUserMedia)」
ローカルのカメラやマイクからストリームデータを取得
する仕様
「WebRTC 1.0: Real-‐‑‒time Communication Between
Browsers」
主にP2P通信のための仕様が定義されている
38. Web Components
Web上の個々のコンポーネントを
パーツ化して⾃自由に利利⽤用できるよ
うにする
Custom Elements、HTML
Imports、Templates、Shadow
DOMなどの4つの仕様を組み合わ
せた総称
Polymer/Material Design、x-‐‑‒tags
などのライブラリが既にある
http://html5experts.jp/series/
web-‐‑‒components-‐‑‒2/
http://webcomponents.org/
39. 従来のサードパーティ製
コンポーネントを読み込む場合
…
<link rel="stylesheet" src="xxx.css">
…
<div class="xxx">
<div class="xxx-yyy"></div>
<div class="xxx-yyy"></div>
</div class="xxx">
…
<script src="jquery.ui.xxx.js">
依存性を気にしながら様々なファイルを読み込む
ライブラリは名前が被らないようなclassを付けて作成する必要が
ある
40. WebComponents
…
<link rel="import" href="xxx.html">
!
…
<custom-xxx>…</custom-xxx>
HTML Importsで外部コンポーネントを読み込み
カスタムタグでコンポーネントを利利⽤用する
45. Service Workers
完全なオフラインアプリケーションにも、⼀一部キャッシュのみ
の利利⽤用も可能な柔軟でプログラマブルな仕様
⼀一部のデータをキャッシュから表⽰示して、後から差し替えると
いったことも可能
例例)⽊木曜⽇日になったらすべての画像を猫画像に差し替えるコード
this.addEventListener('fetch', function (event) {
if (event.request.context === 'image' && new Date().getDay === 4) {
event.respondWith(
caches.match('/kitten.jpg');
)
}
48. Offline & Storage
• Application Cache … オフラインアプリケーション
• Web Storage … 簡易易ローカルストレージ
• Indexed Database … KVS型のローカルデータベース
• File APIs … ファイルの読み書き
• File System API … アプリから利利⽤用できるファイル領領
域
• online/offline events … オン/オフライン状態の把握
49. Offline & Storage
Application
Cache 10 3.5 4
(3.2)
4
(2.1) 10.6
Web Storage 8 3.5 4
(3.2)
4
(2.1) 10.5
Indexed Database 10* 10 7.1
(8*)
23
(4.4) 15
File APIs 10 3.6 6
(6.1)
13
(4.4) 11.1
File System API - - - 13
(4.4) 15
online/offline
events 9 3.5* 5
(4.3)
14
(2.3) 15
括弧の表記はモバイル(Safari $ iOS、Chrome $ Android)
*表記は実装が不完全または、実装古い可能性
50. Multimedia
• video/audio … 動画/⾳音楽再⽣生
• WebVTT … 字幕・トラック情報を追加
• Web Audio API … ⾳音声処理理・合成
• HTML Media Capture … メディアの取込み
(WebRTCのgetUserMediaへ移⾏行行しつつあります)
51. Multimedia
video 9 3.5 4
(3.2)
4
(2.3) 10.5
audio 9 3.5 4
(4.1)
4
(2.3) 10.5
WebVTT 10 31 6
(7.1)
18
(4.4) 15
Web Audio - 25 6
(6.1)
10
(4.4) 15
getUserMedia - 17 - 21
(4.4) 18
括弧の表記はモバイル(Safari $ iOS、Chrome $ Android)
*表記は実装が不完全または、実装古い可能性
52. Graphics, 3D & Effects
• Canvas … 2Dグラフィックス
• WebGL … 3Dグラフィックス
• SVG … ベクターグラフィックス
53. Graphics, 3D & Effects
Canvas 9 2 3.1
(3.2)
4
(3) 9.6
WebGL 11 4* 5.1*
(8)
18
(4.4) 12*
SVG 9 3 3.2
(3.2)
4
(4.4) 9.6
括弧の表記はモバイル(Safari $ iOS、Chrome $ Android)
*表記は実装が不完全または、実装古い可能性
54. Realtime / Connectivity
• WebSocket … リアルタイム双⽅方向通信
• Server-‐‑‒Sent Events … サーバープッシュ可能な通信(ロ
ングポーリング/Cometを仕様化)
• Web Messaging … Webページ間のメッセージ交換
• XMLHttpRequest(Level2) … クロスドメイン通信やバイ
ナリデータが送れるように
• Notifications … デスクトップに通知
• WebRTC … ⾳音声/動画でリアルタイムコミュニケーショ
ンを⾏行行う
55. Realtime / Connectivity
WebSocket 10 11 7
(6.1)
16
(4.4) 12.1
Server-Sent
Events - 6 5
(4.1)
6
(4.4) 11
Web Messaging
(Cross-document) 8* 3 4
(3.2)
4
(2.1) 9.6
XMLHttpRequest
(Level2) 10 4 5
(5.1)
7
(3) 12
Web
- 22 6
Notifications (-)
22
(4.4) 25
WebRTC
(P2P) - 22 - 23
(4.4) 18
括弧の表記はモバイル(Safari $ iOS、Chrome $ Android)
*表記は実装が不完全または、実装古い可能性
56. Device Access
• Geolocation API … GPS情報を取得
• Web Speech API… ⾳音声⼊入⼒力力
• Device Orientation …デバイスの向きや傾きを取得
• Contacts API … アドレス帳へのアクセス
• Calendar API … カレンダー情報の取得
• Battery Status API … バッテリーの状態を取得
• Network Information API … 通信環境の情報を取得
• USB, Bluetooth など
57. Device Access
Geolocation API 9 3.5 5
(3.2)
5
(2.1) 10.6
Web Speech API - - 7*
(7.1*)
31*
(4.4*) -
Device
Orientation 11 6 -
(4.3)
7
(3) 15
Battery Status
API - 10* - 38
(4.4) 25
Network
Information API - 12 - -
(2.2*) -
括弧の表記はモバイル(Safari $ iOS、Chrome $ Android)
*表記は実装が不完全または、実装古い可能性
58. Styling (CSS3)
• CSS3 Selectors … :first-‐‑‒child/:nth-‐‑‒child(odd)など、便便利利
な擬似クラスなどが増えた
• border-‐‑‒radius … ⾓角が丸く
• text-‐‑‒shadow/box-‐‑‒shadow … 影がつく
• gradient … グラデーション
• Webfonts … 外部フォントを扱えるように
• Transforms … 変形
• Transitions/Animations … CSSだけでアニメーションが可能
59. Styling (CSS3)
CSS3 selectors 9 3.5 3.2
(3.2)
4
(2.1) 9.6
CSS3 Border-radius 9 3 3.1
(3.2)
4
(2.1) 10.5
CSS Gradients 10 3.6 5.1
(5.1)
10
(4) 11.6
@font-face Web fonts 9 3.5 3.2
(4.3)
4
(4) 10.1
CSS3 Transforms 9 3.5 3.1
(3.2)
4
(2.1) 10.5
CSS3 Transitions 10 4 3.1
(3.2)
4
(2.1) 10.5
CSS3 Animation 10 5 4
(3.2)
4
(4) 12
括弧の表記はモバイル(Safari $ iOS、Chrome $ Android)
*表記は実装が不完全または、実装古い可能性
70. Google I/O 2014の
”Mobile Web performance auditing”を
中⼼心に参考になるTipsを紹介
!
同じセッションを題材にしたHTML5 Expert.jpの記事
http://html5experts.jp/furoshiki/8582/
80. Page Load
Page Loadで重要なのは、ファーストビューが描
画されるまでの時間(画⾯面外のレンダリングや画
像の読込みなどは体感速度度には影響しない)
WebPageTestでは、「Speed Index」が良良い指
標になる
85. Optimizing the Critical Rendering Path
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/