HTML5&API総まくり

HTML5&API総まくり白石俊平 @Shumpei

HTML5、盛り過ぎじゃないですか？

今年ちょっと勉強サボリ気味だったので、正直追えてませんでした・・・

年末暇だったので、総復習してみたのでその成果を共有します！

HTML/DOM/ブラウザ環境

• 現在の要素数は108 • 30種類の新要素 • 14種類の既存要素が変化• time要素、hgroup要素、data要素（WHATWG HTMLのみ）などが争点。HTML5マークアップ

• リッチな入力フォーム、新たなフォーム要素、宣言的なバリデーションなど。 date datetime datetime-local month week time number range email url search tel colorHTML5 Forms

• HTMLにマシンリーダブルなデータを埋め込むための仕様<div itemscope> <p>お名前: <span itemprop="name">白石</span></p> <p> : <time itemprop="birthDate">1978/03/24</time> </p></div>HTML Microdata

• HTMLにマシンリーダブルなデータを埋め込むための仕様• RDFはXMLで、RDFaは属性で定義。 RDFa Liteは、RDFaの初心者用サブセット<div vocab="http://schema.org/" typeof="Person"> <p>お名前: <span property="name">白石</span></p> <p> : <time property="birthDate">1978/03/24</time> </p></div>RDF/RDFa/RDFa Lite

• MicrodataやRDFaで利用する、共通ボキャブラリ• MS/Google/Yahooが協力して策定<div itemscope itemtype="http://schema.org/Person"> <p>お名前: <span itemprop="name">白石</span></p> <p> : <time itemprop="birthDate">1978/03/24</time> </p></div>Schema.org

• HTML5、DOM3 Core、Element Traversal、DOM3 Events、DOM2 Traversal and Rangeなど、複数に散らかっている仕様を統合するのが主目的。• 例えば、以下のようなAPIが含まれる。 • Document#getElementsByClassName() • Element#classListDOM4

• DOMをカプセル化し、DOMツリーのコンポーネント化を実現する仕組みvar dialog = document.getElementById("dialog");var root = new ShadowRoot(dialog);root.appendChild(…);Shadow DOM

• async属性・・・スクリプトファイルの非同期読み込みが可能に• defer属性・・・スクリプトファイルのダウンロードは非同期で行われ、実行はページの読み込み後<script async defer src="ad.js"></script>script要素の新属性

• style要素にscopedを指定すると、スタイリングの効果が親要素の子孫ノードに限定される <body> <h1>ページの見出し</h1> <section> <style scoped> h1 { color: red; } </style> <h1>セクション見出し</h1> </section>style要素のスコープ化

• ドラッグ＆ドロップを実現するためのAPI• draggable属性を付与するとドラッグ可能に• dragstart/dragenter/dragover/dropと言ったイベントを処理する• ファイルのドラッグ＆ドロップも可能// ドロップイベントを処理するハンドラtarget.ondrop = function(event) { // ドロップされたファイルを取得 var files = event.dataTransfer.files; for (var i = 0; i < files.length; i++) { var file = files[i]; alert("名前:" + file.name + " サイズ:" + file.size); }};Drag & Drop API

