HTML5について日本語で議論するW3Cのグループ「HTML5 Japanese Interest Group」がスタート、そのInterest Groupのフェイス・ツー・フェイスミーティングが1月22日に慶應義塾大学 日吉キャンパスで開催されたそうです。
各ブラウザベンダ
オペラソフトウェア ダニエル・デイビス氏
Open Webという宗教へもっと入ってください、というのが私の肩書き「Webエバンジェリスト」。
モジラジャパン 加藤誠氏
私はコアデベロッパーとしてちゃんとコードを書いている人です。
マイクロソフト 五寳 匡郎氏
マイクロソフトがHTML5でいったい何を話せるの？ と思われていると思うが......でもこの会議には参加しないとまたマイクロソフトはだめだなと思われるし。そこでUSチームのデベロッパエバンジェリストと協力して資料を作った。
グーグル 及川卓也氏
グーグルはGoogle Chromeというブラウザを作っているだけでなくWebkitにも貢献している。Webkit、まだプラットフォームごとに分かれているところがあるので、同じWebKitを使っているブラウザでも、Safariで動いてChromeで動かない機能というのもある。
だれでも参加可能みたいなので行きたいです。
HTML5で構築されたウェブサイトをまとめてくれているギャラリーサイトです。
HTML5を解説してくれている現在もコンテンツがどんどん増えている進行中のウェブサイト。もちろんこのサイト自体もHTML5で構築されています。
HTML5のCanvasとAudioで動く実験ページ。まるでFlashやSilverlightを使っているかのような動きですね！新しい可能性を感じるページです。
では、実際にHTML5を書いて試してみましょう！
プリントアウトして手軽に使えるHTML5のチートシート。慣れるまでは、このチートシートをデスクに置いておくとなにかと便利ですね。
こちらはHTML5のポケットブック。折り畳んで、手帳や財布に入れておくと、いつでも確認できますね。
まだまだブラウザの対応がすすんでいないHTML5。Modernizrは、CSS3各プロパティやHTML5のエレメントが有効かどうかを検出してくれるライブラリ。
Smashing Magazineさんがまとめてくれている、HTML5の解説エントリ。
スクラッチからHTML5のレイアウトを作るチュートリアルです。英語の解説ですが、とてもわかりやすく解説してくれています。
HTML5とCSS3でつくるウェブサイトのチュートリアル。ちらもとてもわかりやすく解説されています。
jQueryとHTML5のCanvasをつかって作るチャートやグラフののデモページです。
70種類ものHTML5のチュートリアルをまとめてくれているエントリ。
ノルウェーのブラウザメーカーOpera Softwareが考えるブラウザーの未来。
同社が現在注力している“3つの柱”について紹介。
1.デスクトップ製品(パソコン用ブラウザー)
2.モバイル製品(携帯電話やPDA用ブラウザー)
3.デバイス製品(ゲーム機など、組み込み機器用ブラウザー)
統合と表現能力の向上がキーとなる
少し前の記事ですが、Operaはさまざまなデバイス向けのブラウザーに展開していくことで、クロスプラットフォーム化やConvergenceを推し進めていく戦略を持っているという記事。
HTML 5が変えるブラウザーの表現能力
W3Cによって現在策定中のHTML5の仕様に対し、MicrosoftがCanvas要素を外すよう提案したそうです。
また、Microsoft側はHTML5とは独立したCanvasのAPI仕様書の作成も行い、これを採用するよう提案したとのこと。しかし、これに対してGoogleのIan Hickson氏が反論とともに問題点を指摘。
それによりCanvasをHTML5から分離する議論は収束したとのこと。なお、この件についてはPublickeyで日本語で詳しくまとめられています。
ちなみに現在、FirefoxやSafari、OperaがCanvasのサポートを進めており、すでにCanvasに含まれるいくつかの機能が利用できる状態にあります。
しかしIEではいまのところまったくCanvasは利用できない状態で、そのMicrosoft陣営が「CanvasはHTML5とは分離しよう」と主張した点がとりざたされているようです。
HTML5では、HTML文書の中にメタデータを埋め込むための「Microdata」という仕様が含まれています。
最初に簡単なMicrodataの具体例を紹介します。HTML文書の中で明示的に人名であることを示したい内容があるとき、Microdataでは次のように書くことができます。
<section itemscope itemtype="http://example.org/person">
<h1 itemprop="name">山田太郎</h1>
<p itemprop="desc">この名前は日本の代表的な名前です</p>
<img itemprop="img" src="yamada.jpeg" alt="" >
</section>
と表示されるだけで、特に何か変わったことが起きるわけではありません。しかし、このHTML文書を検索エンジンが読み込むと「山田太郎という文字列はnameである」と理解してインデックスしてくれる、といったことができるようになります（というのはあくまで例です）。
Microdataとは、文書の内容に対して機械に分かる形式で意味づけを行うセマンティックWebのための新しい仕様といえるでしょう。
これまでHTML5の仕様の中でMicrodataが紹介されることは多くありませんでした。そのため現在のところWebで検索しても日本語での解説はほとんど見つかりません。この記事ではそのMicrodataについて紹介していきます。
なぜ、MicroformatsがあるのにMicrodataが普及されはじめたのでしょうか？
WHATWG HTML (Including HTML5)
http://www.whatwg.org/specs/web-apps/current-work/multipage/microdata.html
Microformatsは利用者独自の形式を開発しにくく、勝手な方法でやろうとしても名前空間を設定する標準的な方法がなかったため、名前がほかの人の開発したものと衝突しやすい欠点がありました。また、Microdataで記述されたメタデータを読み出すための標準的な方法もありませんでした。こうしたことなどから、Microformatsは普及が進んだとはいえない状況にあるとの見方です。
Microdataで何ができるのか？
Microdataの用途は、既存のMicroformatsなどで想定されていた用途と基本的には同じと思われます。例えば、個人のプロフィールページにメタデータとしてどこが苗字でどこが名前で、どこがミドルネームかなどを示すデータを埋め込むことによって、ネット上のさまざまなアプリケーションで自分の名前を正式に認識してもらうことが可能になります。
また、製品レビューのページ、あるいはレストランのレビューといったページでは、星の数を共通のフォーマットで埋め込むことによって、ネット上にあるさまざまな人のレビューを集計しやすくなるでしょう。
あるいは病院や商店の営業時間、休業日などを機械が読み取れる形で埋め込んでおくと、検索エンジンに「あの病院の営業時間は？」と質問するだけで、検索エンジンがあらかじめ読み込んでおいたメタデータを基に「朝9時から5時までです」と答えてくれるようになるかもしれません。そうなれば、いちいち答えの書いてあるWebページへジャンプして自分で情報を探す必要がなくなります。
これ以外にも、Microdataのメタデータ埋め込みによって機械がWebページの中味を理解できるようになれば、さまざまなアプリケーションの可能性が開けてくるはずです。
参考記事はこちら
http://www.publickey.jp/blog/09/html5microdata.html
よく使うページャーのサンプル XHTML版とHTML5版
XHTMLのソース
<ul class="pager">
<li><span>≪ PREV</span></li>
<li><em>1</em></li>
<li><a href="/ver1/news/p=2/">2</a></li>
<li><a href="/ver1/news/p=2/">NEXT ≫</a></li>
</ul>
HTML5のソース
<nav class="pager">
<ul>
<li><span>≪ PREV</span></li>
<li><em>1</em></li>
<li><a href="/ver1/news/p=2/">2</a></li>
<li><a href="/ver1/news/p=2/">NEXT ≫</a></li>
</ul>
</nav>
CSS
/* @group Pager */
.pager {
margin: 10px;
}
.pager li {
float: left;
margin-right: 5px;
border: 1px #3366FF solid;
font-weight: bold;
}
.pager li:first-child,
.pager li:last-child {
border: none;
}
.pager li span,
.pager li a {
position: relative;
display: block;
padding: 3px 8px;
color: #3366FF;
}
.pager li a:link,
.pager li a:visited {
text-decoration: none;
}
.pager li a:hover,
.pager li a:active {
background-color: #AADDFF;
text-decoration: none;
}
.pager li em {
display: block;
padding: 3px 8px;
background: #3366FF;
color: #FFFFFF;
}
//floatクリア
ul.pager:after { content: " "; clear: both; display: block; height: 0; visibility: hidden; }
/* @end */
以下の要素は、HTML 5では廃止されている。
* acronym
* applet
* basefont
* bgsound
* big
* blink
* center
* dir
* font
* frame
* frameset
* isindex
* listing
* marquee
* nobr
* noembed
* noframes
* plaintext
* s
* spacer
* strike
* tt
* u
* wbr
* xmp
HTML 5で新規導入された要素
現在の仕様において、完全に新しく導入された要素は以下の通りです
* article … 「記事」を表すセクション要素
* aside … 補助的な情報を表すセクション要素
* footer … セクションのフッタ
* header … セクションのヘッダ
* hgroup … 見出し要素(h1 – h6) をまとめるための要素
* nav … ナビゲーションリンクを表すセクション要素
* section … 汎用的なセクション要素
* figure … キャプション付きのフロー要素。図表等の埋め込みが主な用途。
* source … video/audio内で使用され、リソースのURLやMIMEタイプの指定を行う
* video … 動画埋め込みに使用する要素
* audio … 音声埋め込みに使用する要素
* canvas … JavaScriptで操作可能なグラフィック要素
* output … 出力フォーム
* details … ユーザが必要に応じて参照可能な詳細情報を表す要素。
* menu … ツールバーや右クリック時などのメニューを表す要素
* bb … ブラウザの特殊な機能(Mozilla PrismのようなWebアプリのスタンドアローン化など)を呼び出すコマンドボタン(Browser Buttonの略)
* command … ユーザによって呼び出されるコマンドボタン。menuとともに用いられる。
* datagrid … 2次元のグリッド
* datalist … データのリストを定義するための不可視の要素。optionタグを用いて個々のデータを指定する
* dialog … 対話形式のテキストを表す。dt要素とdd要素を用いて、発言者と発言内容を表す
* progress … プログレスバー
* meter … メーター
* time … 日付を表す要素
* mark … 他の部分から参照されている、という意味合いが強いテキストの強調
また、ruby/rt/rp(ルビ要素)とembed(オブジェクトの埋め込み)は、ブラウザ固有の実装が進んでいた要素であるが、今回正式に仕様の一部となった。