CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

Baba


2011年5月25日に最終草案が発表され、2014年予定の勧告に向け 進んでいるHTML5ですが
HTML5ってなんなの?という方は まだまだいらっしゃることと思います。

今回はHTML4との違い、変更点の中から ぜひともおさえておきたいことをまとめさせていただきたいと思います。

HTML4からHTML5へ

現在標準で使用されているHTML4は 文章による情報伝達を主な目的として策定されたものですが動画や音声の再生、メールの確認、ファイルの共有等、あらゆることをWebブラウザ上で対応してしまおうとする現在では あまりにも機能不足ということで 次のバージョンにあたるHTML5が策定されています。
HTML5では 今までFlash等のプラグインにより補っていた動画や音声の再生、画面の描画、ローカルストレージ等の機能がHTMLの標準機能として用意されています。

画面描画機能の強化

今までは画面の描画はimg要素で画像ファイルを表示させるという対応でしたが、canvas要素やsvg要素を使用することでHTML上で描画できるようになります。

canvasとsvgで同じような図形をサンプルで用意しました。

Canvas

Canvasについては ご存知の方が多いのではないかと思いますが、JavaScriptを使用し、canvas要素へ図形等を動的に描画したり、動かしたりすることができます。

html

<canvas id="canvas" width="300" height="200"></canvas>

JavaScript

window.onload = function() {
	var canvas = document.getElementById('canvas');
    var cc = canvas.getContext('2d');

	var top = 30;
	var width = 60;
	var height = 100;
	var first = 30;
	var padding = 30;

	var x = first;

	cc.beginPath();
	cc.lineWidth = 5;
	cc.moveTo(x, top);
	cc.lineTo(x, top + height);
	cc.moveTo(x, top + height/2);
	x = x + width;
	cc.lineTo(x, top + height/2);
	cc.moveTo(x, top);
	cc.lineTo(x, top + height);
	x = x + padding;
	
	cc.moveTo(x+width,top);
	cc.lineTo(x, top);
	cc.lineTo(x, top + height/2);
	cc.arc(x+width/2, top + height*6/9, width*5/9,220*Math.PI/180, 140*Math.PI/180, false);
	
	cc.stroke();	
}

SVG

SVGは過去の記事でも取り扱ったことがありますが、jpgやgif等と同じ 画像形式の1つです。
同時にXMLで記述されているテキストデータでもあるため、テキストエディタで開いて編集できるというとても変わったフォーマットです。

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
<line x1="30" y1="30" x2="30" y2="130" stroke="#000000" stroke-width="5px" />
<line x1="30" y1="80" x2="90" y2="80" stroke="#000000" stroke-width="5px" />
<line x1="90" y1="30" x2="90" y2="130" stroke="#000000" stroke-width="5px" />
<line x1="120" y1="30" x2="180" y2="30" stroke="#000000" stroke-width="5px" />
<line x1="120" y1="27.5" x2="120" y2="80" stroke="#000000" stroke-width="5px" />
<path d="M120 80 A33.3 33.3 0 1 1 120 110" fill="none" stroke="#000000" stroke-width="5px" />
</svg>

HTML5ではsvg要素が追加され、HTMLでSVGを記述することができるようになりました。
※現時点で対応しているブラウザは無し??

フォーム機能の拡張

お問い合わせのフォーム等に使用されているform要素についても機能が拡張されています。

今までは入力した値の必須入力チェックや形式チェックはJavaScriptやPHP等のサーバーサイドプログラムで対応していましたがHTMLで簡単に対応することができるようになりました。
(複数の項目が関わるもの等、複雑なチェックは やはり難しい??)

search
tel
url
email
datetime
date
month
week
time
datetime-local  
number
range
color


ソース

<form action="/sample/abouthtml5/form.html" method="get">
	<table>
	<tr>
		<th>search</th>
		<td><input type="search" name="search" autocomplete="on" /></td>
	</tr>
	<tr>
		<th>tel</th>
		<td><input type="tel" name="tel" autocomplete="on" /></td>
	</tr>
	<tr>
		<th>url</th>
		<td><input type="url" name="url" /></td>
	</tr>
	<tr>
		<th>email</th>
		<td><input type="email" name="email" /></td>
	</tr>
	<tr>
		<th>datetime</th>
		<td><input type="datetime" name="datatime" /></td>
	</tr>
	<tr>
		<th>date</th>
		<td><input type="date" name="date" /></td>
	</tr>
	<tr>
		<th>month</th>
		<td><input type="month" name="month" /></td>
	</tr>
	<tr>
		<th>week</th>
		<td><input type="week" name="week" /></td>
	</tr>
	<tr>
		<th>time</th>
		<td><input type="time" name="time" /></td>
	</tr>
	<tr>
		<th>datetime-local&nbsp;&nbsp;</th>
		<td><input type="datetime-local" name="datetime" /></td>
	</tr>
	<tr>
		<th>number</th>
		<td><input type="number" name="number" /></td>
	</tr>
	<tr>
		<th>range</th>
		<td><input type="range" name="range" /></td>
	</tr>
	<tr>
		<th>color</th>
		<td><input type="color" name="color" /></td>
	</tr>
	</table>
	<input type="submit" value="サンプルへ移動" />