• ブラウザの履歴（「戻る」「進む」）に任意の状態をひもづけられる。• popstateイベントを捕捉して、自前の「戻る」「進む」処理を記述可能history.pushState(data, document.title);onpopstate = function(event) { // 状態を復元};履歴管理API

• Base64用ユーティリティ関数。• 仕様も実装も（実は）揃っているbtoa(“a”); //”YQ==”atob(“YQ”); // “a”window.atob()/btoa()

• JavaScriptで暗号化処理を行うためのAPI• 「Web Cryptography API」として、2012年4月ころに最初のドラフトを予定window.crypto.pk.generateKeypair("DSA", function(pubKey) { … }, false);DOMCryptAPI

• CSSセレクタで要素を絞り込むためのAPI • document.querySelector(selector) • document.querySelectorAll(selector)• Level2から、find()/findAll()が増え、jQuery風にチェーンで絞込みが可能にvar elements = document.querySelectorAll(".section");Selectors API

• AndroidのIntentをWebアプリ間で実現するための API。• <intent>要素を検知したブラウザは、サービスを自身に登録するvar intent = new Intent();intent.action = Intent.EDIT;intent.type = image/png;intent.data = getImageDataURI(image);window.navigator.startActivity(intent, loadEditedImage);Web Intents

• MIMEタイプやプロトコルにWebアプリを関連づけることのできるAPI// trans-en-jaプロトコルにGoogle翻訳を関連付けるnavigator.registerProtocolHandler( "trans-en-ja", "http://translate.google.co.jp/translate?" + "hl=ja&sl=en&tl=ja&u=%s", "Google英日翻訳");// trans-en-jaプロトコルを使う<a href="trans-en-ja://www.whatwg.org/">WHATWG</a>registerProtocolHandlerregisterContentHandler

• ユーザへの通知を行うためのAPI• 単純なテキストしか通知に使えない • Chromeに実装されているAPIよりもかなり単純var notification = new Notification("mail.png", "メール到着！");notification.onshow = function() { setTimeout(function() { notification.cancel(); }, 15000); }notification.show();Web Notifications

• Webページ内の要素をフルスクリーン化して表示できるAPI • 動画をフルスクリーン再生する、とか• フルスクリーン時、:fullscreen擬似クラスと:fullscreen-ancestor擬似クラスが有効にvar exitButton = document.getElementById("exit");var video = document.getElementById("v");// フルスクリーン化video.requestFullscreen();exitButton.onclick = function() { // フルスクリーン解除 document.exitFullScreen();};Fullscreen API

オフラインWebアプリケーションと関連API

• HTML/CSS/JavaScript/画像など、Webアプリが必要とするリソースをキャッシュし、オフラインでも利用可能にする仕組み。• text/cache-manifestでの配信が不要に。CACHE MANIFESThello.htmlhello.js<html manifest="hello.appcache">…</html>Application Cache

• navigator.online・・・自身がオフライン状態かどうか• online/offlineイベント・・・オンライン状態の変化を検知することができる。window.addEventListener("online", function() {}, false);window.addEventListener("offline", function() {}, false);navigator.onlineonline/offlineイベント

• シンプルなローカルストレージ• Candidate Recommendation（勧告候補）に！• 文字列値しか受け付けない仕様になってちょっと残念。localStorage.person = JSON.stringify({…});…var person = JSON.parse(localStorage.person);Web Storage

• JavaScriptオブジェクトをそのまま読み書きできるローカルストレージ• ベンダプレフィックス付きでChrome/Firefoxがサポート済み。IE10でもサポートされる。var openReq = indexedDB.open("sampleDB")openReq.onsuccess = function() { var db = openReq.result; var tx = db.transaction("Person"); tx.objectStore("Person").put({…});});Indexed Database API

• ローカルファイルの読み取りをサポートする API。• 以下のようなインターフェースを定義している重要仕様。 • Blob • File • FileReader/FileReaderSync • URLvar file = fileElem.files[0];var reader = new FileReader();reader.onload = function(buf) { … };reader.readAsArrayBuffer(file);File API

• Webアプリが自由に読み書きできるファイルシステムの仕様• オリジンごとにファイルシステムは分離されているrequestFileSystem(TEMPORARY, 1024*1024, function(fs) { fs.root.getFile("test.txt", function(file) {…}); });File API:Directories andSystem

• ローカルファイルの書き出しに特化したAPI。• File API:Directories and Systemと深い関連を持つvar bb = new BlobBuilder();bb.append("TEST");var data = bb.getBlob();fs.root.getFile("test.txt", function(file) { file.createWriter(function(writer) { writer.onwrite = function() {…}; writer.write(data); });});File API:Writer

• Blob/FileReader/BlobBuilderなどを抽象化し、「バイナリストリームを扱うAPI」として再定義したもの。• 以下のインターフェースが定義されている • Stream・・・Blob/Fileの親インターフェースとして • StreamReader・・・FileReaderの親インターフェースとして • StreamBuilder・・・BlobBuilderを置き換えるものとしてStreams API

