keypoints html5
DESCRIPTION
20100807 OSC Nagoya での講演資料 # スライドのみで見やすいよう若干整理 P5〜 Agenda P17〜 "HTML5" って何? P56〜 HTML5 の範囲は? P67〜 ブラウザのサポートは? P94〜 IE6 はどうするの? P118〜 使用上の注意 P147〜 便利なツールは? P152〜 One Point Q&A P186〜 追加資料TRANSCRIPT
![Page 1: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/1.jpg)
Key Points HTML5Presentation @ OSC 2010 Nagoyaby Tomoya ASAI (aka. dynamis)
Fractal Firefox Background Image: http://r.dynamis.jp/fractalfx
![Page 2: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/2.jpg)
about:me
dynamis (でゅなみす)
浅井 智也 (あさいともや)
Mozilla Technology Evangelist
http://r.dynamis.jp/presen
dynamis mozilla-japan.org
twitter: @dynamitter
@
ギリシャ語由来なので「だいなみす」と英語読みはしないでね
![Page 3: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/3.jpg)
何だか "HTML5" が世間の話題らしいので
![Page 4: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/4.jpg)
"HTML5" にまつわるよくある疑問に答えます
![Page 5: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/5.jpg)
次世代 Web のデモ
"HTML5" って何?
ブラウザのサポートは?
IE6 はどうすればいいの?
HTML5 使用上の注意
便利なツールはないの?
Agenda
![Page 6: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/6.jpg)
Video Codec 問題は?
Google の Gears は?
Google の O3D は?
Google の Wave は?
SQL Database は?
One Point Q&A
![Page 7: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/7.jpg)
Web Design
Application Platform
Native Multimedia
Beyond HTML5
reference urls...
(References)
公開資料に含めますのでご参照ください
![Page 8: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/8.jpg)
![Page 9: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/9.jpg)
demo...
![Page 10: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/10.jpg)
今のは実は...
![Page 11: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/11.jpg)
HTML5 ではありません
![Page 12: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/12.jpg)
Flash でもありません
![Page 13: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/13.jpg)
Flash でもありません
AIR でもありません
![Page 14: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/14.jpg)
Flash でもありません
AIR でもありません
NaCl でもありません
![Page 15: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/15.jpg)
Flash でもありません
AIR でもありません
NaCl でもありません
Silverlight でもありません
![Page 16: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/16.jpg)
Flash でもありません
AIR でもありません
NaCl でもありません
Silverlight でもありません
![Page 17: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/17.jpg)
"HTML5" って何?
![Page 18: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/18.jpg)
仕様書に書いてあります
![Page 19: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/19.jpg)
This specification evolves HTML
and its related APIs to ease the
authoring of Web-based applications.
http://whatwg.org/html5 - Abstract より
![Page 20: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/20.jpg)
http://whatwg.org/html5 - Abstract より
この仕様では Web アプリケーションを記述しやすくするため
HTML と関連 API を進化させる
この仕様では Web アプリケーションを記述しやすくするため
HTML と関連 API を進化させる
![Page 21: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/21.jpg)
http://whatwg.org/html5 - Abstract より
この仕様では Web アプリケーションを記述しやすくするため
HTML と関連 API を進化させる
![Page 22: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/22.jpg)
Web アプリを記述しやすく?
![Page 23: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/23.jpg)
これまでの問題は...
![Page 24: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/24.jpg)
これまでの問題は...
ブラウザの独自実装
![Page 25: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/25.jpg)
これまでの問題は...
ブラウザの独自実装
実装まかせの曖昧な仕様
![Page 26: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/26.jpg)
これまでの問題は...
ブラウザの独自実装
実装まかせの曖昧な仕様
不安定、低機能、低速
![Page 27: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/27.jpg)
HTML5 の目的は...
![Page 28: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/28.jpg)
HTML5 の目的は...
既存の独自実装を標準化
![Page 29: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/29.jpg)
HTML5 の目的は...
既存の独自実装を標準化
これから必要な機能の追加
![Page 30: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/30.jpg)
HTML5 の目的は...
既存の独自実装を標準化
これから必要な機能の追加
実装を考慮した綿密な仕様
![Page 31: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/31.jpg)
http://whatwg.org/html5 - Abstract より
この仕様では Web アプリケーションを記述しやすくするため
HTML と関連 API を進化させる
![Page 32: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/32.jpg)
HTML と関連 API?
![Page 33: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/33.jpg)
HTML というとタグ...
![Page 34: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/34.jpg)
HTML というとタグ...
基本はタグ(ボキャブラリ)
![Page 35: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/35.jpg)
HTML というとタグ...
基本はタグ(ボキャブラリ)
(X)HTML 構文とパーサ
![Page 36: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/36.jpg)
HTML というとタグ...
基本はタグ(ボキャブラリ)
(X)HTML 構文とパーサ
MicroData などメタデータ
![Page 37: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/37.jpg)
HTML というとタグ...
基本はタグ(ボキャブラリ)
(X)HTML 構文とパーサ
MicroData などメタデータ
Canvas タグと 2D API
![Page 38: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/38.jpg)
HTML というとタグ...
基本はタグ(ボキャブラリ)
(X)HTML 構文とパーサ
MicroData などメタデータ
Canvas タグと 2D API
SVG や MathML との連携
![Page 39: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/39.jpg)
関連 API って何?
![Page 40: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/40.jpg)
関連 API って何?
イベントやインターフェイス
![Page 41: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/41.jpg)
関連 API って何?
イベントやインターフェイス
オフラインイベント
![Page 42: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/42.jpg)
関連 API って何?
イベントやインターフェイス
オフラインイベント
Drag & Drop や Undo/Redo
![Page 43: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/43.jpg)
関連 API って何?
イベントやインターフェイス
オフラインイベント
Drag & Drop や Undo/Redo
履歴とナビゲーション
![Page 44: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/44.jpg)
関連 API って何?
イベントやインターフェイス
オフラインイベント
Drag & Drop や Undo/Redo
履歴とナビゲーション
ドキュメント間通信
![Page 45: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/45.jpg)
え?それだけですか?
![Page 46: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/46.jpg)
え?それだけですか?
Video Codec は?
![Page 47: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/47.jpg)
え?それだけですか?
Video Codec は?
Storage や Database は?
![Page 48: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/48.jpg)
え?それだけですか?
Video Codec は?
Storage や Database は?
Workers や Sockets は?
![Page 49: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/49.jpg)
え?それだけですか?
Video Codec は?
Storage や Database は?
Workers や Sockets は?
SVG や WebGL は?
![Page 50: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/50.jpg)
え?それだけですか?
Video Codec は?
Storage や Database は?
Workers や Sockets は?
SVG や WebGL は?
WebFonts や Animations は?
![Page 51: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/51.jpg)
それはみんな...
![Page 52: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/52.jpg)
HTML5 ではありません
![Page 53: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/53.jpg)
Video Codec, Storage, DB, Workers, Sockets, SVG, WebGL, Fonts, Animations...
HTML5 ではありません
![Page 54: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/54.jpg)
Video Codec, Storage, DB, Workers, Sockets, SVG, WebGL, Fonts, Animations...
みんな別個の仕様です
HTML5 ではありません
![Page 55: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/55.jpg)
闇鍋みたいに混ぜないで!
![Page 56: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/56.jpg)
HTML5 の範囲は?
![Page 58: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/58.jpg)
仕様書に書いてあります
WAHTWG の HTML5 仕様書
ref. http://whatwg.org/html5
![Page 59: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/59.jpg)
仕様書に書いてあります
WAHTWG の HTML5 仕様書
W3C では仕様名に HTML 含む
ref. http://whatwg.org/html5
![Page 60: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/60.jpg)
Next Generation of HTML
WHATWG - HTML5
世間で "HTML5" とごちゃ混ぜで呼ばれることがある仕様の一部...
Canvas 2D Graphics ContextMicrodata
Microdata vocabularies
W3C - HTML5
Cross-document messagingChannel messaging HTML5 Web Messaging
HTML5 Microdata
HTML Canvas 2D Context
Web WorkersThe WebSocket protocol
SVGMathML
Web Storage
The WebSockets APIServer-Sent Events
Geolocation APIXMLHttpRequest Level 2
Indexed Database API<device> ping=""
timed track HTML→Atom
Elements, Events, APIs Elements, Events, APIs
![Page 61: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/61.jpg)
WHATWG の HTML5 仕様書に書かれている範囲はここまで...
Next Generation of HTML
WAHTWG - HTML5
Canvas 2D Graphics ContextMicrodata
Microdata vocabulariesCross-document messaging
Channel messaging
Elements, Events, APIs
device elementping attribute
timed track modelconverting HTML to Atom
W3C - HTML5Elements, Events, APIs
HTML5 Web Messaging
HTML5 Microdata
HTML Canvas 2D Context
![Page 62: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/62.jpg)
仕様書で HTML5 の範囲として定義されているのはこれだけ
WHATWG - HTML5
Canvas 2D Graphics ContextMicrodata
Microdata vocabulariesCross-document messaging
Channel messaging
HTML5 Parser
W3C - HTML5
HTML5 Parser
HTML5 Web Messaging
HTML5 Microdata
HTML Canvas 2D Context
Drag & Drop APIOffline Events
Event model & APIsHTML5 Forms
Multimedia Elements
Drag & Drop APIOffline Events
Event model & APIsHTML5 Forms
Multimedia ElementsSemantic Elements Semantic Elements
![Page 63: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/63.jpg)
どこまで HTML5?
Web WorkersWeb Storage
The WebSockets API
Server-Sent Events
Geolocation API
XMLHttpRequest Level 2
Canvas 2D
Forms
File API
SVG
Drag & Drop APIIndexed Database API
Microdata
Cross-document MessagingWebGL
WebFonts
Event Listener
MicroformatsCSS3 TransitionsECMAScript 5th
Offline Events
HTML5 Markup
WebM (VP8) Codec
XPath
![Page 64: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/64.jpg)
どこまで HTML5?
Web WorkersWeb Storage
The WebSockets API
Server-Sent Events
Geolocation API
XMLHttpRequest Level 2
Canvas 2D
Forms
File API
SVG
Drag & Drop APIIndexed Database API
Microdata
Cross-document MessagingWebGL
WebFonts
Event Listener
MicroformatsCSS3 TransitionsECMAScript 5th
Offline Events
HTML5 Markup
WebM (VP8) Codec
XPath
WHATWG 仕様書の定義によるCanvas はタグの定義だけが HTML5
![Page 65: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/65.jpg)
HTML5 以外も説明しますが...
![Page 66: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/66.jpg)
バズワードは程々に (・・).
![Page 67: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/67.jpg)
ブラウザのサポートは?
![Page 69: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/69.jpg)
仕様書に書いてあります
WHATWG HTML5 仕様書
WHATWG の仕様書: http://whatwg.org/html5
![Page 70: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/70.jpg)
仕様書に書いてあります
WHATWG HTML5 仕様書
各機能のサポート状況を記載
WHATWG の仕様書: http://whatwg.org/html5
![Page 71: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/71.jpg)
仕様書に書いてあります
WHATWG HTML5 仕様書
各機能のサポート状況を記載
∵ 複数の実装が仕様策定条件
WHATWG の仕様書: http://whatwg.org/html5
![Page 72: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/72.jpg)
HTML5 以外の仕様は?
![Page 73: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/73.jpg)
HTML5 以外の仕様は?
機能対応表を確認する
![Page 74: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/74.jpg)
HTML5 以外の仕様は?
機能対応表を確認する
JS ツールで自動判別する
![Page 78: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/78.jpg)
比較表見れば分かり易い
caniuse.com がオススメ
Acid Test とかは論外
http://caniuse.com/
![Page 80: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/80.jpg)
Acid3 テストは論外
たった 100 項目のテスト
http://acid3.acidtests.org/
![Page 81: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/81.jpg)
Acid3 テストは論外
たった 100 項目のテスト
SVG Fonts とか本当に必要?
http://acid3.acidtests.org/
![Page 82: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/82.jpg)
Acid3 テストは論外
たった 100 項目のテスト
SVG Fonts とか本当に必要?
Firefox/IE は意図的に非対応
http://acid3.acidtests.org/
![Page 83: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/83.jpg)
Acid3 テストは論外
たった 100 項目のテスト
SVG Fonts とか本当に必要?
Firefox/IE は意図的に非対応
やっつけ実装ブラウザ多数
http://acid3.acidtests.org/
![Page 85: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/85.jpg)
互換性確認ライブラリ
有名なのは Modernizr
Modernizr: http://www.modernizr.com/
![Page 86: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/86.jpg)
互換性確認ライブラリ
有名なのは Modernizr
但し偏りあり&若干不正確
Modernizr: http://www.modernizr.com/
![Page 87: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/87.jpg)
互換性確認ライブラリ
有名なのは Modernizr
但し偏りあり&若干不正確
対応済みと嘘付くブラウザ...
Modernizr: http://www.modernizr.com/
![Page 88: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/88.jpg)
すでにかなり使えます
Canvas かなり実用的
CSS3 は追加的に使える
オフライン対応と Storage
マルチスレッド (Workers)
アプリケーションキャッシュ
Drag & Drop API & File API
![Page 89: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/89.jpg)
どんどん強化されてます...
CSS3 Transitions
History
Indexed DataBase
SVG Filters
SVG Animations
WebGL (Canvas 3D)
![Page 90: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/90.jpg)
使えるものから使いましょう
![Page 91: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/91.jpg)
使えるものから使いましょう
CSS2 や HTML4 と同じ
![Page 92: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/92.jpg)
使えるものから使いましょう
CSS2 や HTML4 と同じ
仕様も機能別に順次確定
![Page 93: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/93.jpg)
使えるものから使いましょう
CSS2 や HTML4 と同じ
仕様も機能別に順次確定
使わないのは勿体ない (・・).
![Page 94: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/94.jpg)
IE6 はどうするの?
![Page 95: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/95.jpg)
IE9 も来年でしょ?
![Page 100: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/100.jpg)
無視しても良いのですが...
StatCounter: http://gs.statcounter.com/NetApplications: http://marketshare.hitslink.com/
![Page 101: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/101.jpg)
無視しても良いのですが...
IE6 のシェア は 9%̃17%
IE 全体で 52%̃62%
StatCounter: http://gs.statcounter.com/NetApplications: http://marketshare.hitslink.com/
![Page 102: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/102.jpg)
無視しても良いのですが...
IE6 のシェア は 9%̃17%
IE 全体で 52%̃62%
Firefox 3.6 は 16%̃23%
Firefox 全体で 23%̃31%
StatCounter: http://gs.statcounter.com/NetApplications: http://marketshare.hitslink.com/
![Page 103: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/103.jpg)
http://weblogs.mozillazine.org/asa/archives/2010/05/firefox_and_chrome_u.html
![Page 104: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/104.jpg)
http://weblogs.mozillazine.org/asa/archives/2010/05/firefox_and_chrome_u.html
![Page 105: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/105.jpg)
IE6 でも使えます!(・・)/
![Page 106: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/106.jpg)
IE6 でも使えます!(・・)/
Drag & Drop は標準サポート
![Page 107: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/107.jpg)
IE6 でも使えます!(・・)/
Drag & Drop は標準サポート
他は、えーっと... .(><).
![Page 108: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/108.jpg)
互換実装ライブラリ
![Page 109: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/109.jpg)
互換実装ライブラリ
標準機能を独自実装で再現
![Page 110: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/110.jpg)
互換実装ライブラリ
標準機能を独自実装で再現
VML や CSS フィルタとか
![Page 111: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/111.jpg)
互換実装ライブラリ
標準機能を独自実装で再現
VML や CSS フィルタとか
Flash や Silverlight も活用
![Page 112: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/112.jpg)
uupaa.js がオススメ!
http://d.hatena.ne.jp/uupaa/20100728/1280253779
![Page 113: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/113.jpg)
uupaa.js がオススメ!
IE でも Canvas が使える!
http://d.hatena.ne.jp/uupaa/20100728/1280253779
![Page 114: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/114.jpg)
uupaa.js がオススメ!
IE でも Canvas が使える!
VML/Flash/Silverlight など活用
http://d.hatena.ne.jp/uupaa/20100728/1280253779
![Page 115: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/115.jpg)
uupaa.js がオススメ!
IE でも Canvas が使える!
VML/Flash/Silverlight など活用
基本機能も jQuery より高速
http://d.hatena.ne.jp/uupaa/20100728/1280253779
![Page 116: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/116.jpg)
![Page 117: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/117.jpg)
demo...
![Page 118: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/118.jpg)
使用上の注意
![Page 119: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/119.jpg)
用量・用法を守って...
![Page 120: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/120.jpg)
用量・用法を守って...
使えるものから使いましょう
![Page 121: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/121.jpg)
用量・用法を守って...
使えるものから使いましょう
必要に応じて使いましょう
![Page 122: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/122.jpg)
用量・用法を守って...
使えるものから使いましょう
必要に応じて使いましょう
漸進的なアプローチオススメ
![Page 123: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/123.jpg)
HTML5 の書き方
HTML5 についておさらい: http://w3g.jp/blog/studies/html5report
![Page 124: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/124.jpg)
HTML5 の書き方
<!DOCTYPE html>
HTML5 についておさらい: http://w3g.jp/blog/studies/html5report
![Page 125: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/125.jpg)
HTML5 の書き方
<!DOCTYPE html>
HTML5 新要素を IE に認識させる Hack ライブラリ:
http://html5shiv.googlecode.com
HTML5 についておさらい: http://w3g.jp/blog/studies/html5report
![Page 126: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/126.jpg)
HTML5 の書き方
<!DOCTYPE html>
HTML5 新要素を IE に認識させる Hack ライブラリ:
http://html5shiv.googlecode.com
HTML/XHTML 構文両方 OK
<li>item ...
<li>item ... </item>
HTML5 についておさらい: http://w3g.jp/blog/studies/html5report
![Page 127: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/127.jpg)
CSS の書き方
![Page 128: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/128.jpg)
CSS の書き方
独自実装スタイルに要注意
![Page 129: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/129.jpg)
CSS の書き方
独自実装スタイルに要注意
prefix (-moz- など) 付きのスタイルは必ず prefix なしも一緒に
![Page 130: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/130.jpg)
CSS の書き方
独自実装スタイルに要注意
prefix (-moz- など) 付きのスタイルは必ず prefix なしも一緒に
prefix 付きは書式変更可能性大
![Page 131: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/131.jpg)
Canvas と SVG の使い分け
![Page 132: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/132.jpg)
Canvas と SVG の使い分け
どちらも画像処理
![Page 133: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/133.jpg)
Canvas と SVG の使い分け
どちらも画像処理
アニメーションも
![Page 134: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/134.jpg)
Canvas が適した処理
![Page 135: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/135.jpg)
Canvas が適した処理
ピクセル単位の描画・編集
![Page 136: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/136.jpg)
Canvas が適した処理
ピクセル単位の描画・編集
細かく高速なアニメーション
![Page 137: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/137.jpg)
SVG が適した処理
![Page 138: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/138.jpg)
SVG が適した処理
拡大しても滑らかな画像
![Page 139: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/139.jpg)
SVG が適した処理
拡大しても滑らかな画像
フィルタ処理や切り抜きなど
![Page 140: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/140.jpg)
SVG が適した処理
拡大しても滑らかな画像
フィルタ処理や切り抜きなど
ユーザインタラクティブな処理
![Page 141: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/141.jpg)
SVG が適した処理
拡大しても滑らかな画像
フィルタ処理や切り抜きなど
ユーザインタラクティブな処理
DOM イベントでの処理
![Page 142: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/142.jpg)
CSS3 Transitions
![Page 143: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/143.jpg)
CSS3 Transitions
もっと簡単なアニメーション
![Page 144: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/144.jpg)
CSS3 Transitions
もっと簡単なアニメーション
拡大縮小・回転など基本的変化
![Page 145: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/145.jpg)
CSS3 Transitions
もっと簡単なアニメーション
拡大縮小・回転など基本的変化
CSS 数行書くだけで OK
![Page 146: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/146.jpg)
CSS3 Transitions
もっと簡単なアニメーション
拡大縮小・回転など基本的変化
CSS 数行書くだけで OK
GPU 処理での高速化も
![Page 147: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/147.jpg)
便利なツールは?
![Page 148: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/148.jpg)
Processing.js
アニメーションなどが簡単
ゲームなどでの採用が多い
http://processingjs.org/
![Page 149: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/149.jpg)
Contextfree.js
Canvas 上でフラクタル画像
ContextFree 言語で記述
http://azarask.in/projects/algorithm-ink/
![Page 150: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/150.jpg)
Raphaëlhttp://raphaeljs.com/
JavaScript で SVG を描画
XML タグを書かずに済む
![Page 151: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/151.jpg)
GUI フレームワーク
いくつか有名なものがあります
Cappuccino:
http://objective-j.org/
Sproutcore:
http://www.sproutcore.com/
JavaScriptMVC:
http://javascriptmvc.com/
![Page 152: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/152.jpg)
Video Codec 問題は?
Google の Gears は?
Google の O3D は?
Google の Wave は?
SQL Database は?
One Point Q&A
![Page 153: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/153.jpg)
Video Codec 問題?
![Page 154: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/154.jpg)
Open Video
Theora は Firefox 3.5~, WebM は Firefox4~
![Page 155: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/155.jpg)
Open Video
HTML5 では Codec 指定なし
Theora は Firefox 3.5~, WebM は Firefox4~
![Page 156: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/156.jpg)
Open Video
HTML5 では Codec 指定なし
Web 標準=ロイヤリティフリー
Theora は Firefox 3.5~, WebM は Firefox4~
![Page 157: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/157.jpg)
Open Video
HTML5 では Codec 指定なし
Web 標準=ロイヤリティフリー
WebM (Web Media) が有力に
Theora は Firefox 3.5~, WebM は Firefox4~
![Page 158: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/158.jpg)
Open Video
HTML5 では Codec 指定なし
Web 標準=ロイヤリティフリー
WebM (Web Media) が有力に
WebM = VP8+Vorbis@Matroska
Theora は Firefox 3.5~, WebM は Firefox4~
![Page 159: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/159.jpg)
Open Video
HTML5 では Codec 指定なし
Web 標準=ロイヤリティフリー
WebM (Web Media) が有力に
WebM = VP8+Vorbis@Matroska
特許問題完全解決かは不明
Theora は Firefox 3.5~, WebM は Firefox4~
![Page 160: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/160.jpg)
On2 Tech.VP3
Xiph.Org Google
OggVP4TheoraVP5VP6VP7VP8
Container
Vorbis
Matroska
VorbisVP8
AudioVideo
WebM
ロイヤリティフリーWebM プロジェクト FAQ: http://www.webmproject.org/about/faq/
![Page 161: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/161.jpg)
Gears は?
![Page 162: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/162.jpg)
Gears は終了しました
![Page 163: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/163.jpg)
Gears は終了しました
2010/02/19 開発停止
![Page 164: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/164.jpg)
Gears は終了しました
2010/02/19 開発停止
Safari はサポートも停止
![Page 165: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/165.jpg)
Gears は終了しました
2010/02/19 開発停止
Safari はサポートも停止
Geolocation API などWeb標準へ
![Page 166: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/166.jpg)
O3D は?
![Page 167: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/167.jpg)
O3D は終了しました
![Page 168: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/168.jpg)
O3D は終了しました
2010/05/07 開発停止
![Page 169: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/169.jpg)
O3D は終了しました
2010/05/07 開発停止
WebGL サポートに一本化
![Page 170: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/170.jpg)
O3D は終了しました
2010/05/07 開発停止
WebGL サポートに一本化
WebGL に変換するライブラリ
![Page 171: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/171.jpg)
Wave は?
![Page 172: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/172.jpg)
Wave は終了しました
Wave 追悼会: http://atnd.org/events/6995
![Page 173: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/173.jpg)
Wave は終了しました
使い物にならなかったしね
Wave 追悼会: http://atnd.org/events/6995
![Page 174: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/174.jpg)
Wave は終了しました
使い物にならなかったしね
8/21 に追悼会するらしいよ
Wave 追悼会: http://atnd.org/events/6995
![Page 175: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/175.jpg)
Wave は終了しました
使い物にならなかったしね
8/21 に追悼会するらしいよ
Wave 追悼会: http://atnd.org/events/6995
![Page 176: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/176.jpg)
SQL Database?
![Page 177: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/177.jpg)
SQL DB の標準化は頓挫
![Page 178: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/178.jpg)
SQL DB の標準化は頓挫
SQLite 実装依存では仕様には...
![Page 179: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/179.jpg)
SQL DB の標準化は頓挫
SQLite 実装依存では仕様には...
そもそも Web に SQL 適する?
![Page 180: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/180.jpg)
SQL DB の標準化は頓挫
SQLite 実装依存では仕様には...
そもそも Web に SQL 適する?
シンプルな IndexedDB に移行
![Page 181: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/181.jpg)
SQL DB の標準化は頓挫
SQLite 実装依存では仕様には...
そもそも Web に SQL 適する?
シンプルな IndexedDB に移行
IndexedDB 上に SQL 構築も
![Page 182: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/182.jpg)
さて。
![Page 183: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/183.jpg)
![Page 184: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/184.jpg)
Any Question ?
![Page 185: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/185.jpg)
Any Question ?
end.
![Page 186: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/186.jpg)
Web DesignCSS, Image, Fonts...
![Page 187: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/187.jpg)
CSS Gradients
Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/CSS ボタン生成ツールも: http://css-tricks.com/examples/ButtonMaker/
![Page 188: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/188.jpg)
CSS Gradients線形 (linear) と放射状 (radial) の2種類
linear-gradient(top, black 0%, white 100%)
radial-gradient(circle, yellow, green)
繰り返し形式もサポート
repeating-linear-gradient(red 10px, blue 10px)
CSS3 Images で画像の一種として定義
Draft なので -webkit-, -moz- prefix が必要
Firefox 3.6 では background に対してのみ
WebKit の構文は古い独自仕様なので注意
Firefox3.6~ http://dev.w3.org/csswg/css3-images/#gradients-
![Page 189: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/189.jpg)
http://people.mozilla.org/~blizzard/2009-11-gradient-button/sample.html
<style>.gradationbutton { display: block; /* a タグをボックス要素に */ font: bold 138.5% Helvetica,Arial,sans-serif; text-align: center; text-decoration: none; /* リンクの下線解除 */ color: #ffffff; /* 白抜き文字 */ text-shadow: -1px -1px 2px #777777; /* エンボス */ padding: 10px; border: 1px solid #659635; -moz-border-radius: 10px; border-radius: 10px; /* 角を丸める */ background: #99ca28; /* 非サポートブラウザ向け Fallback */ background: -moz-linear-gradient(top, #CFE782 0%, #9BCB2A 2%, #5DA331 97%, #659635 100%);}.info { font-size: 81%; font-weight: normal;}</style><p style="width: 300px;"> <a class="gradationbutton" href="http://hacks.mozilla.org"> <span>hacks.mozilla.org</span><br/> <span class="info">HTML5 の最新情報はこちら!</span> </a></p>
![Page 190: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/190.jpg)
Multiple Backgrounds
Firefox3.6~ http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
![Page 191: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/191.jpg)
Multiple Backgrounds
background に複数の画像を指定可能に
background: <image1>, <image2>, <image3>...
CSS3 Images の gradation も組み合わせ可能
半透明なグラデーションでフェード効果も
画像の数、ファイルサイズ削減にも繋がる
Firefox 3.6 以降でサポート
WebKit は未サポートなので注意
Firefox3.6~ https://developer.mozilla.org/ja/Using_gradients
![Page 192: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/192.jpg)
http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
<style>.fadedflower { background: /* 左が白、右が無色透明となるグラデーション */ -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), /* その後ろに表示する画像 */ url(flowers-pattern.jpg);}</style>
<div class="fadedflower"> <!-- グラデーション背景画像つき要素 --></div>
![Page 193: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/193.jpg)
Web Fonts
Firefox3.5~ http://www.alistapart.com/articles/cssatten
![Page 194: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/194.jpg)
Web Fonts
Japanese Web Fonts Service by Seesaa http://decomoji.jp/
![Page 195: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/195.jpg)
Web Fonts
CSS3 Web Fonts
@font-face でダウンロードフォントを定義
@font-face { font-family: Koburina; src url(Koburina.woff) format("woff"); }
Firefox 3.5 で OpenType, TrueType をサポート
Firefox 3.6 や IE9 などは WOFF もサポート
Web Open Font Format
フォントベンダと共に作った新フォント形式
グリフ部分のデータは圧縮して小さく
Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face
![Page 196: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/196.jpg)
sample css style rules
/* Internet Explorer 8 以前用フォント設定 (最初に) */@font-face { font-family: Sawarabi; src: url(Sawarabi.eot) /* format() 非サポート */;}/* 他のブラウザ向けフォント設定 */@font-face { font-family: Sawarabi; src: url(Sawarabi.otf) format("opentype");}/* Firefox 3.6 以降などには WOFF を */@font-face { font-family: Sawarabi; src: url(Sawarabi.woff) format("woff");}body { font-family: Sawarabi, sans-serif; }
Firefox3.5~ http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
![Page 197: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/197.jpg)
Application PlatformJS APIs for Web Apps...
![Page 198: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/198.jpg)
WebSockets
photo by 5500 http://www.flickr.com/photos/5500/303849123/
![Page 199: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/199.jpg)
WebSockets
シンプルなテキスト送受信プロトコル
バイナリデータや多重化などの機能はない
JavaScript API も極めて単純
データの送信は send メソッド
open, error, close, message イベントで処理
まだまだ仕様策定段階なので要注意
Firefox は 2009/04 からパッチを用意し仕様変更に随時追従しながら仕様の問題を指摘
Firefox 4, Chrome 6 が現仕様サポート予定https://dev.mozilla.jp/hacksmozillaorg/websockets-in-firefox/
![Page 200: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/200.jpg)
Web Sockets API 使用コード例// WebSocket の接続を開始var socket = new WebSocket(url /* ,protocol */);
// on*** イベントハンドラを設定socket.onopen = function(event) { // send メソッドでサーバにテキストを送信 socket.send("Hello, WebSocket Server!");}// onmessage イベントハンドラでサーバからテキスト受信socket.onmessage = function(event) { alert("data from server: "+event.data);}
socket.onerror = function(e) { alert("Error!"); }socket.onclose = function(e) { alert("Closed."); }
![Page 201: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/201.jpg)
File API
photo by californiaAmy http://www.flickr.com/photos/amyandthomas/3865411819/
![Page 202: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/202.jpg)
File API
ローカルファイルの読み込み専用 API
Mozilla が中心に標準化、Firefox 3.6 で実装
書き込みは File API: Writer という別仕様
<input type="file"> 経由でのアクセスが一番基本
value は初期値設定や JS から文字列指定不可
XMLHttpRequest や Workers などでも利用可
Drag & Drop API との組み合わせも可能
Blob, File, FileReader などのインターフェイス
Firefox3.6~ https://developer.mozilla.org/en/Using_files_from_web_applications
![Page 203: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/203.jpg)
https://developer.mozilla.org/en/Using_files_from_web_applications
<input type="file" id="fileInput" multiple="true"/><script><!--var fileInput = document.getElementById("fileInput"); fileInput.addEventListener("change", handleFiles);
// onchange イベントハンドラfunction handleFiles() { var fileList = this.files; for (var i = 0; i < files.length; i++) { alert("ファイル名: " + files[i].name); alert("内容: " + files[i].getAsText("UTF-8")); } // close や lock は不要 (try-catch すれば OK)}--></script>
![Page 204: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/204.jpg)
Drag & Drop API
Firefox3.6~ http://r.dynamis.jp/fontdropdemo
![Page 205: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/205.jpg)
The drag-and-drop API is horrible,
but it has one thing going for it: IE6
implements it, as do Safari and Firefox.
Ian Hickson の言葉 http://twitter.com/Hixie/status/4075253361
![Page 206: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/206.jpg)
Drag & Drop APIHTML5 の Drag & Drop API
IE5, Firefox 3.5, Safar 4 からサポート
IE の (ホント酷い) 先行実装に合わせた仕様
addEventListener("drop", function(event) { ... },true)
dragstart, dragover, dragend などのイベント
ローカルファイルのドロップは File API
File API と組み合わせは Firefox 3.6 から
event.dataTransfer.files でファイルを受け取る
あとは File API で自由に読み取る
Firefox3.5~ https://developer.mozilla.org/Ja/DragDrop/Drag_and_Drop
![Page 207: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/207.jpg)
http://hacks.mozilla.org/2009/12/uploading-files-with-xmlhttprequest/
reader.onload = function(e) { var bin = e.target.result; //binaryString // 読み取ったファイルをアップロード var xhr = new XMLHttpRequest(); xhr.open("POST", "upload.php"); xhr.overrideMimeType('text/plain; charset=x-user-defined-binary'); xhr.sendAsBinary(bin); // sendAsBinary は Firefox 独自です};// ... 酷い仕様で無駄に複雑になるので中略 ...dropzone.addEventListener("drop", function(event) { event.preventDefault(); // ドロップイベントの dataTransfer でファイルアクセス var allTheFiles = event.dataTransfer.files; alert("ドロップしたファイル数: " + allTheFiles.length); for (var i = 0; i < files.length; i++) { // バイナリファイルとして読み込み reader.readAsBinaryString(files[i]); // Firefox 独自 }}, true);
無駄に複雑な仕様なので省略しましたが、実用レベルではライブラリを使いましょう
![Page 208: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/208.jpg)
Pointer Events
SVG 用 CSS pointer-events を HTML にも導入
Firefox 3.6 では auto と none だけ対応
pointer-events: auto; で従来通りの挙動
pointer-events: none; でマウスイベントを透過
例: 半透明画像下にあるリンクもクリック可能に
Firefox.3.6~ https://developer.mozilla.org/en/CSS/pointer-events
![Page 209: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/209.jpg)
http://demos.hacks.mozilla.org/openweb/pointer-events/<div class="boxContainer"> <div class="layer1"> クリックしたい下レイヤ <a href="a.html">リンクテキスト</a> </div> <!-- 半透明背景画像だけの上レイヤ --> <div class="layer2"></div></div><style>.layer1 { background-color: rgb(221, 238, 246); position: absolute;}.layer2 { /* 右端をフェードアウトさせる半透明レイヤ */ position: absolute; right: -15px; width: 155px; height: 120px; background: -moz-linear-gradient(right, rgba(0,34,51,1) 40px, rgba(0,34,51,0));}</style>
![Page 210: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/210.jpg)
HTML5 Parser
http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html
![Page 211: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/211.jpg)
HTML5 Parser
HTML5 では互換性確保のためパーサ仕様も含む
仕様の曖昧性もブラウザ非互換の主要因
Firefox 3.6 以降で実装 (4 でデフォルト有効)
パース処理のスレッド分離で全体的に高速化
innerHTML 呼び出しは 20% 高速化
XML 名前空間無しで SVG/MathML 使用可
整形式でなくても SVG/MathML 使用可
ブラウザ非互換の原因やバグを多数解消
地味だが非常に重要な機能https://dev.mozilla.jp/hacksmozillaorg/firefox-4-the-html5-parser-inline-svg-speed-and-more/
![Page 212: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/212.jpg)
Native MultimediaVideo, Animation, 3D ...
![Page 213: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/213.jpg)
about: <Video>
HTML5 では <video> や <audio> タグを追加
サポート Codec の違いには注意が必要
Firefox は特許問題のない Ogg/WebM に対応
H.264 特許権利者の Apple は H.264 のみ対応
特許権ない Google は Ogg/WebM/H.264 両対応
体感速度向上につながる属性に注意
ポスターフレーム画像を poster 属性に指定
自動バッファ設定は autobuffer 属性で指定
フルスクリーン対応は今のところ Firefox のみ
Firefox.3.5~ http://hacks.mozilla.org/category/video/
![Page 214: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/214.jpg)
http://hacks.mozilla.org/2009/12/autobuffering-video-in-firefox/
<video controls> <!-- 各コーデックと、非対応ブラウザ向けを列挙 --> <source src="video.webm" type="video/webm"/> <source src="video.ogg" type="video/ogg"/> <source src="video.mp4" type="video/mp4"/> <embed src="video.swf" width="500" height="396" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true"/></video><!-- 自動バッファオン、ポスターフレームあり --><video controls autobuffer poster="posterframe.jpg"> ...</video><!-- 自動バッファのデフォルト動作はブラウザ次第です - デスクトップ Safari/Chrome はデフォルトでオン - Firefox/Opera, iPhone Safari はデフォルトオフ - 但し Opera はその予定なだけで autobuffer 未対応 -->
![Page 215: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/215.jpg)
CSS Transitions
Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
![Page 216: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/216.jpg)
CSS Transitions
Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
CSS3 Transitions
transition: all 0.5s ease-in;
transition: color 1s linear, width 1s ease-in;
Draft なので -webkit-, -moz- prefix が必要
一部プロパティの変化をなめらかにする
動的擬似クラスや JavaScript 書き換え時に
位置、サイズ、カラー、シャドウなどが対象
変化の時間や速度なども制御可能
linear, ease, ease-in, ease-out など
![Page 217: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/217.jpg)
http://media.24ways.org/2009/14/5/index.htmla.polaroid { /* ... font-size とか省略 ... */ z-index: 2; -webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); -moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3); -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; transition: all 0.5s ease-in;}a.polaroid:hover,a.polaroid:focus,a.polaroid:active { z-index: 999; border-color: #6A6A6A; -webkit-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); -moz-box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); box-shadow: 15px 15px 20px rgba(0,0, 0, 0.4); -webkit-transform: rotate(0deg) scale(1.05); -moz-transform: rotate(0deg) scale(1.05); transform: rotate(0deg) scale(1.05);}
![Page 218: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/218.jpg)
SVG Animation
![Page 219: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/219.jpg)
SVG Animation
SVG のアニメーション関連機能
SMIL Animation ベースの仕様
SVG は SMIL のホスト言語という位置づけ
<animate>, <set> などで属性の変更を定義
<animateMotion>, <animateTransform> 実装済
<animateColor> は仕様に不備があり pending
<animate> の機能制約版に過ぎず必要性も低い
Firefox 4, Safari, Chrome, Opera でサポート
IE では類似仕様の HTML+TIME をサポート
SVG Test Suite 結果表: http://www.codedread.com/svg-support.php
![Page 220: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/220.jpg)
http://people.mozilla.com/~dynamis/demo/smil/<svg ... xmlns="http://www.w3.org/2000/svg" xmlns:xlink="..."> ... <ellipse cx="290" cy="200" rx="80" ry="80"><!-- 中心の円 --> <!-- 毎秒指定色へと変化する 5秒間の色変更を無限に繰り返す --> <animate attributeType="CSS" attributeName="fill" dur="5s" values="#ff8; #f88; #f8f; #88f; #8ff; #8f8" keyTimes="0; .2; .4; .6; .8; 1" repeatCount="indefinite"/> </ellipse> ... <g id="R1" transform="translate(200, 200)"><!-- グループ化 --> <ellipse id="EL" cx="0" cy="0" rx="100" ry="30" ...><!-- 周囲の楕円 --> <animateTransform attributeName="transform" type="rotate" dur="7s" from="0" to="360" repeatCount="indefinite"/><!-- 回転 --> <animate attributeName="cx" dur="8s" values="-20; 120; -20" keyTimes="0; .5; 1" repeatCount="indefinite"/><!-- 中心の移動 --> <animate attributeName="ry" dur="3s" values="10; 60; 10" keyTimes="0; .5; 1" repeatCount="indefinite"/><!-- 半径の変更 --> </ellipse> </g> <use xlink:href="#R1" transform="rotate(30, 300, 200)"/><!-- 回転複製 --> ...</svg>
![Page 221: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/221.jpg)
WebGL
Firefox 4~ http://www.khronos.org/webgl/wiki/Demo_Repository
![Page 222: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/222.jpg)
WebGL
The Khronos Group で API 仕様を策定
Apple, Google, Mozilla, Opera が参加
OpenGL ES 2.0 ベースの API を JS から使う
シェーダーやテクスチャなども当然利用可能
<canvas> の 3D コンテキストとして定義
Firefox 4 や WebKit Nightly でサポート
Firefox では about:config で有効化する
webgl.enabled_for_all_sites = true
Google の O3D は Gears 同様に開発終了Firefox 4~ https://developer.mozilla.org/en/WebGL
![Page 223: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/223.jpg)
https://developer.mozilla.org/en/WebGL/Getting_started_with_WebGL
<canvas id="glcanvas" width="640" height="480"/><script type="text/javascript">var canvas = document.getElementById("glcanvas");// WebGL コンテキストを取得// Firefox では "moz-webgl" または "experimantal-webgl"// WebKit では "webkit-gl" を引数に指定するvar gl = canvas.getContext("webgl");if (gl) { // WebGL コンテキストの初期化 gl.clearColor(0.0, 0.0, 0.0, 1.0); gl.clearDepth(1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); // ... OpenGL 同様にいろいろ描画処理 ...}</script>
![Page 224: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/224.jpg)
Beyond HTML5Future Web Platform
![Page 225: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/225.jpg)
Audio Data API
デモ紹介ブログポスト: http://vocamus.net/dave/?p=974
![Page 226: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/226.jpg)
Audio Data API<audio> データを操作する JS API の試験実装中
WHATWG では当初 audio canvas として検討
<video> データの解析は <canvas> 経由で
onloadedmetadata イベントを拡張
channels, rate, volume などを追加
onaudiowritten イベントを新しく定義
フレームバッファと開始時間が得られる
Audio クラスでゼロから音の合成も可能
詳細は: https://wiki.mozilla.org/Audio_Data_API
![Page 227: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/227.jpg)
Orientation
Firefox3.6~ http://r.dynamis.jp/oryzeademo
![Page 228: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/228.jpg)
Orientation
CSS と JavaScript の両方で利用可能
メディアクエリーで縦横画面別の CSS を指定
@media all and (orientation: portrait) { ... }
MozOrientation イベントで JavaScript 処理
window.addEventListener("MozOrientation", orientationHandler, true);定期的に加速度センサーからのイベント発生
デバイス面の法線ベクトル成分 x,y,z を取得
Firefox3.6~ http://hacks.mozilla.org/2009/10/orientation-for-firefox/
![Page 229: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/229.jpg)
https://developer.mozilla.org/en/Detecting_device_orientation
<!-- 縦方向 (portrait) と横方向 (landscape) の CSS --><link rel="stylesheet" href="portrait.css" media="all and (orientation:portrait)"><link rel="stylesheet" href="landscape.css" media="all and (orientation:landscape)"><style>@media all and (orientation: portrait) { ... }@media all and (orientation: landscape) { ... }</style><script type="text/javascript">window.addEventListener("MozOrientation", handleOrientation);function handleOrientation(orientData) { var x = orientData.x; // デバイスの法線ベクトル X 成分 var y = orientData.y; // デバイスの法線ベクトル Y 成分 var z = orientData.z; // デバイスの法線ベクトル Z 成分 // デバイスの傾きに応じた適当な処理を行う}</script>
![Page 230: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/230.jpg)
Multi-touch
![Page 231: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/231.jpg)
Multi-touch
:-moz-system-metric(touch-enabled) CSSセレクタ
MozTouchDown, MozTouchMove, MozTouchUp イベントで JavaScript 処理
document.addEventListener("MozTouchMove", touchHandler, true);位置の取得はマウス同様 screenX, clientX とか
現状は Windows 7 にのみ対応した試験実装
Firefox 4 での標準サポートは未定
タッチジェスチャーなども含めて検討中
https://wiki.mozilla.org/Firefox/Projects/Multitouch_Polish
![Page 232: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/232.jpg)
http://www.mgalli.com/development/drawing/demoapp.html
<canvas id="canvas" width="1200" height="800"/><script type="text/javascript">var ctx = document.getElementById("canvas").getContext('2d');
window.setInterval(function fadeOut() { ctx.fillStyle = 'rgba(255,255,255,.1)'; ctx.fillRect(0,0,1200,800);}, 200); // 描いたものを自動フェードアウト
function drawCircle(e) { // タッチした位置に円を描画する ctx.fillStyle='rgba(0,0,0,1)'; ctx.beginPath(); ctx.arc(e.clientX, e.clientY, 20, 0, Math.PI*2, 1); ctx.fill(); ctx.closePath();}document.addEventListener("MozTouchMove", drawCircle, false);</script>
https://wiki.mozilla.org/Firefox/Projects/Multitouch_Polish/DOM_Events/Examples
![Page 233: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/233.jpg)
Referencesfor more information...
![Page 234: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/234.jpg)
referencesMozilla Hacks Blog - Mozilla と Web の最新技術紹介
http://hacks.mozilla.org/https://dev.mozilla.jp/hacksmozillaorg/Firefox の最新機能紹介ページ
https://developer.mozilla.org/en/Upcoming_Firefox_features_for_developershttps://developer.mozilla.org/ja/Firefox_3.6_for_developersWHATWG HTML5 (各機能のブラウザ実装状況含む)
http://www.whatwg.org/html5HTML5 についてのおさらい
http://w3g.jp/blog/studies/html5report
![Page 235: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/235.jpg)
ref. - slidesHTML5 の基本は矢倉さんのスライドがオススメ!
http://www.slideshare.net/myakura/presentationsMicroData についても矢倉さんのスライドオススメ!
http://www.slideshare.net/myakura/microdata-a-primerWebFonts は仕様執筆者のプレゼンが必見!
http://people.mozilla.org/~jdaggett/webfontsfuture.pdfFirefox 4: fast, powerful and empowering (英語)
http://www.slideshare.net/beltzner/firefox-roadmap-2010-0510
![Page 236: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/236.jpg)
ref. - statusHTML5 の対応状況は仕様書に書かれている
各項目のタイトル左側にポップアップ表示
http://www.whatwg.org/html5caniuse.com のまとめがオススメ
http://caniuse.com/http://caniuse.com/#cats=HTML5&statuses=rec,pr,cr,wd,ietfWHATWG の Wiki
http://wiki.whatwg.org/wiki/Implementations_in_Web_browsersSVG Test Suite の結果表
http://www.codedread.com/svg-support.php
![Page 237: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/237.jpg)
ref. - demo & samplesMozilla Hacks Blog - 開発者向け最新情報とデモ
http://hacks.mozilla.org/HTML5ROCKS - チュートリアル(やや古い)など
http://html5rocks.com/Safari Technology Demos - CSS3 と Apple 独自仕様
http://developer.apple.com/safaridemos/IE9 Test Drive - IE9 に最適なデモばかりですが
http://ie.microsoft.com/testdrive/@paulrouget - Mozilla Tech Evangelist
http://twitter.com/paulrouget/
![Page 238: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/238.jpg)
ref. - toolsOpen Web ツール検索
http://tools.mozilla.com/Processing.js - Canvas 上で Processing を使う
http://processingjs.org/Contextfree.js - Canvas 上で ContextFree を使う
http://azarask.in/projects/algorithm-ink/http://code.google.com/p/contextfree/source/browse/trunk/contextfree.jsIE でも Canvas を描画可能にする uupaa.js
http://d.hatena.ne.jp/uupaa/searchdiary?word=*[uupaa.js]
![Page 239: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/239.jpg)
ref. - toolsJavaScript から簡単に SVG を生成
http://raphaeljs.com/Web アプリケーション用のフレームワーク
Cappuccino: http://objective-j.org/Sproutcore: http://www.sproutcore.com/JavaScriptMVC: http://javascriptmvc.com/SVG や XUL にも対応するフレームワーク
Ample SDK: http://www.amplesdk.com/
一時 Gianduia も話題でしたが外部向けに公開されてないので現状論外
![Page 240: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/240.jpg)
ref. - web fontsCSS Fonts Module Level 3
http://www.w3.org/TR/css3-fonts/Google の Web Font サービス
http://code.google.com/webfontsWeb Fonts のライセンス販売 (無償フォント含む)
http://typekit.com/http://decomoji.jp/Web Fonts Generator - eot や WOFF フォントに変換
http://www.fontsquirrel.com/fontface/generator
![Page 241: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/241.jpg)
ref. - webglWebGL Spec.
https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/WebGL-spec.htmlWebGL セクション@MDC
https://developer.mozilla.org/en/WebGLThe WebGL Cookbook
http://learningwebgl.com/cookbook/Khronos - WebGL
http://www.khronos.org/webgl/http://www.khronos.org/webgl/wiki/Demo_Repository
![Page 242: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/242.jpg)
ref. - other spec.File API
http://www.w3.org/TR/FileAPI/http://www.w3.org/TR/file-writer-api/Geolocation API
http://www.w3.org/TR/geolocation-API/Audio Data API
https://wiki.mozilla.org/Audio_Data_APIwindow.onmozorientation
https://developer.mozilla.org/en/DOM/window.onmozorientation
![Page 243: Keypoints html5](https://reader038.vdocuments.mx/reader038/viewer/2022102717/55615081d8b42a857d8b4ebc/html5/thumbnails/243.jpg)
ref. - other spec.CSS Current Work
http://www.w3.org/Style/CSS/current-workTyped Arrays
https://cvs.khronos.org/svn/repos/registry/trunk/public/webgl/doc/spec/TypedArray-spec.htmlHTML5 の定義解説から関連仕様へのリンク色々
http://www.whatwg.org/specs/web-apps/current-work/multipage/introduction.html#is-this-html5?