Current HTML5 Technology

1. @albatrosary
http://albatrosary.hateblo.jp/
http://html5experts.jp/albatrosary/
HTML5最前線

2. 佐川 夫美雄 HTML5 Experts.jp エキスパート
html5j（スタッフ）
AngularJS Japan User Group（スタッフ）(Fumio SAGAWA)

3. Web Components
Custam Elements
HTMLTemplate
HTMLImports
Shadow DOM
Multimedia
video/audio
Web Audio API
WebVTT
HTML Media Capture
Graphics
SVG
WebGL
Canvas
Device Access
Calendar API
Geolocation API
Network Information API
USB, Bluetooth, etc
Web Speech API
Device Orientation API
Battery Status API
HTML5
Indexed Database
Offline Web Application
File System API
WebStorage
online/offline events
ApplicationCache
Service Workers
Realtime Connectivity
WebRTC
Notifications
WebSocket
Server-SentEvents
XMLHttpRequest(Level2)
WebMessageing

4. Offline Web Application
Web Storage
Application Cache
File System API
Indexed Database
online/offline events
Service Workers

5. Web Storage
Local Storage/Session Storage
JavaScriptで制御可能
サイズが5MBとクッキーに比べ大容量
Session Storageでは別ウィンドウ／タブを閉じるまで有効
Local Storageでは永続的に有効であり別ウィンドウでもデー
タが共有される

6. Application Cache
オフライン ブラウジング: ユーザーがオフラインのときでも、
すべてのサイトにアクセスできる。
高速: キャッシュされたリソースはローカルなので、高速に読
み込まれる。
サーバー負荷の軽減: ブラウザは、変更があったリソースのみ
をサーバーからダウンロードする。

7. File System API
ファイルの読み取りと操作: File/Blob、FileList、FileReader
作成と書き込み: BlobBuilder、FileWriter
ディレクトリとファイル システムのアクセス:
DirectoryReader、FileEntry/DirectoryEntry、
LocalFileSystem

8. Indexed Database
KVSでローカルに保持する標準インターフェース

9. Online and Offline events
オンライン/オフラインの把握

10. Service Workers
Offline Web ApplicationのためのApplication Cacheに
変わる仕様
Web Applicationのローカルプロキシとしてバックエンド
プロセスで動作
個別ファイル単位でキャッシュするかどうかJavaScriptで
制御

11. Offline Web Application
http://www.ashiras.xyz/

12. Realtime Connectivity
WebSocket
Server-Sent Events
Web Messaging
XMLHttpRequest(Level2)
Notifications
WebRTC

13. WebSocket
リアルタイムな双方向通信を実現
Ajaxのように単方向単一データのやり取りではなく、一度
コネクションを確立すれば自由にデータのやり取りが可能

14. WebRTC
Web Real----Time Communications
ブラウザ上でリアルタイムコミュニケーションを実現する
ための仕様
双方方向性のあるコミュニケーションを必要とする様々な
アプリケー ションを開発できる
ビデオ／音音声チャット テキストの共同編集 ゲーム etc...

15. WebRTCの２つの仕様
Media Capture and Streams（getUserMedia）
ローカルのカメラやマイクからストリームデータを取得 す
る仕様
WebRTC 1.0: Real----time Communication
Between Browsers
主にP2P通信のための仕様が定義されている

16. WebSocketとの違い
WebRTCは、P2P通信を利用して端末間の相互接続が可能
サーバーを経由しないため、高高速な通信ができる
WebRTCでは、データ通信方方式がUDPのため品質よりも
リアルタイム性を重視したデータに適している

17. SkyWay

18. WebRTC(SkyWay)サンプル
http://albatrosary.github.io/skyway/

19. Web Components
HTMLを部品化する仕組み
Custom Elements
HTML Templates
HTML Imports
Shadow DOM

20. Custom
Elements
独自タグを定義

21. HTML
Templates
HTMLを部品化

22. HTML
Imports
HTMLを取り込む

23. Shadow
DOM
DOMのカプセル化

25. Graphics
Canvas: 2D Graphics
WebGL: 3D Graphics
SVG: Vector Graphics

26. Multimedia
video/audio
WebVTT
Web Audio API
HTML Media Capture

27. video/audio
動画/音楽再生

28. WebVTT
字幕・トラック情報を追加

29. Web Audio API
音声処理・合成

30. HTML Media Capture
メディアの取り込み
WebRTCのgetUserMediaへ移行しつつある

31. Device Access Geolocation API
Web Speech API
Device Orientation API
Calendar API
Battery Status API
Network Information API
USB, Bluetooth, etc.

33. The Physical Web
HTML5はWebだけでなく、様々なデバイスの アプリケーショ
ンプラットフォームとなりつつある。 また、そういったデバイ
スが身身近にあることでWebの利用方法も変化している。
Internet of Things
Ethereum
Smart Contract

34. Internet of Things
デバイスに広がるHTML5
- モノ(機器)をネットに繋いでやりとりさせる

35. ECMAScript

37. Object.observe()
JavaScriptオブジェクトの変更を監視
ECMAScript 標準（ECMA7）
Object.observe()はOo()と書くときがあります。
Oo()を使うとAngularJSやEmber.jsなどで実装され
ている双方向データバインディングが可能となる。
フレームワークなしで2Wayデータバインディング
が可能となります。

38. Styling(CSS3)
CSS3 Selectors
border-radius
text-shadow/box-shadow
gradient
Webfonts
Transforms
Transitions/Animations

39. Web Application
どうやってアプリケーションを開発していくか

40. HTML5 Architectures
Page Display
Page Generation
Logic & State
Data
Integration
User Interface
Interface
Management
Logic & State
Data
Integration
APIs
HTML5
(Single-page Application)
Browser
App Server
OLD Web
HTML & CSS
JavaScript
JSON

41. https://angularjs.org/

42. 特徴
双方向バインディング
テンプレートとしてのHTML
簡単なものならJavaScriptを書かない
Web Componentsを意識した作り
Object.observe()に似た機能

43. 主な機能
ビルトインディレクティブ
フィルター・サービス・フォームバリデーション
グローバルAPI
モジュールとDI
スコープとコントロール
ルーティングと通信
カスタムフィルター・カスタムサービス・カスタムディレ
クティブ

44. 導入目的
コーティングルールを強制
書き方の統一
つまらないミスを軽減
開発効率を上げる
学習コストが低い
altJS

49. 導入目的
設定ファイルからプログラミング
オブジェクト指向CSSの導入(OOCSS)
開発効率を上げる
idやclassへの命名規則は決める必要がある
49
CSS Preprocessor

57. http://yeoman.io/

58. http://yeoman.io/

59. Scaffolding

61. YEOMAN - feature
テンプレートがそろってる
Web開発に必要なツールがたくさんある
lint,hint,ビルド,テストが行える
html,css,js,画像をminifyしてくれる
まだまだ色々あります

64. Development Life Cycle

65. generator-angular-eggs
https://www.npmjs.com/package/generator-angular-eggs

66. まとめ
やることの多いWeb開発
YEOMANを使って道具を活用する
進化し続けるHTML5

67. END