HTML5に追加された仕様について、具体的な内容を紹介します。HTML5にはHTMLのバージョン5という狭義の意味とCSSやJavaScriptなどの周辺技術までを含めた広義の意味がありますが、本書では、特に断りがない場合はHTML5というときは、「広義のHTML5」として使用していきま(ただし、本節でのHTML5の説明に関しては狭義のHTML5として使用しています)。
本書で扱うHTML5はHTMLのバージョン5になります。2012年1月時点では、まだ最終草案段階で、2014年までに正式な勧告を目指しているとW3Cは発表しています。
PART1で説明した通りHTML5はまだ正式な勧告がなされていないため、Webブラウザベンダー各社が先行してHTML5の機能を実装しているという現状であり、対応状況もばらつきが出ています。またHTML5に対応していないブラウザもまだまだ多く使用されており、PCやモバイルのWebサイト/WebアプリケーションをすべてHTML5に移行して作成することは難しい状況といえます。しかし、本書のようにターゲットをiOS/Android用アプリケーションに絞った場合、Webブラウザ間の表示や動作の互換性を保つ処理(クロスブラウザ処理)を行う必要はありません。iOS/Androidで実現可能なことだけ気をつけてアプリケーションを作成すればいいので、現段階でもアプリケーションを作成することは十分現実的であると言えるでしょう。
HTMLの登場から十数年たってようやくメジャーアップデートとなったHTML5は、時代の変化を取り入れてマルチメディアコンテンツやJavaScriptと連携した機能が多く追加されています。追加された機能には、HTML単体としての変更点もありますが、主だった新機能は、HTML+CSS+JavaScriptを連携させることによって動作させることができるものがほとんどです。
HTML5で変わったこと
CSSやJavaScriptを含まない、純粋にHTMLとしての変更点は次のようなものがあります。
要素(タグ)の追加、削除
DOCTYPE宣言の変更
文字コードの指定方法の変更
Viewportによる画面サイズに合わせた表示設定
動画/音声ファイルの扱い
HTML+CSS+JavaScriptで追加された主な機能
Geolocation
CANVAS
Web Storage
Web Workers
Offline Web Application
Web Socket
HTML5の新機能をひとつひとつ見ていきましょう。
HTML5では、<header>タグや<nav>タグのように、タグ自体が構造上の意味を表すものが多く追加されました。
HTMLの構造自体に意味を持たせることによって、コンピュータ自身がサイト上のデータをみてそれがナビゲーションなのか、コンテンツなのかを自立的に分類することができます。これを突き進めるとセマンティックWebが実現されます。セマンティックWebとは、情報にメタデータを付与することで検索ロボットなどのコンピュータが自立的にに効率よく情報を収集/分類しやすくなるための技術の総称で、その最終的なゴールはバラバラに点在しているWebサイトの情報に意味や関連性を持たせてWeb自体を1つのデータベースにしてしまおうというものです。
また、逆にfontやstrikeなど見た目だけを指定する要素は削除されています。
- HTML5で追加された要素
- section、article、aside、group、header、footer、nav、figure、figcaption、video、auto、source、track、embed、mark、progress、meter、time、ruby、rt、rp、bid、canvas、command、details、summary、datalist、keygen、output
- 削除された要素
- basement、big、center、font、strike、tt、frame、frameset、noframes、acronym、applet、isindex、dir
- HTML5のDOCTYPE宣言
- <!DOCTYPE html>
- HTML4のDOCTYPE宣言
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
文字コードの指定方法も変更されています。これまで同様の記述方法を使用しても問題はありませんが、charsetを使用して短く記述することができます。
- <meta charset="UTF-8">
Viewportとは、画面サイズの異なるスマートフォンの機器で横幅や文字の大きさ、拡大縮小などが設定できる機能です。これを設定していないサイトをスマートフォンで表示した場合、文字が小さく表示されたりします。
Viewportでは横幅、高さ、初期倍率、最低倍率、最高倍率、拡大縮小の可否の6項目が設定できます。
詳細は後述
Flashが動作しないiPhoneユーザーにとって最もHTML5の恩恵を受けることができる機能ではないでしょうか。HTML5ではFlashなどのプラグインをインストールしなくても動画/音声ファイルを再生することができます。
2012年1月時点での主要ブラウザの対応動画/音声ファイル形式を次の表にまとめました。
動画ファイル H.264 Ogg/Theora Internet Explorer 9 ○可能 ×不可 Safari 5 ○可能 ×不可 Firefox ×不可 ○可能 Google Chrome ○可能 ○可能 Opera ×不可 ○可能
音声ファイル MP3 AAC Ogg/Vorbis Internet Explorer 9 ○可能 ○可能 ×不可 Safari 5 ○可能 ○可能 ×不可 Firefox ×不可 ×不可 ○可能 Google Chrome ○可能 ○可能 ○可能 Opera ×不可 ×不可 ○可能
主にGPSに対応したスマートフォンに向けた機能です。GPS機能を利用して、緯度/経度/高度などの情報を取得することができます。またGoogle Map APIなどのサービスと連携して、地図を表示させたりすることも可能です。
HTMLの<canvas>タグ上に図形や画像を描画できる機能です。JavaScriptのsetInterval()関数などと併用してアニメーションを表現することもできます。また、読み込んだ画像を切り抜いたり回転させたりすることもできます。
データをローカル上に永続的に保存することができる機能です。Web Storageは大きく「Local Storage」と「Session Storage」に分かれ、Local Storageはブラウザを閉じてもデータを保持し続けることが可能で、Session Storageはブラウザを閉じるとデータは破棄されます。
JavaScriptでマルチスレッドプログラミングを実現することができる機能です。ある処理を行っている最中にバッググラウンドで別の処理を走らせることが可能になります。
Webアプリケーションをオフライン時にも使用することができる機能で、オフラインになった場合でもLocal Storageなどのキャッシュ機能を使用してアプリケーションを継続することができます。
TCP上でHTTPコネクションとは別の軽量プロトコルを使用し、サーバーとのデータの送受信を行うことができます。Ajaxでは実現できなかったサーバーからのプッシュ配信も可能となっていて、Ajaxに変わるリアルタイムな通信手段として期待されています。
Dreamweaverで作るiPhone/Androidアプリ入門「HTML4.01からHTML5にバージョンアップする」といったとき、ソフトウェアをアップデートするように自動的にすべてのファイルがHTML5になるわけではありません。私たちWebデザイナーやエンジニアがHTML5でHTMLコードを記述してはじめてバージョンアップされることになります。しかし、HTML5でコードを記述しても、ブラウザがHTML5に対応していなければ期待する表示や動きを実現することはできません。しかし、スマートフォンに目を向けると、iPhoneのSafariもAndroidの標準ブラウザもいち早くHTML5の仕様を取り込んでいて、現時点でもアプリケーションを実装するための機能は多く提供されているといえます。こうした状況は特にFlashが動かないiPhoneでアプリケーションを作成したい開発者にとっては助け舟のような存在で、HTML5はFlashに代わるスマートフォン用アプリケーションのために作られたプラットフォームであると言えるかもしれません。また、PCサイトのようにブラウザ間の表示や動作の違いを考慮する必要がありませんので、HTMLでアプリケーション作成をする際の負担となっていたクロスブラウザのチェックが不要になることも魅力的です。