Running Firefoxwith HTML+CSSSlides @ Mozilla & HTML5+α

by Tomoya ASAI (dynamis)

last update on 2011.12.02see also: http://dynamis.jp/r

Firefox 5 以降の主なHTML & CSS 新機能

JavaScript API 系は言及しません。

about:me

http://dynamis.jp/

@dynamitter

facebook.com/ dynamismailto: Tomoya ASAI (dynamis) <dynamis mozilla-japan.org>@

はじめに。

取りあえず業務連絡です

http://firefoxhacks.org/

…ということです。

発行／オライリー・ジャパン　発売／オーム社　定価（本体3,400円＋税） オライリー・ジャパンFirefox Hacks Rebooted

ISBN978-4-87311-497-2

Mozilla Japan

推薦書！

Mozilla Japan代表理事 瀧田佐登子

ウェブを使い倒すテクニック満載！　●新しいユーザーインタフェース　●タブグループ　●アプリタブ●Firefox Syncを使ってブラウザ情報の同期を取ろう　●テキスト領域のリサイズ　●Personasで実現する着せ替えブラウザ　●ユーザープロファイルの基本　●Vimperator　●KeySnail　●VimperatorとKeySnailの設計の違いからくる設計手法　●Firefox Home　●FirefoxとTwitter　●Facebook関連　●Add-on SDKとは何か　●Add-on SDKのセットアップ　●拡張機能の開発（基礎編）　●addon-kitライブラリ●api-utilsライブラリ　●拡張機能の開発（応用編）　●拡張機能のローカライズ　●拡張機能の自動テスト●再起動不要な拡張機能「Bootstrapped Extensions」の作り方　●Bootstrapped Extensionsの制限●

外部スクリプトをBootstrapped Extensionsで読み込む　●FirefoxのUIをBootstrapped Exten-sionsで変更する　●Bootstrapped Extensionsの設定UI　●Bootstrapped ExtensionsでのResource URLの登録　●Bootstrapped Extensionsと非同期な初期化処理や終了処理　●XPCOMコンポーネントをBootstrapped Extensionsに組み込む　●Bootstrapped Extensionsでのchrome.manifestの利用　●Bootstrapped ExtensionsのFirefox 3.6対応　●e10sにおけるプロセス間通信の基本　●メッセージマネージャのAPI詳説　●コンテントスクリプト用のAPI詳説　●Chromeスクリプトからコンテントスクリプトへ同期的にメッセージを送る　●Bootstrapped Extensionsでコンテントスクリプトを使う　●非同期処理のすすめ　●MozStorageの非同期API　●アドオンマネージャの非同期API●ワーカーによるマルチスレッド処理　●JSDeferredで非同期処理をスッキリ書く　●Firefoxの非同期処理をDeferred化する　●HTML5再入門　●ECMAScript5　●ECMAScript for XML　●E4X 応用●CSS3時代のデザイン　●Webフォント徹底活用　●テキスト領域のリサイズ　●Canvas入門　●SVGとSMILによるアニメーション　●新しいアニメーション技術比較　●コンテンツセキュリティポリシー　●イマドキのセキュリティ機能を活用する　●AndroidでもFirefox　●デバイスセンサーを活用する　●プラグインプロセスの分離　●js-ctypesとXPConnectの違いを理解する　●js-ctypesの基本的な使い方　●js-ctypesで自力でメモリを管理する　●Firefox.Future

最新のWeb技術、新世代Add-on SDKはもちろん、FirefoxとWebの未来がこの一冊に集約！日本のMozillaドリームチームが綴ったこの本がバイブルになることは間違いない！次はあなたがHackにチャレンジする番です。

Rapid ReleaseRelease every 6 weeks...

http://mozilla.jp/firefox/preview/faq/

http://mozilla.jp/firefox/preview/faq/

高速リリースプロセス 原則 6 週間毎にリリース

Nightly Aurora Beta Release

Fx 9 08/16 09/27 11/08 12/20Fx10 09/27 11/08 12/20 01/31Fx11 11/08 12/20 01/31 03/13Fx12 12/20 01/31 03/13 04/24Fx13 01/31 03/13 04/24 06/05

