HTML5&API総まくり

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

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

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

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

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

HTML/DOM/ブラウザ環
境

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

HTML5マークアップ

• リッチな入力フォーム、新たなフォーム要素、宣
言的なバリデーションなど。

date datetime datetime-local
month week tim...

• HTMLにマシンリーダブルなデータを埋
め込むための仕様

<div itemscope>
<p>お名前: <span itemprop="name">白石</span></p>
<p> :
<t...

• HTMLにマシンリーダブルなデータを埋
め込むための仕様
• RDFはXMLで、RDFaは属性で定義。
RDFa Liteは、RDFaの初心者用サブ
セット
<div vocab="http://schema...

• MicrodataやRDFaで利用する、共通ボ
キャブラリ
• MS/Google/Yahooが協力して策定

<div itemscope itemtype="http://schema.org/Person">
<...

• HTML5、DOM3 Core、Element
Traversal、DOM3 Events、DOM2
Traversal and Rangeなど、複数に散
らかっている仕様を統合す...

• DOMをカプセル化し、DOMツリーのコンポーネ
ント化を実現する仕組み

var dialog = document.getElementById("dialog");
var root = new ShadowRoot(...

• async属性・・・スクリプトファイルの非同期読
み込みが可能に
• defer属性・・・スクリプトファイルのダウン
ロードは非同期で行われ、実行はページの読み込
み後

<script async def...

• style要素にscopedを指定すると、スタイリング
の効果が親要素の子孫ノードに限定される
<body>
<h1>ページの見出し</h1>
<section>
<style scoped>...

• ドラッグ＆ドロップを実現するためのAPI
• draggable属性を付与するとドラッグ可能に
• dragstart/dragenter/dragover/dropと言ったイベン
トを処理する
• ファイ...

• ブラウザの履歴（「戻る」「進む」）に任意の状
態をひもづけられる。
• popstateイベントを捕捉して、自前の「戻る」
「進む」処理を記述可能

history.pushState(data, documen...

• Base64用ユーティリティ関数。
• 仕様も実装も（実は）揃っている

btoa(“a”); //”YQ==”
atob(“YQ”); // “a”

window.atob()/btoa()

• JavaScriptで暗号化処理を行うためのAPI
• 「Web Cryptography API」として、2012年4月こ
ろに最初のドラフトを予定

window.crypto.pk.generateKeypair...

• CSSセレクタで要素を絞り込むためのAPI
• document.querySelector(selector)
• document.querySelectorAll(selector)
• ...

• AndroidのIntentをWebアプリ間で実現するための
API。
• <intent>要素を検知したブラウザは、サービスを
自身に登録する
var intent = new Intent();
intent.a...

• MIMEタイプやプロトコルにWebアプリを関連づ
けることのできるAPI
// trans-en-jaプロトコルにGoogle翻訳を関連付ける
navigator.registerProtocolHandler(
"tran...

• ユーザへの通知を行うためのAPI
• 単純なテキストしか通知に使えない
• Chromeに実装されているAPIよりもかなり単純

var notification =
new Notificati...

• Webページ内の要素をフルスクリーン化して表示
できるAPI
• 動画をフルスクリーン再生する、とか
• フルスクリーン時、:fullscreen擬似クラス
と:full...

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

• HTML/CSS/JavaScript/画像など、Webアプリが
必要とするリソースをキャッシュし、オフライン
でも利用可能にする仕組み。
• text/cache-manifestでの配信が不要に。

CACHE ...

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

• シンプルなローカルストレージ
• Candidate Recommendation（勧告候補）に！
• 文字列値しか受け付けない仕様になってちょっと
残念。

localStorage.person = JSON.str...

• JavaScriptオブジェクトをそのまま読み書きでき
るローカルストレージ
• ベンダプレフィックス付きでChrome/Firefoxがサ
ポート済み。IE10でもサポートされる。

var openReq = i...

• ローカルファイルの読み取りをサポートする
API。
• 以下のようなインターフェースを定義している重
要仕様。
• Blob
• File
• ...

• Webアプリが自由に読み書きできるファイルシス
テムの仕様
• オリジンごとにファイルシステムは分離されてい
る

requestFileSystem(TEMPORARY, 1024*1024,
function...

• ローカルファイルの書き出しに特化したAPI。
• File API:Directories and Systemと深い関連を持つ

var bb = new BlobBuilder();bb.append("TEST");
var...

• Blob/FileReader/BlobBuilderなどを抽象化し、
「バイナリストリームを扱うAPI」として再定義
したもの。
• 以下のインターフェースが定義されている
...

• クォータをリクエストしたり、使用状況を取得し
たりできるAPI
• Chromeで実装済み
// 50MBのクォータを要求
webkitStorageInfo.requestQuota(
webkitStorageInf...

• バイト型を持たないJavaScriptにおいて、バイト配列
を扱うためのAPI。
• Khronos（WebGLを標準化している団体）で仕様が策
定されている。
• バイナ...

• JavaScriptで並列処理を行うための仕組み。
• 各スレッド（ワーカ）は、直接変数を共有するこ
とは出来ず、メッセージのやり取りでデータを共
有する。
• ステータス：ラストコール

var worker ...

デバイスAPI

• アドレス帳からのデータ読み出しを可能にする
API
• 簡単なフィルタリングなども可能
• ラストコール済み

navigator.contacts.find(['name', 'emails'],
functio...

• バッテリーの使用状況にアクセスできるAPI
• 各種ステータスへのアクセス、イベントリスナの
設定も可能
• ラストコール済み
navigator.battery.onlevelchange = function() {...

• <input type="file">を拡張し、カメラやマイクから
の取り込みを可能に
• 以下の値を指定可能なcapture属性を追加する
• camera
• camc...

• WebアプリからE-mail/SMS/MMSを送信するため
のAPI

var picture =
document.getElementById("file").files[0];
navigator.device.sen...

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

alert(navigator.conn...

• デバイスの各種センサーにアクセスするための
API
• 指定できるセンサーの種類は以下。
• Temperature（温度）, AmbientLight（光）,
Amb...

• Webアプリからバイブレーションを行うための
API
• navigator.vibrate()のみの簡単なAPI

// 1秒振動させる
navigator.vibrate(1000);
// パターンを指定して振動さ...

• 現在地情報を取得するためのAPI
• Level2からは、住所の情報にもアクセスできるよ
うに（Firefoxで実装済み）

navigator.geolocation.watchPosition(function(po...

• Webアプリにおける音声入力や音声合成を可能に
するAPI
• Chromeで実装済みのx-webkit-speechとは別物
• <reco><tts>要素とAPI、そしてリモートサーバ...

• デバイスの向きや傾きを加速度センサーから得る
ためのAPI。
• 対応しているブラウザでは、windowに対して以
下のイベントを監視できる。
• deviceorien...

• マルチタッチを検知するための仕組み。
• touchstart, touchend, touchmove, touchenter,
touchleave, touchcancelと言ったイベントを捕捉
する

win...

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

• WebSocket ProtocolはRFCに、WebSocket APIは
勧告候補に。
• 主要ブラウザのほとんどが実装済み／実装着手済
み
• バイナリの送受信やプロトコルの拡張も可能に

var ws ...

• Cometを標準化したようなAPI。HTTPの枠組みの
ままに、サーバからのデータプッシュを実現す
る。
• サーバは、決まった形式に則ってtext/event-
streamというコンテントタイプでデータを...

• ウィンドウ/iframe間（異なるwindowの間）で
メッセージングを行うためのAPI
• postMessage() <-> onmessageでデータを受け渡
し
• 主要なブラウザでほぼ実装済み（IEはフ...

• オリジンの異なるサーバとの通信を可能にする
API。
• XHRやSSEに、外部のURLを指定するだけ。
• サーバ側での対応は必要

var xhr = new XMLHttpRequest();
xhr.open(...

• パワーアップしまくり！
• ドキュメントやバイナリ、フォームデータの送信が
可能に
• ドキュメントやバイナリ、JSONの送信が可能に
• 送受信の進捗状況を取得可能に...

マルチメディア

• <video>で動画再生、<audio>で音声再生
• 再生のみ可能。動画や音声の生成／編集は別の仕
様で。

<video controls src=http://example.org/movie.ogg>
</vid...

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

Audio Processing API

• メディアデータのメタデータを取得するための
API
• タイトル/言語/日時/（撮影）場所/説明/ジャンル/コ
ピーライト/幅・高さ/動画の再生時間/フレームレー
...

• video要素と共に使用するtrack要素に指定できる
ファイルフォーマット
• CSSも使用可能だが、i/b/u/ruby/rt/v（音声を表
す）/c（頭出し用のテキスト）など、使えるタグ
が限られている...

• ローカル／リモートを問わない、メディアデータ
の送受信を可能にするAPI。
• デバイスが持つカメラやマイク、ファイル、リモー
トブラウザ／デバイスなどと、メディアデータをや
...

グラフィック系API

• 説明不要！のグラフィックAPI
• <canvas>要素で指定した領域に、JavaScriptを用
いてビットマップグラフィックを書き出せる
• 3D版のAPIはWebGL

<canvas id="canvas"><...

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

パフォーマンス最適
化

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

• setTimeout(fn, 0)としたい状況で、代わりに使う
と便利。
• 長時間かかるタスクを細切れに処理したい場合
• UI処理の途中経過をユーザに表示したい場合

// 処理...

• ページの表示状態を取得することのできるAPI
• バックグラウンドにいるときは処理を停止する、な
どの制御が可能になる。
• Documentオブジェクトのvisibilitychan...

• DNSルックアップ、接続開始／、ページの読み込
み開始／完了など、様々なタイミングを取得でき
るAPI
• navigationStart,domainLookupStart, co...

• プログラム内で時間を測定するための、便利で正
確なAPI
• 基本はマーク＆メジャー
• ステータス：ラストコール
performance.mark("mark1");
performance.measure("meas...

• 画像、CSS、スクリプトなど、Webページを構成
するリソースの読み込み時間を取得するメソッド

var resourceList = performance
.getEntriesByType(performance.P...

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

Performance Timeline

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

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

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

HTML5最新動向 by Shumpei Shiraishi 10894 views
Hadoop for programmer by Sho Shimauchi 3207 views
今さら聞けないHadoop セントラルソフト株式会社(20120119) by Toru Takizawa 3740 views
おばかアプリ選手権2013 by おばかアプリ選手権 2013 1875 views
Oracleがnode.jsをやり始めたというのだが！ by Hiroshi Hayakawa 2911 views
javascript を Xcode でテスト by Yoichiro Sakurai 3640 views

View on Slideshare

1 of 72 Ad

View on Slideshare

1 of 72 Ad