華麗なるWEBアニメーション史
～ HTML5台頭編

インターネットデバイスとしてPCが主流だった時代から、iPhone、Androidを始めとするスマートフォンが台頭し始めた頃、AppleはiPhoneをはじめとするモバイル端末でAdobeのFlashを採用しないことを明確にしました。そして、これまでFlash中心だったWebアプリケーションのための技術として、新たにHTML5が注目され始めました。

前回は「Flashの隆盛」ということで、Flashの歴史と、その特徴について解説してきましたが、今回は「HTML5の台頭」ということで、HTML5の誕生までの歴史と特徴について、解説していきます。

▼前回の記事
デジタルで遊ぼう！ #1
華麗なるWEBアニメーション史 ～ FLASH隆盛編

Web標準技術として鳴り物入りで登場したHTML5。言葉ばかりがバズワード化して、実際の実力の程は知られずに、「Flashみたいな事ができるんでしょ」という理解が浸透しているように感じられます。HTML5を理解するためにも、まずはHTMLの歴史を知っている必要があります。

ティム・バーナーズ＝リーによって、1989年、情報管理・整理を目的としてHTML（Hyper Text Markup Language）が開発され、1994年、W3C（World Wide Web Consortium）という、WWWの仕様を作成したり、勧告する非営利団体が設立されます。その後、W3Cは、1997年に HTML4.0を勧告し、2000年には、HTMLの仕様をXMLに準拠したものに新しく書き直したXHTML1.0を勧告します。

2004年、W3Cの方向性（Webサイト構築現場のニーズへの対応）に対して不満を表明し、Apple、Mozilla、Operaに所属するメンバーにより、WHATWG（Web Hypertext Application Technology Working Group）が設立され、現状のHTML機能を拡張させる取り組みが独自で進みます。WHATWGの仕様は次第に評価されていき、2007年からは、W3CとWHATWGが協力して、HTML5の標準化を進めます。

そして、2008年、HTML5草案を発表。2014年、HTML5が勧告されました。このHTML5は、従来のHTMLとは違い、拡張性と互換性があり、現場の声がよく反映されているものでした。

HTML5の特徴についてあげると、まず1つ目は、タグを見直したところになります。doctype、meta、link、style、scriptなどの記述が簡素化されスッキリ見やすくなりました。そして新しい要素が追加になり、明示的に文書構造をマークアップできるようになりました。そして2つ目が、高度なウェブサイトやウェブアプリケーションの作成に役に立つ機能を、新要素、もしくはJavaScriptで実装可能なAPIとして導入したことです。これらはFlashなどのプラグインで提供されていたものになります。今回はFlashに変わるWebアプリケーションのための技術としてのHTML5という点に注目して、この2つ目の特徴について、HTML5で新たに定義された新要素をいくつか紹介します。

HTMLから動画や音声を扱える新要素です。JavaScriptを通じて動画及び音声を制御する事も可能です。 controls属性を指定すると、再生・一時停止・再生位置の移動・ボリュームなどのインターフェースを、ブラウザが自動で表示します。 controls属性を指定せずに、これらの機能をJavaScriptで制御すれば、任意のインターフェースを独自のデザインで作成することも可能です。

CanvasAPIは、HTMLやJavaScriptだけで、ブラウザ上にグラフやゲームグラフィックスなどの図形を表示する標準仕様です。 これまでHTML上で図を表現するためには、GIFやJPEGといったフォーマットの画像、またはFlashやJavaアプレットなどが使われてきました。 Canvasは、FlashやJavaのようにプラグインを使わずに、JavaScriptベースで図を描くことを可能にする新要素です。

WebGLは、FlashやJavaのようにプラグインを使わずに、ハードウェアでアクセラレートされた三次元グラフィックスをブラウザで表示する標準仕様です。 WebGLを使えば、GPUによって描画が高速化されるため高度なグラフィカル表現が可能になります。

ブラウザからローカルPC内のファイルを直接参照、編集できるようになります。

GPSなどの位置情報を扱えるAPIです。

「draggable="true"」を付けるだけでほぼすべての要素がドラッグ＆ドロップ可能になります。

• HistoryAPI（履歴操作）
  ブラウザの「戻る」「進む」ボタンのイベントを取得してURL履歴を操作できるAPIです。 ウェブアプリケーションなど、非同期の画面移行でもブラウザの「戻る」ボタンで前の状態に戻す事ができるようになります。
• Web Storage（ストレージ）
  大容量で有効期限のないデータをユーザーのPCに永続的に保存できるもので、sessionStorageとlocalStorageの２種類のストレージが用意されています。
• Web Workers（並列スレッド処理）
  JavaScript処理を平行に行うためのAPIです。 WebWorkersを利用することで、画面表示を最優先させながらも裏で重い処理をさせる事も可能になります。
• Web Messaging（クロスドメイン通信）
  サーバを介さずブラウザ間で通信ができるインターフェイス。 通常、ほかのウィンドウ、タブ、フレームへのアクセスは、セキュリティ上の理由から、同一オリジンのドキュメントの間だけに制限されていますが、メッセージの送受信を専用のメソッドとイベントだけに限定し、送受信時に相手先のオリジンを確認できます。
• Server Sent Events（push型データ通信）
  サーバー側で何らかの出来事が起きたことを、リアルタイムでクライアント側に知らせることを可能にします。
• Web Socket（サーバーとの間に双方向のリアルタイムの接続）
  サーバーとの間に双方向のリアルタイムの接続を実現します。
• Web RTC（リアルタイムコミュニケーション）
  リアルタイムコミュニケーション用のAPIの定義で、プラグイン無しでウェブブラウザ間のボイスチャット、ビデオチャット、ファイル共有ができます。

HTML5登場前までは、定義されていなかったこれらの要素が追加された事で、HTMLを文書定義だけの用途ではなく、Webアプリケーションのプラットフォームとして使用する事が出来るようになりました。 もちろん、ここに紹介したものがすべてではありません。 今後も必要とされる用途に応じて増えていくのがHTML5の特徴でもあります。

Webアニメーションの変遷について、今回は「HTML5の台頭」ということで、HTML5の誕生までの歴史と、HTML5の特徴について、解説しました。

HTML5以前は、文書構造をマークアップするという純粋な目的のために発展してきましたが、HTML5は、より視野を広げて、Webアプリケーションのプラットフォームとして、その機能を充実させました。 結果として現在のWebサイトの多くがHTML5を取り入れ、プラグインに頼らないWeb標準の技術だけで、充実したコンテンツを拡充していきました。 HTML5は今後も、現場の声に則して、様々な機能が拡張され発展していく事でしょう。