【特集】HTML5について
MOONGIFTでは技術コンサルティング、Webサイトプロデュース、テクニカルアドバイザリー、ITレポートサービスを承っております。ご用命、ご質問などはinfo@moongift.jpまでお気軽にどうぞ!
2009年になってから注目を集めているワードの一つにHTML5があります。それまでのHTML4に変わる勧告であり、今の時代に合わせた新しい仕様や逆に廃止される機能が存在します。HTMLは非常に柔軟な言語であり、そのために逆に煩雑な利用が行われてきた歴史があります。その結果、ブラウザごとに解釈が異なっていたり、独自の拡張を必要とするケースが多々ありました。ですがHTML5へ発展することによって、それらの仕様はある程度吸収されることとなり、Web開発における新しい道が見える可能性があります。そこで今回はこのHTML5が何であるか、HTML4と何が変わるのかについてまとめてみます。
HTMLの歴史
まず現状のHTML4についてですが、これは1997年にW3C勧告になりました。そのため既に12年近くも標準として利用されてきたという歴史があります。逆に言えば既に12年も経過し、時代の流れに合わなくなってきたという実情もあります。そこで現在HTML5の策定が行われています。このHTML5は未だにドラフトの状態であり、予定では2010年9月に最終版がリリースされる予定になっています。つまり今年です。
加わるタグ
HTML5では幾つかのタグが追加されます。例えば以下の通りです。
- section
- article
- aside
- header
- footer
- nav
これらは文書の構造を示すのに使われます。headerタグはHTML文書自体のヘッダーとして使われてきましたが、HTML5ではbodyタグ以下に配置され、文書のヘッダー情報を意味する所として使われるようになります。以下のように利用が想定されるようです。
<header>
<p>ようこそ！</p>
<h1>MOONGIFT</h1>
</header>
さらに続けます。
- dialog
- figure
- audio
- video
- source
- embed
dialog要素はチャットの会話を表現したりする際に利用するとのことです。figure要素は動画や音楽の説明文をつけるために使う要素です。そしてHTML5で有名なaudio/videoタグがあります。この二つはまさにYoutubeのような動画共有サイトや、ポッドキャスティングのような音楽配信サイトが隆盛になった今の時代にマッチしたものになります。
それ以外にも多数の要素が追加されています。
- m
- meter
- time
- canvas
- command
- datagrid
- details
- datalist
- datatemlilate
- rule
- nest
- event-source
- outliut
- lirogress
これらの要素はもちろん全て使いこなす必要はありません。実際、現状でもlink要素とrelを使ってナビゲーションを実現できますが、これを補助するブラウザは限られています。
<link rel=”home” title=”ホーム” href=”http://ホーム/の/URL” />
<link rel=”prev” title=”前ページのタイトル” href=”http://前ページ/の/URL” />
<link rel=”next” title=”次ページのタイトル” href=”http://次ページ/の/URL” />
他にもH1~H6を適切に使いこなしていたり、address要素やfieldset要素を活用しているというデザイナーの方は少ないのではないかと思われます。table要素にもtheadやtbody、tfootといった要素が現状でも定義されていますが、Webブラウザがサポートしていないために使われていないケースが多いようです。では実際の所、こうした追加要素を活用するメリットはどこにあるのでしょうか。
要素を活用するメリット
これらのタグを使うメリットとしては、より文書の適切な構造化が可能になり、検索エンジンでのインデックス化が効率化したり、音声読み上げブラウザやテキストブラウザ等の特殊なブラウザにおいても適切な情報配信が可能になるということです。またaudio/video要素に対してsource要素を組み合わせることでユーザエージェントごとに最適なデータを配信できるようになるとのことです。
もう一つのメリットとしてWebブラウザが対応していればより柔軟な表現が可能になります。例えばvideo/audioタグは現状でもFlashのembedタグでカバーできるものですが、Flashに頼らなくともHTML5に対応したブラウザであれば情報の配信が可能になるということです。他にもdatatemplate、rule、nestを使うことでHTMLテンプレート機能を使えたりします。
なくなる要素
逆にHTML5でサポートされなくなる要素も存在します。それが以下の通りです。
- basefont
- big
- center
- font
- s
- strike
- tt
- u
これらはいわゆる装飾系の要素で、CSSで行うべきという判断になったようです。
さらに以下の要素もなくなります。
- frame
- frameset
- noframes
昔からあるWebサイトではこのフレームを活用したサイトを多々見かけます。また開発者向けのドキュメント（JavaDocやRDocなど）もこのframe要素を使ったドキュメントを出力します。このフレーム関係の要素がなくなる理由としては、ユーザビリティやアクセシビリティに影響し、エンドユーザに良くない結果をもたらすためと言われています。実際、フレームを使ったサイトではURLが変化しないために使い勝手が悪かったり、デザイン上もあまり良いものが多いとは言えません。回避策としてはiframe要素やcssのoverflow:scrollを使うという方式があります。また、フレームはHTML4で記述し、フレームの内容はHTML5で記述するという選択肢もあります。これが最も現実的な解決策になりそうです。
後方互換性について
HTML5では元々各ブラウザに対してHTML4で書かれたWebサイトが正しく表示できるようにすることとされています。つまりHTML5に対応したからと言ってこれまでの機能を全てなくす訳ではなく、HTML4の対応もそのまま継続して行われるということになります。
新しいAPI
マークアップ系の他にも幾つか新しい機能（API）が追加されることが決まっています。主なものは以下の通りです。
- キャッシュ
- メッセージ
- Web Workers
- ストレージ/データベース
- ソケット通信
- 位置情報
- ドラッグアンドドロップ
- 戻るボタン
- ローカルファイル操作
- ファイルアップロード
キャッシュ
アプリケーションキャッシュはmanifestと呼ばれるファイル（index.manifestといった形式）を用意し、その中でキャッシュするファイル群を定義することでローカルでWebアプリケーションキャッシュを実現します。HTMLファイルはもちろん、JavaScriptやCSSファイルをキャッシュすることでWebアクセスの高速化にも貢献します。これはオフライン時のWebアプリケーション利用の際にも使われます。
メッセージ
メッセージを使うと別なウィンドウやフレーム間においてメッセージを飛ばし合って通信することができます。これがGoogle Chromeのギャラリーサイトでボールがウィンドウ間を移動するデモなどで実際の動作を見ることができます。元々同じサーバ間であればAjaxを使って実現することもできなくもないのですが、同じコンピュータのウィンドウ間だけで通信できることと、異なるドメイン間でも通信ができるというのが特徴になります。
Web Workers
Web WorkersはJavaScriptを使ってバックグラウンド処理を実現するAPIです。現状、JavaScriptでの処理中はブラウザのロックが発生してしまうため、長時間の処理には向いていませんでした。Web Workersを使うことでマシンパワーを活用したパワフルなWebアプリケーションが実現できるようになります。なおWeb Workersで処理されているコード（ワーカー）は表示されているドキュメントやウィンドウオブジェクトにはアクセスできません。そのため文字列を渡して処理させるような、メッセージ処理的なものに向いているようです。
ストレージ/データベース
ストレージはKVS（キーバリューシステム）型の単純なデータストア、データベースはSQLも使えるデータベースシステムになっています。特に言及されている訳ではありませんが、SQLite3をバックエンドに利用しているケースが多いようです。SafariやFirefoxではSQLite3を利用しています。
ソケット通信
HTTP以外のプロトコルを使ってサーバ間通信を行う際に利用するのがソケット通信です。wsまたはwssというプロトコルを頭に付けます。コネクションは持続的に可能なようで、現状で言うロングポーリングに似た操作やプッシュ型のデータ配信もできるようになります。
位置情報
今やモバイルでは当たり前になっている、位置情報に関するAPIも仕様が定められています。これによりWebサイト上のJavaScriptから位置情報の取得が可能になります。現状でもiPhoneのSafariは位置情報配信に対応しています。これは主にモバイル向けに便利な機能になると思われます。
ドラッグアンドドロップ
今でもJavaScriptを使ってドラッグアンドドロップを実現しているライブラリがありますが、それをもっと簡単に実装できるようになります。ドラッグしたいオブジェクトには「draggable=”true”」を追加するだけで（Safari/Firefoxでは動かないようですが）ドラッグ可能に、ドロップされるオブジェクトもハンドリングが容易にできます。ローカルファイルのドラッグアンドドロップではないのでご注意ください。テキスト等の文字列自体のドラッグアンドドロップであればローカルアプリケーションとの連携もできるようです。
戻るボタン
詳細が少し不明なのですが、恐らくAjaxを利用している際にも戻るボタンを正しく動作させられるAPIが追加されるようです。現状ではAjaxアプリケーションでは履歴がうまく管理されず、全く違うページに戻ってしまうことがあります。Gmail等ではそれをうまく解決しているようですが、同じような操作をブラウザネイティブにサポートするようです。
ローカルファイル操作
これはFirefox 3.6βからサポートが開始されています。Webアプリケーションからローカルのファイルを操作できるようにします。そのため画像編集のWebアプリケーション等に対して、都度ファイルをアップロードする必要がなくなります。ただしサーバ上に保存したい場合はアップロードが必要です。セキュリティの問題が見え隠れしますが、これが可能になるとWebアプリケーションをローカルアプリケーションのように使えるようになりますので期待したいAPIです。
ファイルアップロード
HTML5ではユーザが指定したファイル（複数可能！）にJavaScriptからアクセスできるようになります。ファイルの内容をdata URIを使って読み込むこともできるようで、画像等であればそのまま表示させることも可能です。ファイルアップロードの仕組みがさらに便利にできるようになりそうです。
新規サイトはどうすれば良いか
今後新しいサイトを構築する場合はどのような対応が考えられるでしょうか。一つはHTML4のみで構築するという選択肢があります。この場合、HTML5の新しい機能は使えませんが、後方互換性によって表示が乱れることはなく、さらに既存の知識で構築が可能です。次の選択肢としてHTML5に対応したブラウザのみアクセスできるようにするという考えもあります。ですが現時点でHTML5に対応したブラウザはまだまだ多くなく、IE6などのシェアがまだ多い現在では選択できない状況です。最後にHTML4とHTML5の両方でサイトを構築し、ユーザエージェントによって振り分けるという方式も考えられます。開発コストはかかってしまいますが、新しい技術を取り入れていく上では考えたい選択肢になります。
現状のHTML5対応について
実際にHTML5サイトを構築しようと考えた場合、現実的にブラウザがどの程度対応しているかが重要になります。対象として考えられるのはSafari4/Google Chrome3/Firefox 3.5/Opera10になります。現時点ではHTML5を積極的に導入するのは現実的ではなく、10月を考えるとSafari3等は対象外になります。IEについてはIE8からHTML5への取り組みが行われていますが、section要素にも対応していない等中途半端な状態です。今後バージョンアップを行って対応する可能性もありますが、結果的にはIE9での対応になると考えられます。ちなみに11月に行われたPDC2009においてIE9に関する開発状況を説明しましたが、その際にはHTML5への言及は行われず、Silverlightを打ち出すという姿勢が見えていたそうです。これはブラウザ間の互換性やオープンプラットフォームを期待する動きには逆走するものであり、開発者離れが続くことになりそうです。
IE9発表、JS高速化も現状ではHTML5関連は言及なし － ＠IT
http://www.atmarkit.co.jp/news/200911/19/ie.html
以下はHTML5サイトのサンプルです。
YouTube HTML5 Demo
アップル - Safari - Safari 4の登場です。 - 目の前にひろがる新しいウェブの世界。
http://www.apple.com/jp/safari/
Flashはなくなるか
Flashに変わる技術として注目されているのがCanvasです。ドロー系の表示はもとより、アニメーションも可能です。さらにデータがXML形式であるためにシステムとの親和性もあります。現状のFlashでは動画や音楽の再生で一歩リードしていますが、video/audio要素によってそのシェアが取られるかも知れません。が、インタフェースの細かな制御（フルスクリーン表示や他の情報と合わせると言ったこと）がCanvasだけでは難しいため、凝った機能にしようとするとFlashに頼らざるを得ないようです。
動画の形式は
今、Flashビデオ形式がオンライン動画共有のデファクトになっていますが、これは別なファイルから変換されたものが殆どです。多いのはWindows MediaまたはMPEG4になります。HTML5では元々MPEG4を考えていたようですが、技術がApple所有になっているために採用が見送られることになりました。そのため最も有力なのはオープンソースの動画形式OGGになります。とは言えOGGは一般的に知られていないこと、品質がMPEG4に比べると劣るために、普及するかどうかは疑問です。そのためHTML5の仕様としてはMPEG4の決定はできないまでも、結果的にデファクトスタンダードとして定着するのではないかと思います。
音楽の形式は
音楽配信ではMP3が最も有力になっています。デファクトスタンダードになっている現状であり、同じくオープンソースのOGGもありますが、シェア比率を考えるとMP3一本のほうがコストは低くなりそうです。
ライブラリ
HTML5が注目を集める中、それを使ったまたは便利にするためのライブラリが続々と出てきています。幾つかご紹介します。
Google Chrome Frame
http://code.google.com/intl/ja/chrome/chromeframe/
Google Chrome FrameはGoogleが開発したIE向けのアドオンで、HTML5のサイトに対してIEではなくChromeをレンダリングエンジンにするというソフトウェアです。レンダリングエンジン自体が切り替わるので、HTML5のサイトも問題なく動作します。マイクロソフトは当然反発していますが、IE6/7のシェアが高い現状を考えるとこの方式は意外と現実的かも知れません。
gwt-mobile-webkit
http://code.google.com/p/gwt-mobile-webkit/
gwt-mobile-webkitはGoogleの提供するJavaでAjaxにも対応したWebアプリケーションを開発できるライブラリGWTをスマートフォンにも対応させるライブラリです。データベースやストレージ、位置情報といったHTML5のAPIにも対応しています。
Gears
GearsはHTML5という訳ではありませんが、オフラインサポートやデータベース機能などHTML5に近い機能を現時点でも利用できるようにするライブラリです。IE/Firefox/Google Chrome/Safari/Windows Mobileなど多数のブラウザにも対応しているのが特徴です。
svgweb - Project Hosting on Google Code
http://code.google.com/p/svgweb/
SVGはCanvasタグを使って描画できますが、IEは対応していません。そこでSVGWebではIEのような非対応ブラウザでもFlashを使ってSVGの描画や利用ができるようにしています。このような中間技術もまた、今後増えてくると思われます。
Welcome - WidgetPad.com
WidgetPad.comはiPhone等でも動作する、HTML5を使ったWebアプリケーション開発プラットフォームです。オンライン上で開発し、その結果をウィジェットとして登録できます。開発者はPukiwikiで知られる増井氏です。
情報サイト
以下はHTML5に関する情報サイトです。まだ現状ではドラフトの段階にあるため、情報は随時更新されています。適宜チェックしてください。
HTML5.JP - 次世代HTML標準 HTML5情報サイト
HTML5の仕様に関するトピックをまとめています。
HTML5サンプル集 - 株式会社あゆた
http://ayuta.co.jp/html5-samples/index.html
（株）あゆたの提供。今回紹介したAPIのサンプルが多数紹介されています。
デザイナーのためのHTML5リソースまとめ | DesignWalker
http://www.designwalker.com/2009/11/html5.html
デザイナーの方にとって役立つHTML5関連のリソースをまとめています。
HTML 5 における HTML 4 からの変更点
http://standards.mitsue.co.jp/resources/w3c/TR/2008/WD-html5-diff-20080122/
HTML4とHTML5の違いをまとめています。要素関連です。
【特集】詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 | エンタープライズ | マイコミジャーナル
http://journal.mycom.co.jp/special/2009/html5-2/menu.html
マイコミジャーナルによるHTML5の記事。書かれているのは（株）あゆたの白石氏。
HTML5 compatibility
http://www.quirksmode.org/dom/html5.html
各ブラウザにおけるHTML5の対応をまとめています。最新のブラウザはなし。
まとめ
HTML5はブラウザの互換性とは別に、新しい技術を使ったWebサイトを構築する上では欠かせない技術になります。新しい操作、新しいユーザビリティが追加されるので、実際に利用する側としても慣れるまで少し時間がかかるかも知れません。またIE6～8のような非対応系ブラウザのシェアが高い状況では実践投入は及び腰になる可能性があります。
もっとも導入しやすいのはスマートフォンの分野になるかも知れません。iPhoneやAndroid、Plam PreではWebKitベースのブラウザを搭載していますのでHTML5への対応も十分です。また、位置情報をはじめとするモバイルならではの機能も利用できます。
MOONGIFTでは技術コンサルティング、Webサイトプロデュース、テクニカルアドバイザリー、ITレポートサービスを承っております。ご用命、ご質問などはinfo@moongift.jpまでお気軽にどうぞ!