http://mozilla.jp/firefox/preview/faq/

◎ 最新機能・技術をすぐ利用可能◎ Web 技術の発達を促進◎ より広く早いフィードバック◎ リリース日が事前に予期可能× バイナリアドオンの互換性× 一部 Web サイトの互換性

高速リリースの利点と欠点

http://mozilla.jp/firefox/preview/faq/

ESR Proposalfor Enterprise Users...

延長サポートリリース (案) セキュリティ・安定性修正のみ サポート期間は 54 週 = 約１年

検証・導入にそれぞれ 12 週間 Firefox 10 = ESR 10

2012/01/31 から開始 Firefox 17 = ESR 17

https://wiki.mozilla.org/Enterprise/Firefox/ExtendedSupport:Proposal

Firefox in 2011Firefox 5, 6, 7, 8, 9

CSS Animations Transitions を連続する機能

Transitions の拡張として定義 キーフレーム毎のスタイルを指定

CSS だけでアニメーション GPU を用いた高速処理

Firefox 5~ https://developer.mozilla.org/en/CSS/CSS_animations

復習: CSS Transitions スタイル遷移をなめらかに 簡単にアニメーションできる GPU を用いた高速処理

Firefox 4~ https://developer.mozilla.org/en/CSS/CSS_transitions

CSS Transitions 使用例

http://hacks.mozilla.org/2010/07/firefox4-beta2/

#somebox { color: black; background-color: yellow; /* すべてのスタイルを2秒かけて変化、開始はなめらかに */ -moz-transition: all 2s ease-in; transition: all 2s ease-in;}#somebox:hover { /* マウスオーバーで配色、サイズ、角度を変化 */ color: white; background-color: red; -moz-transform: rotate(-60deg) scale(1.5); transform: rotate(-60deg) scale(1.5);}

CSS Transitions 発動条件 「スタイルの変更」時に発動

変更前の状態が一度描画されている必要がある

ページロード時に遷移するなら onload 後にスタイル指定が必要

left など一部スタイルは変化前にも left: 0px; などの指定が必要

CSS Animationsに話を戻して...

CSS Animations 使用例<div id="target"></div><style>@-moz-keyframes changecolor { /* アニメーション定義 */ from { } /* 開始する瞬間は既存スタイルのまま */ 50% { background: purple; } /* 半分の時間で紫に */ to { background: orange; } /* 最終的にオレンジに */}#target { background: blue; width: 100px; height: 100px;}#target:hover { -moz-animation: changecolor 4s; /* アニメーション適用 */}</style>

CSS Animations の注意 完了後は元のスタイルに戻る

to スタイルは維持されない 開始前と from, to と完了後のスタイルは一瞬で切り替わる

滑らかに変化して維持するなら: from は既存スタイルと同じに to は完了後スタイルと同じに

滑らかに変化して維持する<div id="target"></div><style>@-moz-keyframes changecolor { from { background: blue; } /* 既存スタイルと同じ */ 50% { background: purple; } to { background: orange; } /* 完了後と同じ */}#target { background: blue; width: 100px; height: 100px;}#target:hover { -moz-animation: changecolor 4s; background: orange; /* to {} と同じ */}</style>

CSS Animations 発動条件 -moz-animation 設定するだけ

onload 前でも問題なし 一定時間後にアニメーションしたい場合は animation-delay を使って遅延時間を指定する

XHR onloadend イベント XHR level2 にて定義 XHR 処理終了時のイベント

onload + onabort + onerror

Firefox 5~ http://www.w3.org/TR/XMLHttpRequest2/

<progress> 要素の UI 進捗状況バー

value を指定しないと進捗不明 縦方向も (斜めは Transform...)

進捗不明な <progress> には:indeterminate 疑似クラス

完了済みバーの部分はprogress::-moz-progress-bar

Firefox 6~ https://developer.mozilla.org/en/HTML/Element/progress

<progress> の基本<progress value="7" max="10">70%</progress><progress max="10">70%</progress><!-- 進捗不明 --><progress value="7" max="10" class="vert">70%</progress><style>.vert { -moz-orient: vertical; /* 縦方向のバーに */}/* 進捗不明 (value がない) 場合の疑似クラス */progress:indeterminate { height: 30px;}</style>

