SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ここが違う!サンプルで見るHTML5

HTML5が注目を浴びる理由とは?
ここが違う!サンプルで見るHTML5(1)

第1回 HTML5の概要


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

 この連載では、今日のウェブ業界の流行語となっているHTML5について、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。第1回目の今回は、HTML5が注目を浴びている理由や現在の策定状況、HTML5から追加・削除された要素など、HTML5の現在の概要を紹介します。

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

はじめに

 この連載では、「HTML5」をとりあげ、全6回に分けて、これまでの技術とどのような違いがあるのか、具体的にサンプルのコードを示しながら解説していきます。

HTML5はなぜ注目されているのか

 HTML5は、今やウェブ業界の流行語といっても良いほどの過熱ぶりです。HTML5は、名前の通り、HTML4の後継に当たる仕様です。とはいえ、HTML5に注目しているのは、ホームページを作成するウェブ制作者だけではありません。ウェブ業界に限らず、あらゆるIT関連業界で注目を浴びています。なぜ、これほどまでにHTML5が注目を浴びているのでしょうか。

 この理由は、大きく分けて2つあります。1つはマークアップです。もう1つはAPIです。

マークアップの仕様を更新

 まずは、マークアップの視点から見ていきましょう。これは、とりわけウェブ制作者、中でもウェブページ製作の現場において重要です。これまでウェブページとは、W3Cという標準化団体が策定したHTML4やXHTML1.0と呼ばれるマークアップの仕様に基づいて作られてきました。HTML5は、その後継に当たるわけですから、当然のことながら、HTML5仕様ではマークアップに関する仕様が更新されています。HTML5では、さまざまな要素が追加されました。中でも、JavaScriptから図を描くために使うcanvas要素や、ビデオやオーディオを再生できるvideo要素、audio要素は注目の的です。

audio要素のマークアップ例
<audio src="audio.mp3" controls></audio>
audio要素のレンダリング例(Internet Explorer 9 β版)
audio要素のレンダリング例(Internet Explorer 9 β版)
canvas要素のマークアップ例
<canvas width="300" height="150"></canvas>

<script>
var canvas = document.querySelector("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.beginPath();
context.arc(150, 75, 50, 0, Math.PI*2, true);
context.fill();
</script>
canvas要素のレンダリング例
canvas要素のレンダリング例

 しかし、HTML5には、このような派手な機能を持った要素だけでなく、文書構造を定義するための要素や、言葉に意味を与える要素が数多く追加されました。

 HTML4の最終的な仕様はHTML4.01ですが、これは1999年に勧告に至っています。その後、XHTML1.0が勧告に至っていますが、基本的に利用できる要素に大きな違いはありません。インターネットの世界は、ドッグ・イヤーと言われる通り、移り変わりが早いことが特徴に挙げられますが、一方、HTMLは、マークアップという観点から言えば、10年以上も進化が無く、同じ仕様に基づいてウェブページが作られてきたのです。

 もちろん、W3Cは、この10年の間に、XHTML1.1や、それに付随する仕様、そして、XHTML2.0という仕様の策定を進めてきました。ところが、ウェブを完全なXMLベースのマークアップにするという方針は、ブラウザ・ベンダーもその実装にはあまり積極的ではなく、実質的には、ウェブ製作の現場では受け入れられなかったのは、皆さんもご存じの通りです。

APIの標準化

 次に、HTML5が注目されるもう1つの理由であるAPIの視点から見てみましょう。APIは、ウェブページで言えば、JavaScriptから扱うことができるさまざまな機能を指します。JavaScriptの世界では、この10年で大きな転機がありました。ウェブ業界の人なら誰でも知っているAJAXです。当時、AJAXは新たに開発されたテクノロジーではなく、それまで誰からも興味を持たれることなく眠っていた古い機能を掘り起こしたものでした。AJAXに使われるXMLHttpRequestは、Internet Explorer 5からMicrosoft社により実装されていた古いテクノロジーです。その後、他のブラウザも追随してXMLHttpRequestを実装するに至ったのです。それから、JavaScriptを使った動的なページや、ウェブ・アプリケーションが当たり前のようになってきました。しかし、JavaScriptから扱えるAPIは、これといったウェブ標準がなく、ブラウザによって大きくその実装が違うこともありました。そのため、ウェブ製作の現場ではクロスブラウザ対策が必要となり、JavaScriptによるウェブ・アプリケーション構築では、大きな妨げになっていました。

 HTML5では、マークアップだけでなく、これまで当たり前のように使われてきたAPIを標準化したことに大きな意味があります。さらに、旧来のAPIにとどまらず、現在ウェブ製作の現場から求められているさまざまなAPIが新たに策定されました。

 これまでRIA(リッチ・インターネット・アプリケーション)を実現するためには、Adobe社が提供するFlashや、Microsoft社が提供するSilverlightといったプラグインに頼らざるを得ませんでした。こういった機能はウェブ標準として規定されていないこともあり、ブラウザにRIAに必要な機能が実装されていない、実装されていたとしてもブラウザによって使い方が違う、という大きな問題が横たわっていました。そのため、プラグインはウェブにとって必要不可欠なテクノロジーです。

 ところが、HTML5にはさまざまなAPIが規定され、さらに、ブラウザ・ベンダーが積極的にHTML5にかかわることで、この状況が大きく変わってきました。これまでプラグインでしか実現できなかったことが、ウェブ標準のAPIをJavaScriptから扱うことができるようになるのです。

 とはいえ、JavaScriptで、プラグインでしか実現できなかったことができるようになったところで、本来であれば、さほど大きなインパクトはないはずです。なぜなら、これまで通りプラグインを使えば良いからです。では、なぜ、それほどまでにHTML5が注目されたのでしょうか。

 話題のきっかけの1つとして、iPhoneとiPadが挙げられるでしょう。iPhoneとiPadでは、Apple社の方針によりFlashを利用することができません。RIAを実現するためには、HTML5に頼らざるを得ないのです。

 以上、HTML5が注目される理由を2つの視点から見てきました。ただ、これは、ウェブ製作の現場からの視点に過ぎません。実は、HTML5が注目される1番大事な理由が別にあります。

次のページ
HTML5がもたらすインパクト

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
ここが違う!サンプルで見るHTML5連載記事一覧

もっと読む

この記事の著者

羽田野 太巳(ハタノ フトミ)

有限会社futomi 代表取締役1971年岐阜県生まれ。ホスティングサーバー(共用サーバー)でも利用できるウェブ・アプリケーションの独自開発・販売を手がける。主にPerlによるCGI制作が中心。オーダーメードのウェブ・アプリケーション制作/ウェブ・サーバー管理業務も手がける。2007年にHTML5.JPを開設し、Canvasを使ったJavaScriptライブラリの開発、HTML5の最新情報の発信、HTML5関連仕様の日本語訳を手がける。主な著書に『徹底解説HTML...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5597 2011/01/05 16:44

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング