日記 | ヨモツネット

Google が WebFonts をホストする。Google Font API をつかっていれば様々な Web サイトから同一のリソースを参照することになるので閲覧者はローカルのキャッシュを使うことができ、ダウンロードの負荷を軽減することができる…はず。以下のように CSS を読み込めば利用可能。

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
  font-family: 'Tangerine';
}
</style>

Font previewer

コメントはありません

続 Firefox 3.6 の HTML5 パーサーを試してみた text ja 2009-11-18 http://www.yomotsu.net/wp/?p=551 Firefox, HTML 5, SVG

続 Firefox 3.6 の HTML5 パーサーを試してみた

2009年11月18日水曜日

HTML5 における svg 要素についてもう少し試してみました。

CSS を試した

CSS のセレクターに名前空間を明示したときの表示を試してみたところ、表示に反映されました。HTML5 での svg 要素は SVG 名前空間 (http://www.w3.org/2000/svg) の要素ということになっているようなので、HTML 上で名前空間を明示していなくても SVG 名前空間の要素として扱われるようです。

デモ (html5.enable が有効な Firefox 用)

SVG の a 要素を試した

SVG の a 要素を使うときには、合わせて xlink の href 属性を指定するのですが、その時どうなるのか…。例えば次のような HTML の断片で

<body>
<svg>
<a xlink:href="http://google.com">
<circle cx=50 cy=50 r=45 />
<text x=20 y=55>google</text>
</a>
</svg>
</body>

のように、xmlns:xlink="http://www.w3.org/1999/xlink を宣言しなくても、xlink:href とすることで動作しました。(ちなみに、このときの a 要素の有効範囲は circle 要素の円部分のみでその外はクリックしてもなにもおこりません。)

デモ (html5.enable が有効な Firefox 用)

よくわからないけど SVG でできることはそのままできるようです。

コメントはありません

Firefox 3.6 の HTML5 パーサーを試してみた text ja 2009-11-16 http://www.yomotsu.net/wp/?p=550 Firefox, HTML 5, SVG

Firefox 3.6 の HTML5 パーサーを試してみた

2009年11月16日月曜日

以前、Firefox 3.6 で実装が予定されている CSS についての記事を投稿したとき、ブックマークのコメントにて vantguarde さんから

CSSじゃないけれど、html5.enableをtrueにすればtext/htmlでSVGもつかえるよ！

とコメントをいただきました。せっかくコメントをいただいたので、Firefox 3.6 の HTML5 パーサーの動作を試してみました。

HTML5 パーサーは Firefox 3.6 β ではデフォルトで html5.enable が false になっています。これを有効にするにはロケーションバーに about:config を入力して、設定から html5.enable を true に変更します。HTML 5 パーサーを有効にすることで text/html の文書に SVG や MathML を混在させて表示できるようになります。

次のデモ 2つは HTML5 パーサーが有効な状態のときに表示を確認することができます。

HTML5 パーサーを有効にしたときの特徴は…

text/html に SVG や MathML を埋め込むことができる
異なる名前空間の語彙に対する名前空間の宣言がいらない
一部の属性値は引用符で括らなくてもいい
空要素を閉じていなくてもパースエラーにならない (ただし、自身の後続に要素がある場合は閉じておかないとその子要素になってしまう)

といった具合でした。

例えば、HTML の文書に名前空間宣言をせずに SVG を埋め込み、circle 要素を閉じず、またその属性値を引用符で括らないで

<!doctype html>
<html>
<head>
<title>SVG in text/html</title>
</head>
<body>
<svg><circle cx=50 cy=50 r=50 fill=#f00></svg>
</body>
</html>

のように書くことができました。埋め込みだけどなんかエクステンシブルな感じです。

いつの日か <canvas>, <svg>, <math> を使い分けたりする日がくるのかも。

HTML5 の SVG と MathML は 4.8.15 MathML と 4.8.16 SVG にいろいろ書いてあります。

コメントはありません

Firefox Developers Conference 2009 に行ってきました text ja 2009-11-08 http://www.yomotsu.net/wp/?p=548 Firefox, イベント / セミナーレポート

Firefox Developers Conference 2009 に行ってきました

2009年11月8日日曜日

Firefox Developers Conference 2009 に行ってきました。大手町で朝 10時から夜まで 1日かけて行われました。会場では NAVER Japan のかたなどと夜までご一緒させていただきました。

気になったことメモ

2009年 11月 9日で Fx リリースから 5周年
いまはシェア 22% くらい

基調講演 (1) : Aza Raskin(エイザラスキン) 氏

オープンID ユーザ体験的に失敗。URL ではだれかわからない
オープン ID は Web ブラウザが解決するべき
- ユーザーが誰かわからないを解決
- お財布のようなコンセプト
- Web のエージェントとなる
  - 支払い画面などは Web サイトによって違う。これに対し、インターフェイスがわからないを解決。例えばwindow.identitiy.payment() みたいな。
- ブラウザーはサービスになっていく
- HTML5 local strage を持ち始めたことはすばらしい
ブラウザそのものがソーシャルなものになっていく
ブラウザが人と人をつなぐ役割も。例えば window.people.find() とか
ブラウザがあなたが誰かをしっていること
JetPackがアドオンを作る標準の手段になるかも

基調講演 (2) : Chris Blizzard(クリスブリザード) 氏

タイポグラフィの強化
- Fx 3.5 では TTF に注力
- Fx 3.6 では WOFF に。Web 用に圧縮できる
- 例えばインドの制作者が作ったページの文字のレンダリングに
<svg> が従来の HTML のドキュメントでもつかえるように
キャンバスで SVG をレンダリングできる
WebGL による 3D のレンダリング
ドラッグ + ドロップされたファイルのロケーションを取得できる API でデスクトップからドロップしたものの URL を取得。
<canvas> のではフィジクスエンジンにより、物理演算処理も可能に
Google の O3D と WebGL は違うアプローチを。Google も WebGL 作ってるし、標準化と実装に取り組んでいる
- ハイレベル : O3D
- ローレベル : WebGL
iPhone にはの制約の都合で Firefox や Fennec を提供できない。それにもとからいい Web ブラウザーが入っている
アンドロイドなら自由に実装できる。アンドロイドにはかなり可能性があるのでノキアと協力している

午後からは Jettpack を中心とした話題のセッションに参加しました。いままでは機能拡張を作るのに XUL や XBL などの知識が必要でしたが、Jetpack の登場により、JS だけでもかなりのことができるようになりそうです。またトークセッションもとても参考になる内容でした。

エラーコンソールの code の入力欄には Chrome 権限がある
なぜ Jetpack では jQuery をサポートしたのか？ピュアなJSじゃないし。重い。しかし、jQuery　は最大公約数。
今後はその他のライブラリも使えるようになる。URL を指定してでインポートできるようになり、特に mozilla.com 内からのインポートにはセキュリティ保障するよ
Jetpack パックは古いアドオンを駆逐するのが目的ではない

終了後、懇親会も行われました。いつもながら mozilla の懇親会はすごかったです。

コメントはありません

Firefox 3.6 で新たにサポートする CSS の demo text ja 2009-08-28 http://www.yomotsu.net/wp/?p=542 CSS, Firefox, Web

Firefox 3.6 で新たにサポートする CSS の demo

2009年8月28日金曜日

少し前のことですが、Firefox 3.6 のアルファ版が公開されました。Firefox 3.6 で新たにサポートされる機能のうち、CSS については新たに

background-size (-moz-background-size)
CSS Gradients (-moz-linear-gradient, -moz-linear-gradient)
multiple background images
rem (長さの単位)
image-rendering

が実装されるようです。

参考 : Firefox 3.6 Alpha 1 窶錀 web developer changes

background-size

background-size プロパティーは背景画像の大きさを指定することができます。OPERA では 9.5 から、 Safari では 3.0 からサポートしています。

% で背景画像の大きさを指定した場合、要素に対する大きさとなります。px で背景画像の指定した場合はそのまま反映されます。

例えば、要素内いっぱいに背景画像を伸縮させたい場合には

#block2{
-moz-background-size    : 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size      : 100% 100%; /* Opera 9.5 */
-webkit-background-size : 100% 100%; /* Safari 3.0 */
-khtml-background-size  : 100% 100%; /* Konqueror 3.5.4 */
}

