講師だって、最初は初心者だもの［番外］これからのHTMLの話をしてみようか。──Chrome+HTML5 Conference 感想
── 森　和恵 ──

■HTML5の現状

W3Cが、HTML4とXHTML1.0の次世代として、HTML5の仕様を策定中です。
策定中ということは、まだ定まっておらず、変わる可能性があるということです。実際、私がHTML5の勉強を始めた昨年末からも、一旦は外れた要素が復活したり...といくつかの仕様が変更されています。

　｜現在は最終草案（Last Call Working Draft）が宣言されており、
　｜これ以降の大きな仕様変更は無いだろうといわれています。
　｜最終勧告（仕様の完成）は、2014年を目処に進められているそうです。

不確かな状態のなか、HTML5 が注目される理由はふたつ上げられます。

一つ目は、各ブラウザベンダーが積極的に活動していること。

そもそも、HTML5を最初に提唱したのはWHAT WG（ブラウザベンダーで構成されるグループ）で、それを元にW3Cが策定をしています。仕様が決まっても、ブラウザに実装されないと使えませんが、そんな経緯もあり、各ベンダーは策定中の早い段階でHTML5をブラウザに先行実装したり、関連イベントを開催したりと盛り上げています（今回のイベントも、Google Chromeが主催ですし）。

つまり、新しい技術に対する環境が整うのが（これまでより）早いだろうことを示唆しています。

二つ目は、HTML5がもたらす機能について。

より厳密に文書の構造や意味を指定する新要素が追加されたことで、コンテンツを機械的に処理するための仕組みができます（マシンリーダビリティの向上）。その結果、アクセシビリティの向上につながったり、コンテンツの二次利用が可能になったりします。

また、HTML5関連APIを使って、ブラウザでは出来なかった処理を可能とし、ウェブアプリケーションで出来る機能が大幅に増えます。

つまり、HTML5を取り入れることで、Webの機能や表現力が進化することを差しています。

■セマンティックなマークアップ

HTML5が目指す目標に「コンテンツのセマンティクス性の向上」があります。簡単に言うと、コンテンツ（記事）に明確な意味をつけるということです。

HTML5の新要素にarticle要素というのがありますが、その意味は「それ一つで独立・完結するコンテンツ」です。ページに <article>〜</article> でマークアップされた箇所があれば、それは制作者が読ませたい記事が含まれている所になります。

　｜【参考】article 要素 ─ HTML5.jp
　｜< http://www.html5.jp/tag/elements/article.html
>

例えば、Webページの記事だけを抜き出してスクラップするアプリケーションを開発する場合に、article要素内だけを対象にすれば簡単に実現できます。例えば、音声ブラウザで記事だけを読み上げる機能をつくることなども簡単に出来ます。例えば、検索エンジンが、article要素内だけを対象にクロールをするようになると、検索結果の精度の向上につながります。

このように、コンテンツのセマンティクス性を向上することで、ブラウザでWebページを閲覧するだけではなく、必要な部分を抜き出して二次利用するサービスへも発展させることができるのです。これは、Webを使って配信した情報の露出機会を増やすことにもつながります。

　｜現在、HTML5の新要素を正しく認識し、セマンティクスな処理をしている
　｜ソフトやサービスは殆どありません。今後の話になります。ただ、個人的
　｜に思うのは、一度作ったWebサイトの寿命は長いと数年にわたります。
　｜数年後を見越すと、そろそろ準備が必要なのではないかな？と思います。

　｜HTML5とは違いますが、
　｜例えば、facebookではOGPという技術を使って、
　｜決まった書式の<meta>をページに付加することで、
　｜facebook内でリンク紹介されるときのフォーマットを指定できます。
　｜これも、ある意味情報を外部から二次利用しているようなものですよね。
　｜【画面】< >
　｜【参考】OGP (Open Graph Protocol) とは何か ─ IT戦記
　｜< http://d.hatena.ne.jp/amachang/20110117/1295233078
>


コンテンツのセマンティクス性の向上は便利になった反面、Web制作者に高いマークアップスキルを要求することにもつながります。要素の正しい意味をきちんと理解し、コンテンツの内容を理解した上で、マークアップをおこなう必要があるからです。機械的に処理してマークアップをすることは、出来なくなります。

一例として、羽田野太巳さんのセッション「HTML5マークアップの心得と作法」でお聞きした、新しいマークアップの例を挙げます。

　　大特価　500円　<s>（ 定価 800円 ）</s>

これは、s要素（無関係という意味）を使ったマークアップ例ですが、「本来800円の品が特価で500円ですよ（いまの価格は500円で、以前の定価800円は無関係になりました）」という意味になります。

　　大特価　500円　<del>（ 定価 800円 ）</del>

もし、del要素（取り消しの意味）を使ってマークアップしてしまうと、「定価800円としたのは誤記で、本当は500円です」という違った意味になります。

