CSS Nite 4周年記念イベント(Vol.40 reprise)に参加してきました

カテゴリ:雑談 2009年11月13日 23:44

CSS Nite in Ginza, Vol.40 repriseの様子

スピーカーである KAYAC の山田さんに招待いただいて参加してきました。
今回の主題は「HTML5」。最近よく耳にするようになりました。実際自分も、HTML5で組んでみた で HTML5 を使ってテスト的に組んだりもしたのでとても興味のある回でした。

CSS Nite Vol.40 reprise のセッションは以下でした。

セッション内容

Vol.40 reprise に参加したことで、HTML5 に対する理解がより一層深まりました。
手書きメモベースなので細かい抜けや勘違いなどもあるかもしれませんが、内容をざっくりおさらいをしながらまとめたいと思います。

▼EntryMore▼

Session1 - Speaker: 矢倉 眞隆さん
『HTML5、きちんと。』

HTML5、きちんと。と題されたセッション。内容は、HTML5 策定の歴史や、XML、XHTML の背景に至るまで話されて、なぜ今 HTML5 なのか、ということがとても分かりやすく解説されていました。

その中で、自分が興味を持ったものと今後使えそうだな、と思ったものを中心にまとめたいと思います。

HTML5 は XHTML5 として XHTML ベースでも書ける

XHTML2.0 のワーキンググループが活動を終了するようです。これに伴って、XHTML2.0 の策定は終了します。n さて、こう聞くと XHTML がなくなってしまうのか、と思われる人もいますが、XHTML の仕様自体は残ります。n XML 構文で書くことで XHTML5 として書くことができるわけです。n

また、XHTML と HTML で大きな違いは<img />などの空要素の扱いでしょう。
今回のセッションでは、<img><img />は混在できる、ということでした。
なかなかごちゃごちゃしてしまいますが、現状を考えると適切な仕様ではないかなと思います。

HTML5 の新機能

さて、ここからが自分的には本番でしたw
まず、DOCTYPE宣言やcharsetの宣言がとてもシンプルになります。

▼DOCTYPE宣言

たったこれだけ。現状、DOCTYPE宣言はブラウザのレンダリングスイッチがメインになっている(特にIE6)ので、長ったらしい URL などは排除されました。

▼charset

こちらもこれだけ。とても短いですね。
これもどうやら元々ブラウザで実装していたのを、そのまま仕様にしたもののようです。

HTML5 で追加された新要素

さて、ここからが HTML5 の目玉です。
HTML5 策定により、かなり色々な要素が追加されました。主要な要素は以下の通りです。

  • <header>
  • <footer>
  • <hgroup>
  • <canvas>
  • <article>
  • <section>
  • <nav>
  • <aside>
  • <video>
  • <audio>

上に書いた要素のうち、<section><article>などは"セクショニング" に関するものとなります。
"※セクショニングについては、Session3 の小山田さんのところで詳しく話されていたのでそちらでまとめます。"

HTML5 で追加された新属性

また、新しい属性も追加されました。

スライダー要素。現在では JavaScript を用いて実装していますが、HTML5 からはブラウザがネイティブに対応するのでとても使いやすくなります。

こちらも現在は JavaScript で実装しているものですね。

よく見かけるカレンダーを使っての日付入力用の要素です。

登録フォームなどで「必須」と書かれている項目などがありますが、HTML ベースで必須を定義することができるようになります。

検索フォームなどでよく見かけますね。あらかじめどんな単語を入力したいかのサンプルに使います。
現時点でも Safari などが対応しているので、JS を使って実装するまでもないけど、という場合にさりげなく仕込んでおくというのもいいかもしれません。

勧告とは

現状、CSS2.1 もまだ "勧告候補" に過ぎません。
勧告の定義は、「仕様がすべて実装され、すぐに使える状態になっていること」ということのようです。
なので HTML5 が "勧告" になるにはまだまだ時間がかかりそうです。

ですが、上でも書いたように CSS2.1 もまだ "勧告候補" にしか過ぎませんが、現状では誰もが使用しています。
HTML5 も勧告を待つ前に、各ブラウザの実装状況によって実装されている機能使っていけばいい、ということでした。

ただ注意として、まだ仕様は策定段階だ、ということ。
なのでこれらの定義や内容が後々変わってしまうこともあるかもしれない、ということに注意が必要です。
中には「<articel> と <section> を区別する必要があるのか? いっそ <section> を削除しては?」という意見も出ているとのことで、もしかしたら今後、削除されないにしても現在の定義が変更される、といったことはありえるかもしれません。

使用する場合は、そういったリスクを覚悟して使いましょう、ということでした。
ちなみに、実装状況など最新の情報を得るには以下のサイトが参考になります。

mozilla developer center
https://developer.mozilla.org/ja

Safari Dev Center
http://developer.apple.com/safari/

実際に仕様書を見る
http://www.w3.org/TR/html5/the-canvas-element.html
また、この仕様ページには現在のステータスも表示されているので、現在がどの段階にあるのかが分かります。