を指定します。

demo

CSS Gradients

CSS Gradients は background-image プロパティーに指定できる値で、画像を使用することなく、グラデーションを適用することができます。-moz-linear-gradient で線上のグラデーション、 -moz-radial-gradient で円状のグラデーションを指定できます。

Safari では 4.0 からサポートしていいて、IE でも filter プロパティーで似たようなことができます。

Safari でもほぼ同じ実装されていますが、値の書き方が Firefox 3.6 と微妙に異なります。　Firefox, Safari 両方に対応させるためには同時にそれぞれの指定をしておきます。

e.g.

#block1{
background-image: -moz-linear-gradient(left, right,
                                       from(#ffffff),
                                       color-stop(50%, #0099cc),
                                       to(#006699));

background-image: -webkit-gradient(linear, left top, right top,
                                   color-stop(0,   #ffffff), 
                                   color-stop(50%, #0099cc),
                                   color-stop(100%,#006699));
}

demo

multiple background images

multiple background images は、1つの要素に対して複数の背景画像を重ねて適用できる仕組みです。background-image プロパティーで複数の画像を指定して使います。

e.g.

background-image: url(bg_top.png),  url(bg_bottom.png), url(bg_middle.png);

複数適用した背景画像のそれぞれに repeat, size, position も指定できます。

e.g.

background-image: url(bg_top.png),  url(bg_bottom.png), url(bg_middle.png);
background-repeat: repeat-x;
background-position: 0 0, 0 100%, 0 0;

demo

rem (長さの単位)

Firefox 3.6 からは長さの単位に rem をサポート予定です。HTML, XHTML の場合 1rem は html 要素の文字サイズと同じになります。なので html 要素に文字サイズを指定していない場合は (多くの場合) 16 px 相当になります。html 要素に font-size:12px; を指定している場合には 1rem は 12px として計算されます。

文字サイズに一度 0px を指定してしまうと、その子孫要素では % や em などが使えなくなってしまうのでそういった場合に rem が有効です。

例えば、

html{font-size:12px}
div{font-size:0;}
div p{font-size:1rem;}

としておけば、div 要素内の p 要素は12pxで表示されます。

demo

image-rendering プロパティ

mozilla は画像などを拡大縮小するとき、通常はバイキュービックで処理するため、ドット絵などは奇麗に表示できません。 Fx 3.6 からは拡大縮小時、どう表示するかを CSS で指定することができるようにる予定です。

image-rendering プロパティーは img 要素、video 要素、canvas 要素と、背景画像で有効です。

image-rendering:auto; または image-rendering:optimizeQuality; を指定するとバイキュービックで処理されます。
image-rendering:-moz-crisp-edges; を指定するとニアレストレイバーで処理されます。

CSS や width / height 属性でサイズを変更した場合と、フルページズーム機能でサイズを可変した場合に効果が表れます。

IE 7 では image-rendering プロパティーとほぼ同じ振る舞いをする -ms-interpolation-mode プロパティーが実装されています。

demo

2件のコメントがあります

次のページへ

日記

Google I/O で気になった部分

WebM

Adobe Dreamweaver CS5 HTML5 Pack

Google App Engine for Business

Google Storage for Developers

Google Font API

続 Firefox 3.6 の HTML5 パーサーを試してみた

CSS を試した

SVG の a 要素を試した

Firefox 3.6 の HTML5 パーサーを試してみた

Firefox Developers Conference 2009 に行ってきました

基調講演 (1) : Aza Raskin(エイザラスキン) 氏

基調講演 (2) : Chris Blizzard(クリスブリザード) 氏

Firefox 3.6 で新たにサポートする CSS の demo

background-size

CSS Gradients

multiple background images

rem (長さの単位)

image-rendering プロパティ

Web サイト内検索

カテゴリー一覧

この Weblog の FEED

日記

Google App Engine for Business

CSS を試した

SVG の a 要素を試した

基調講演 (1) : Aza Raskin(エイザ ラスキン) 氏

基調講演 (2) : Chris Blizzard(クリス ブリザード) 氏

background-size

CSS Gradients

multiple background images

rem (長さの単位)

image-rendering プロパティ

Web サイト内検索

カテゴリー一覧

この Weblog の FEED

基調講演 (1) : Aza Raskin(エイザラスキン) 氏

基調講演 (2) : Chris Blizzard(クリスブリザード) 氏