この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。
※この記事は 2010.01.18 時点のものです。現在の内容とは異なる内容が含まれている場合がございますので、ご注意ください。
こんにちは。エンジニアの はる です。
今回は巷で話題の「HTML5」について、
・HTML5とは？
・HTML5って何が変わるの？
・HTML5っていつから気にしなきゃいけないの？
という視点から、まずはHTML5をざっくりと知っていただくための入門的な内容を書いてみたいと思います。
・HTML5とは？
W3Cより2008年1月22日にドラフト（草案）が発表されたHTMLの最新バージョン。※2010年9月頃に正式版勧告予定。
HTML4と比べ、WEBアプリケーション向けの機能が大幅に強化されており、また、HTML4.01で非推奨とされていた要素の一部（font要素やcenter要素等）が廃止されてる予定です。
主な追加機能としては、
■新しい要素や属性の追加
（１）入力フォームの強化
（２）canvas要素
（３）文書構造を示す要素の追加（header要素、nav要素 等）
（４）その他（menu要素、command要素 等）
■新しいAPI
（１）簡易データベース（Web Storage）
（２）マルチスレッド（Web Workers）
（３）双方向通信（Web Sockets）
（４）その他（アプリケーションキャッシュ、ドラッグ＆ドロップ等）
上記が主要な追加機能となります。その他にも多くの機能追加があるのですが、今回は割愛させていただきます。
それでは、次項にて具体的な各機能の内容をご紹介します。
———————————————————–
・HTML5って何が変わるの？
■新しい要素や属性の追加
（１）入力フォームの強化
□type属性に指定できる型が増える
HTML5からは、input要素のtype属性に指定できる型が増えます。
search、datetime、date、month、number、range、tel、email 等…計23種類になる見込みです。
例えば、「date」型では、date型の入力フォームをクリックするとカレンダーが表示され、そのカレンダーから日付を選択するインターフェイス（※Operaで確認できます。）がブラウザで実装され、
、「range」型では、スライダーコントロールが表示され、感覚でスライダーを動かして入力するインターフェイス（※Safariで確認できます。）がブラウザで実装されます。
例）
このように今までAjaxやFlashで実装されていたUIがHTMLの標準機能として実装可能になり、type属性の指定型が増えたことで入力項目の型をソースレベルで明確化することができます。
range型を携帯で入力する場合は左右ボタンは使えないし、どうするんだろう・・・といった不安はあるものの、優れたUIをエンドユーザーが利用できる機会が多くなるのは嬉しいですね。
□フォームの値を検証する属性が追加
これまでJavascriptで実装されてきたフォームの値の検証もHTMLの標準機能として、ある程度行えるようになります。
具体的には、必須項目のチェックと正規表現によるフォーマットチェックとなり、submitボタンを押した際にチェックが行われます。
不正値が発見された場合には不正値が入力されている項目が赤く表示され、メッセージが表示されます。（※Operaで確認できます。）
例）
必須項目のチェック（required属性）
フォーマットチェック※正規表現で指定（pattern属性）
（２）canvas要素
canvas要素は、HTML（＋CSS3）で自由にグラフィックの描画(2D,3D)、写真合成、アニメーションの作成等を可能にする要素です。
canvas要素については、説明するよりも実際に見てみたほうが分かりやすいかと思いますので、いくつか参考になるサイトをご紹介します。
□Canvas参考サイト
- ・canvas要素 + css3アニメーション
- ・canvas要素 + audio要素
- ・canvas要素 + jQuery
HTML5＋CSS3＋javascriptでゲーム等も作成可能とされていますが、現状では、3D、アニメーション、テクスチャのレンダリングが重く感じてしまいます。
canvas要素を利用することにより、AjaxやFlash、Silverlightで実装されていたリッチコンテンツをHTML5でより容易に実装可能になります。
Flash Developerとしては、Flashとの機能的な違いや両者の棲み分けがどうなされるのかという点が気になるところではありますが、リッチコンテンツ制作の間口が広がることでインターネットコンテンツの幅も広がるといいなと思います。
（３）文書構造を示す要素の追加（header要素、nav要素 等）
header要素、footer要素、nav要素、article要素等…HTMLの文書構造を明確に示すための要素が追加されます。
文書構造が明確になることにより、検索エンジンのインデックス化処理（検索ページの索引作り）が容易になります。
※現時点では、検索エンジンのインデックス化処理が容易になるというだけであって、HTML5にすることで直接的なSEO効果があるわけではないようです。
（４）その他（menu要素、command要素 等）
その他にも、menu要素、command要素、progress要素、meter要素等々…ここでは紹介しきれない程の新要素や、HTML4の時には用途が変わって実装されている要素があります。
興味のある型は是非調べてみてください。
■新しいAPI
（１）簡易データベース（Web Storage）
クライアント端末内にデータを保存するためのAPIが提供されます。簡易データベースの種類には「キー／バリュー」形式のものとデータベース形式（※Safariの場合SQLiteを使用しているようです。）（※Safariの場合、バックエンドではSQLiteを使用しているようです。）のものの2種類があります。
- Storage
キー／バリュー形式で保存
ドメイン毎の保存(永続可能)、ウィンドウ毎の保存(ウィンドウを閉じるまで)が可能
- データベース
SQLを用いて保存（※トランザクション必須）
非同期APIと同期APIでのアクセスが可能（永続可能）
簡易データベースを活用することで、今まで逐一サーバーと通信をして保存していたデータを必要な時のみ適宜通信をして保存したり、オフラインで編集したものをオンライン時にサーバー側に保存する等、様々な使い道がありそうです。
□参考サイト（※Safari、Chromeでご覧ください）
- WEB Storage ＋ オフライン作業（manifest）
（２）マルチスレッド（Web Workers）
バックグラウンドで動作するjavascriptスレッドのことで、これまでは計算処理を行うjavascriptがあった場合に、その処理が完了するまでUI側の操作が一時的に行えない状態になる等の影響がありましたが、
Web Workersを使用することで、例えば計算処理をワーカに渡し、UI側は計算処理中でも操作可能にするといったことも可能となります。
また、Web Wokersは、複数立ち上げることが可能（マルチスレッド）であり、postMessageを使用することで、Worker間、Workerと表示側のjavascript間等で処理結果の受け渡しや協調が可能です。
ただし、Web WorkersはDOMにアクセスできないので、注意が必要です。
（３）双方向通信（Web Sockets）
サーバーサイドプロセスとの双方向通信を可能にするAPIであり、HTTPを使用せずに効率的な双方向通信が可能となります。
HTTPヘッダやCookie情報が含まれない通信のため、トラフィックを軽減できます。
（４）その他（アプリケーションキャッシュ、ドラッグ＆ドロップ等）
その他にも、アプリケーションキャッシュ（manifest）、ドラッグ＆ドロップ機能等の新しいAPIがあります。興味のある型は是非調べてみてください。
———————————————————–
・HTML5っていつから気にしなきゃいけないの？
HTML5がどんなに話題になってもエンドユーザーが満足に利用できる環境がなくては普及はしません。
つまり、利用者側がいつから満足に使用できるかが開発者側の対応が必要になるタイミングでもあるわけですが、これはHTML5に対応したブラウザのシェアによるかと思います。
各ブラウザの対応状況は、下記サイトで確認することができます。
- http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/（※Modernizrで対応状況を調査しているようです）
上記サイトで各ブラウザの対応状況をみてみると、webkitベースのブラウザ（Safari、Chrome）はかなりの対応率ですが、IEの対応状況が芳しくありません。今後の対応予定もしばらくは期待できなそうですね。
Operaは現在はまだまだといった結果ではありますが、本格的にHTML5対応を宣言しているので今後に期待です。
正直なところ、PCのブラウザが未だIEが高いシェアを保っているため、しばらくは普及が見込めなそうです。
ただし、ブラウザの入れ替わりが比較的早い携帯電話では昨今のスマートフォンブームと相まって、PC版よりも早く標準になる可能性はあるのではないでしょうか。
今回ご紹介したHTML5についての記事は、HTML5の中のほんの一部の内容です。興味のある方は是非調べてみてはいかがでしょうか。
□その他の参考にさせていただいたサイト
- 5分で把握するHTML5 – Google Developer Dayセッションリポート
http://journal.mycom.co.jp/articles/2009/06/15/gdd1/index.html
- 詳解! HTML 5と関連APIの最新動向 – 新タグ&API編
- 詳解! HTML 5と関連APIの最新動向 – Webアプリ開発編
- HTML5リファレンス
connpass
Peatix
Wantedly
デザインチームnote