</form>

下記は各ブラウザの対応状況です。

[Firefox 10.0]
「url」「email」は入力エラーチェックが実装されていますが、「datetime」「number」「range」「color」等は 「input type=”text”」のテキストボックスと同じ見た目になっています。
「url」「email」へ正しくない値が入力されると入力欄の枠が赤くなって教えてくれるため、とてもわかりやすくなっています。

[Chorme 16.0]
「datetime」等 日付まわりの入力や「number」「range」の入力、各種入力チェックが実装されています。
「number」については数字以外の入力が無効となり、全角数字は半角数字へ自動変換してくれる親切設計です。
こちらも「color」は実装されていないようです。

[Opera 11.61]
ひととおり実装されているようです。
日付まわりの入力は、カレンダーが表示され わかりやすく 正しい値以外は入力できない安心設計です。
3つのブラウザの中で唯一「color」が実装されているのも魅力です。

マルチメディア再生機能の強化

今までは音楽ファイルや動画ファイルを取り扱う際はFlash等のプラグインを使用したり、直接ファイルにリンクを貼って Windows Media Player等のPCにインストールされているソフトで再生するという対応でしたが、video要素やaudio要素の追加により、HTMLで取り扱うことができるようになりました。

video要素については 過去の記事をご確認ください。

文書構造の強化

header、footer、section、article、navなどの要素が追加されたことにより、今までdiv要素のみで表現していたものがより詳しく文章構造を構築することができるようになります。

サンプル

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
	<title>HTML5GOGO</title>
	</head>
	<body>
		<header>ヘッダー</header>
		<nav>ナビ</nav>
		<section>セクション</section>
		<footer>フッター</footer>
	</body>
</html>

これによりSEOでより正しくコンテンツが評価されることが期待される反面、適切な文章構造が構築できないと かえって評価を落としてしまうことが予想されます。

sectionやarticle, asideなど新要素が増えたことで、どれを選択するのが適切であるか考える必要がありますので コーディングの難易度は高くなると考えて良いと思います。

また 既存の要素にも仕様の変更があるようですが 個人的に気になったのは ブロックレベルリンクについてです。
http://html5doctor.com/block-level-links-in-html-5/

以前はa要素の中にblock要素を入れることができなかったため、span要素等のinline要素をa要素の中にマークアップし、スタイルでblockにする、もしくはJavaScriptにて対応する必要がありましたが、HTML5からはa要素の中にblock要素をマークアップすることができるようになります。

APIの追加

最後に HTML5より追加されたAPIを簡単にご紹介します。

APIについては過去の記事でもご紹介しています。
APIの一覧は「第24回 HTML5とか勉強会」レポートをご覧ください。

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

指定したファイルをローカルにキャッシュすることで表示の高速化やオフラインでのWebアプリケーションの利用を可能とするAPIです。

アプリケーションキャッシュを使用するには キャッシュするファイルをマニフェストファイルに記述し、HTMLでマニフェストファイルを指定します。

アプリケーションキャッシュについては 過去の記事でも取り上げていますので 合わせてご確認ください。

Web Storage

Web StorageはWebページで使用するデータをローカルに保存するためのAPIです。

Web Storageにはブラウザを閉じるまでデータを保持する「sessionStrage」とブラウザを閉じてもデータが消えない「localStrage」の2種類があります。

Web Workers

今までは JavaScriptが複雑な処理を行っている間、Webブラウザが反応しないということがありましたが、これは1つのスレッド(シングルスレッド)で動いていて、複数の処理を同時に並行して動かすことができなかったために起きる現象です。
HTML5ではWeb Workersによるマルチスレッドが実現できるため、複雑な処理をバックグラウンドで処理させることでメインとなる処理を妨げることなく 処理中にWebページを操作することができるようになります。

WebWorkers

Web Socket

今まではWebブラウザからWebサーバへ問い合わせる通信のみでしたが、Web SocketによりWebブラウザとWebサーバ間で双方向の通信が可能となります。

Geolocation

HTML5では位置情報をGPS、またはネットワーク情報から取得できるGeolocation APIが用意されています。

まとめ

HTML5は Canvas以外にも新機能が盛り沢山です。

フォーム機能については各ブラウザであまりにも対応に差があるため
現時点では導入しにくいのではないかと思いますが標準化されれば
注目の機能の1つとなり得るのでは?

引き続きHTML5の新機能、APIを使ったサンプルの紹介や
HTML5に関わる内容をご紹介しますので
これからもHTML5GOGOをおたのしみください。

Subscribe:
pagetop