html5のいま 2014
DESCRIPTION
TRANSCRIPT
HTML5のいま ～ 2014
Name: !
佐川 夫美雄
HTML5Expert.jpコントリビュータ html5jエンタープライズ部 副部長 Angularユーザ会 スタッフ Sencha UG CO-ORGANIZER
@albatrosary http://albatrosary.hateblo.jp/ http://html5experts.jp/albatrosary/
HTML5が2014年に正式勧告
Webの技術変化は以前と比べ物にならない
SGML(standard Generalized Markup Language) 1986年
HTML(HyperText Markup Language) 1989年
HTML 4.0(HyperText Markup Language) 1997年
XML(eXtensible Markup Language) 1998年
XHTML(eXtensible HyperText Markup Language) 2000年
HTML 5.0(HyperText Markup Language) 2012年
CSS 1 1996年
CSS 2 1998年
CSS 2.1 2004年
CSS 3 2011年
HTTP 1.1 1999年
HTTP 1.0 1996年
HTTP 0.9 1993年
SPDY 2011年
XHTML 2.0(eXtensible HyperText Markup Language) 2010年
HTTP 2(draft) 2012年
Webの歴史
• １回のコネクションにつき１リクエストしか遅れない
• リクエストがクライアントからしか開始できない
• リクエスト／レスポンスヘッダが非圧縮のためヘッダサイズが大きい
• ヘッダが冗長
• データ圧縮の使用が強制ではない
HTTPの問題
WebSocket
•従来のXMLHttpRequest（Ajax）の欠点を解決する技術
•WebSocket は push/pull（Ajax は push）
•WebSocket < Socket
•リアルタイム・ウェブ
Ajax(Asynchronous JavaScript + XML)
•Webブラウザ内で非同期通信とインターフェースの構築などを行う技術の総称
• XMLHttpRequestによる非同期通信を利用し、通信結果に応じてダイナミックHTMLで動的にページの一部を書き換える
これはなに？
•クライアントから HTTPで接続 •ヘッダー情報に「WebSocketで接続する」情報が入っている •HTTP接続からWebSocket接続へ「アップグレード」する •クライアントとサーバが接続し続ける •これにより双方向通信が可能となる
どうなってるの？
URL ws:// wss://
ポート ws:80 wss:443
WebSocket
• 既存のHTTPを拡張し通信の高速化を目指したプロトコル
• 単一のSPDYセッションで複数のリクエストを送受信することが可能
• サーバヒント：クライアント側からコンテンツをダウンロードする際に、コンテンツの展開に必要と思われる付属データを提案する
• サーバプッシュ：サーバ側からクライアントに対しデータをプッシュする
これはなに？
ブラウザ
•Google Chrome, Chromium
•Mozilla Firefox
• Opera
サーバ
• Jetty v7.6.2/v8.1.2
• Apache：SPDY モジュール（mod_spdy）
どうなってるの？
chrome chrome://net-internals/#spdy !
Firefox about:config
見てみよう！
ブラウザ 最大接続数IE6 2IE7 2IE8 6IE9 6
Firefox 6Chrome 6Safari 6
ちなみに
•HTTP 2.0はSPDYを規格ベースとしている
•HTTPbisワーキンググループでHTTP 2.0 を策定する作業を開始
このふたつのプロトコルは相補的です。WebSocketsはサーバとの最初のハンドシェイクをHTTPで行い、ws://プロトコルがサポートされているかどうかを調べます。一方、SPDYはHTTPリクエストのヘッダを圧縮しキャッシュすることで最適化を図ります。したがって、SPDYを使い、リアルタイムの通信にはWebSocketsを使うのが、RESTfulなリクエストをベースにしたウェブの理想的なかたちです。このふたつのプロトコルは似ています。 !
by Brit GArdner
WebSocket
より早く、双方向に
WebSocket
Canvas Canvas テキスト ビデオ ビデオフォーマット input タイプ プレースホルダ フォームのオートフォーカス マクロデータ
広義の意味でHTML5の特徴Geolocation ストレージ Web Workers オフライン Web アプリケーション
• header, footer, articleなど記述部分がどこか区別されるようになった
• audio.video,canvasタグにより、動画編集が可能になった
• flashとか採用しない
いままで <!DOCTYPE html public “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
DOCTYPE
これから <!DOCTYPE html>
いままで <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
ルート要素
これから <html lang=”en”>
いままで <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
文字エンコーディング
これから <meta charset=”utf-8”>
rel=”nofollow” rel=”noreferrer” rel=”pingback” rel=”prefetch” rel=”search” rel=”sidebar” rel=”tag”
リンクタイプ
rel=”stylesheet” rel=”alternate” rel=”archives” rel=”author” rel=”external” rel=”start”, rel=”prev”, rel=”next” rel=”up” rel=”icon” rel=”license”
<section> 文書またはアプリケーションの汎用的なセクションを示す !
<nav> 別のページまたはページ内の別の場所にリンクするセクションを示す !
<article> 例えばフィードなど独立して配布または再利用されることを意図した文書、ページ、アプリケーションまたはサイト中の自己完結した構成物を示す
新しい意味要素（1/3）
<aside> その周りのコンテンツにあまり関係ないコンテンツから構成されるページのセクションであって、周りのコンテンツから離れていると見なされるものを示す !
<hgroup> セクションの見出しを示す !
<header> 導入またはナビゲーションの助けとなるグループを示す
新しい意味要素（2/3）
<footer> その一番近い祖先のセクションを構成するコンテンツまたはセクションを構成するルートのフッターを示す !
<time> ２４時間表示の時刻、または補外グレゴリオ暦による日付（時刻とタイムゾーンを含むことができる）を示す !
<mark> 参照目的でマークまたはハイライトされた文章を示す
新しい意味要素（3/3）
いままで <div class=”header”> <h1>My Weblog</h1> <p class=”tagline”>A lot of effort went into..</p> </div> !
これから <header> <h1>My Weblog</h1> <p class=”tagline”>A lot of effort went into..</p> </header>
header要素
いままで <div class=”entry”> <p class=”post-date”>Ovtober 22, 2009</p> <h2>Travel day</h2> </div> !
これから <time datetime=”2009” pubdate>October 22, 2009</time> <time datetime=”2009-10-22”>last Thursday</time>
time要素
timeタグは３つの部分に分けられる ・検索可読なタイムスタンプ ・人間が読むためのテキスト ・オプションのpubdate フラグ !
機械可読な日付やタイムスタンプが datetime 属性が指定されていればテキストは何でもよい
time要素 - 特徴
いままで <div id=”nav”> <ul> <li><a href=”#”>home</a></li> <li><a href=”#”>blog</a></li> <li><a href=”#”>gallery</a></li> </ul> </div>
ナビゲーション要素
これから <nav> <ul> <li><a href=”#”>home</a></li> <li><a href=”#”>blog</a></li> <li><a href=”#”>gallery</a></li> </ul> </nav>
いままで <div id=footer> <p>§</p> <p>§ 2001–9 <a href=”#”>Mark</a></p> <div> !
これから <footer> <p>§</p> <p>§ 2001–9 <a href=”#”>Mark</a></p> </footer>
フッター要素
HTML4 HTML5
ここまでの意味要素のまとめ
カレンダーやデートピッカー 月の入力 週の入力 時刻の入力 詳細な日時や時刻の入力 自分のいる地域の日付と時刻
inputタイプの種類
検索ボックス スピンボックス スライダ カラーピッカー 電話番号 Webページのアドレス メールアドレス
http://www.tohoho-web.com/html/index.htm
geo.jsはW3CのGeolocation APIやGearsのAPI各種モバイルプラットフォームの提供する API の間の違いを吸収するオープンソースのライブラリ
Geolocation APIによる位置情報通知
スマフォのChromeで天気予報を検索すると見れます
https://github.com/mayconbordin/geo.js
Geolocation
coords.latitude coords.longitude coords.altitude coords.accuracy coords.altitudeAccuracy coords.heading coords.speed timestamp
Geolocation positionオブジェクトのプロパティ
Webkit Apple が中心となって開発されているオープンソースのHTMLレンダリングエンジン HTML, CSS, JavaScript, SVGを解釈
Google Chrome：Chromiumベース Safari：WebKit2
IE9でHTML5準拠（?）
ブラウザ
どうなってるの？
http://html5test.com/
ブラウザはどこまで 対応できてるの？
ブラウザ
値とオブジェクトをローカルデータベースに保持する標準インターフェース
オブジェクト • indexedDB • IDBTransaction • IDBKeyRange • IDBCursor
chrome webkitIndexedDB Firefox 4.8 moz_indexedDB Firefox 4.9 mozindexedDB ie10 msIndexedDB
Indexed Database API これはなに？
length:保存されているデータ数 key(n):保存されているn番目のkey getItem(key):keyに対応するvalue setItem(key, value):keyとvalueのペアでデータを保存 removeItem(key):keyに対応するvalueを削除 clear():データをすべてクリア
key-value型のデータストア • sessionStorage • localStorage
のストレージが用意されている（IE8から使える）
WebStorageこれはなに？
別ウィンドウのデータ共有 データの有効期限 データ量の上限 サーバへのデー
タ送信
クッキー ○ 指定期限まで有効 4KB サーバへのアクセスごと
session × 別ウィンドウ／タブを閉じるまで有効 5MB jsにて
local ○ 永続的に有効 5MB jsにて
WebStorage比較してみる
Application Cacheこれはなに？
•オフライン ブラウジング: ユーザーがオフラインのときでも、すべてのサイトにアクセスできる。
•高速: キャッシュされたリソースはローカルなので、高速に読み込まれる。
•サーバー負荷の軽減: ブラウザは、変更があったリソースのみをサーバーからダウンロードする。
manifestファイルCACHE MANIFEST # リソースを更新する場合、必ず値を変更する # マニフェストファイルを保存しておく場所は、htmlファイルと同じディレクトリです # 2013-04-06 12:40 !# キャッシュしたいリソース # このうち一つでもファイルが見つからないとエラーになりキャッシュされません。 CACHE: sample.html js/test.js css/test.css !# 常にネットワーク上を参照して欲しい場合に使用 # 必ずオンラインアクセスを試みるリソース NETWORK: test.cgi !# 代替エントリを宣言 # アクセスに失敗した場合に代わりに使用するリソース（NETWORK:と両方に指定すると動作しない） FALLBACK: online.png error.png
<html manifest="sample.appcache">
Application Cacheどうすればいいの？
WebWorker
JavaScriptにスレッド機能を追加する
これはなに？
WebWorker
var worker = new Worker(‘task.js'); ウェブ ワーカーは独立したスレッドで動作する ウェブ ワーカーによって実行されるコードは個別のファイルに格納する必要があります。
どうやるの？
ご清聴ありがとうございました