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ページにもうすこし時間をかけて解説できる流れのほうが良かったかもしれないです。

コメントはありません

ピクセルグリッドに入社しました

• Web
• 日々の出来事

2010年2月1日月曜日

3年ほどお世話になったメタフェイズを退社し、2010年 2月 1日よりピクセルグリッドという会社でお世話になることになりました。原宿にある SINAP さんのおしゃれオフィス内に間借りをしているのでしばらくは原宿で仕事をします。昔も原宿に通っていましたがまた戻ってくるとは…。

会社はかわりましたがやっていることは以前と似たことなので忙しさが一段落したら日々の研究などを weblog に post していこうと思います。

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

Web Fonts で SVG Fonts を利用する

• CSS
• SVG

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 のみで動作します)

結果を比較すると次の通り。

使い方や作り方など

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 を調べるのに便利

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

HTML5 を使ってみよう ! に参加してきました

• HTML 5
• イベント / セミナーレポート

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 要素について思うこと

• HTML 5

2009年12月2日水曜日

2009年12月2日の段階の HTML5 の草案では、ruby 要素を使うとき、

<ruby>漢<rp>(</rp><rt>かん</rt><rp>)</rp>字<rp>(</rp><rt>じ</rt><rp>)</rp></ruby>

のように使うことになっています。

XHTML1.1 の Ruby Annotation は、

<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 の石川 雅康(いしかわ まさやす)氏が XHTML1.1 の Ruby Annotation は IE の実装との互換を優先させられたと語っていました。

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 要素が示す内容は読み仮名なのか注釈なのかの区別は難しいはずです。

せっかく変えるなら…

<ruby rt="かんじ">漢字</ruby>

後で HTML5 Japanese Interest Group に投げてみよう。議論できる場が用意されているのっていいな。

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

Web サイト内検索

カテゴリー一覧

• V系とか (39)
• Web (194)
  • CSS (25)
    • CSS hack (1)
  • HTML / XHTML (14)
    • HTML 5 (9)
  • IA (1)
  • JavaScript (3)
  • Web ブラウザー (17)
    • Firefox (7)
  • XML (10)
    • SVG (4)
    • XSLT (2)
  • アクセシビリティー (1)
  • イベント / セミナーレポート (34)
  • メタデータとセマンティック Web (1)
• 卓矢エンジェル (36)
• 執筆 / 講演など (4)
• 日々の出来事 (350)
• 未分類 (1)
• 本日のお昼ごはん (9)

この Weblog の FEED

この Weblog の FEED

knows

• 会社で隣の席の人 : Coding Architecture
• 会社で後ろの席の人 : Development Reference
• 会社ですこし遠い席の人 : 9-2-7