@albatrosaryhttp://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/

HTML5最前線

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

Web Components

Custam Elements

HTML Template

HTML Imports

Shadow DOM

Multimedia

video/audio

Web Audio APIWebVTT

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

Web Storage

online/offline events

Application Cache

Service Workers

Realtime Connectivity

WebRTC

Notifications

WebSocket

Server-Sent Events

XMLHttpRequest(Level2)

Web Messageing

Offline Web ApplicationWeb Storage

Application Cache File System API

Indexed Database online/offline events

Service Workers

Web Storage

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

Application Cache

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

File System API

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

Indexed DatabaseKVSでローカルに保持する標準インターフェース

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

Service Workers

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

Offline Web Application

http://www.ashiras.xyz/

Realtime ConnectivityWebSocket

Server-Sent Events Web Messaging

XMLHttpRequest(Level2) Notifications

WebRTC

WebSocket

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

WebRTC

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

WebRTCの２つの仕様

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

WebSocketとの違い

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

SkyWay

WebRTC(SkyWay)サンプル

http://albatrosary.github.io/skyway/

Web ComponentsHTMLを部品化する仕組み

Custom Elements HTML Templates HTML Imports Shadow DOM

Custom Elements

独自タグを定義

HTML Templates

HTMLを部品化

HTML Imports

HTMLを取り込む

Shadow DOM

DOMのカプセル化

Graphics

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

Multimedia

video/audio WebVTT

Web Audio API HTML Media Capture

video/audio動画/音楽再生

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

Web Audio API音声処理・合成

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

Device Access Geolocation API Web Speech API

Device Orientation API Calendar API

Battery Status API Network Information API

USB, Bluetooth, etc.

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

Internet of Things Ethereum

Smart Contract

Internet of Thingsデバイスに広がるHTML5

- モノ(機器)をネットに繋いでやりとりさせる

ECMAScript

Object.observe()

JavaScriptオブジェクトの変更を監視 ECMAScript 標準（ECMA7）

Object.observe()はOo()と書くときがあります。Oo()を使うとAngularJSやEmber.jsなどで実装されている双方向データバインディングが可能となる。 フレームワークなしで2Wayデータバインディングが可能となります。

Styling(CSS3)CSS3 Selectors border-radius

text-shadow/box-shadow gradient Webfonts

Transforms Transitions/Animations

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

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

https://angularjs.org/

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

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

導入目的

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

altJS

導入目的

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

49CSS Preprocessor

http://yeoman.io/

http://yeoman.io/

Scaffolding

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

Development Life Cycle

generator-angular-eggs

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

まとめ

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

END