HTML5 について

すこし前に、HTML5 というキーワードが世間を賑わせていました。特に、 iPhone/iPadや Android に関連して紹介される場合が多かったです。

今ではあたり前の技術となっていることでも、当時では結構画期的だったも のもあります。ここでは、そうした広がりを見せたHTML5の基礎技術をそれ までのHTML4と比較しながらを解説することを目的としています。「HTML5を 使うと、何ができるのか」「それを実現するには、どのようなプログラムを 書いたらいいのか」といったことについて概観します。

HTML5 の全体像

HTML5は、その名を見れば分かる通り、HTML（Hyper Text Markup Language） の新バージョンです。それまで広く使われていた HTML のバージョン は HTML 4.01 です。 （HTML 4.01までの説明は割愛）

といいつつ、実は HTML5 と呼ばれている技術は、実際にはHTMLとは直接 の関係を持たない JavaScript API も含め、さらに CSS3 (Cascading Style Sheets, Level 3) に関する技術も含める場合がほと んどです。さらに XMLに由来する別のマークアップ言語 (SVG, MathML, etc) すらも「HTML5」として、ひとくくりに呼んでいる場合があります。

SVG とは Scalable Vector Graphics（スケーラブル・ベクター・グラフィック ス）の略で、XMLをベースとした２次元ベクターイメージ用の画像形式の1つ です。アニメーションやユーザインタラクションもサポートしています。

MathML は Mathmatical Markup Language の略で、数式を記述するためのマークアップ言語です。

ですので、どこからどこまでがHTML5かを厳密に語ることは、あまり意味がな くて、オープンな標準をベースとした、Webのプラットフォーム化と いう動きのすべてが最近「HTML5」と呼ばれている、と考えてもいいかもしれ ません。

それまでのWebの問題

HTML5は、Webにとって大きな意義を持つバージョンです。なぜかというと、こ れまでのWebが抱えていたさまざまな問題を一挙に解決しようとする、ある意味 意欲的なバージョンとなっているからです。以下では、それらの問題について 簡単に解説します。

Webブラウザ間の低い互換性

最初に挙げられるのは、Webブラウザ間の互換性の低さです。あるWebブラウザ では正常に動作するHTML/CSS/JavaScriptなどでできたWebプログラムが、ほか のWebブラウザでは動作しないというのは常です。この問題の原因を端 的に言うと、仕様と実装が乖離しているということです。仕様があいまい だったり、そもそも標準化されていない仕様だったり、さらにはWebブラウザが 仕様に従っていなかったりと、仕様と実装の乖離はさまざまな原因から起こっ ていました。

HTML5では、この問題を解決すべく、「すでにWebブラウザが実装している機能 を詳細に分析し、そこから仕様を抽出する」という作業が広範にわたって行わ れました。これにより、既存のWebブラウザが備えている機能には標準に準 拠　 しているというお墨付きを与えられます。 その仕様に従ったプログラムを書けば、どのWebブラウザでも動作する可能性が 高くなり、Web開発者／デザイナにとって非常にありがたいことです。さらには、 今後その機能を実装しようとするWebブラウザベンダにとっても、文書化された 仕様が存在するので、実装が非常に楽になります。

と言いつつ、今でもまだ非互換性は残っています。Microsoft が Chromium ベースのEdge に移行してくれたので、ざっくり分けると Chrome 系と Safari 系の２系統でしょうか…

文書の意味構造が不明確

次に挙げられる問題としては、以前のHTMLは、文書構造の「意味」を表すため の機能が不足していた、ということが挙げられます。 例えば、「見出し」「本文」といった文書構造を表すのに、多くのページでは < div > 要素を用いています。しかし、本来 < div > 要素は意味 を持たない要素です。 < div > が多用されたHTML文書は、開発者が目で 見て読むのであれば、文書構造の意味を把握することはある程度可能ですが、 例えば検索エンジンやスクリーンリーダーなどのプログラムにとっては、「ど こからどこまでが重要な本文なのか」「この<ul>要素はナビゲーション メニューを表しているのか、文書中の個条書きなのか」も分からないです。

