日記
マークアップ言語で図画やロゴを描く
最近、HTML と CSS を使い、Opera のロゴや、ドラえもん、アンパンマンを描画するといったネタをしばしば目にします。例えば HTML と CSS の表現力を利用すれば SVG のロゴを描画することもできます。
border-radius による角丸や transform による変形などを使えばいろいろな表現ができるようになりますが、一般的な CSS はあくまでも文書の装飾であり、図画の描画をするための技術ではありません。CSS のベンチマーク的にネタとして試す分には別にいいのですが…。
次に用意したのは前記のロゴを SVG を用いて描画した demo です。
- SVG を用いた SVG のロゴ (IE9、Opera, Firefox, Webkit 系で動作)
SVG とはベクターグラフィクスを描画するためのマークアップ言語 (XML) です。例えば円や矩形、ベジェ曲線の描画、グラデーションなどを利用することができます。Adobe Illustrator のデータに似ています。アニメーションもできるので Flash 4 くらいのことができます。現在は XHTML 内や、img 要素などの埋め込み対象として利用できます。また、HTML5 では <svg> 要素が登場し、より扱いやすくなる予定です。
e.g.
<head>
<title></title>
</head>
<body>
<h1>circle !</h1>
<svg>
<circle cx="50" cy="50" r="30" fill="#00f"/>
</svg>
</body>CSS ばかりではなく、SVG に注目してみるのも面白いと思います。ここでは簡単な図画を例にしましたが、オーサリングツールを使えば虎とか Firefox のロゴを SVG で描画することもできます。
Raphaël を使う
SVG は IE6 の存在もあり、今すぐに実務で使うのは難しいです。いまベクターグラフィックスを描画したいなら Raphaël を利用するとよさそうです。
Raphael は JavaScript でコードを書くと自動でベクターグラフィックスとして出力してくれるライブラリです。コードの書き方は SVG と canvas の中間のような。SVG または canvas のどちらかを書いた経験があればすぐに書くことが出来るんじゃないでしょうか。
試しに Raphael を使用してみました。SVG から Raphaël に置き換える感覚は XML から JSON を書くみたいな。例えば、円を描くには
var paper = Raphael("testDiv", 600, 600);
paper.circle().attr({cx:100, cy:100, r:50, stroke: "none", fill:"#f00"})
とします。
- Raphaël を用いた SVG のロゴ (IE を含むほとんどの Web ブラウザーで動作)
しっかり IE6 でも描画されます (IE には VML として出力されます)。ただし、VML の仕様にあわせて text に transform が使えないなどの縛りがあります。
CSS Nite LP 9.2 (reprise) フォローアップ
6 月 5 日に行われた CSS Nite LP 9.2 で HTML5 についてのセッションで益子さんと共に登壇をいたしました。
4 月に行われた CSS Nite LP 9 の内容に加え、文書構造とその関連要素型の解説、canvas や svg、math などの埋込み要素型についても触れました。
アンケートのコメントとしていくつか質問をいただきましたので以下にまとめました。補足として参考にしていただけば幸いです。
a 要素などに音をつけたりすることは可能でしょうか ?
可能です。audio 要素は JavaScript と連携することができるので、例えば a 要素のマウスオーバー時に特定の音声を再生するといったことができます。もちろん、 a 要素以外に再生イベントを割り当てることも可能です。簡単な demo を作成しましたのでご参考にどうぞ。
マウスオーバー時に音声を再生する demo (Fx, Opera, Webkit (Desktop, iPad))
ただ、現在の iPhone では video や audio の再生が Safari 内で実行されないので iPhone, iPod touch への応用はいまのところ難有りです。iPad は問題ありません。
video 要素は IE で再生できるのでしょうか ? また、それぞれの Web ブラウザーでサポートされているファイル形式は ?
video 要素は現状、Fx, Opera, Webkit 系で対応しています。また IE 9 から対応予定です。残念ながら IE 6, 7, 8 では video 要素で動画を再生することはできませんが、JavaScript と SWF を組み合わせた フォールバック (代替手段) は既にいくつか知られています。例えば flowplayer を利用した html5media や Video JS、JW Player を利用した Video For Everybody などが存在します。
また、現時点で各 Web ブラウザーが対応している動画の形式は以下のとおりです。
| Firefox | Opera | Safari | Chrome | IE9 | IE6~8 | |
|---|---|---|---|---|---|---|
| H.264 (mp4,mov) | × | × | ○ | ○ | ○ | × |
| Ogg Theora | ○ | ○ | × | ○ | ×? | × |
| WebM | ○ | ○ | × | ○ | △? | × |
video 要素、audio 要素のコントロール部分をデザインすることは可能でしょうか ?
はい。可能です。JavaScript で video や audio に命令することができるので JavaScript と CSS を組み合わせて実現できます。video 要素を例にとって demo を作成してみましたのでご参考にどうぞ。
Dreamweaver に機能拡張などを追加していますか ?
はい。Adobe Dreamweaver CS5 HTML5 Pack をインストールしています。この機能拡張を使うことで、HTML5 の要素型と属性や CSS3 入力補完が追加されたり、Multiscreen Preview panel の機能を利用できます。
また、セッションとは直接関係ないのですが「ゲーム好きですか ?」という質問もいただきました。反応していただいてありがとうございます。一応…Fantasy Earth Zero というゲームをやっています !
Google I/O で気になった部分
気になった部分の簡単なまとめ。後で見直す用です。
WebM
<video> でも使われることになる新しいファイル形式。動画部分に VP8、音声部分に Ogg Vorbis をつかった Matroska ベースのコンテナ。H.264 と違い、ロイヤリティーフリーのオープンソース。Ogg Theora と違い、高圧縮で高画質。拡張子は .webm
Chrome, Firefox, Opera でサポートする予定。IE9 は VP8 コーデックをインストールすることで利用することができる予定。Safari は…どうなるか。ブラウザーのほかにも Skype, Adobe Flash, Android, YouTube などでもサポートしていく。
- Chrome : WebM and VP8 land in Chromium
- Opera : Welcome, WebM <video>!
- Firefox : Firefox, YouTube and WebM
- IE : Another Follow-up on HTML5 Video in IE9
- Flash : Flash Player Will Support VP8
Adobe Dreamweaver CS5 HTML5 Pack
Dreamweaver CS5 では直接 HTML5, CSS3 はサポートしないけど、エクステンションとしてサポートする。
Google App Engine for Business
SSL (HTTPS) と SQL が使えるようになる
Google Storage for Developers
Amazon S3 みたなオンラインストレージの Web サービス。領域 100GB、転送量 300GB / 月までを無料で利用可能。
Google Font API
Google が WebFonts をホストする。Google Font API をつかっていれば様々な Web サイトから同一のリソースを参照することになるので閲覧者はローカルのキャッシュを使うことができ、ダウンロードの負荷を軽減することができる…はず。以下のように CSS を読み込めば利用可能。
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Tangerine">
<style>
body {
font-family: 'Tangerine';
}
</style>CSS Nite LP 9, HTML5 マークアップのセッションの資料と補足など
2010 年 4 月 17 日に開催された CSS Nite LP9 の HTML5 マークアップのセッションに登壇いたしました。当日使用した一部の資料を以下に公開し、あわせて補足などをまとめました。
おさらいと補足
HTML5 では従来の XHTML1.0 で存在した要素型に加え、28 の新しい要素型が増える予定です。また、いくつかの既存の要素型は意味がかわります。
セクション関連の要素
セクショニング系の要素型として、section, article, aside, nav が新たに登場予定です。これらの要素型を利用することで、HTML の構造をより明確にすることができます。セクショニング系の要素型は基本的に見出しの影響範囲を包含するように利用します。
例えば、今回利用したサンプルのページでは、
- body : なぞの野菜市場
- nav : (見出しなし)
- article : 取り扱う野菜について
- section : 生産者について
- aside : (見出しなし)
- section : 農場について
- section : 生産者について
- nav : 商品一覧
- aside : (見出しなし)
のような、章の入れ子構造と、役割を取得できます。この仕組みはアウトラインと呼ばれ、HTML5 の 4.4.11.1 Creating an outline に明記されています。nav : (見出しなし) の箇所のように、アウトラインに出現させるために見出しがないブロックをセクションとしてマークアップすることもできます。
HTML5 が安定した規格となり広く利用されるようになれば、検索エンジンや支援技術 (アクセシビリティ用の機器など)、や Web サービスなどが Web ページから取得できるアウトラインを有効に利用するかもしれません。
time 要素型
time 要素型は特定の日時をの日付や時刻を正確に示すための要素型です。CSS Nite LP では
<time datetime="1957-12-24">18歳の誕生日</time>のように例を紹介しましたが、時間までを正確に示すこともできます。例えば
<time datetime="2010-04-17T06:30:00+09:00">昨日の6時半</time>のように記述します。属性値末尾の +09:00 は日本のタイムゾーン (世界時からの時差) です。
また、記事の投稿日を意味する pubdate 属性をあわせて指定することもでき、その場合は
<time datetime="2010-04-17T06:30:00+09:00" pubdate="pubdate">2010月4月17日</time>のよう記述します。これにより記事がどれくらい古いのかがわかるので、Web から 2010 年 4 月以降に投稿されたドキュメントを検索、などといったことができるようになるかもしれません。
video 要素型
video 要素型は動画を埋め込むことができる要素型です。羽田野さんのセッションでも紹介されていましたが、以下のようにブラウザーによってサポートしている形式が違います。そのため、今回ご紹介した作例のように複数のリソースを参照します。
<video width="320" height="240" controls="controls">
<source src="images/video_01.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="images/video_01.ogg" type='video/ogg; codecs="theora, vorbis"' />
<p>畑の様子。冬なので作物は少なめ</p>
</video>各ブラウザーがサポートする形式は以下のとおりです。
| Firefox | Opera | Safari | Chrome | IE6~8 | IE9 | |
| H.264 (mp4,mov) | × | × | ○ | ○ | × | ○? |
| Ogg Theora | ○ | ○ | × | ○ | × | ? |
動画形式としては、MP4 などの H.264 が一般的ですが、H.264 は Apple や Microsoft など、一部の企業のみがライセンスを持つコーデックです(AVC/H.264 Licensors)。H.264 について、現在は無料で利用することができますが将来的にどうなるかは不明なため、Mozilla や Opera はオープンなライセンスの Theora のみをサポートしています。最近では Google が VP8 というコーデックをオープンソース化しましたする計画のようです。。各ブラウザーによる対応コーデックに関しては今後まだ変化してきそうなので、その動向には敏感になっておくとよさそうです。
なお、MP4 などの形式から Ogg Theora に変換する対応にはシンプルな MiniCoder や多機能な SUPER c が便利です。
最後に
CSS Nite LP 9 でのご清聴、ありがとうございました。
導入編のような位置づけだったために、あまり深い内容にならず、深く掘り下げた情報を期待していた参加者さんには満足いただけないであろう内容となってしまいましたが、今後別の機会やこのブログにもうすこし濃い情報 (たぶん SVG ばかりですが…) をまとめていきたいと思います。
HTML5 を使ってみよう ! に参加してきました
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 さんと一緒に近くの中華飯店でご飯を食べてきました。チャーハンが美味しかったみたいです。
あと、目黒といえば…鹿鳴館 (スタジオ) ですね !! ライブに行きたい…。