Taken SPC

SVG のフィルタとアニメーション (と JavaScript) で、波紋っぽい効果を出してみました。クリックした場所から波が伝わるような効果がでます (色々と手抜きですが)。

• SVG で波紋 (フィルタ版)
• SVG で波紋 (グラデーションのみ)

Opera 位でしか動きません (Opera 9.5 で動作確認)。あと、もの凄く重たいので注意。手元では時おり Opera がクラッシュしました。

Firefox 3 から canvas 要素で文字を描けるようになりました。で、その例を色々みてみると、描画内容を初期化するために canvas 要素の width と height プロパティを弄っている例が多いです。しかし ctx.clearRect() で十分です。

ただし ctx.clearRect() は ctx.translate() 等の変形の影響を受けるので、 ctx.save() と ctx.restore() をお忘れなく (あるいは ctx.setTransform(1, 0, 0, 1, 0, 0))。

ということで、higeorange さんの例を勝手に弄ってみます。higeorange さんのコードを以下に示します。

var canvas = $('cnvs');
    canvas.width = 300;
    canvas.height = 100;
var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, 300, 100);
    ctx.translate(10, 50);
    ctx.fillStyle = "Red";
    ctx.mozTextStyle = "30pt sans-serf";
    ctx.mozDrawText(txt);

ctx.clearRect() を使っておられるわけですが、たとえば以下のように書けます。

var canvas = $('cnvs');
var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, 300, 100);
    ctx.save(); // コンテクストの状態を保存
    ctx.translate(10, 50);
    ctx.fillStyle = "Red";
    ctx.mozTextStyle = "30pt sans-serf";
    ctx.mozDrawText(txt);
    ctx.restore(); // コンテクストの状態を save() した時の状態に復帰

あるいは以下のようにも書けます。

var canvas = $('cnvs');
var ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, 300, 100);
    ctx.translate(10, 50);
    ctx.fillStyle = "Red";
    ctx.mozTextStyle = "30pt sans-serf";
    ctx.mozDrawText(txt);
    ctx.setTransform(1, 0, 0, 1, 0, 0); // 変形行列を単位行列に

• Drawing text using a canvas - MDC
• Canvas tutorial:Transformations - MDC

蛇足 1

蛇足 2

未だにテーマの変更が Firefox trunk へチェックインされている今日この頃、皆様はいかがお過ごしでしょうか。Piro さんは 大変な目にあっているようですが。

さてそんな中、Windows のデフォルトテーマ以外ではロケーションバーの左端がカーブせず、真っ直ぐになるよう変更されました (Linux/GTK2 では以前から真っ直ぐ)。

• Bug 428878 - Use a square site button for the windows classic os theme
  • パッチ (差分表示)

CSS でどうやって判断しているのか見たところ、:-moz-system-metric(windows-default-theme) 疑似クラスを使っていました。

• MDC のドキュメント

:-moz-system-metric(windows-default-theme) を使うと、Windows でデフォルトテーマ (Luna, Royale, Zune, Aero) を使っているか否かに基づいてスタイルを制御できます。例えば、Windows のテーマによって文字の色を変更するには以下のように書くことができます。

*:-moz-system-metric(windows-default-theme) {
  /* Windows のデフォルトテーマなら */
  color: red;
}
*:not(:-moz-system-metric(windows-default-theme)) {
  /* Windows のデフォルトテーマ以外、
     あるいは Windows 以外なら */
  color: blue;
}

既に Firefox 3 のテーマ (Windows 版) は Vista 向けとそれ以前向けに別れています。その上にさらにその中で OS のデフォルトテーマ云々というのは やり過ぎじゃないのかな、という気がします。

• ソースコード内の「:-moz-system-metric」検索結果

MoCo の Rob Sayre さんが Acid3 is basically worthless という記事を書いています。Acid3 テスト対応の一連の動きを受けての事だと思いますが、ちょっと穏やかではないですね。Firefox 3 は Acid3 をパスしないという事ですから他所の動きに気を取られ過ぎる事もないのではないかと思うのですが。

一応、以下に訳してみました (かなり意訳していますので悪しからず) 。追記: 原文が追記されていたので、訳文も更新。

Firefox trunk ではヘルプが SUMO (support.mozilla.com) になったとのことなので、さっそく F1 を押してみたら www.mozilla.org/support/ につながってしまい、以下のようなメッセージが。

NOTE: Firefox Support Official Online Documentation and Frequently Asked Questions are currently down, due to server issues. For Firefox Help, try the other support resources linked on this page.

さっそく落ちてしまったようです。Firefox 3 がリリースした後は大丈夫でしょうか。

• SUMO is currently down

Firefox の trunk ではブックマークのバックアップに JSON を使うようになりました。が、バックアップ時に日本語が文字化けしてしまい、そのままリストアすると文字化けしたままリストアされてしまいます。以下に私の対応策を晒してみます。

try {
  aData.title = decodeURIComponent(escape(aData.title));
} catch (ex) {}

aJSNode.title = unescape(encodeURIComponent(aPlacesNode.title));

aJSNode.title = aPlacesNode.title;

Firefox 3 ではロケーションバーの Favicon 部分をクリックするとポップアップが表示されて、サイトの身元や接続の暗号化されているかを確認できます。

ポップアップに表示される警官の名前は Larry というらしいです。

で、このポップアップは背景色は白に決め打ちなんですが、前景色は一部だけ黒に決め打ちになっているため、システムの前景色が白に近いと一部の文字が読みにくくなってしまいます 。以下は Windows のハイコントラスト (黒)　でのスクリーンショットです。

さて、このポップアップは IE7 の「セキュリティ報告」のポップアップを基にしていると思うのですが、こちらは大部分の背景を画像にしていますが、前景色はシステムの前景色を使っています。なのでシステムの前景色が白に近いと、ほとんどの文字が読めなくなってしまいます 。以下は Windows のハイコントラスト (黒)　でのスクリーンショットです。

背景を決め打ちするときは前景色も決め打ちしましょう、という話。

話題になっているらしいので、各レンダリングエンジンの Acid 3 対策用のバグをまとめてみました。

Gecko

WebKit

KHTML

今日 bugzilla.mozilla.org を見たら favicon が変わっていました。

他にもいくつかの *.mozilla.org で favicon が追加されたり、変更されたりしていました。私が気がついたのは以下のサイトです。

• bugzilla.mozilla.org
• mxr.mozilla.org
• tinderbox.mozilla.org

これで、たくさんタブを開いても簡単に区別が付くようになりました 。

W3C Q&A Weblog 経由。XML 生誕 10周年とのこと。

お祝い状も送れるようです。

• W3C のプレスリリース