W3Cの勧告プロセス:草案(Working Draft)、最終草案(Last Call Working Draft)、勧告候補(Candidate Recommendation)、勧告案(Proposed Recommendation)、勧告(Recommendation)
参考:W3C勧告プロセスの概要

このセッションで知った考え方として、「Progressive Enhancement」というものがありました。
簡単に言うと、各ブラウザの実装状況に応じて先進的なものを使いながら、古いブラウザに対してはなくてもいい要素は思い切って諦める、というような内容でした。
個人的には角丸など、絶対に再現しなければいけない要素でない装飾的な部分に関しては、border-radius を遣うなどして実装しつつ、対応していない IE6 などは角丸を諦めてもいいのかな、と思ってます。

(twitterですでに、つぶやき部分の背景に使われていたりします(IE6で見ると角丸ではない))

Session2 - Speaker: 山田 敬美さん(カヤック)
『HTML5のメリットを活かしたコンテンツアイデア』

山田さんのセッションでは、実際にある自社サービスを HTML5 + JS で組み、iPhone 向けに作成したものをデモとして見せて頂きました。
※実際のサイト(iPhoneで見ると自動でHTML5になります) ⇒ イケメンホイホイ

IE6 などは HTML5 の新要素である <canvas> には対応していない。
いちおう IE6 でも <canvas> と同じようなことを実現するライブラリがあるが、動作が重く、全ブラウザに対して使うにはまだ時期尚早であろう、ということでした。

そこで、プラットフォームを絞ってしまえばいいのでは、ということから上記の iPhone 対応サイトを考えられたそうです。
(iPhone には mobile Safari が入っているので、WebKit の HTML5 の対応状況は良好)

個人的にいいな、と思ったのが、iPhone は Flash に対応していないためアニメーションなどの表現が苦手だけれど、<canvas> を使って擬似的に Flash のようなエフェクトを使用する、という点でした。確かに使いこなせれば、ちょっとしたエフェクトなどは iPhone 上でも表現可能かと。

さて、このセッションの主な内容は HTML5 の仕様の中にある、JavaScript のローカルストレージやアプリケーションキャッシュについてフォーカスしていました。n

キャッシュマニフェストファイルでアプリケーションキャッシュを定義

その中で個人的に興味があった(そして初めて知った)のが、キャッシュマニフェストファイル(.manifest)。n これで定義されたファイル(HTML や CSS、JS、imageなど)がローカルにキャッシュされ、オフラインでも使えるようになる、というもの。
またオフラインでの利用以外にも、ほぼ変更されないものをローカルに保存しておくことで、http 通信を減らせる、というメリットもあるようです。

ただ注意点として、このマニフェストファイルでのキャッシュは相当強いらしく、ブラウザのキャッシュクリアを実行しても削除されなかったようです。なのでテスト環境ではマニフェストファイルを定義せず、本番になるときに使うほうが開発がスムーズなようです。
"※あとで調べてみたところ、マニフェストファイルを 1 バイトでも変更すると書かれている内容のファイルをキャッシュし直すようです。"

ちなみにマニフェストファイルの埋め込みは以下のように指定します。

またマニフェストファイルは「.manifest」という拡張子で配信されるのが通例で、MIMEタイプも「text/cache-manifest」となるため、サーバ側での設定も必要です。.htaccess などに適切に設定する必要がある点に注意が必要です。

定義方法については、マイコミジャーナルの記事が参考になりそうです。
詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編

ローカルストレージとアプリケーションキャッシュの違い

次に説明されたのがローカルストレージ。こちらもローカルにデータを保存するのはアプリケーションキャッシュと同じですが、アプリケーションキャッシュは静的なファイル(画像など)を保存するのに対し、ローカルストレージでは動的に保存内容が変更されるようなものに使う、ということでした。

参考に示されていたのは、mixi などで日記の投稿をする際、万が一送信中にエラーで投稿が失敗した場合に、その情報を復元する、という方法を説明されていました。n

img の alt 属性が再定義された

現在の alt 属性では、代替テキストを入力する、となっていますがHTML5 では厳密に使い分けをするようです。使い方としては

alt 属性あり・内容あり:重要な要素、代替テキスト

alt 属性あり・内容なし:装飾、補足的な要素など。画像非表示時は(テキストが)レンダリングされない。

alt 属性なし:重要な要素、イメージが存在することを表す
画像が重要な要素だが、代替テキストが設定できない場合など。(例:フォトギャラリーの写真など)

Session3 - Speaker: 小山田 晃浩さん
『HTML 5(現段階の WD)のセマンティクスの実装』

小山田さんのセッションでは、もう 1 歩突っ込んで具体的に HTML5 を使う方法などを解説されていました。

その中で、HTML5 を理解する鍵は「アウトラインを意識する」ということでした。
HTML5 では、<artcile> や <section> など、「セクション」を構成する要素が多数追加されています。

各要素は、セクショニングコンテンツ、セクショニングルートに大別されるそうです。
それを分けるとそれぞれ新しく追加された要素は以下のようになります。

