Downloaded 25 times
Uploaded byyoshikawa_t
2,218 views
HTML5開発最前線
2014/12/12に開催されたCSAJセミナーでの講演資料です。http://www.csaj.jp/seminar/2014/1212_seminar.html
Recommended
More Related Content
What's hot
Viewers also liked
Similar to HTML5開発最前線
More from yoshikawa_t
HTML5開発最前線
- 1.HTML5開発最前線 2014/12/12 モバイルソリューション研究会Toru Yoshikawa (@yoshikawa_t)
- 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/
- 3.Agenda 広がる、つながるHTML5 注⽬目の最新仕様モバイルの現状とこれからの課題 ※ HTML5 = 次世代Web標準技術
- 4.
- 5.HTML5 勧告について HTML5は、2014年年10⽉月28⽇日に勧告（正式な仕様として公開） しかしながら開発者にとってインパクトの⼤大きいものでは なく、既に馴染んでいる仕様のスナップショットと捉えて いる 世間的な認知、特許等の問題から対外的な説得⼒力力は増した 現在もHTML5.1及び次世代Web標準技術は、⽇日々新しい 仕様が追加され、検討されている
- 6.
- 7.デスクトップだけでなく様々な デバイスに広がるHTML5 モバイル／ハイブリッドアプリ電⼦子書籍リーダー ゲーム機 テレビ／家電 デジタルサイネージ ⾃自動⾞車車
- 8.
- 9.
- 10.
- 11.
- 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/
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.⾃自動⾞車車におけるHTML5 富士通テン QNXCAR Tizen IVI
- 19.
- 20.デバイスとつながる（API） DAP (DeviceAPIs 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
- 21.デバイスとつながる （ハードウェア／コントローラー） OpenWeb Board Tessel Espruino Leap Motion Kinect Arduino Intel PerC Rasberry Pi MYO XBee Ubi interactive
- 22.ロボット 「Romo」 http://www.romotive.jp/「Double」 http://www.doublerobotics.com/
- 23.ULTRASONIC NETWORKING ONTHE WEB http://smus.com/ultrasonic-networking/
- 24.Network Service DiscoveryAPI 家庭内の機器をネットワークを通じて接続する http://www.w3.org/TR/discovery-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
- 26.The Physical Webhttp://google.github.io/physical-web/
- 27.HTML5はWebだけでなく、様々なデバイスの アプリケーションプラットフォームとなりつつある。 また、そういったデバイスが⾝身近にあることでWebの利利⽤用⽅方法も変化している。
- 28.
- 29.WebRTC WebRTC =Web Real-‐‑‒Time Communications ブラウザ上でリアルタイムコミュニケーションを実現するための仕様 双⽅方向性のあるコミュニケーションを必要とする様々なアプリケー ションを開発できる ビデオ／⾳音声チャット テキストの共同編集 ゲーム etc...
- 30.WebSocketとWebRTC WebSocketは、リアルタイムな双⽅方向通信を実 現する仕様Ajaxのように単⽅方向、単⼀一データのやり取りでは なく、⼀一度度コネクションを確⽴立立すれば⾃自由にデー タをやり取りできる WebSocketで既にリアルタイム双⽅方向通信は実 現しているが、WebRTCとの違いは何か？
- 31.
- 32.
- 33.WebSocketとの違い WebRTCは、P2P通信を利利⽤用して端末間の相互接 続が可能サーバーを経由しないため、⾼高速な通信ができる WebRTCでは、データ通信⽅方式がUDPのため品質 よりもリアルタイム性を重視したデータに適して いる（再送制御は可能なため、正確なデータ通信 ができないわけではない）
- 34.WebRTCの2つの仕様 「Media Captureand Streams（getUserMedia）」 ローカルのカメラやマイクからストリームデータを取得 する仕様 「WebRTC 1.0: Real-‐‑‒time Communication Between Browsers」 主にP2P通信のための仕様が定義されている
- 35.
- 36.WebRTCの事例例 https://chat.skyway.io/ https://www.twilio.com/http://plivo.com/ https://peercdn.com/
- 37.WebRTC(ORTC)の事例例 Skype forWeb http://blogs.skype.com/2014/11/14/please-welcome-skype-for-web-beta/
- 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 … <linkrel="import" href="xxx.html"> ! … <custom-xxx>…</custom-xxx> HTML Importsで外部コンポーネントを読み込み カスタムタグでコンポーネントを利利⽤用する
- 41.Polymer Design Toolshttps://www.polymer-project.org/tools/designer/
- 42.
- 43.対応状況 Templates HTMLImport Custom Elements Shadow DOM
- 44.Service Workers オフラインWebアプリケーションのためのAppCacheに代わる仕様 Webアプリのローカルプロキシとして、バックグラウ ンドプロセスで動作する 個別ファイルごとにキャッシュするかどうかを JavaScriptから制御できる http://html5experts.jp/myakura/8365/
- 45.Service Workers 完全なオフラインアプリケーションにも、⼀一部キャッシュのみの利利⽤用も可能な柔軟でプログラマブルな仕様 ⼀一部のデータをキャッシュから表⽰示して、後から差し替えると いったことも可能 例例）⽊木曜⽇日になったらすべての画像を猫画像に差し替えるコード this.addEventListener('fetch', function (event) { if (event.request.context === 'image' && new Date().getDay === 4) { event.respondWith( caches.match('/kitten.jpg'); ) }
- 46.
- 47.
- 48.Offline & Storage• Application Cache … オフラインアプリケーション • Web Storage … 簡易易ローカルストレージ • Indexed Database … KVS型のローカルデータベース • File APIs … ファイルの読み書き • File System API … アプリから利利⽤用できるファイル領領 域 • online/offline events … オン/オフライン状態の把握
- 49.Offline & StorageApplication 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 93.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 / ConnectivityWebSocket 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 GeolocationAPI 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) CSS3selectors 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） *表記は実装が不完全または、実装古い可能性
- 60.
- 61.モバイルの現状 2014年年の端末出荷台数は当然ながらPCに⽐比べて モバイル（スマフォ＋タブレット）が8倍（Gatner） 2017年年には、タブレット単体でPCの出荷台数を 抜く（Gatner） インターネットトラフィックシェアは、2014年年7 ⽉月を堺に逆転（Intelligent Positioning）
- 62.
- 63.ネイティブとHTML5 Facebookのザッカーバーグが「HTML5は時期尚早 だった」（http://www.publickey1.jp/blog/12/html5html5.html）サイバーエージェントがネイティブアプリに注⼒力力 （http://jp.techcrunch.com/2014/07/24/jp20140724cyberagent/） 機能的にはアプリのほとんどは、HTML5での実装 が可能なものにも関わらずネイティブアプリが強い モバイルアプリの隆盛とハイブリッドアプリの登場
- 64.
- 65.
- 67.API モバイルアプリ（Andorid、US）のうち、61% がAPIが⾜足りないためにネイティブアプリを選択して いる しかし、Power Management APIとWifi APIが実装 されていれば、そのうちの 21% はWebアプリを選 択する ちょっとした⼀一部機能でAPIが⾜足りない状況
- 69.最⼤大の問題は Performance 既にデスクトップでは、⼗十分なパフォーマンスがあるモバイルはスマートフォンの1/5の性能である ハードとブラウザの進化によって⽇日々パフォーマンス は向上しているものの、まだまだ過渡期できちんとし た作り込みが必要 パフォーマンスを向上して、ネイティブアプリに近づ ける努⼒力力が必要
- 70.Google I/O 2014の”Mobile Web performance auditing”を 中⼼心に参考になるTipsを紹介 ! 同じセッションを題材にしたHTML5 Expert.jpの記事 http://html5experts.jp/furoshiki/8582/
- 71.パフォーマンスチューニング 2つの視点 PageLoad … ページのローディング、表⽰示まで のチューニング Runtime … ページ中の動作を60fpsで実現する ためのチューニング
- 72.
- 73.Page Load リソースの最適化リクエスト数を抑える リダイレクトを避ける レンダリングの優先度度
- 74.リソースの最適化 Webサイトのサイズのうち63%は画像 画像を⼩小さくすれば多くの通信容量量を削減することができる貧弱なモバイル回線ではとても重要 ツールを利利⽤用する JPEG: jpegtran、jpegoptim PNG: OptiPNG、PNGOUT （私はMacでImageAlpha、ImageOptimを使ってます） その他、JS、CSSファイルのminifyなど
- 75.リクエスト数を抑える モバイル回線ではHTTPリクエストは⾮非常に⾼高コスト 電波状況にもよるが、1リクエスト増えたら200ms〜～1000ms増えてもおかしくない JS、CSSの結合など 画像の結合（CSS Sprite） JS、CSS、画像の埋め込み（data URL）など
- 76.DNSプリフェッチ <link rel="dnp-prefetch"href="example.com"> ! 事前にDNS Lookupを済ませてキャッシュしておく 別ドメインへのアクセスがある場合は⾼高速化できる かも（SNSボタン等）
- 77.
- 78.
- 79.
- 80.Page Load PageLoadで重要なのは、ファーストビューが描 画されるまでの時間（画⾯面外のレンダリングや画 像の読込みなどは体感速度度には影響しない） WebPageTestでは、「Speed Index」が良良い指 標になる
- 81.WebPageTestの結果 White screenVisually complete
- 82.
- 83.
- 84.レンダリングの優先度度 レンダリングをブロックするリソースを取り除く ファーストビューのリソースを再優先に画像の遅延読込みなど（Lazy Loadなど） スクロールしなければ表⽰示されない領領域は後回しに プログレッシブJPEG、インターレースPNGを使う
- 85.Optimizing the CriticalRendering Path https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
- 86.Runtime 60Hz >60fps > 16ms
- 87.Runtime アニメーションにおいて過度度な装飾を抑える requestAnimationFrameを使うDOMアクセスの最適化 メモリの最適化（JavaScript）
- 88.
- 90.
- 91.Thank you!! (@yoshikawa_t ) ! Question?