<progress> をカスタマイズ<progress value="3" max="10">70 %</progress><style>/* background or/and border 指定すると非ネイティブ UI */progress { background-color: red; border: 1px solid black;}/* 進捗バーのうち完了している部分 */progress::-moz-progress-bar { background-image: url(progress-background.png);}</style>

カスタムデータ属性 HTML5 data-* 属性サポート

任意要素に付加できる element.dataset でアクセス可能 カスタムメタデータに利用可能

Firefox 6~ https://developer.mozilla.org/en/HTML/Global_attributes#attr-data-*

text-decoration の強化 波線 wavy などもサポート

やっと Web でも波線！

text-decoration を設定すると-moz-text-decoration-* は全てリセットされるので注意

Firefox 6~ https://developer.mozilla.org/en/CSS/text-decoration

.bothline { text-decoration: underline overline; }

.wavy { text-decoration: wavy; }

hyphen プロパティ 英単語の音節で折り返し 折り返し位置の明示指定

U+2010 (HYPHEN) - ハード U+00AD (SHY, &shy;) - ソフト

p.auto { -moz-hyphens: auto;}

Firefox 6~ https://developer.mozilla.org/en/CSS/hyphens

@document regexp() CSS3 Conditional Rules の@document 規則の対応強化

@-moz-document url(http://dynamis.jp/),     url-prefix(http://dynamis.jp/foo/),     domain(dynamis.jp),     regexp("^https:.*"){ /* 指定 URL にマッチしたページ用のルール */ /* regexp() 以外は Firefox 1.5 からサポート */}

Firefox 6~ https://developer.mozilla.org/en/CSS/@-moz-document

text-overflow: ellipsis テキストがボックス要素に収まらない場合の描画処理 clip - バサッと切り取る ellipsis - "..." で終わる

Firefox 7~ https://developer.mozilla.org/en/CSS/text-overflow

more text-overflow Firefox 9 から高度なサポート

Two Value Syntax (左右両端) Custom String (末尾文字指定)

Firefox 9~ https://developer.mozilla.org/en/CSS/text-overflow

https://developer.mozilla.org/en/CSS/text-overflow

<menu> コンテキストメニュー サイト独自のカスタムメニュー

右クリックメニュー上部に追加 既存のメニューをなくさない

英辞郎 on the Web 採用済み 副作用なく使えるので安心 http://mozilla.jp/blog/entry/7448/

Firefox 9~ http://hacks.mozilla.org/2011/11/html5-context-...

<menu> 要素の基本<menu type="context" id="supermenu"> <menuitem label="メニュー１" icon="menu1.png" onclick="..."> <menuitem label="メニュー２" icon="menu2.png" onclick="..."> <menu label="サブメニューあり"> <menuitem label="サブメニュー" onclick="..."> </menu></menu><div contextmenu="supermenu"> <!-- この要素上で右クリックする --></div>

Firefox 9~ http://hacks.mozilla.org/2011/11/html5-context-...

insertAdjacentHTML() 兄弟はそのままで挿入可能に

innerHTML() より高速 既存部分を壊さない

挿入箇所を指定する<!-- beforebegin --><p><!-- afterbegin -->...

...children contents......<!-- beforeend --></p><!-- afterend -->

Firefox 9~ https://developer.mozilla.org/en/DOM/Element.insertAdjacentHTML

font-stretch プロパティ 字間を調整するプロパティ

normal, semi-condensed, condensed,extra-condensed, ultra-condensed,semi-expanded, expanded,extra-expanded, ultra-expanded

Firefox 9~ https://developer.mozilla.org/en/CSS/font-stretch

h1 { font-stretch: extra-expanded }p { font-stretch: condensed }

c.f. PDF.js ネイティブコードなしで PDF を

Web 技術の結晶状態 DTP 品質の描画に向けて...

font-stretch も PDF で必要な機能だったから実装された

Firefox 9~ https://github.com/mozilla/pdf.js

もっと詳しく... Mozilla Hacks Blog を参照 他にももっと色々書いてます 日本語訳は modest にて http://r.dynamis.jp/mozhacks