"HTML5" in Firefox4
Slides @ HTML5 NadoNado in Fukui
by Tomoya ASAI (aka. dynamis)
Fractal Firefox Background Image: http:...
about:me
dynamis (でゅなみす)
浅井 智也 (あさいともや)
Mozilla Tech Evangelist
http://r.dynamis.jp/presen
dynamis mozilla-japan.org
twitt...
Firefox 4 で見る
HTML5 時代の Web 技術
HTML5 だけじゃないのがポイント...
比較的見て分かり易い
技術を中心に紹介します
時間の都合で個々の技術解説あまり詳しくできないけどご容赦を...
HTML5 とは?
HTML5 時代の Web 技術
for Web Design
for Native Multimedia
for Application Platform
Agenda
まずはやはり...
資料だけ見てる方はゴメンナサイ...
demo...
資料だけ見てる方はゴメンナサイ...
今のは実は...
HTML5 ではありません
HTML5 ではありません
Flash でもありません
AIR でもありません
Silverlight でもありません
それでは。(・・).
HTML5 って何?
仕様書に書いてあります
This specification evolves HTML
and its related APIs to ease the
authoring of Web-based applications.
http://whatwg.org/ht...
http://whatwg.org/html5 - Abstract より
この仕様では Web アプリケー
ションを記述しやすくするため
HTML と関連 API を発展させる
http://whatwg.org/html5 - Abstract より
この仕様では Web アプリケー
ションを記述しやすくするため
HTML と関連 API を発展させる
Web アプリケーション...
文書を共有するだけでなく...
メールや地図を見るのも...
テレビやゲームも...
仕事や授業も...
これまでの問題は...
ブラウザの独自実装
実装まかせの曖昧な仕様
不安定、低機能、低速
HTML5 の目的は...
既存の独自実装を標準化
これから必要な機能は追加
本格的なアプリ実行環境に
http://whatwg.org/html5 - Abstract より
この仕様では Web アプリケー
ションを記述しやすくするため
HTML と関連 API を発展させる
HTML と関連 API?
HTML の基本はタグ...
マークアップ (タグと意味)
(X)HTML 構文とパーサ
MicroData (セマンティクス)
SVG や MathML との連携
マルチメディアサポート...
Audio/Video タグのサポート
自由に描画する領域 Canvas
Canvas への二次元描画 API
関連 API って何?
イベントやインターフェイス
Drag & Drop や Undo/Redo
オフラインイベント
履歴とナビゲーション
ドキュメント間通信
http://whatwg.org/html5 - Abstract より
この仕様では Web アプリケー
ションを記述しやすくするため
HTML と関連 API を発展させる
再出発ではなく段階的発展
互換性を維持した発展
HTML4 の発展だから
HTML5
理想的転換ではなく現実的発展
It is necessary to evolve HTML
incrementally. The attempt to
get the world to switch to
XML, ... all at once didn't work.
...
HTML は段階的に発展さ
せる必要がある。... すべて
を一度に切り替えようとい
う試みは成功しなかった。
Tim Berners-Lee の言葉: http://dig.csail.mit.edu/breadcrumbs/node/166
互換性を尊重
既存実装を考慮した仕様策定
構文エラー処理など詳細に定義
非互換の原因を最小限に
The drag-and-drop API is horrible,
but it has one thing going for it: IE6
implements it, as do Safari and Firefox.
Ian Hic...
Drag & Drop API は酷いけど、採用する理由
がひとつある。つまり、IE6 だけでなく Safari
や Firefox でも実装されているということだ。
Ian Hickson の言葉 http://twitter.com/Hix...
HTML5 は次世代への第一歩
技術的には小さな一歩
既存技術の整理が主
協力関係は大きな変化
業界全体が標準を推進
HTML5 & "HTML5"
HTML5 の範囲は...
仕様書に書いてあります
WAHTWG の HTML5 仕様書
分割して W3C でも標準化
W3C 仕様名に "HTML" を含む
WHATWG は整合性重視
W3C はモジュール指向
ref. http://whatwg.org/html5 ...
どこまで HTML5?
Web Workers
Web Storage
The WebSockets API
Server-Sent Events
Geolocation API
XMLHttpRequest Level 2
Canvas 2D...
どこまで HTML5?
Web Workers
Web Storage
The WebSockets API
Server-Sent Events
Geolocation API
XMLHttpRequest Level 2
Canvas 2D...
次世代 Web 標準技術 (バズワードとしての "HTML5")
Web Applications 1.0
Next Generation of HTML
WHATWG - HTML5
要素とタグの定義
デザイン機能 (CSS)
Microda...
Web Workers
The WebSocket protocol
Web Storage
The WebSockets API
Server-Sent Events
注目されている関連仕様の一部を標準化団体別に色分け
Geolocation...
仕様書で HTML5 として定義されている範囲のはこれだけ
WHATWG - HTML5
Canvas 2D Graphics Context
Microdata
Microdata vocabularies
Cross-document me...
HTML & "HTML5"
HTML5 は仕様書の定義
"HTML5" は次世代技術の総称
"HTML5" = HTML5 & ALL
バズワードのご利用は程々に...
HTML5 時代の Web 技術
HTML5 が使える時代
HTML5 が注目される時代
誤りではないぼかした表現
Web Design
CSS, Image, Fonts...
Web Fonts
ダウンロードフォント
Firefox 3.6 からは WOFF も
IE9 なども WOFF サポート
WOFF = Web用圧縮フォント
Firefox3.5~ https://developer.mozilla.org/...
日本語 Web Fonts
http://decomoji.jp/
商用サービス「デコもじ」
http://decomoji.jp/
サブセットフォントを使う
必要文字だけ切り出して小さく
Font Squirrel などで可能:
http:/...
Web Fonts
@font-face { /* IE8 以前用 EOT フォント設定 (最初に) */
font-family: Sawarabi;
src: url(Sawarabi.eot) /* IE8 以前は format() 非サ...
Font Control Features
CSS3 font-variant
フォントの詳細な機能を制御
分数、桁揃え、合字、旧字体...
仕様のエディタ自身による実装
実装者本人の解説: http://people.mozilla.org/...
http://hacks.mozilla.org/2009/10/font-control-for-designers/
CSS Transitions
スタイル遷移をなめらかに
簡単なアニメーションにも
ベンダー接頭辞に注意
Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
CSS Transitions
#somebox {
color: black; background-color: yellow;
-moz-transition: all 2s ease-in;
-webkit-transition: al...
CSS3 calc()
サイズを計算式で指定可能
width: -moz-calc(20% - 1rem)
-moz- prefix に注意
CSS3 calc()
/* margin 分を考慮した左右の分割を行う例 */
#main {
width: 75%;
margin-right: 1rem;
}
#side {
width: -moz-calc(25% - 1rem);
w...
-moz-any() selector
CSS セレクタを書きやすく
階層構造などで特に便利
-moz- prefix に注意
-moz-any() がないとき(><)
h1 { font-size: 30px; }
section h1, article h1, aside h1, nav h1 {
font-size: 25px;
}
section section...
-moz-any() があるとき(・・).
h1 { font-size: 30px; }
-moz-any(section, article, aside, nav) h1 {
font-size: 25px;
}
-moz-any(sect...
-moz-any() があるとき(・・).
-moz-any(section, article, aside, nav)
-moz-any(section, article, aside, nav)
-moz-any(section, arti...
background: -moz-element()
他の要素を参照して背景に指定
既存要素との比較変換など便利
Canvas は toDataURL() 不要
反射やサムネイルなどにも便利
http://hacks.mozilla.org/2010/08/mozelement/
background: -webkit-canvas()
Canvas 参照だけ WebKit も
-webkit-canvas(canid)
canid は JS でコンテキスト取
得時に
getCSSCanvasContext(,canid...
background: -webkit-canvas()
http://webkit.org/blog/176/css-canvas-drawing/
<div id="divid">Lorem ipsum dolor sit amet, .....
background: -moz-element()
moz-element() では任意要素
JS との組み合わせ不要
説明割愛しますが JS から操作する mozSetImageElement() もあり
background: -moz-element()
http://hacks.mozilla.org/2010/08/mozelement/
<canvas id="canvasid" width="300" height="300"/>
<...
background: -moz-element()
参照元を見せない場合の注意
内部的には描画させる必要あり
display: none; などとしない
hight:0; overflow: hidden;
などの div で囲んで隠す
im...
background: -moz-element()
http://hacks.mozilla.org/2010/08/mozelement/
<div style="height: 0; overflow: hidden;"><!-- 隠す ...
Native Multimedia
Video, Audio, 3D ...
<Video>
自動バッファ、キャッシュなど
実用に向けてどんどん強化中
Safari も Plugin で Ogg 再生
WebM もいずれプラグインで...
Firefox の <video> サポートは他と比べても積極的に行われています
...
<Video>
autobuffer 属性は preload 属性に変更されたので注意
<!-- 互換性を考慮したマークアップ -->
<video controls>
<source src="video.webm" type="video/...
<Video> のバッファ対応
http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/
<video id="longvideo...
H.264 がフリーになった?
Codec ソフト側の話などは別
無料動画配信限定の話
W3C 的にも OSS 的にも問題外
MPEG-LA 側が譲らない限り
Web 標準になる事はあり得ない
http://shaver.off.net/dia...
Audio Data API
Video は Canvas に取得可能
Audio も取得や生成可能に
W3C にて標準化予定
試験実装 API について:
https://wiki.mozilla.org/
Audio_Data_API
ht...
Audio Data の読み取り
http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/
<audio id="input" s...
Audio Data API の用途
Fourier 変換して周波数分解
フィルタ、ミキサ、イコライザ
そして勿論 DSP や音声合成...
http://twitter.com/cherenkov/status/21614170698
WebGL
<Canvas> の 3D コンテキスト
OpenGL ES2.0 相当の API
携帯用 GPU が広くサポート
http://www.khronos.org/webgl/
WebGL
http://webos-goodies.jp/archives/getting_started_with_webgl.html
<canvas id="glcanvas" width="640" height="480"/>
<s...
WebGL - note
The Khronos Group で API 仕様を策定
Apple, Google, Mozilla, Opera が参加
実質的には Mozilla の Vlad がリード
OpenGL ES 2.0 ベースの ...
Application Platform
JS APIs for Web Apps...
HTML5 History
ページ遷移せずに履歴制御
History オブジェクトを導入
go(delta), back(), forward()
pushState(), replaceState()
popstate イベントで状態復元
HTML5 History
http://d.hatena.ne.jp/javascripter/20100404/
// popstate イベントで適切な状態に初期化する
window.addEventListener("popstate"...
HTML5 History
pushState/replaceState
path, query, fragment 変更
http://host/path?query#fragment
WebSockets
サーバとの双方向通信
ブラウザ間の P2P 機能はない
リアルタイム Web などに
通信オーバーヘッドが少ない
大半の用途は他の技術でも...
SSE, multipart Ajax...
WebSockets のサポート
API 仕様は比較的安定
プロトコル仕様はまだ不安定
rev76 を各ブラウザがサポート
今後の更新時期など不透明
プロキシなどにも依存...
WebSockets API
https://dev.mozilla.jp/hacksmozillaorg/websockets-in-firefox/
// WebSocket の接続を開始
var socket = new WebSocket...
HTTP Strict Transport Security
以後 HTTPS での接続を要求
認証ページなどで使う
簡単なのですぐにでも採用を
非対応ブラウザへの副作用なし
Chrome でもサポート
古い Firefox は拡張機能で......
Multi-touch
Windows 7 のタッチ API
MozTouchDown,
MozTouchUp,
MozTouchMove, イベント
CSS セレクタも定義
:-moz-system-metric(touch-
enabled)
Multi-touch Events
http://hacks.mozilla.org/2009/10/multi-touch/
<canvas id="canvas" width="1200" height="800"/>
<script t...
今日の話の多くは...
Mozilla Hacks Blog を参照
他にももっと色々書いてます
日本語訳は modest にて
http://r.dynamis.jp/mozhacks
翻訳協力者も募集中
Any Question ?
Any Question ?
end.
Video Codec 問題は?
Google の Gears は?
Google の O3D は?
Google の Wave は?
SQL Database は?
One Point Q&A
Video Codec 問題?
Open Video
HTML5 では Codec 指定なし
WebM (Web Media) が有力
VP8+Vorbis@Matroska
特許問題完全解決かは不明
H264 は特許問題で採用不可
MPEG-LA 側の問題です
Theora...
On2 Tech.
VP3
Xiph.Org Google
Ogg
VP4Theora
VP5
VP6
VP7
VP8
Container
Vorbis
Matroska
Vorbis
VP8
Audio
Video
WebM
ロイヤリティフリ...
Gears は?
Gears は終了しました
2010/02/19 開発停止
Safari はサポートも停止
Web 標準技術の採用へ
O3D は?
O3D は終了しました
2010/05/07 開発停止
WebGL サポートに一本化
WebGL に変換するライブラリ
Wave は?
Wave は終了しました
使い物にならなかったしね
8/21 に追悼会したらしいよ
Wave 追悼会: http://atnd.org/events/6995
Wave は終了しました
使い物にならなかったしね
8/21 に追悼会したらしいよ
Wave 追悼会: http://atnd.org/events/6995
SQL Database?
SQL DB の標準化は頓挫
SQLite 実装依存では仕様には...
そもそも Web に SQL が最良?
シンプルな IndexedDB に移行
IndexedDB 上に SQL 構築も
References
for more information...
references
Mozilla Hacks Blog - Mozilla と Web の最新技術紹介
http://hacks.mozilla.org/
https://dev.mozilla.jp/hacksmozillaorg/
Fi...
ref. - slides
HTML5 の基本は矢倉さんのスライドがオススメ!
http://www.slideshare.net/myakura/presentations
MicroData についても矢倉さんのスライドオススメ!
http...
ref. - status
HTML5 の対応状況は仕様書に書かれている
各項目のタイトル左側にポップアップ表示
http://www.whatwg.org/html5
caniuse.com のまとめがオススメ
http://caniuse....
ref. - demo & samples
Mozilla Hacks Blog - 開発者向け最新情報とデモ
http://hacks.mozilla.org/
HTML5ROCKS - チュートリアル(やや古い)など
http://html...
ref. - sites
HTML5 導入済みサイトのギャラリー
http://html5gallery.com/
ドキュメント共有サイト Scribd
http://www.scribd.com/doc/30964170/Scribd-in-...
ref. - game
Mozilla Labs Gaming
https://gaming.mozillalabs.com/
canvasdemos - 比較的シンプルなデモ集
http://www.canvasdemos.com/type/...
ref. - tools
Open Web ツール検索
http://tools.mozilla.com/
Processing.js - Canvas 上で Processing を使う
http://processingjs.org/
Co...
ref. - tools
IE でも Canvas を描画可能にする uupaa.js
http://d.hatena.ne.jp/uupaa/searchdiary?word=*[uupaa.js]
JavaScript から簡単に SVG ...
ref. - web fonts
CSS Fonts Module Level 3
http://www.w3.org/TR/css3-fonts/
Google の Web Font サービス
http://code.google.com/w...
ref. - webgl
The Khronos Group - WebGL
http://www.khronos.org/webgl/
http://www.khronos.org/webgl/wiki/Demo_Repository
Web...
ref. - other spec.
File API
http://www.w3.org/TR/FileAPI/
http://www.w3.org/TR/file-writer-api/
Geolocation API
http://www....
ref. - other spec.
CSS Current Work
http://www.w3.org/Style/CSS/current-work
WebGL Spec.
https://cvs.khronos.org/svn/repos...
HTML5 in Firefox4
Upcoming SlideShare
Loading in...5
×

HTML5 in Firefox4

16,071

Published on

HTML5などなど次世代Web勉強会 in 福井での講演スライド
http://kokucheese.com/event/index/5492/
# 公開用に多少編集したものです

Published in: Technology, Design
1 Comment
7 Likes
Statistics
Notes
  • Did not explain so useless
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
16,071
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
34
Comments
1
Likes
7
Embeds 0
No embeds

No notes for slide

HTML5 in Firefox4

  1. 1. "HTML5" in Firefox4 Slides @ HTML5 NadoNado in Fukui by Tomoya ASAI (aka. dynamis) Fractal Firefox Background Image: http://r.dynamis.jp/fractalfx
  2. 2. about:me dynamis (でゅなみす) 浅井 智也 (あさいともや) Mozilla Tech Evangelist http://r.dynamis.jp/presen dynamis mozilla-japan.org twitter: @dynamitter @ ギリシャ語由来なので「だいなみす」と英語読みはしないでね
  3. 3. Firefox 4 で見る HTML5 時代の Web 技術 HTML5 だけじゃないのがポイント...
  4. 4. 比較的見て分かり易い 技術を中心に紹介します 時間の都合で個々の技術解説あまり詳しくできないけどご容赦を...
  5. 5. HTML5 とは? HTML5 時代の Web 技術 for Web Design for Native Multimedia for Application Platform Agenda
  6. 6. まずはやはり...
  7. 7. 資料だけ見てる方はゴメンナサイ...
  8. 8. demo... 資料だけ見てる方はゴメンナサイ...
  9. 9. 今のは実は...
  10. 10. HTML5 ではありません
  11. 11. HTML5 ではありません Flash でもありません AIR でもありません Silverlight でもありません
  12. 12. それでは。(・・).
  13. 13. HTML5 って何?
  14. 14. 仕様書に書いてあります
  15. 15. This specification evolves HTML and its related APIs to ease the authoring of Web-based applications. http://whatwg.org/html5 - Abstract より
  16. 16. http://whatwg.org/html5 - Abstract より この仕様では Web アプリケー ションを記述しやすくするため HTML と関連 API を発展させる
  17. 17. http://whatwg.org/html5 - Abstract より この仕様では Web アプリケー ションを記述しやすくするため HTML と関連 API を発展させる
  18. 18. Web アプリケーション... 文書を共有するだけでなく... メールや地図を見るのも... テレビやゲームも... 仕事や授業も...
  19. 19. これまでの問題は... ブラウザの独自実装 実装まかせの曖昧な仕様 不安定、低機能、低速
  20. 20. HTML5 の目的は... 既存の独自実装を標準化 これから必要な機能は追加 本格的なアプリ実行環境に
  21. 21. http://whatwg.org/html5 - Abstract より この仕様では Web アプリケー ションを記述しやすくするため HTML と関連 API を発展させる
  22. 22. HTML と関連 API?
  23. 23. HTML の基本はタグ... マークアップ (タグと意味) (X)HTML 構文とパーサ MicroData (セマンティクス) SVG や MathML との連携
  24. 24. マルチメディアサポート... Audio/Video タグのサポート 自由に描画する領域 Canvas Canvas への二次元描画 API
  25. 25. 関連 API って何? イベントやインターフェイス Drag & Drop や Undo/Redo オフラインイベント 履歴とナビゲーション ドキュメント間通信
  26. 26. http://whatwg.org/html5 - Abstract より この仕様では Web アプリケー ションを記述しやすくするため HTML と関連 API を発展させる
  27. 27. 再出発ではなく段階的発展 互換性を維持した発展 HTML4 の発展だから HTML5 理想的転換ではなく現実的発展
  28. 28. It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML, ... all at once didn't work. Tim Berners-Lee の言葉: http://dig.csail.mit.edu/breadcrumbs/node/166
  29. 29. HTML は段階的に発展さ せる必要がある。... すべて を一度に切り替えようとい う試みは成功しなかった。 Tim Berners-Lee の言葉: http://dig.csail.mit.edu/breadcrumbs/node/166
  30. 30. 互換性を尊重 既存実装を考慮した仕様策定 構文エラー処理など詳細に定義 非互換の原因を最小限に
  31. 31. 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
  32. 32. Drag & Drop API は酷いけど、採用する理由 がひとつある。つまり、IE6 だけでなく Safari や Firefox でも実装されているということだ。 Ian Hickson の言葉 http://twitter.com/Hixie/status/4075253361
  33. 33. HTML5 は次世代への第一歩 技術的には小さな一歩 既存技術の整理が主 協力関係は大きな変化 業界全体が標準を推進
  34. 34. HTML5 & "HTML5"
  35. 35. HTML5 の範囲は...
  36. 36. 仕様書に書いてあります WAHTWG の HTML5 仕様書 分割して W3C でも標準化 W3C 仕様名に "HTML" を含む WHATWG は整合性重視 W3C はモジュール指向 ref. http://whatwg.org/html5 - 1.1 Is this HTML5?
  37. 37. どこまで HTML5? Web Workers Web Storage The WebSockets API Server-Sent Events Geolocation API XMLHttpRequest Level 2 Canvas 2D Forms File API SVG Drag & Drop API Indexed Database API Microdata Cross-document Messaging WebGL WebFonts Event Listener Microformats CSS3 Transitions ECMAScript 5th Offline Events HTML5 Markup WebM (VP8) Codec XPath
  38. 38. どこまで HTML5? Web Workers Web Storage The WebSockets API Server-Sent Events Geolocation API XMLHttpRequest Level 2 Canvas 2D Forms File API SVG Drag & Drop API Indexed Database API Microdata Cross-document Messaging WebGL WebFonts Event Listener Microformats CSS3 Transitions ECMAScript 5th Offline Events HTML5 Markup WebM (VP8) Codec XPath WHATWG 仕様書の定義による Canvas はタグの定義だけが HTML5
  39. 39. 次世代 Web 標準技術 (バズワードとしての "HTML5") Web Applications 1.0 Next Generation of HTML WHATWG - HTML5 要素とタグの定義 デザイン機能 (CSS) Microdata (メタデータ) Events & Messaging (通信) Web ブラウザ向け機能 ... device 要素, ping 属性 ... 高度なアプリケーション機能Web Workers Web Sockets Indexed Database API レイアウトと装飾 Web Fonts CSS Images (Gradients ...) CSS 2D Transforms CSS Media Queries Web Storage Audio Data API SVG SMIL MathML WebGL
  40. 40. Web Workers The WebSocket protocol Web Storage The WebSockets API Server-Sent Events 注目されている関連仕様の一部を標準化団体別に色分け Geolocation API XMLHttpRequest Level 2 Next Generation of HTML WHATWG - HTML5 Canvas 2D Graphics Context Microdata Microdata vocabularies Cross-document messaging Channel messaging Forms <device> SVG MathML Indexed Database API ping="" timed track HTML→Atom Audio Data API Touch Events WHATWG Spec W3C Spec Non Standard凡例: CSS3 XPath Device Orientation Event
  41. 41. 仕様書で HTML5 として定義されている範囲のはこれだけ WHATWG - HTML5 Canvas 2D Graphics Context Microdata Microdata vocabularies Cross-document messaging Channel messaging HTML5 Parser W3C - HTML5 HTML5 Parser HTML5 Web Messaging HTML5 Microdata HTML Canvas 2D Context Drag & Drop API Offline Events Event model & APIs HTML5 Forms Multimedia Elements Drag & Drop API Offline Events Event model & APIs HTML5 Forms Multimedia Elements Semantic Elements Semantic Elements
  42. 42. HTML & "HTML5" HTML5 は仕様書の定義 "HTML5" は次世代技術の総称 "HTML5" = HTML5 & ALL バズワードのご利用は程々に...
  43. 43. HTML5 時代の Web 技術 HTML5 が使える時代 HTML5 が注目される時代 誤りではないぼかした表現
  44. 44. Web Design CSS, Image, Fonts...
  45. 45. Web Fonts ダウンロードフォント Firefox 3.6 からは WOFF も IE9 なども WOFF サポート WOFF = Web用圧縮フォント Firefox3.5~ https://developer.mozilla.org/ja/CSS/@font-face
  46. 46. 日本語 Web Fonts http://decomoji.jp/ 商用サービス「デコもじ」 http://decomoji.jp/ サブセットフォントを使う 必要文字だけ切り出して小さく Font Squirrel などで可能: http://fontsquirrel.com/ fontface/generator
  47. 47. Web Fonts @font-face { /* IE8 以前用 EOT フォント設定 (最初に) */ font-family: Sawarabi; src: url(Sawarabi.eot) /* IE8 以前は format() 非サポート */; } @font-face { /* WOFF 非対応ブラウザ向けフォント設定 */ font-family: Sawarabi; src: url(Sawarabi.otf) format("opentype"); } @font-face { /* WOFF 対応ブラウザには WOFF を */ 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/
  48. 48. Font Control Features CSS3 font-variant フォントの詳細な機能を制御 分数、桁揃え、合字、旧字体... 仕様のエディタ自身による実装 実装者本人の解説: http://people.mozilla.org/~jdaggett/webfontsfuture.pdf
  49. 49. http://hacks.mozilla.org/2009/10/font-control-for-designers/
  50. 50. CSS Transitions スタイル遷移をなめらかに 簡単なアニメーションにも ベンダー接頭辞に注意 Firefox 4~ http://24ways.org/2009/going-nuts-with-css-transitions
  51. 51. CSS Transitions #somebox { color: black; background-color: yellow; -moz-transition: all 2s ease-in; -webkit-transition: all 2s ease-in; -o-transition: all 2s ease-in; transition: all 2s ease-in; /* すべてのスタイル変化はを2秒かけて開始をなめらかに */ } #somebox:hover { /* マウスオーバーで配色、サイズ、角度を変化 */ color: white; background-color: red; -moz-transform: rotate(-60deg) scale(1.5); -webkit-transform: rotate(-60deg) scale(1.5); -o-transform: rotate(-60deg) scale(1.5); transform: rotate(-60deg) scale(1.5); } http://hacks.mozilla.org/2010/07/firefox4-beta2/
  52. 52. CSS3 calc() サイズを計算式で指定可能 width: -moz-calc(20% - 1rem) -moz- prefix に注意
  53. 53. CSS3 calc() /* margin 分を考慮した左右の分割を行う例 */ #main { width: 75%; margin-right: 1rem; } #side { width: -moz-calc(25% - 1rem); width: calc(25% - 1rem); /* prefix なし忘れずに */ } /* rem はルート要素の font-size (Firefox 3.6~) */ http://hacks.mozilla.org/2010/06/css3-calc/
  54. 54. -moz-any() selector CSS セレクタを書きやすく 階層構造などで特に便利 -moz- prefix に注意
  55. 55. -moz-any() がないとき(><) h1 { font-size: 30px; } section h1, article h1, aside h1, nav h1 { font-size: 25px; } section section h1, section article h1, section aside h1, section nav h1, article section h1, article article h1, article aside h1, article nav h1, aside section h1, aside article h1, aside aside h1, aside nav h1, nav section h1, nav article h1, nav aside h1, nav nav h1, { font-size: 20px; } /* ... これ以上は書く気も読む気もしない */ http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
  56. 56. -moz-any() があるとき(・・). h1 { font-size: 30px; } -moz-any(section, article, aside, nav) h1 { font-size: 25px; } -moz-any(section, article, aside, nav) -moz-any(section, article, aside, nav) h1 { font-size: 20px; } /* まだまだ書ける */ http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
  57. 57. -moz-any() があるとき(・・). -moz-any(section, article, aside, nav) -moz-any(section, article, aside, nav) -moz-any(section, article, aside, nav) h1 { font-size: 15px; } -moz-any(section, article, aside, nav) -moz-any(section, article, aside, nav) -moz-any(section, article, aside, nav) -moz-any(section, article, aside, nav) h1 { font-size: 10px; } /* 何層目でもシンプルですね */ http://hacks.mozilla.org/2010/05/moz-any-selector-grouping/
  58. 58. background: -moz-element() 他の要素を参照して背景に指定 既存要素との比較変換など便利 Canvas は toDataURL() 不要 反射やサムネイルなどにも便利
  59. 59. http://hacks.mozilla.org/2010/08/mozelement/
  60. 60. background: -webkit-canvas() Canvas 参照だけ WebKit も -webkit-canvas(canid) canid は JS でコンテキスト取 得時に getCSSCanvasContext(,canid, ,) メソッドで指定する JS 併用必須って仕様として変... http://webkit.org/blog/176/css-canvas-drawing/
  61. 61. background: -webkit-canvas() http://webkit.org/blog/176/css-canvas-drawing/ <div id="divid">Lorem ipsum dolor sit amet, ... </div> <style> #divid { background: -webkit-canvas(canvasid); width:600px; height:600px; } </style> <script type="application/x-javascript"> var ctx = document.getCSSCanvasContext("2d", "canvasid", 300, 300); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); </script>
  62. 62. background: -moz-element() moz-element() では任意要素 JS との組み合わせ不要 説明割愛しますが JS から操作する mozSetImageElement() もあり
  63. 63. background: -moz-element() http://hacks.mozilla.org/2010/08/mozelement/ <canvas id="canvasid" width="300" height="300"/> <div id="divid">Lorem ipsum dolor sit amet, ... </div> <style> #divid { background: -moz-element(#canvasid); width:600px; height:600px; } </style> <script type="application/x-javascript"> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // 標準通り // ... 以下略 ... </script>
  64. 64. background: -moz-element() 参照元を見せない場合の注意 内部的には描画させる必要あり display: none; などとしない hight:0; overflow: hidden; などの div で囲んで隠す img, canvas, video は例外 DOM ツリーになくても良い これは内部実装や効率などの問題から来る現時点の制約
  65. 65. background: -moz-element() http://hacks.mozilla.org/2010/08/mozelement/ <div style="height: 0; overflow: hidden;"><!-- 隠す --> <iframe id="iframeid" src="http://google.com/search?q=%22-moz-element%22" style="width:800px; height:600px;"></iframe> </div> <div id="divid">Lorem ipsum dolor sit amet, ... </div> <style> #divid { background:-moz-element(#iframeid) no-repeat; height:600px; width:800px; border:2px solid black; } </style>
  66. 66. Native Multimedia Video, Audio, 3D ...
  67. 67. <Video> 自動バッファ、キャッシュなど 実用に向けてどんどん強化中 Safari も Plugin で Ogg 再生 WebM もいずれプラグインで... Firefox の <video> サポートは他と比べても積極的に行われています VLC Web Browser Plugin: http://www.videolan.org/vlc/download-macosx.html
  68. 68. <Video> autobuffer 属性は preload 属性に変更されたので注意 <!-- 互換性を考慮したマークアップ --> <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" type="application/x- shockwave-flash"/><!-- 最悪 Flash でも --> </video> <!-- ポスターフレームの指定 --> <video controls poster="posterframe.jpg"> ... </video> <!-- 先読みの制御 preload=none/metadata/auto --> <video controls preload="auto"> ... </video>
  69. 69. <Video> のバッファ対応 http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/ <video id="longvideo" src="video.ogv" preload="auto" ... > <script type="text/javascript"> var video = document.getElementById("longvideo"); var ranges = video.buffered; // バッファ済み TimeRanges for (var i=0; i<ranges.length; i++) { var s = ranges.start(i); var e = ranges.end(i); // WebKit ではシークすると end(0)=全体の長さ(バグ) alert(s+"秒から"+e+"秒まで読み込み済み"); } </script>
  70. 70. H.264 がフリーになった? Codec ソフト側の話などは別 無料動画配信限定の話 W3C 的にも OSS 的にも問題外 MPEG-LA 側が譲らない限り Web 標準になる事はあり得ない http://shaver.off.net/diary/2010/08/27/free-as-in-smokescreen/ 自社だけライセンス料払って OSS コミュニティ無視とかあり得ない
  71. 71. Audio Data API Video は Canvas に取得可能 Audio も取得や生成可能に W3C にて標準化予定 試験実装 API について: https://wiki.mozilla.org/ Audio_Data_API http://www.w3.org/2005/Incubator/audio/
  72. 72. Audio Data の読み取り http://hacks.mozilla.org/2010/08/html5-video-buffered-property-available-in-firefox-4/ <audio id="input" src="test-tone.ogg" controls></audio> <div id="display"></div> <script type="text/javascript"> var $ = function($) { return document.getElementById($); } var input = $('input'); var display = $('display'); // Add an event listener to the audio input object input.addEventListener('MozAudioAvailable', function(e){ // フレームバッファの最初のサンプリングをしてみる display.innerHTML += e.frameBuffer[0] + ', '; }, false ); </script>
  73. 73. Audio Data API の用途 Fourier 変換して周波数分解 フィルタ、ミキサ、イコライザ そして勿論 DSP や音声合成... http://twitter.com/cherenkov/status/21614170698
  74. 74. WebGL <Canvas> の 3D コンテキスト OpenGL ES2.0 相当の API 携帯用 GPU が広くサポート http://www.khronos.org/webgl/
  75. 75. WebGL http://webos-goodies.jp/archives/getting_started_with_webgl.html <canvas id="glcanvas" width="640" height="480"/> <script type="text/javascript"> var canvas = document.getElementById("glcanvas"); // WebGL コンテキストを取得 // コンテキスト名は仕様確定まで "experimental-webgl" var gl = canvas.getContext("webgl") || canvas.getContext("experimantal-webgl"); if (gl) { // ... OpenGL 同様にいろいろ描画処理 ... // Int32Array など固定型配列も使って高速演算可能 } </script>
  76. 76. WebGL - note The Khronos Group で API 仕様を策定 Apple, Google, Mozilla, Opera が参加 実質的には Mozilla の Vlad がリード OpenGL ES 2.0 ベースの API を JS から使う シェーダーやテクスチャなども当然利用可能 <canvas> の 3D コンテキストとして定義 Firefox 4 や WebKit Nightly でサポート Firefox ではデフォルトで有効 WebKit は --enable-glsl-translator で起動 Firefox 4~ https://developer.mozilla.org/en/WebGL
  77. 77. Application Platform JS APIs for Web Apps...
  78. 78. HTML5 History ページ遷移せずに履歴制御 History オブジェクトを導入 go(delta), back(), forward() pushState(), replaceState() popstate イベントで状態復元
  79. 79. HTML5 History http://d.hatena.ne.jp/javascripter/20100404/ // popstate イベントで適切な状態に初期化する window.addEventListener("popstate", function (event) { // pushState の第一引数(のClone)を event.state で取得 var state = JSON.parse(event.state); // 履歴遷移時に行いたい処理を適当に }, false); // pushState(data, title, url) で履歴を追加する // 仕様上 data は任意オブジェクトだが現実装は文字列だけ? var state = { ... } // 履歴制御時に記録したいオブジェクト var serializedState = JSON.stringify(stateobj); var url = "http://dev.mozilla.jp/#history"; history.pushState(serializedState, "", url); // 履歴を追加ではなく置き換える場合 history.replaceState(serializedState, "", url);
  80. 80. HTML5 History pushState/replaceState path, query, fragment 変更 http://host/path?query#fragment
  81. 81. WebSockets サーバとの双方向通信 ブラウザ間の P2P 機能はない リアルタイム Web などに 通信オーバーヘッドが少ない 大半の用途は他の技術でも... SSE, multipart Ajax...
  82. 82. WebSockets のサポート API 仕様は比較的安定 プロトコル仕様はまだ不安定 rev76 を各ブラウザがサポート 今後の更新時期など不透明 プロキシなどにも依存...
  83. 83. WebSockets API https://dev.mozilla.jp/hacksmozillaorg/websockets-in-firefox/ // 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."); }
  84. 84. HTTP Strict Transport Security 以後 HTTPS での接続を要求 認証ページなどで使う 簡単なのですぐにでも採用を 非対応ブラウザへの副作用なし Chrome でもサポート 古い Firefox は拡張機能で... http://hacks.mozilla.org/2010/08/firefox-4-http-strict-transport-security-force-https/
  85. 85. Multi-touch Windows 7 のタッチ API MozTouchDown, MozTouchUp, MozTouchMove, イベント CSS セレクタも定義 :-moz-system-metric(touch- enabled)
  86. 86. Multi-touch Events http://hacks.mozilla.org/2009/10/multi-touch/ <canvas id="canvas" width="1200" height="800"/> <script type="text/javascript"> var ctx = document.getElementById("canvas").getContext('2d'); document.addEventListener("MozTouchMove", function(e) { // タッチイベントのイベントリスナ ctx.fillStyle='rgba(0,0,0,1)'; ctx.beginPath(); // タッチした位置 (clientX, clientY) を中心に円を描画 ctx.arc(e.clientX, e.clientY, 20, 0, Math.PI*2, 1); ctx.fill(); ctx.closePath(); }, false); </script>
  87. 87. 今日の話の多くは... Mozilla Hacks Blog を参照 他にももっと色々書いてます 日本語訳は modest にて http://r.dynamis.jp/mozhacks 翻訳協力者も募集中
  88. 88. Any Question ?
  89. 89. Any Question ? end.
  90. 90. Video Codec 問題は? Google の Gears は? Google の O3D は? Google の Wave は? SQL Database は? One Point Q&A
  91. 91. Video Codec 問題?
  92. 92. Open Video HTML5 では Codec 指定なし WebM (Web Media) が有力 VP8+Vorbis@Matroska 特許問題完全解決かは不明 H264 は特許問題で採用不可 MPEG-LA 側の問題です Theora は Firefox 3.5~, WebM は Firefox4~
  93. 93. On2 Tech. VP3 Xiph.Org Google Ogg VP4Theora VP5 VP6 VP7 VP8 Container Vorbis Matroska Vorbis VP8 Audio Video WebM ロイヤリティフリー WebM プロジェクト FAQ: http://www.webmproject.org/about/faq/
  94. 94. Gears は?
  95. 95. Gears は終了しました 2010/02/19 開発停止 Safari はサポートも停止 Web 標準技術の採用へ
  96. 96. O3D は?
  97. 97. O3D は終了しました 2010/05/07 開発停止 WebGL サポートに一本化 WebGL に変換するライブラリ
  98. 98. Wave は?
  99. 99. Wave は終了しました 使い物にならなかったしね 8/21 に追悼会したらしいよ Wave 追悼会: http://atnd.org/events/6995
  100. 100. Wave は終了しました 使い物にならなかったしね 8/21 に追悼会したらしいよ Wave 追悼会: http://atnd.org/events/6995
  101. 101. SQL Database?
  102. 102. SQL DB の標準化は頓挫 SQLite 実装依存では仕様には... そもそも Web に SQL が最良? シンプルな IndexedDB に移行 IndexedDB 上に SQL 構築も
  103. 103. References for more information...
  104. 104. references Mozilla Hacks Blog - Mozilla と Web の最新技術紹介 http://hacks.mozilla.org/ https://dev.mozilla.jp/hacksmozillaorg/ Firefox の最新機能紹介ページ https://developer.mozilla.org/en/ Upcoming_Firefox_features_for_developers https://developer.mozilla.org/ja/Firefox_3.6_for_developers WHATWG HTML5 (各機能のブラウザ実装状況含む) http://www.whatwg.org/html5 HTML5 についてのおさらい http://w3g.jp/blog/studies/html5report
  105. 105. ref. - slides HTML5 の基本は矢倉さんのスライドがオススメ! http://www.slideshare.net/myakura/presentations MicroData についても矢倉さんのスライドオススメ! http://www.slideshare.net/myakura/microdata-a-primer WebFonts は仕様執筆者のプレゼンが必見! http://people.mozilla.org/~jdaggett/webfontsfuture.pdf Firefox 4: fast, powerful and empowering (英語) http://www.slideshare.net/beltzner/firefox- roadmap-2010-0510 必見スライドだけ紹介してみます
  106. 106. ref. - status HTML5 の対応状況は仕様書に書かれている 各項目のタイトル左側にポップアップ表示 http://www.whatwg.org/html5 caniuse.com のまとめがオススメ http://caniuse.com/ http://caniuse.com/#cats=HTML5&statuses=rec,pr,cr,wd,ietf WHATWG の Wiki http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers SVG Test Suite の結果表 http://www.codedread.com/svg-support.php ブラウザの仕様サポート状況を比較や確認したいときにどうぞ
  107. 107. ref. - demo & samples Mozilla 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/ 各ベンダーの用意する Web 技術紹介サイト
  108. 108. ref. - sites HTML5 導入済みサイトのギャラリー http://html5gallery.com/ ドキュメント共有サイト Scribd http://www.scribd.com/doc/30964170/Scribd-in-HTML5 プレゼン作成サイト 280slides http://280slides.com/ YouTube HTML5 動画プレイヤー http://www.youtube.com/html5
  109. 109. ref. - game Mozilla Labs Gaming https://gaming.mozillalabs.com/ canvasdemos - 比較的シンプルなデモ集 http://www.canvasdemos.com/type/games/ HTML5 でゲーム - ノーコメント http://benfirshman.com/projects/jsnes/ Aves Game Engine - 本格的 Social ゲームエンジン http://www.dextrose.com/en/projects/aves-engine Akihabara - シンプルなゲーム用ライブラリ http://www.kesiev.com/akihabara/ ゲームプラットフォームとしての Web について
  110. 110. ref. - tools Open 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.js Canvas でのアニメーションライブラリ http://code.google.com/p/cakejs/
  111. 111. ref. - tools IE でも Canvas を描画可能にする uupaa.js http://d.hatena.ne.jp/uupaa/searchdiary?word=*[uupaa.js] JavaScript から簡単に SVG を生成 http://raphaeljs.com/ http://g.raphaeljs.com/ Web アプリケーション用のフレームワーク Cappuccino: http://objective-j.org/ Sproutcore: http://www.sproutcore.com/ JavaScriptMVC: http://javascriptmvc.com/ Ample SDK: http://www.amplesdk.com/ 一時 Gianduia も話題でしたが外部向けに公開されてないので現状論外
  112. 112. ref. - web fonts CSS Fonts Module Level 3 http://www.w3.org/TR/css3-fonts/ Google の Web Font サービス http://code.google.com/webfonts Web Fonts のライセンス販売 (無償フォント含む) http://typekit.com/ http://decomoji.jp/ Web Fonts Generator - eot や WOFF フォントに変換 http://www.fontsquirrel.com/fontface/generator
  113. 113. ref. - webgl The Khronos Group - WebGL http://www.khronos.org/webgl/ http://www.khronos.org/webgl/wiki/Demo_Repository WebGL セクション@MDC https://developer.mozilla.org/en/WebGL The WebGL の解説 http://www.gatk.net/webgl/ http://webos-goodies.jp/archives/ getting_started_with_webgl.html http://learningwebgl.com/cookbook/
  114. 114. 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_API window.onmozorientation https://developer.mozilla.org/en/DOM/ window.onmozorientation
  115. 115. ref. - other spec. CSS Current Work http://www.w3.org/Style/CSS/current-work WebGL Spec. https://cvs.khronos.org/svn/repos/registry/trunk/public/ webgl/doc/spec/WebGL-spec.html Typed Arrays https://cvs.khronos.org/svn/repos/registry/trunk/public/ webgl/doc/spec/TypedArray-spec.html HTML5 の定義解説から関連仕様へのリンク色々 http://www.whatwg.org/specs/web-apps/current-work/ multipage/introduction.html#is-this-html5?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×