• クォータをリクエストしたり、使用状況を取得したりできるAPI• Chromeで実装済み// 50MBのクォータを要求webkitStorageInfo.requestQuota( webkitStorageInfo.PERSISTENT 1024*1024*50, function onsuccess() { … }, function onerror() { … });Quota Management API

• バイト型を持たないJavaScriptにおいて、バイト配列を扱うためのAPI。• Khronos（WebGLを標準化している団体）で仕様が策定されている。• バイナリデータのコンテナであるArrayBufferと、様々なサイズを要素の単位とするビューからなる • (U)Int8Array,(U)Int16Array,(U)Int32Array,( U)Float32Array,(U)Float64Arrayvar buf = new Uint32Array([1,2,3]);console.log(buf.length); // 3console.log(buf.byteLength); // 12Typed Array

• JavaScriptで並列処理を行うための仕組み。• 各スレッド（ワーカ）は、直接変数を共有することは出来ず、メッセージのやり取りでデータを共有する。• ステータス：ラストコールvar worker = new Worker("worker.js");worker.postMessage("Hello");worker.onmessage = function(event) { alert(event.data);};Web Workers

デバイスAPI

• アドレス帳からのデータ読み出しを可能にする API• 簡単なフィルタリングなども可能• ラストコール済みnavigator.contacts.find([name, emails], function(contacts) { … }, null, {filter: 白石});Contacts API

• バッテリーの使用状況にアクセスできるAPI• 各種ステータスへのアクセス、イベントリスナの設定も可能• ラストコール済みnavigator.battery.onlevelchange = function() { alert(現在のバッテリーレベル: + navigator.battery.level);};if (navigator.battery.charging) { alert("チャージ中");}Battery Status API

• <input type="file">を拡張し、カメラやマイクからの取り込みを可能に• 以下の値を指定可能なcapture属性を追加する • camera • camcorder • microphone • filesystem（デフォルト）<input type="file" capture="camera">HTML Media Capture

