SlideShare a Scribd company logo
@albatrosary
http://albatrosary.hateblo.jp/
http://html5experts.jp/albatrosary/
HTML5最前線
佐川 夫美雄 HTML5 Experts.jp エキスパート
html5j(スタッフ)
AngularJS Japan User Group(スタッフ)(Fumio SAGAWA)
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
Offline Web Application
Web 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 Database
KVSでローカルに保持する標準インターフェース
Online and Offline events
オンライン/オフラインの把握
Service Workers
Offline Web ApplicationのためのApplication Cacheに
変わる仕様
Web Applicationのローカルプロキシとしてバックエンド
プロセスで動作
個別ファイル単位でキャッシュするかどうかJavaScriptで
制御
Offline Web Application
http://www.ashiras.xyz/
Realtime Connectivity
WebSocket
Server-Sent Events
Web Messaging
XMLHttpRequest(Level2)
Notifications
WebRTC
WebSocket
リアルタイムな双方向通信を実現
Ajaxのように単方向単一データのやり取りではなく、一度
コネクションを確立すれば自由にデータのやり取りが可能
WebRTC
Web Real----Time Communications
ブラウザ上でリアルタイムコミュニケーションを実現する
ための仕様
双方方向性のあるコミュニケーションを必要とする様々な
アプリケー ションを開発できる
ビデオ/音音声チャット テキストの共同編集 ゲーム etc...
WebRTCの2つの仕様
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 Components
HTMLを部品化する仕組み
Custom Elements
HTML Templates
HTML Imports
Shadow DOM
Custom
Elements
独自タグを定義
HTML
Templates
HTMLを部品化
HTML
Imports
HTMLを取り込む
Shadow
DOM
DOMのカプセル化
HTML5最前線
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.
HTML5最前線
The Physical Web
HTML5はWebだけでなく、様々なデバイスの アプリケーショ
ンプラットフォームとなりつつある。 また、そういったデバイ
スが身身近にあることでWebの利用方法も変化している。
Internet of Things
Ethereum
Smart Contract
Internet of Things
デバイスに広がるHTML5
- モノ(機器)をネットに繋いでやりとりさせる
ECMAScript
HTML5最前線
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
HTML5最前線
HTML5最前線
HTML5最前線
HTML5最前線
導入目的
設定ファイルからプログラミング
オブジェクト指向CSSの導入(OOCSS)
開発効率を上げる
idやclassへの命名規則は決める必要がある
49
CSS Preprocessor
HTML5最前線
HTML5最前線
HTML5最前線
HTML5最前線
HTML5最前線
HTML5最前線
HTML5最前線
http://yeoman.io/
http://yeoman.io/
Scaffolding
HTML5最前線
YEOMAN - feature
テンプレートがそろってる
Web開発に必要なツールがたくさんある
lint,hint,ビルド,テストが行える
html,css,js,画像をminifyしてくれる
まだまだ色々あります
HTML5最前線
HTML5最前線
Development Life Cycle
generator-angular-eggs
https://www.npmjs.com/package/generator-angular-eggs
まとめ
やることの多いWeb開発
YEOMANを使って道具を活用する
進化し続けるHTML5
END

More Related Content

HTML5最前線