2011年4月 6日

HTML5

HTML5とは何かを簡単にまとめてみた

  • このエントリーをはてなブックマークに追加

はじめに

こんにちは。R＆D統括本部 制作本部 ウェブデベロップメント部に所属しております。岡部和昌（@kzms2）と申します。
最近スマートフォンやタブレット向けのページを作成する機会が増えてきました。

なので、今回はちまたで大人気のHTML5について書きます。

若干今更な内容にも思えますが、あまりHTML5になじみがない方にもわかってもらえるような内容にしています。

HTML5の基本概念や思想・実際の組み方というよりも、 HTML5で組むと今までと比べて何が違うのか などについて書いていきます。

  • なぜこれからHTML5なのか
  • HTML4との違いがわからない
  • HTML5を使う利点がわからない

など疑問に思っている方はぜひ見ていただければと思います。

HTML5といえば？

HTML5と聞いて何を思い浮かべるでしょうか

  • 何でも出来る凄い技術
  • ウェブのまったく新しい形
  • Flashが必要なくなる技術

上の様な先入観を持っている方もいるかもしれません。
ですが何でも出来る凄いもの。というよりはもう少し現実的なものと思っていただけると良いと思います。

自分なりに解釈して、HTML5を一言でいうなれば以下の様な感じになります。

今まで複雑だった処理が簡単に出来て、HTMLをより構造的にスッキリ書ける

これだけを聞くとちょっと残念な印象を受けてしまいそうですが、そんなことはありません。
その詳細をこれから説明します。

HTML5で出来ること

1.今まで難しかった事が簡単に出来る

動画や音声、グラフィックの描画が可能になる

目的HTML5での実装方法
動画を用いたい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>

参考：<video>タグで動画を埋め込む－そろそろ、HTML5
音声を用いたい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>

参考：<audio>－HTML5タグリファレンス
グラフィックの描画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>

参考：<canvas>タグで図形を描く－そろそろ、HTML5
  • 利点
    • プラグインを必要とせず、ブラウザ自体で動画や音声、グラフの描写などが可能
      ※ただし、複雑な表現でない場合に限る

HTML4では実現するのが困難だった機能が、容易に実装できる

目的HTML5での実装方法
位置を取得したい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>

参考：ASCII.jp：iPhoneのGPSをJavaScriptで操ろう｜古籏一浩のJavaScriptラボ
大量のデータをクライアント側に保持させたいLocalStorageをJavascrptで用いる 
<script>
//localStorageに値を格納
localStorage.key = '保存したい値';
//localStorageから値を取得
var hoge = localStorage.key;
//「保存したい値」を書き出し
document.write(hoge);
</script>

参考：【特集】詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 (8) Web Storage
  • 利点
    • 簡単なJavaScriptを書くだけで位置情報がわかる
    • Cookieよりも簡単に、また大量のデータをクライアント側に保持させることが出来る

フォーム周りの機能が強化されている

目的HTML5での実装方法
入力した値の書式をチェックしたいinput要素の属性、「typeの値」を書き換えるだけ 
<input name="email" type="email">

参考：HTML5でinput要素に追加された新しいタイプ13連発 - ＠IT
入力項目を必須にしたいinput要素の属性に「require」を加えるだけ 
<input name="text" type="text" require>

参考：HTML5で既存のinputタイプに加わった6つの変更点 - ＠IT
非フォーカス時にinputに文字を表示させたいinput要素の属性に「placeholder」を加えるだけ 
<input name="text" type="text" placeholder="例）東京都">

参考：HTML5で既存のinputタイプに加わった6つの変更点 - ＠IT
  • 利点
    • JavaScriptを書かずに簡単に実装できる
    • CSS3を用いることで視覚的にもわかりやすくできる

      参考：HTML5 Form Demo※要Webkitブラウザ

2.綺麗なHTMLがスッキリ書ける

長かった記述がスッキリする

目的HTML5での実装方法
よく使用する要素の属性の見直し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>

参考：HTML5についてのおさらい - W3G Blog Studies
  • 利点
    • 要素に対しての必要な属性などが省略されることでつづり間違えが起こりにくくなる
    • ソースが見渡しやすくなる

要素の定義の見直しや追加が行われている

目的HTML5での実装方法
よく使用する要素の属性の見直しhr,small,strong,i,b要素などの扱いが見直されている 
<p>文章ほげほげ</p>
<hr><!-- 段落レベルの区切り -->
<p>文章ほげほげ</p>

<!-- 細目などの注釈を表す要素 -->
<small>免責、コピーライトなど</small>

<!-- 強調ではなく、重要性を表す要素 -->
<strong>重要な内容の中にある<strong>さらに重要な内容</strong></strong>

<!-- 印刷表現でイタリック体で表現される様な要素 -->
<i>声、ムード、技術用語など</i>

<!-- 重要ではないがキーワードの様な要素 -->
<b>区別したい内容</b>

参考：今からハジメるHTML5マークアップ
文章構造化がより強化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についてのおさらい - W3G Blog Studies
  • 利点
    • よりセマンティックになることで、機械的にページを理解しやすくなる

注意しておきたいこと

ちなみに、HTML5に追加された新しい機能などはここに記載されている以外にもまだたくさんあります。
これまでの例はHTML5で説明しやすいものや重要なものを記載しています。

また、HTML5に関して2点ほど注意したい点があります。

  1. 1.HTML5はまだ草案（まだ正式に仕様が固まっていない状態）であること
    • まだ仕様として固まっていないので、仕様が変わる可能性がある
  2. 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仕様から抜けて、独立した仕様として定義されている物もありますが、実装されているブラウザが多いので取り上げています。

参考リンク

Yahoo! JAPAN Advent Calender 2019（外部リンク）を開催します。12月1日から25日まで毎日ブログを公開予定です。詳しくはリンク先をご確認ください。
Qiitaアカウントがない方はこちらのRSSもありますのでぜひ購読ください。

Yahoo! JAPANでは情報技術を駆使して人々や社会の課題を一緒に解決していける方を募集しています。詳しくは採用情報をご覧ください。

  • このエントリーをはてなブックマークに追加