はじめに
こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌（@kzms2）と申します。
最近スマートフォンやタブレット向けのページを作成する機会が増えてきました。
なので、今回はちまたで大人気のHTML5について書きます。
若干今更な内容にも思えますが、あまりHTML5になじみがない方にもわかってもらえるような内容にしています。
HTML5の基本概念や思想・実際の組み方というよりも、 HTML5で組むと今までと比べて何が違うのか などについて書いていきます。
- なぜこれからHTML5なのか
- HTML4との違いがわからない
- HTML5を使う利点がわからない
など疑問に思っている方はぜひ見ていただければと思います。
HTML5といえば？
HTML5と聞いて何を思い浮かべるでしょうか
- 何でも出来る凄い技術
- ウェブのまったく新しい形
- Flashが必要なくなる技術
上の様な先入観を持っている方もいるかもしれません。
ですが何でも出来る凄いもの。というよりはもう少し現実的なものと思っていただけると良いと思います。
自分なりに解釈して、HTML5を一言でいうなれば以下の様な感じになります。
今まで複雑だった処理が簡単に出来て、HTMLをより構造的にスッキリ書ける
これだけを聞くとちょっと残念な印象を受けてしまいそうですが、そんなことはありません。
その詳細をこれから説明します。
HTML5で出来ること
1.今まで難しかった事が簡単に出来る
動画や音声、グラフィックの描画が可能になる
動画を用いたい
<!-- video要素を用いる -->
<video width="640" height="360" preload="auto"
poster="hoge.png" controls autoplay>
<!-- ↓WebM形式の動画に対応しているブラウザ用 -->
<source src="hoge.webm" type='video/webm; codecs="vp8, vorbis"'>
<!-- ↓ogv形式の動画に対応しているブラウザ用 ->
<source src="hoge.ogv" type='video/ogg; codecs="theora, vorbis"'>
<!-- ↓mp4形式の動画に対応しているブラウザ用 -->
<source src="hoge.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<!-- ↓video要素に対応していないブラウザ用 -->
<p>動画を再生できません。<a href="hoge.html">推奨環境はこちらから。</a></p>
</video>音声を用いたい
<!-- audio要素を用いる -->
<audio controls loop>
<!-- ↓ogg形式の音声に対応しているブラウザ用 -->
<source src="hoge.ogg">
<!-- ↓wav形式の音声に対応しているブラウザ用 -->
<source src="hoge.wav">
<!-- ↓mp3形式の音声に対応しているブラウザ用 -->
<source src="hoge.mp3">
<!-- ↓audio要素に対応していないブラウザ用 -->
<p>音声を再生できません。<a href="hoge.html">推奨環境はこちらから。</a></p>
</audio>グラフィックの描画
<!-- canvas要素を用いる -->
<canvas id="canvas" width="640" height="360"></canvas>
<script>
//描画コンテキストを取得
var canvas = document.getElementById('canvas');
if(canvas.getContext){
var context = canvas.getContext('2d');
//赤色で塗りつぶす
context.fillStyle = 'rgb(255,0,0)';
//左から20上から30の位置に、横幅64・高さ32の四角形を描く
context.fillRect(20,30,64,36);
}
</script>- 利点
- プラグインを必要とせず、ブラウザ自体で動画や音声、グラフの描写などが可能
※ただし、複雑な表現でない場合に限る
- プラグインを必要とせず、ブラウザ自体で動画や音声、グラフの描写などが可能
HTML4では実現するのが困難だった機能が、容易に実装できる
位置を取得したい
<!-- geolocationをJavaScriptで用いる -->
<script>
window.addEventListener('load'. function () {
//geolocationが用いる事が出来るか判定
if(navigator.geolocation){
//現在地を定期的に監視する
navigator.geolocation.watchPosition(update);
}
}, false);
// 位置が?検出されたら緯度、経度を表示
function update(position){
//緯度を取得
var lat = position.coords.latitude;
//経度を取得
var lng = position.coords.longitude;
//経度・経度を書き出し
document.write('緯度：'+lat+'経度：'+lng);
}
</script>大量のデータをクライアント側に保持させたい
<!-- LocalStorageをJavascrptで用いる -->
<script>
//localStorageに値を格納
localStorage.key = '保存したい値';
//localStorageから値を取得
var hoge = localStorage.key;
//「保存したい値」を書き出し
document.write(hoge);
</script>- 利点
- 簡単なJavaScriptを書くだけで位置情報がわかる
- Cookieよりも簡単に、また大量のデータをクライアント側に保持させることが出来る
フォーム周りの機能が強化されている
入力した値の書式をチェックしたい
<!-- input要素の属性、「typeの値」を書き換えるだけ -->
<input name="email" type="email">入力項目を必須にしたい
<!-- input要素の属性に「require」を加えるだけ -->
<input name="text" type="text" require>非フォーカス時にinputに文字を表示させたい
<!-- input要素の属性に「placeholder」を加えるだけ -->
<input name="text" type="text" placeholder="例）東京都">- 利点
- JavaScriptを書かずに簡単に実装できる
- CSS3を用いることで視覚的にもわかりやすくできる
参考：HTML5 Form Demo※要Webkitブラウザ
2.綺麗なHTMLがスッキリ書ける
長かった記述がスッキリする
よく使用する要素の属性の見直し
<!-- doctype,metaの一部,link.style,scriptなどの記述が簡素化される -->
<!-- doctypeの記述が簡素に -->
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード指定が簡素に -->
<meta charset="utf-8">
<title>タイトル</title>
<!-- cssのlink要素指定が簡素に -->
<link rel="stylesheet" href="hoge.css">
<!-- style要素指定が簡素に -->
<style>
/* cssをここに */
</style>
</head>
<body>
コンテンツ
<!-- script要素指定が簡素に -->
<script>
//scriptをここに
</script>
</body>
</html>- 利点
- 要素に対しての必要な属性などが省略されることでつづり間違えが起こりにくくなる
- ソースが見渡しやすくなる
要素の定義の見直しや追加が行われている
よく使用する要素の定義の見直し
<!-- hr,small,strong,i,b要素などの扱いが見直されている -->
<p>文章ほげほげ</p>
<hr><!-- 段落レベルの区切り -->
<p>文章ほげほげ</p>
<!-- 細目などの注釈を表す要素 -->
<small>免責、コピーライトなど</small>
<!-- 強調ではなく、重要性を表す要素 -->
<strong>重要な内容の中にある<strong>さらに重要な内容</strong></strong>
<!-- 印刷表現でイタリック体で表現される様な要素 -->
<i>声、ムード、技術用語など</i>
<!-- 重要ではないがキーワードの様な要素 -->
<b>区別したい内容</b>文章構造化がより強化
<!-- section,article,aside,nav,hgroup,header,footerなどを用いてアウトラインが整えられる -->
<!-- ヘッダー情報にはheader要素を使用 -->
<header>
<!-- 見出しが隣接して関連性があればhgroup要素で囲む -->
<hgroup>
<h1>h1の内容</h1>
<h2>h2の内容</h2>
</hgroup>
<!-- ナビ情報にはnav要素を使用 -->
<nav>
<ul>
<li>ナビ1</li>
<li>ナビ2</li>
</ul>
</nav>
</header>
<!-- 記事情報にはarticle要素を使用 -->
<article>
<header>
<h2>h2の内容</h2>
<time datetime="2011-08-20">2011年8月20日</time>
</header>
<h3>h3の内容</h3>
<p>文章ほげほげ。</p>
<!-- 階層構造を明確にしたい箇所にはsection要素を使用 -->
<section>
<h4>h4の内容</h4>
<p>文章ほげほげ。</p>
</section>
</article>
<!-- 本文とは関係が浅い箇所にはaside要素を使用 -->
<aside>
<img src="hoge.png" alt="広告A">
</aside>
</div><!-- /#contents -->
<!-- フッター情報にはfooter要素を使用 -->
<footer>
<p><small>Copyright</small></p>
</footer>- 利点
- よりセマンティックになることで、機械的にページを理解しやすくなる
注意しておきたいこと
ちなみに、HTML5に追加された新しい機能などはここに記載されている以外にもまだたくさんあります。
これまでの例はHTML5で説明しやすいものや重要なものを記載しています。
また、HTML5に関して2点ほど注意したい点があります。
- 1.HTML5はまだ草案（まだ正式に仕様が固まっていない状態）であること
- まだ仕様として固まっていないので、仕様が変わる可能性がある
- 2.HTML5はブラウザごとに実装状況が異なる （参考：HTML5 & CSS3 Support, Web Design Tools & Support）
- IE6・IE7ではHTML5がほぼ対応していない
- 同じブラウザでも、バージョンごとに対応の有無がある
草案であるということについては、各主要ブラウザがHTML5を積極的に取り入れているのでこれは大きな問題ではないと思います。
しかし、HTML5に対応していないブラウザがある事は問題があります。
つまりは、 パソコン向けのページに使うのはまだ早い ということです。
ですが主要なスマートフォンで搭載されているブラウザのほとんどがHTML5をサポートしているため、
HTML5は新しいブラウザを搭載しているスマートフォンで使うのが現実的 となるわけです。
※ただし、対応ブラウザを理解した上でパソコン向けのページに使うのであればその限りではありません。
まとめ
これまでの流れを見ていただいたとおり、HTML5とはつまり
- 今まで制作する側が苦労していたところの改善点や、よく使う機能などを盛り込んだもの
- プラグインであったり機能としてバラバラに提供されていたものをAPIとして導入したもの
というものなのです。
今まで複雑だった処理が簡単に出来て、HTMLをより構造的にスッキリ書ける
というのはかなり乱暴な言い回しですが、なぜ冒頭でこのような表現をしたのかを理解していただけたのなら幸いです。
もっと丁寧にきちんとHTML5について知りたい！ という方は参考リンクと合わせて一言コメントを記載しておくので、そちらを参照してみるとより理解が深まるかと思います。
中でも「HTML5, きちんと。」を見たことがない方は一見の価値ありなので、見てみてください。
早くHTML5が気兼ねなく使える時代が来て欲しいものですね。
※このエントリーに書かれている内容は、今後HTML5の仕様の変更により推奨される記述方法が変わる可能性があります。
また、Web application（Geo Locationなど）はW3CのHTML5仕様から抜けて、独立した仕様として定義されている物もありますが、実装されているブラウザが多いので取り上げています。
参考リンク
- HTML5の基本を抑えたい方向け
- HTML5, きちんと。
→歴史から概要、実装例や今後のことまでひととおり書いてあります。この記事だけでも読んでおけば理解度はかなり違うかと思います。 - HTML5 における HTML4 からの変更点
→W3Cの原文を日本語訳した文。W3Cの意図や変更点などが明確に書かれています。
- HTML5, きちんと。
- 実務でHTML5をマークアップしたい方向け
- 今からハジメるHTML5マークアップ
→上のスライドよりもより、実際にコーディングする場合の例などが多数あります。 - HTML5についてのおさらい - W3G Blog Studies
→HTML5の骨組みから、文章構造について詳細が書いてあります。 - HTML5.JP - 次世代HTML標準 HTML5情報サイト
→各要素の説明や実例がサンプル付きで掲載されています。逆引きなどに便利です。 - HTML5サンプル集 - 株式会社あゆた
→主にHTML5のWeb applicationを中心に簡単なサンプルがあります。 - HTML5 Demos and Examples
→英語ですがHTML5のWeb applicationについて対応ブラウザも含めて簡単なサンプルが多数あります。
- 今からハジメるHTML5マークアップ
- その他
- HTML5 Gallery ｜A showcase of sites using HTML5 markup
→HTML5を用いたサイトを一覧できる。実際にどの様に使われているかのリサーチなどに使うのがよさそうです。
- HTML5 Gallery ｜A showcase of sites using HTML5 markup
Qiita（外部サイト）の★（購読ボタン）を押しておくと更新通知を受け取れます