このように文脈の意味がわかっていないと、マークアップ作業が出来ないため、より高いスキルを要求されることになります。

　｜余談ですが、s要素は、一旦外れた要素でした。↓では不在の要素とされ
　｜ています。
　｜< http://standards.mitsue.co.jp/resources/w3c/TR/2008/WD-html5-diff-20080122/
>
　｜それが、最近の仕様↓では、変更された要素として復活しています。
　｜< http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#changes-2011-04-05
>


■HTML5と関連API

HTML5の仕様には、APIという技術も含まれています。今回くわしくは述べませんが、いくつか例を挙げると......

・アプリケーションキャッシュ

ネットの繋がらないオフラインでもWebアプリを利用するために、閲覧者のマシン（ローカル）にデータを保存する仕組みです。Google DocsなどのGoogleのWebアプリケーションなどがこれに対応するとかなり便利になりますね。

　｜【参考】Google Docs ─ IT戦記
　｜< http://www.publickey1.jp/blog/10/60chromehtml5google_docschrome_event.html
>

・ビデオ要素

Flashプレイヤーなどのプラグインがなくても、ビデオ再生などの処理ができます。既にスマートフォン用ページとしてYoutubeなどが導入しています。

　｜【参考】Google Docs ─ IT戦記
　｜< http://ascii.jp/elem/000/000/590/590829/
>

このほかにも、さまざまなHTML5関連APIが準備されており、Webアプリケーションの表現力を豊にしてくれます。

■さて、じゃあどうする？

ここまでお話ししたように、HTML5を導入することで良い面もありますが、「仕様が確定していない」「すべてのブラウザで同じような挙動が見込めない」などのマイナス面もあります。

いくつかのセッションでも、それについて言及していたり、未対応ブラウザとの互換を保つための仕組みの話が何度か出てきていました。

　｜【参考】Modernizr ─ めざましTech
　｜< http://my.opera.com/MezamashiTech/blog/modernizr-html5
>
　｜※ブラウザのHTML5対応状況を調べるJSライブラリ

　｜【参考】Polyfill ─ ADC
　｜< http://www.adobe.com/jp/joc/devnet/dreamweaver/articles/html5pack_css3_part6.html
>
　｜※未対応ブラウザにCSS3標準機能を追加するライブラリ

個人的な感想としては、使い所を選んで、HTML5を積極的に使っていけばいいのかな？　と感じました。例えば、すべての環境でHTML5対応が出来ているスマートフォン用ページなんかに（使い所を的確に選ぶためには、提案側である自分の深い理解が必要ですが）。

テーブルからCSSレイアウトの時代に変化した時のように、のんびりした流れではなく、早い段階でこれが主流になるんだろうな...と感じました。ブラウザ環境も思ったより早く整いそうですし、導入するのメリットも高いからです。使えるのなら、使いたいですよね。

なにより危惧するのが、その技術が一朝一夕で身につくものではないので、制作者側の早めの準備開始が必要だと考えています。今回のセッションと大阪ローカルトラックの話を聞いて、よりその気持ちは強くなりました。変な意味ではなく、取り残されたくはないですよね。

　｜個人的な話（決意？）になりますが、私を含めて、勉強や経験が積める環
　｜境がまだまだ足りないんだなと感じました。
　｜特に、プログラム系の話が多くなるので、デザイナーやディレクターなど、
　｜プログラム系の話が苦手な人は、結構大変なんじゃないかな。
　｜勉強したいと思っている人に役立つような、コンテンツやセミナーを提供
　｜したい！　という意欲が、いま満々です。オー！


......ということで、今回の報告は終わりです。次回こそ、JQuery Mobileをもう少し突っ込んだり、Phone Gapなどスマホアプリを作るのに便利な機能をご紹介の予定です。（今回予定を変更してごめんなさい！）ではまた次回。

※記事へのご意見・ご要望は下記より受付ま〜す。お手柔らかに。
< http://bit.ly/gIHFfu
>

【森和恵 r360studio 〜 Web系インストラクター 〜】
<site: http://r360studio.com
>　<twitter: http://twitter.com/r360studio
>
<mail: r360studio@gmail.com >

近況報告1：
9月10日、金沢で開催される「WDF Vol.2」に登壇します。タイトルは「伝える技術」。人に何かを伝える（説明する）ためのポイントをお話しします。レクチャーやプレゼンなどで役立ててもらえると思います。お近くの方は是非ご参加くださいませ。
WDF Vol.2　< http://wdf.jp/vol02/
>

近況報告2：
facebookページをオープンしました。技術の習得に必要なさまざまな情報（動画教材・参考書籍・参考サイトなど）を紹介します。8月末まで、「いいね！」の全員プレゼント実施中〜。
サイト制作の教科書 r360study　< http://www.facebook.com/r360study
>