Successfully reported this slideshow.
Your SlideShare is downloading. ×

HTML5&API総まくり

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
HTML5最新動向
HTML5最新動向
Loading in …3
×

Check these out next

1 of 72 Ad

More Related Content

Slideshows for you (20)

Viewers also liked (20)

Advertisement

Similar to HTML5&API総まくり (20)

More from Shumpei Shiraishi (20)

Advertisement

HTML5&API総まくり

  1. 1. HTML5&API総まく り 白石俊平 @Shumpei
  2. 2. HTML5、盛り過ぎじゃない ですか?
  3. 3. 今年ちょっと勉強サボリ 気味だったので、正直追 えてませんでした・・・
  4. 4. 年末暇だったので、総復 習してみたのでその成果 を共有します!
  5. 5. HTML/DOM/ブラウザ環 境
  6. 6. • 現在の要素数は108 • 30種類の新要素 • 14種類の既存要素が変化 • time要素、hgroup要素、data要素 (WHATWG HTMLのみ)などが争 点。 HTML5マークアップ
  7. 7. • リッチな入力フォーム、新たなフォーム要素、宣 言的なバリデーションなど。 date datetime datetime-local month week time number range email url search tel color HTML5 Forms
  8. 8. • HTMLにマシンリーダブルなデータを埋 め込むための仕様 <div itemscope> <p>お名前: <span itemprop="name">白石</span></p> <p> : <time itemprop="birthDate">1978/03/24</time> </p> </div> HTML Microdata
  9. 9. • 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
  10. 10. • 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
  11. 11. • HTML5、DOM3 Core、Element Traversal、DOM3 Events、DOM2 Traversal and Rangeなど、複数に散 らかっている仕様を統合するのが主 目的。 • 例えば、以下のようなAPIが含まれ る。 • Document#getElementsByClassName() • Element#classList DOM4
  12. 12. • DOMをカプセル化し、DOMツリーのコンポーネ ント化を実現する仕組み var dialog = document.getElementById("dialog"); var root = new ShadowRoot(dialog); root.appendChild(…); Shadow DOM
  13. 13. • async属性・・・スクリプトファイルの非同期読 み込みが可能に • defer属性・・・スクリプトファイルのダウン ロードは非同期で行われ、実行はページの読み込 み後 <script async defer src="ad.js"></script> script要素の新属性
  14. 14. • style要素にscopedを指定すると、スタイリング の効果が親要素の子孫ノードに限定される <body> <h1>ページの見出し</h1> <section> <style scoped> h1 { color: red; } </style> <h1>セクション見出し</h1> </section> style要素のスコープ 化
  15. 15. • ドラッグ&ドロップを実現するための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
  16. 16. • ブラウザの履歴(「戻る」「進む」)に任意の状 態をひもづけられる。 • popstateイベントを捕捉して、自前の「戻る」 「進む」処理を記述可能 history.pushState(data, document.title); onpopstate = function(event) { // 状態を復元 }; 履歴管理API
  17. 17. • Base64用ユーティリティ関数。 • 仕様も実装も(実は)揃っている btoa(“a”); //”YQ==” atob(“YQ”); // “a” window.atob()/btoa()
  18. 18. • JavaScriptで暗号化処理を行うためのAPI • 「Web Cryptography API」として、2012年4月こ ろに最初のドラフトを予定 window.crypto.pk.generateKeypair("DSA", function(pubKey) { … }, false); DOMCryptAPI
  19. 19. • CSSセレクタで要素を絞り込むためのAPI • document.querySelector(selector) • document.querySelectorAll(selector) • Level2から、find()/findAll()が増え、jQuery風に チェーンで絞込みが可能に var elements = document.querySelectorAll(".section"); Selectors API
  20. 20. • 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, loadEditedImag e); Web Intents
  21. 21. • 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> registerProtocolHandler registerContentHandler
  22. 22. • ユーザへの通知を行うためのAPI • 単純なテキストしか通知に使えない • Chromeに実装されているAPIよりもかなり単純 var notification = new Notification("mail.png", "メール到着!"); notification.onshow = function() { setTimeout(function() { notification.cancel(); }, 15000); } notification.show(); Web Notifications
  23. 23. • Webページ内の要素をフルスクリーン化して表示 できるAPI • 動画をフルスクリーン再生する、とか • フルスクリーン時、:fullscreen擬似クラス と:fullscreen-ancestor擬似クラスが有効に var exitButton = document.getElementById("exit"); var video = document.getElementById("v"); // フルスクリーン化 video.requestFullscreen(); exitButton.onclick = function() { // フルスクリーン解除 document.exitFullScreen(); }; Fullscreen API
  24. 24. オフラインWebアプリ ケーションと関連API
  25. 25. • HTML/CSS/JavaScript/画像など、Webアプリが 必要とするリソースをキャッシュし、オフライン でも利用可能にする仕組み。 • text/cache-manifestでの配信が不要に。 CACHE MANIFEST hello.html hello.js <html manifest="hello.appcache"> … </html> Application Cache
  26. 26. • navigator.online・・・自身がオフライン状態かど うか • online/offlineイベント・・・オンライン状態の変 化を検知することができる。 window.addEventListener("online", function() { }, false); window.addEventListener("offline", function() { }, false); navigator.online online/offlineイベント
  27. 27. • シンプルなローカルストレージ • Candidate Recommendation(勧告候補)に! • 文字列値しか受け付けない仕様になってちょっと 残念。 localStorage.person = JSON.stringify({…}); … var person = JSON.parse(localStorage.person); Web Storage
  28. 28. • 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
  29. 29. • ローカルファイルの読み取りをサポートする API。 • 以下のようなインターフェースを定義している重 要仕様。 • Blob • File • FileReader/FileReaderSync • URL var file = fileElem.files[0]; var reader = new FileReader(); reader.onload = function(buf) { … }; reader.readAsArrayBuffer(file); File API
  30. 30. • Webアプリが自由に読み書きできるファイルシス テムの仕様 • オリジンごとにファイルシステムは分離されてい る requestFileSystem(TEMPORARY, 1024*1024, function(fs) { fs.root.getFile("test.txt", function(file) {…}); }); File API:Directories and System
  31. 31. • ローカルファイルの書き出しに特化した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
  32. 32. • Blob/FileReader/BlobBuilderなどを抽象化し、 「バイナリストリームを扱うAPI」として再定義 したもの。 • 以下のインターフェースが定義されている • Stream・・・Blob/Fileの親インターフェースとして • StreamReader・・・FileReaderの親インター フェースとして • StreamBuilder・・・BlobBuilderを置き換えるもの として Streams API
  33. 33. • クォータをリクエストしたり、使用状況を取得し たりできるAPI • Chromeで実装済み // 50MBのクォータを要求 webkitStorageInfo.requestQuota( webkitStorageInfo.PERSISTENT 1024*1024*50, function onsuccess() { … }, function onerror() { … }); Quota Management API
  34. 34. • バイト型を持たないJavaScriptにおいて、バイト配列 を扱うためのAPI。 • Khronos(WebGLを標準化している団体)で仕様が策 定されている。 • バイナリデータのコンテナであるArrayBufferと、 様々なサイズを要素の単位とするビューからなる • (U)Int8Array,(U)Int16Array,(U)Int32Array,( U)Float32Array,(U)Float64Array var buf = new Uint32Array([1,2,3]); console.log(buf.length); // 3 console.log(buf.byteLength); // 12 Typed Array
  35. 35. • JavaScriptで並列処理を行うための仕組み。 • 各スレッド(ワーカ)は、直接変数を共有するこ とは出来ず、メッセージのやり取りでデータを共 有する。 • ステータス:ラストコール var worker = new Worker("worker.js"); worker.postMessage("Hello"); worker.onmessage = function(event) { alert(event.data); }; Web Workers
  36. 36. デバイスAPI
  37. 37. • アドレス帳からのデータ読み出しを可能にする API • 簡単なフィルタリングなども可能 • ラストコール済み navigator.contacts.find(['name', 'emails'], function(contacts) { … }, null, {filter: '白石'}); Contacts API
  38. 38. • バッテリーの使用状況にアクセスできるAPI • 各種ステータスへのアクセス、イベントリスナの 設定も可能 • ラストコール済み navigator.battery.onlevelchange = function() { alert('現在のバッテリーレベル:' + navigator.battery.level); }; if (navigator.battery.charging) { alert("チャージ中"); } Battery Status API
  39. 39. • <input type="file">を拡張し、カメラやマイクから の取り込みを可能に • 以下の値を指定可能なcapture属性を追加する • camera • camcorder • microphone • filesystem(デフォルト) <input type="file" capture="camera"> HTML Media Capture
  40. 40. • WebアプリからE-mail/SMS/MMSを送信するため のAPI var picture = document.getElementById("file").files[0]; navigator.device.sendMessage( "mms:+460000000001?body=Welcome%20%to%Atlantis", [picture], function() { // 成功時の処理 }); The Messaging API
  41. 41. • 現在接続しているネットワークの種類を検知でき るAPI • unknown, ethernet, wifi, 2g, 3g, 4g, noneといった 文字列が返ります。 alert(navigator.connection.type); The Network Information API
  42. 42. • デバイスの各種センサーにアクセスするための 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
  43. 43. • Webアプリからバイブレーションを行うための API • navigator.vibrate()のみの簡単なAPI // 1秒振動させる navigator.vibrate(1000); // パターンを指定して振動させる navigator.vibrate([500, 500, 500]); Vibration API
  44. 44. • 現在地情報を取得するためのAPI • Level2からは、住所の情報にもアクセスできるよ うに(Firefoxで実装済み) navigator.geolocation.watchPosition(function(position ) { … }); Geolocation API
  45. 45. • Webアプリにおける音声入力や音声合成を可能に するAPI • Chromeで実装済みのx-webkit-speechとは別物 • <reco><tts>要素とAPI、そしてリモートサーバと のやり取りを行うSpeech Protocolからなる。 • Speech ProtocolはWebSocketのサブプロトコルと して策定されている! <reco for="greeting"> <input type="text" id="greeting"> HTML Speech
  46. 46. • デバイスの向きや傾きを加速度センサーから得る ためのAPI。 • 対応しているブラウザでは、windowに対して以 下のイベントを監視できる。 • deviceorientation・・・デバイスの向き・傾き • divicemotion・・・デバイスの動き • compassneedscalibration・・・キャリブレーショ ンが必要 window.addEventListener("deviceorientation", function(event) { // process event.alpha, event.beta and event.gamma }, true); DeviceOrientation Events
  47. 47. • マルチタッチを検知するための仕組み。 • touchstart, touchend, touchmove, touchenter, touchleave, touchcancelと言ったイベントを捕捉 する window.ontouchstart = function(event) { var touches = event.touches; if (touches.length > 1) alert("マルチタッチ!"); }; Touch Events
  48. 48. ネットワーク/ コミュニケーション
  49. 49. • WebSocket ProtocolはRFCに、WebSocket APIは 勧告候補に。 • 主要ブラウザのほとんどが実装済み/実装着手済 み • バイナリの送受信やプロトコルの拡張も可能に var ws = new WebSocket("ws://example.com/chat"); ws.send("Hello"); WebSocket
  50. 50. • 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
  51. 51. • ウィンドウ/iframe間(異なるwindowの間)で メッセージングを行うためのAPI • postMessage() <-> onmessageでデータを受け渡 し • 主要なブラウザでほぼ実装済み(IEはフレーム間 通信のみ) //sender window.postMessage("Hello"); //receiver window.onmessage = function(event) { alert(event.data); }; Cross Document Messaging
  52. 52. • オリジンの異なるサーバとの通信を可能にする API。 • XHRやSSEに、外部のURLを指定するだけ。 • サーバ側での対応は必要 var xhr = new XMLHttpRequest(); xhr.open("GET", "http://external.com"); xhr.send(""); Cross Origin Resource Sharing
  53. 53. • パワーアップしまくり! • ドキュメントやバイナリ、フォームデータの送信が 可能に • ドキュメントやバイナリ、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
  54. 54. マルチメディア
  55. 55. • <video>で動画再生、<audio>で音声再生 • 再生のみ可能。動画や音声の生成/編集は別の仕 様で。 <video controls src=http://example.org/movie.ogg> </video> video/audio要素
  56. 56. • Googleが作ったWeb Audio APIと、Mozillaが作っ たMediaStream Processing APIを併記した仕様。 比較用? Audio Processing API
  57. 57. • メディアデータのメタデータを取得するための 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
  58. 58. • video要素と共に使用するtrack要素に指定できる ファイルフォーマット • CSSも使用可能だが、i/b/u/ruby/rt/v(音声を表 す)/c(頭出し用のテキスト)など、使えるタグ が限られている WEBVTT 00:11.000 --> 00:13.000 <v 白石><b>こんにちは!</b> Web VTT
  59. 59. • ローカル/リモートを問わない、メディアデータ の送受信を可能にするAPI。 • デバイスが持つカメラやマイク、ファイル、リモー トブラウザ/デバイスなどと、メディアデータをや り取りできる var video = document.getElementById("video"); navigator.getUserMedia("video", function(stream) { var url = URL.createObjectURL(stream); video.src = url; }); Web RTC
  60. 60. グラフィック系API
  61. 61. • 説明不要!のグラフィックAPI • <canvas>要素で指定した領域に、JavaScriptを用 いてビットマップグラフィックを書き出せる • 3D版のAPIはWebGL <canvas id="canvas"></canvas> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); … Canvas
  62. 62. • Scalable Vector Graphicsの頭文字を取ったもの。 • Webページ内でベクターグラフィックを生成でき る • HTML5に対応したブラウザなら、HTML内に <svg>要素を用いて直接SVGを埋め込める <!DOCTYPE html> <html> <svg> … </svg> </html> SVG
  63. 63. パフォーマンス最適 化
  64. 64. • JavaScriptアニメーションを最適化するため、ブ ラウザにコールバック関数を登録する仕組み • setTimeout()/setInterval()を使った場合よりもス ムーズでエコなアニメーションを期待できる。 function render() { … requestAnimationFrame(render); } requestAnimationFrame(render); requestAnimationFrame
  65. 65. • setTimeout(fn, 0)としたい状況で、代わりに使う と便利。 • 長時間かかるタスクを細切れに処理したい場合 • UI処理の途中経過をユーザに表示したい場合 // 処理をイベントキューに追加 var id = setImmediate(function() { … }); // 途中でキャンセルしたい場合 clearImmediate(id); setImmediate()
  66. 66. • ページの表示状態を取得することのできるAPI • バックグラウンドにいるときは処理を停止する、な どの制御が可能になる。 • Documentオブジェクトのvisibilitychangeイベン トを監視して、状態変更を検知できる document.addEventListener("visibilitychange", function() { if (document.hidden) { // ページがバックグラウンドの場合の処理 } }, false); Page Visibility
  67. 67. • DNSルックアップ、接続開始/、ページの読み込 み開始/完了など、様々なタイミングを取得でき るAPI • navigationStart,domainLookupStart, connectStart, f etchStart, … • ステータス:勧告候補 onload = function() { var now = new Date().getTime(); var t = now – performance.timing.navigationStart; alert("ページ読み込みまでにかかった時間:" + t); }; Navigation Timing
  68. 68. • プログラム内で時間を測定するための、便利で正 確なAPI • 基本はマーク&メジャー • ステータス:ラストコール performance.mark("mark1"); performance.measure("measure1", "mark1"); var times = performance.getMeasures("measure1"); times.forEach(function(t) { console.log(t); }); User Timing
  69. 69. • 画像、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
  70. 70. • User Timing, Resource Timingを一貫したイン ターフェースで扱うようにするための仕様 Performance Timeline
  71. 71. HTML5は進化が本当に 著しいですね!
  72. 72. 2012年も、 HTML5とか勉強会 並びに html5j.org をよろしくお願いしま す!

×