• WebアプリからE-mail/SMS/MMSを送信するためのAPIvar picture = document.getElementById("file").files[0];navigator.device.sendMessage( "mms:+460000000001?body=Welcome%20%to%Atlantis", [picture], function() { // 成功時の処理 });The Messaging API

• 現在接続しているネットワークの種類を検知できるAPI• unknown, ethernet, wifi, 2g, 3g, 4g, noneといった文字列が返ります。alert(navigator.connection.type);The Network Information API

• デバイスの各種センサーにアクセスするための API• 指定できるセンサーの種類は以下。 • Temperature（温度）, AmbientLight（光）, AmbientNoise（音）, MagneticField（磁気）, Proximity（近接）, AtmPressure（気圧）, RelHumidity（相対湿度）, Accelerometer（加速度）, Gyroscope（ジャイロ）, Orientation（デバイスの向き）var con = new SensorConnection("Temperature");con.onsensordata = function(event) { alert("現在の温度は" + event.data);};con.read();Sensor API

• Webアプリからバイブレーションを行うための API• navigator.vibrate()のみの簡単なAPI// 1秒振動させるnavigator.vibrate(1000);// パターンを指定して振動させるnavigator.vibrate([500, 500, 500]);Vibration API

• 現在地情報を取得するためのAPI• Level2からは、住所の情報にもアクセスできるように（Firefoxで実装済み）navigator.geolocation.watchPosition(function(position) { …});Geolocation API

• Webアプリにおける音声入力や音声合成を可能にするAPI• Chromeで実装済みのx-webkit-speechとは別物• <reco><tts>要素とAPI、そしてリモートサーバとのやり取りを行うSpeech Protocolからなる。 • Speech ProtocolはWebSocketのサブプロトコルとして策定されている！<reco for="greeting"><input type="text" id="greeting">HTML Speech

• デバイスの向きや傾きを加速度センサーから得るためのAPI。• 対応しているブラウザでは、windowに対して以下のイベントを監視できる。 • deviceorientation・・・デバイスの向き・傾き • divicemotion・・・デバイスの動き • compassneedscalibration・・・キャリブレーションが必要window.addEventListener("deviceorientation", function(event) { // process event.alpha, event.beta and event.gamma }, true);DeviceOrientation Events

• マルチタッチを検知するための仕組み。• touchstart, touchend, touchmove, touchenter, touchleave, touchcancelと言ったイベントを捕捉するwindow.ontouchstart = function(event) { var touches = event.touches; if (touches.length > 1) alert("マルチタッチ！");};Touch Events

ネットワーク／コミュニケーション

• WebSocket ProtocolはRFCに、WebSocket APIは勧告候補に。• 主要ブラウザのほとんどが実装済み／実装着手済み• バイナリの送受信やプロトコルの拡張も可能にvar ws = new WebSocket("ws://example.com/chat");ws.send("Hello");WebSocket

• Cometを標準化したようなAPI。HTTPの枠組みのままに、サーバからのデータプッシュを実現する。• サーバは、決まった形式に則ってtext/event- streamというコンテントタイプでデータを配信• クライアントは、EventSourceオブジェクトのイベントを監視。var es = new EventSource("http://example.com/stock");es.onmessage = function(event) { alert(event.data);};Server-Sent Events

• ウィンドウ/iframe間（異なるwindowの間）でメッセージングを行うためのAPI• postMessage() <-> onmessageでデータを受け渡し• 主要なブラウザでほぼ実装済み（IEはフレーム間通信のみ）//senderwindow.postMessage("Hello");//receiverwindow.onmessage = function(event) { alert(event.data);};Cross Document Messaging

• オリジンの異なるサーバとの通信を可能にする API。• XHRやSSEに、外部のURLを指定するだけ。• サーバ側での対応は必要var xhr = new XMLHttpRequest();xhr.open("GET", "http://external.com");xhr.send("");Cross Origin ResourceSharing

• パワーアップしまくり！ • ドキュメントやバイナリ、フォームデータの送信が可能に • ドキュメントやバイナリ、JSONの送信が可能に • 送受信の進捗状況を取得可能に • 他のオリジンとも通信可能にvar file = document.getElementById("file").files[0];var xhr = new XMLHttpRequest();xhr.open("POST", "/upload");xhr.send(file); // ファイルの送信xhr.upload.onprogress = function(event) { // アップロードの進捗状況を表示};XMLHttpRequest Level2

マルチメディア

• <video>で動画再生、<audio>で音声再生• 再生のみ可能。動画や音声の生成／編集は別の仕様で。<video controls src=http://example.org/movie.ogg></video>video/audio要素

• Googleが作ったWeb Audio APIと、Mozillaが作ったMediaStream Processing APIを併記した仕様。比較用？Audio Processing API

• メディアデータのメタデータを取得するための API • タイトル/言語/日時/（撮影）場所/説明/ジャンル/コピーライト/幅・高さ/動画の再生時間/フレームレート…など• ステータス：勧告候補var res = new MediaResource();var mr = res.createMediaResource("test.jpg", [], 1);mr.getMediaProperty(["title"], function(props) { var result = props.Title; var label = result.titleLabel;}, function(prop) { … });API for MediaResource1.0

• video要素と共に使用するtrack要素に指定できるファイルフォーマット• CSSも使用可能だが、i/b/u/ruby/rt/v（音声を表す）/c（頭出し用のテキスト）など、使えるタグが限られているWEBVTT00:11.000 --> 00:13.000<v 白石><b>こんにちは！</b>Web VTT

• ローカル／リモートを問わない、メディアデータの送受信を可能にするAPI。 • デバイスが持つカメラやマイク、ファイル、リモートブラウザ／デバイスなどと、メディアデータをやり取りできるvar video = document.getElementById("video");navigator.getUserMedia("video", function(stream) { var url = URL.createObjectURL(stream); video.src = url;});Web RTC

グラフィック系API

• 説明不要！のグラフィックAPI• <canvas>要素で指定した領域に、JavaScriptを用いてビットマップグラフィックを書き出せる• 3D版のAPIはWebGL<canvas id="canvas"></canvas>var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");…Canvas

• Scalable Vector Graphicsの頭文字を取ったもの。• Webページ内でベクターグラフィックを生成できる• HTML5に対応したブラウザなら、HTML内に <svg>要素を用いて直接SVGを埋め込める<!DOCTYPE html><html> <svg> … </svg></html>SVG

パフォーマンス最適化

• JavaScriptアニメーションを最適化するため、ブラウザにコールバック関数を登録する仕組み• setTimeout()/setInterval()を使った場合よりもスムーズでエコなアニメーションを期待できる。function render() { … requestAnimationFrame(render);}requestAnimationFrame(render);requestAnimationFrame

• setTimeout(fn, 0)としたい状況で、代わりに使うと便利。 • 長時間かかるタスクを細切れに処理したい場合 • UI処理の途中経過をユーザに表示したい場合// 処理をイベントキューに追加var id = setImmediate(function() { … });// 途中でキャンセルしたい場合clearImmediate(id);setImmediate()

• ページの表示状態を取得することのできるAPI • バックグラウンドにいるときは処理を停止する、などの制御が可能になる。• Documentオブジェクトのvisibilitychangeイベントを監視して、状態変更を検知できるdocument.addEventListener("visibilitychange", function() { if (document.hidden) { // ページがバックグラウンドの場合の処理 } }, false);Page Visibility

• DNSルックアップ、接続開始／、ページの読み込み開始／完了など、様々なタイミングを取得できるAPI • navigationStart,domainLookupStart, connectStart, f etchStart, …• ステータス：勧告候補onload = function() { var now = new Date().getTime(); var t = now – performance.timing.navigationStart; alert("ページ読み込みまでにかかった時間:" + t);};Navigation Timing

• プログラム内で時間を測定するための、便利で正確なAPI• 基本はマーク＆メジャー• ステータス：ラストコールperformance.mark("mark1");performance.measure("measure1", "mark1");var times = performance.getMeasures("measure1");times.forEach(function(t) { console.log(t);});User Timing

• 画像、CSS、スクリプトなど、Webページを構成するリソースの読み込み時間を取得するメソッドvar resourceList = performance .getEntriesByType(performance.PERF_RESOURCE);for (var i = 0; i < resourceList.length; i++) { console.log( resourceList[i].responseEnd – resourceList[i].startTime);}Resource Timing

• User Timing, Resource Timingを一貫したインターフェースで扱うようにするための仕様Performance Timeline

HTML5は進化が本当に著しいですね！

2012年も、HTML5とか勉強会並びにhtml5j.orgをよろしくお願いします！

http://www.atmarkit.co.jp	12312
http://d.hatena.ne.jp	9151
http://fumit.blogspot.com	1015
http://fumit.blogspot.jp	229
http://w3q.jp	218
http://a0.twimg.com	85
http://ethercode.tumblr.com	58
http://s.deeeki.com	43
http://webcache.googleusercontent.com	29
http://us-w1.rockmelt.com	26
http://www.diigo.com	21
http://tweetedtimes.com	19
http://aitcms-w.atmarkit.co.jp	13
http://localhost	9
http://nuevospowerpoints.blogspot.com	8
http://www.blogger.com	6
http://suema-r.com	6
http://pre-www.atmarkit.co.jp	5
http://www.techgig.com	4
https://twitter.com	3
http://www.fujico.co.jp	2
http://paper.li	2
http://www.twylah.com	1
http://fumit.blogspot.tw	1
http://sc.dotbranch.com	1
http://cache.yahoofs.jp	1
http://twitter.com	1
http://development.interact-intranet.com	1
https://twimg0-a.akamaihd.net	1
http://akeytoti.jugem.jp	1
http://mundo-powerpoints.blogspot.com	1
http://fujico.co.jp	1
http://safe.tumblr.com	1
http://translate.googleusercontent.com	1
http://pdde312.dip.jp	1

HTML5&API総まくり

by Shumpei Shiraishi

Accessibility

Upload Details

Usage Rights

35 Embeds 23,277

Statistics

HTML5&API総まくり Presentation Transcript