HTML5では、この問題に対処するため、数多くの　意味的要素 (semantic element) が追加されました。さらに Web 文書の　アクセシビリティ （障害を持つ人々にとっての扱いやすさ）を向上させるための仕様 （WAI-ARIA）や、文書中に埋め込まれたデータの意味を明示するための仕様 （Microdata）等、さまざまな周辺技術との統合もなされています。

Webアプリの機能制限

最後に挙げられる問題は Webアプリ関係の機能が貧弱だということです。Webア プリはインターネットからダウンロードされてそのまま実行されるという性格 を持つため、ユーザーのセキュリティを脅かすような機能は制限されてなくて はなりません。しかし、それを差し引いても、従来のWebアプリにできることは あまりに貧弱でした。例えば、アップロードするファイルを選択する際、複数 のファイルを同時に選択することができない、等です。

こうした機能の貧弱さを補うべく、現在さまざまなAPIが新たに提案されていま す。Webブラウザによる実装も急ピッチで進められており、Webアプリだから 不可能といわれる機能は、近い将来かなり少なくなるでしょう。

HTML5の機能

HTML5 は HTML4と比べ、WEBアプリケーション向けの機能が大幅に強化されてお り、また、HTML4.01で非推奨とされていた要素の一部（font要素やcenter要素 等）が廃止されます。主な追加機能としては、以下のようなものが あげられます その他にも多くの機能追加があるのですが、ここでは略します。

HTML5 は、Edge はもちろんFirefox, Chrome, Safari 等ほとんどのブラウザ で利用できます。 canvas を利用した例 をあげておきます。下の図は、Firefox での例です。

ソースは以下の通りです。VB での描画にも似た記述です。なお、JavaScript 自体については別途解説しますので、ここでは雰囲気だけ掴んでください。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvasで図形を描く例</title> <script type="text/javascript"> function sample() { //描画コンテキストの取得 var c = document.getElementById('sample0'); if (c.getContext) { // コンテキストの取得 var cn = c.getContext('2d'); // 色を指定する cn.fillStyle = 'rgb(63,255,127)'; //塗りつぶしの色 // 左から10上から10の位置に、幅100高さ100の四角形を描く cn.fillRect(10,10,100,100); // 色を指定する cn.strokeStyle = 'rgb(255,00,0)'; //枠線の色は赤 // 左から50上から50の位置に、幅100高さ50の四角の枠線を描く cn.strokeRect(40,40,100,100); // 色を指定する cn.strokeStyle = 'rgb(00,0,255)'; //枠線の色は青 cn.fillStyle = 'rgb(00,0,255)'; //塗りつぶしの色は青 // 左から190上から40の位置に、半径50の半円を反時計回り（左回り）で描く cn.arc(190,40,50,Math.PI*1,Math.PI*2,true); cn.fill(); } } </script> </head> <body onLoad="sample()"> <h2>canvasで図形を描く例</h2> <canvas id="sample0" style="background-color:yellow;"> 図形を表示するには、canvasタグをサポートしたブラウザが必要です。 </canvas> </body> </html> 別の例として、 audio を利用した例（タイマー） をあげておきます。 あとは、各自いろいろ調べて試してみてください。
一時期は HTML5 でアプリケーションを作れば何でも動いてバラ色のようなこと が言われていましたが、互換性の微妙さが嫌われたのと、スマホ全盛時代になっ て WWW アクセスより専用アプリのほうが（顧客の囲い込みの面で？）有利とい うことで、注目度は下がっているようです。ただ、個人的には専用アプリはス トレージとメモリの無駄遣いなので HTML5 の復権に期待しています。

講義用スタイル
印刷用スタイル （開いてから、ページを再度更新してください）