セクショニングコンテンツ要素

  • <article>
  • <section>
  • <nav>
  • <aside>

セクショングルート要素

  • <body>
  • <blockquote>
  • <td>

セクショニングコンテンツ、セクショニングルートとは?

セクショニングとは、つまりアウトライン(目次)を明示することです。

大見出し
 └中見出し
   └小見出し
 └中見出し

のように、文書は大まかに見出しでアウトラインを取ることができます。
これらを明示できるようにする要素が、上記で書いた新要素の主な役割となります。

このアウトラインという考え方は、実は HTML4.01 でも存在しています。
現状のものでアウトラインを考えると、見出しレベルによってアウトラインが生成できます。

※amachang さんが作られた、HTML からアウトラインを抽出するブックマークレットが公開されているのでそちらを利用してみるとより理解しやすいと思います。

さて、現状でもアウトラインを生成できる、と書きましたが見出しレベルでのアウトラインにはやはり無理があるようです。
以下のような HTML があった場合、最後の p 要素がどこに属しているか判別しづらくなります。

しかし、これを HTML5 で書き直してみると以下のようになります。
最後の p 要素がどの見出しの内容になるのか一目瞭然ですね。

セクショングコンテンツ内は見出しレベルをリセットできる

またこのセクショニングコンテンツにより、"見出しレベルをリセットできる" という点も大きいメリットです。
セッションを聞いていて「なるほど」と思ったのが、セクション単位でのモジュール化がしやすい、ということでした。例えば、

という構成があったとします。
現在の HTML では見出しレベルは順序があります。
h2 要素の下に h1 要素があるのは変ですよね。

しかし、セクションを明示したことによって "そのセクションの最初の見出し" という位置づけになるため、見出しの階層構造は保たれます。これがリセットできる、ということです。

さて、リセットできるとなにがいいのか。
上記の構成を 1 つのモジュールだとします。
HTML5 であれば、セクショニングコンテンツ内の見出しはその中であればなんでもいいとされています。
(h3 要素で始まっても、その後が h4, h5 となっていれば始まりはなんでもよい)n

つまり、このままコンテンツとして組み込めるわけです。
そうなれば、とあるセクションの h1 はこのスタイル、といったように CSS の適用もしやすくなります。

また、前後の hn 要素の数字を気にする必要がないのでそのまま挿入することも可能です。 これが、見出しレベルをリセットできることのメリットです。

セクショニング以外の要素はグルーピング要素

さて、HTML5 で追加された要素はまだ他にもあります。
その中で、このセッションを聞くまで使い道がよく分かっていなかった要素に <hgroup> がありました。

これの使い道は、簡単に言うと「無駄なアウトライン生成を抑制する」というもの。

hgroup は見出し要素をグルーピングする

言葉だけだとイマイチ分かりづらいと思うので以下にサンプルを書きます。

上で、見出しレベルでもアウトラインが生成されると書きました。
これをアウトラインとして見ると

サイトタイトル(大見出し)
 └サイトサブタイトル(中身だし)n

となります。
しかし、大見出しに対してのコンテンツは一切ないことになりますね。
サイトタイトルとサイトサブタイトルはそれでひとつとする場合がほとんどだと思います。
なのでこれを HTML5 的な書き方にすると

となります。これのアウトラインを取ると

サイトタイトル
サイトサブタイトル(ここまで大見出し)n

というアウトラインになります。すっきりしますね。
これが、hgroup の使い方だそうです。

header, footer もグルーピング要素

最後に header, footer の説明です。
こちらもセクショニングではなく、グルーピング要素です。
また、単語からイメージされるサイトのヘッダーやフッターに留まらず、各記事にもヘッダーやフッターに当たる要素がある場合があります。n

そうした要素に対しても、グルーピングとして繰り返し使用ができるものとなります。
例えば、

のようにして、ヘッダー部分をまとめたり、といったことに使用できます。

新要素にはデフォルトスタイルが存在しない

最後に、HTML5 で追加された新要素には、p などに最初から適用されている margin や display: block などの設定がありません。
そのため、なにも指定しないと display: inline としてレンダリングされるため、それぞれに display: block などのスタイルをあらかじめ設定しておくと直感的にコーディングが進められると思います。

最後に

さて、いかがでしょうか。
各セッションを聞きながらのメモをベースに書いたので、間違っている部分もあると思いますが、もし気づいた方は指摘いただけると助かります。n

今回のセッションで、かなり HTML5 についての知識が増えました。
まだ参加したことがない人がいたら、機会があれば CSS Nite、参加してみるととてもいい勉強になると思います。

この記事のカテゴリー一覧を見る⇒雑談

  • このエントリーをはてなブックマークに追加

トラックバックURL

http://css-eblog.com/cgi-bin/mt/mt-tb.cgi/162

トラックバック

CSS Nite 4周年記念イベント(CSS Nite in Ginza, Vol.40リプライズ)が終了しました

2009年11月10日、デジタルハリウッド本校(お茶の水)セミナーホールにてCS...

byCSS Nite公式サイト 2009年11月17日 14:11