日記
Designer meets Designers 08 に出演しました
2010年2月8日月曜日
アカデミーヒルズ 49 で行われた Designer meets Designers にて講演を行いました。自分は Session 4 を担当し、 『web ブラウザ戦国時代! イマドキの IE 6 対策法』をお題に IE 6 の過去、現在、未来にフィーチャーしたプレゼンを行いました。
1つのセッションにつき、1時間の持ち時間で進められました。前日に練習した成果もあり、ほぼ持ち時間通りに納めることができました。練習にお付き合いいただいた SINAP 界隈の皆様と、タイムキーパーをしてくださった web creators 編集部の石井さん、プレゼンをお聞きくださった参加者様、ありがとうございました !!
ボリュームの都合でプレゼンに盛り込めなかった内容もあったので、漏れてしまった分は今後この weblog に載せていけたらなと考えています。
今回の経験値と反省点
- Demo や Live を混ぜた方が技術者的な参加者さんの満足度が上がりそう…?
- 1ページ1分弱の計算でスライドを 80ページを用意し練習をしましたが 40分ほどでした。本番は 110ページほど + Demo で 1時間でした。1ページにもうすこし時間をかけて解説できる流れのほうが良かったかもしれないです。
ピクセルグリッドに入社しました
2010年2月1日月曜日
3年ほどお世話になったメタフェイズを退社し、2010年 2月 1日よりピクセルグリッドという会社でお世話になることになりました。原宿にある SINAP さんのおしゃれオフィス内に間借りをしているのでしばらくは原宿で仕事をします。昔も原宿に通っていましたがまた戻ってくるとは…。
会社はかわりましたがやっていることは以前と似たことなので忙しさが一段落したら日々の研究などを weblog に post していこうと思います。
Web Fonts で SVG Fonts を利用する
2009年12月5日土曜日
SVG Fonts は @font-face と font-famiry プロパティーを使い、SVG で定義した図形をグリフとして利用できる SVG の仕組みで、このことは Fonts – SVG 1.1 – 20030114 に書かれていています。最近では @font-face を使えば SVG の中だけではなく、HTML 文書内のテキストにも SVG Fonts を適用できるよになってきました…ので試してみました。
現状では OPERA と Webkit が対応しています。また、Firefox は 3.7 以降で対応するようです。
- demo (現時点では Webkit 系、OPERA のみで動作します)
結果を比較すると次の通り。
| OPERA 10.01 | Safari 4.0.3 | Chrome 3.0.195.33 | |
|---|---|---|---|
| 2文字以上の文字列へのマッピング | × 未対応 | ◯ 対応 | ◯ 対応 |
| 任意の文字の選択 | ◯ 可能 | × 不可能 | × 不可能 |
| 文字列のコピー | ◯ 可能 | ◯ 可能 | ◯ 可能 |
| 行内の横並べ | ◯ 可能 | ◯ 可能 | ◯ 可能 |
| 行内のリンク | ◯ 可能 | ◯ 可能 | ◯ 可能 |
| textarea など入力箇所 | ◯ 可能 | ◯ 可能 | ◯ 可能 |
| CSS の color | ◯ 有効 | ◯ 有効 | ◯ 有効 |
| CSS の font-size | ◯ 有効 | ◯ 有効 | ◯ 有効 |
| CSS の font-weight | × 無効 | × 無効 | × 無効 |
| CSS の letter-spacing | △ 不具合 | × 無効 | × 無効 |
| CSS の text-decoration | ◯ 有効 | ◯ 有効 | ◯ 有効 |
| CSS の text-shadow | × 不具合 | ◯ 有効 | × 無効 |
使い方や作り方など
CSS 側の準備
@font-face {
font-family: MyFont;
src: url(font.svg#myFont) format("svg");
}
p{font-family:MyFont;}
のようにごく普通に WebFonts を適用するためのコードを書くだけです。ただし、このとき、fotmat("svg") を指定しておかないと Opera 10 では表示できませんでした。
SVG 側でのグリフの定義
各グリフはSVG で
<glyph unicode="マッピングする文字" horiz-adv-x="横幅" d="パスデータ" />
のように定義し
<glyph unicode="あ" horiz-adv-x="300" d="M 0,0 L 0,100 L 100,100 L 0,0 z" />
<glyph unicode="い" horiz-adv-x="300" d="M 100,100 L 0,100 L 0,0 L 100,100 z" />
のように書きます。
マッピングする文字は1文字に限らず、複数の文字の連なりにもマッピングをすることができます。 この場合は単純に unicode 属性の値に複数の文字列を指定し、
<glyph unicode="三角形" horiz-adv-x="300" d="M 100,100 L 0,100 L 0,0 L 100,100 z" />
のように書きます。これならロゴなどにも使えそうですね。また、絵文字のようなこともできちゃいます。
ほかにも x height やアセンダーなどの設定も行えます。これならだれでもテキストエディターさえあればグリフをつくれますね !!
自分は Inkscape を使いグリフを作りましたが…。
ちなみにこのネタは 第 11回 Sugamo.css に持ち込むために作ったネタです。まだまだこっそりと続けていますよー。
その他参考リソース
- Opera Presto 2.2 と Opera 10 概観 – Opera Developer Community
- Mozilla SVG Update: SVG Priorities in Firefox 3 : Firefox 3 には実装されていない。3には間に合わなかった機能とされているみたい。
- UNICODE RANGE GENERATOR : Unicode Range を調べるのに便利
HTML5 を使ってみよう ! に参加してきました
2009年12月3日木曜日
Opera software で開催されたイベント、HTML5 を使ってみよう ! に参加をしてきました。Opera のオフィス移転後初めて中にはいりましたが、広くきれいでした !! イベントはオフィス内のリスレッシュスペースで行われました。このスペースだけでもけっこう広かったです。
- HTML5 Japanese Interest Group の紹介
- ライブでウェブページの HTML5 化
- HTML5: The Web platform as an application runtime environment
の 3つのセッションがありました。以下メモ。
ミツエーリンクスの矢倉さんから HTML5 Japanese Interest Group の紹介
- HTML5 Japanese Interest Group がありました。
- 仕様に問題がないか、仕様をどう活用していくかを議論する
- テストケースを用意する
- 幅広いインプットを集められるように誰でも参加できる
- 今後は Japanese Interest Group として何らかのフィードバックを行う予定
- 特に ruby 要素、input mode、Web sockets などを中心に、問題がないか、足りない機能はないかを論議していきたい
自分も参加していますが、メーリングリストに登録し、受信するだけでも勉強になるかと思います。参加してみるといいです。
Opera Software の Daniel Davis さんから ライブでウェブページの HTML5 化
ライブによるマークアップも行われ HTML5 を触っていないような人にも分かりやすそうな内容でした。
- HTML5 には 2つの面がある
- canvas、videoといった機能
- マークアップ
- マークアップはUAが読むもの
- UserAgent はブラウザだけではない
- スクリーンリーダーなども UserAgent
- Bots (クローラー) も UserAgent
- いろんな UserAgent がページにアクセスする
- マークアップは UserAgent のためでもある
- HTML5 の語彙を利用したマークアップはページの表示は変わらないが裏側のデータは変えることができる
- アクセシビリティ向上
<div id="nav">や<div id="navigation">などを<nav>として標準的にしてまとめることも目的
- 検索エンジンが見つけやすい
- どこが重要であるかがわかればそこを抜き出せるかもしれない
- 日付のフォーマットが決まっていればパブリッシュした日などもわかりやすい
- 将来のための対策
- 将来のアプリで使われるかもしれない
- かっこいい
- ギークが反応する
- HTML5 をつかったからといって劇的に表示がよくなるというわけではない。HTML4 とさほどかわらない
- HTML5 は分野が広い マークアップだけではなく、機能的な要素や API もある
- HTML5 は 難しい ドラッグドロップは微妙だよねととかいう話もある。でも難しいとこは使わないでもいい
- 対応されていない
- 発展途中なのでブラウザによって対応度合いに差がある。でも OPERA も含めてベンダーはがんばってる
W3C の Mike Smith さんから HTML5: The Web platform as an application runtime environment
- オブジェクトにブラウザからアクセスできる APIs を提供
- (サーバーサイドではなく) クライアントサイドの API の標準化を行っている
- Open Web Platform はクライアントサイドの技術
- サーバー側はブラックボックス。そこから受け取る情報に注力
- OPEN Web Platform はフォーマット (HTML, CSS, JS) + API
- フォーマットには SVG も。(Webkit も SVG のフィルタを実装し始めている)
- OPEN Web Platform 以外のランタイムは Java や C など
- ゴールはマークアップ + 機能
- Web Sockets API は HTTP ではできなかったサーバーからのリクエストも可能になる
- (とりあえずクライアントからリクエストを送りまくっている) チャットなどの同期はスマートではなかった。Web Sockets によってこれがもっとスマートになる。
- Web Sockets を利用すればオンラインゲームなどもできる
イベントの帰りには kotarok さん、myakura さん、neotag さんと一緒に近くの中華飯店でご飯を食べてきました。チャーハンが美味しかったみたいです。
HTML5 の ruby 要素について思うこと
2009年12月2日水曜日
2009年12月2日の段階の HTML5 の草案では、ruby 要素を使うとき、
<ruby>漢<rp>(</rp><rt>かん</rt><rp>)</rp>字<rp>(</rp><rt>じ</rt><rp>)</rp></ruby>
のように使うことになっています。
<ruby><rb>漢</rb><rp>(</rp><rt>かん</rt><rp>)</rp><rb>字</rb><rp>(</rp><rt>じ</rt><rp>)</rp></ruby><ruby><rbc><rb>漢</rb><rb>字</rb></rbc><rtc><rt>かん</rt><rt>じ</rt></rtc></ruby>
のように使ことになっています。さらに複雑なルビ構成も存在します。のようになっており、単純な場合にはもうすこし簡単にマークアップすることもできます。
IE では以前から単純ルビが実装されていますが、これは XHTML1.1 が IE に合わせた実装になっているようです。これについては、以前、元 W3C の
HTML1.1 に比べて簡略化されていることについて
HTML5 の ruby は XHTML1.1 の Ruby Annotation に比べてだいぶ簡略化されており、ruby, rp, rt で構成します。そのため
- rb 要素が存在しないため、何らかの目的でルビベースのみを取得したい場合には手間がかかる
- 複雑ルビが存在しないため、ruby を解釈できない UA に対して優しくないのではないか
- 漢字熟語がばらされてしまう (例えば、漢字という熟語が漢と字として別々に処理される) など
などがあります。なので、HTML5 の ruby も XHTML1.1 の Ruby Annotation に近づけたらいいと思うのです。
CSS について
CSS3 では ruby のレンダリングに関するモジュールもあります。しかし、HTML5 においては、ruby を構成する要素が少ないため CSS3 Ruby Module で用意されている内容をいかしきれないのではないかと感じます。(CSS は特別に HTML5 のための技術というわけではないですが)
どうせなら、HTML5 の ruby も XHTML1.1 の Ruby Annotation に近づけたらいいと思うのです。
読み仮名と注釈について
読み仮名 (ruby annotations) と注釈やメタ情報 (other annotations) を同等に扱っていいのかという疑問があります。
例えば
<ruby><rb>斎藤信男</rb><rt>さいとうのぶお</rt></ruby>
と
<ruby><rb>斎藤信男</rb><rt>W3C Associate Chairman</rt></ruby>
の 2例において、rt 要素が示す内容は読み仮名なのか注釈なのかの区別は難しいはずです。
読み仮名と注釈を区別しないのには理由があり、あえてこうしているそうです。確かにその通りだなと感じました。
実際そういう意見もありました。しかしマークアップ言語設計の経験上、詳細にマークアップできるようにしようと言語仕様を精緻化していけばいくほどユーザはどの場合にどれを使ったら良いのかわからなくなりかえって誤用が増えるという皮肉な結果になることが知られています。現状の (X)HTML でも多すぎるくらいです。ルビの場合も様々な用例を検討すれば「ルビ」と「よみがな」なんて簡単に分けて済むような問題ではなく泥沼にはまり込むことが明らかだったため、あくまで親文字列とルビ文字列という構造のみを記述してその意味論には踏み込まない仕様に落ち着いています。
kits 氏からお教えいただいた参考リソースの URI : http://groups.google.co.jp/group/fj.net.www.authoring/browse_frm/thread/0a73cf4b5704edb6
せっかく変えるなら…
HTML5 ではレンダリングの互換性は重視されていますが、XHTML1.1 などの書き方とは少し変えています。でもどうせ変えるならもっとスマートに
<ruby rt="かんじ">漢字</ruby>
のように、読み仮名については属性にしたほうがすっきりすると思うのです。注釈については別途マークアップする仕組みを作るとか。
ただ、webkit でも ruby の実装が始まってきたので今更変えるのは難しいのかな…とも。
読み仮名を要素の属性としないのには、漢字が主ではなく読み仮名こそが主であるケースもある、多言語での観点、総じてテキストデータは要素内容とするべきなどの理由があるそうです。
これについても kits 氏から教えていただいたリソースが大変参考になりました。
後で HTML5 Japanese Interest Group に投げてみよう。議論できる場が用意されているのっていいな。


