Lesson 03 HTML5の新技術（後編） - HTML5＋CSS3 次世代Webコーディングの超・最新動向・HTML5編

HTML5＋CSS3 次世代Webコーディングの 超・最新動向

HTML5編

	Lesson 3			HTML5の新技術 （後編）
	制作・文			羽田野 太巳（有限会社futomi）

HTML5仕様を含めたオープンWebの新テクノロジーは非常に範囲が広い。ここではHTML5を中心とした新しいテクノロジーについて簡単に紹介していこう。

※前編はこちら

ストレージ

ブラウザ側にデータを蓄積する方法としてCookieがよく使われてきた。ところが、Cookieを使って蓄積できるデータは非常に小さなサイズに限られる。さらに、ページにアクセスするたびに、必要か不要かに関わらず、無条件にサーバに送信されてしまう。これはセッション管理といった用途には最適だが、クライアント側にデータを蓄積しておくという目的においては力不足だ。

そして新たに、そこで大きなサイズのデータをクライ アント側に蓄積するAPIがいくつか開発されている。ここでは代表的な2つのAPIを紹介しよう。


Web Storage

Web Storageは、値（データ）にキーを結び付けて保存するストレージAPIだ。保存されたデータは、JavaScriptからキーを使って読み出したり削除したりすることができる。

このストレージのサイズは、どのブラウザでもサイト単位で5MBがデフォルトだ。テキスト情報であれば、5MBもあれば多くのシーンで事足りるだろう。

Web StorageはInternet Explorer 8から実装されており、もちろんほかのメジャー・ブラウザも以前から実装している。そのため、HTML5によって導入されたAPIの中でも比較的成熟したAPIといえるだろう。【1】はWeb Storageに保存されたデータを、Chromeのデベロッパーツールで表示したものだ。


Indexed Database API

Web Storageはキーと値という組み合わせでしかデータが保存できないが、もう少し複雑な構造にも対応できるようにしたのがIndexed Database APIだ。

このAPIはまだ仕様策定が開始されてから日が浅いこともあり、一部のブラウザが実験的に実装しているにとどまっている。しかし、大容量のデータ蓄積の手段として、将来的には本命のAPIになることは間違いないだろう。


【1】

ファイル操作

これまでWebからデスクトップ上のファイルを扱うことはできなかった。せいぜい、fileタイプのinput要素経由でサーバに送信する程度で、JavaScriptからデスクトップ上のファイルを読み取ることす らできなかった。

そこでW3Cではデスクトップ上のファ イルの中身をJavaScriptから読み取る仕組みを開発した。さらにHTML5仕様にドラッグ&ドロップの機能が追加されたのだが、そこでもデスクトップ上のファイルをWeb ページ上にドロップし、それをJavaScriptから読み取ることもできる。


File API

File APIは、fileタイプのinput要素に選択されたファイル、またはデスクトップからWebページ上にドロップされたファイルのデータを読み取るメカニズムを提 供する。

このAPIを使うことで、サーバに送信せずとも、JavaScriptから対象のファイルをバイナリ形式、Data URL形式、テキス ト形式で扱うことができる。

また、これまで完全に断絶していたデスクトップとWebをシームレスにつなぐこともできるのだ。これはWebアプリケーションの概念を大きく変革するAPIといえるだろう。

すでにさまざまなサイトやWebアプリケーションで採用されており、すでに経 験した読者も多いかもしれない。

【2】はおなじみのGoogle Gmailのメール作成画面だ。デスクトップ上のファイルをドラッグ&ドロップすることで、そのファイルをメールに添付することができる。これはメールを送信するときにサーバに送るのではなく、ファイルをドロップした直後にJavaScriptからファイルのデータを読み出し、それをサーバに送出している。

File APIやドラッグ&ドロップを組み合わせることで、Webアプリケーションがデスクトップ・アプリケーションと遜色ないユーザーインタフェイスで利用できるようになるのだ。


【2】Google Gmail

位置情報

位置情報とはいま居る場所の緯度や経度のことを表す。これは、日本においては旧来からフィーチャーフォン向けのサービスでも使われてきたこともあり、すでにおなじみだろう。

しかし、フィーチャーフォン向けの位置情報サービスは、日本独自どころかキャリア独自の仕様だ。そのため、海外発のスマートフォンはもちろん、ノートパソコンですら利用できず、位置情報を取得するための標準が求められてきた。


Geolocation API

W3Cは、Geolocation APIを策定し、 JavaScriptから位置情報を取得するメカニズムを開発した。2011 年2 月現在、Geolocation APIはW3Cでは勧告候補の段階に至っており、近年注目されているオープンWebのテクノロジーの中でも、かなり安定した仕様となっている。

すでにInternet Explorer 9を含めたメジャーブラウザはGeolocation APIを実装している。さらにiPhoneやAndroidなどのスマートフォンでも利用可能だ。

Geolocation API は、GPS を搭載した 端末であれば、緯度と経度だけでなく、GPS 高度、移動速度、移動方向まで JavaScriptから検知することができ、すでに多くのサイトで位置情報を使ったサービスが展開されている。

スレッド

これまでネイティブアプリケーションが担ってきた機能は、ますますWebアプ リケーションとして提供されることが多くなるだろう。そして、JavaScriptによる高度で重い処理が求められてくる。

一方、Webブラウザは、基本的にはシングルスレッドで動作する。HTMLの表示、JavaScriptの実行といった一連の処理は、同時平行で行われるのではなく、時分割で逐次行われていく。

仮にJavaScriptを使って複雑で重い処理を行おうとすると、ブラウザはその他のすべての処理を待たせる。従って、その間はレンダリング処理は完全に止まり、さらにユーザーからの操作も一切受け付 けなくなる。たとえばキャンセルボタンを用意して、JavaScriptが実行する重い処理を中止する仕組みを想定してほしい。

その重い処理が実行されている間は、たとえキャンセルしたくても、キャンセルボタンさえ効かないのだ。


Web Workers

前述のブラウザのシングルスレッドにおける限界を解決するのがWeb Workersだ。

Web Workers は所定の処理をバックグラウンドで実行する。正確にはスレッドではないが、実質的に別のスレッドで処理が実行されたかのように振る舞う。

Web Workersによって、重い処理が行われていたとしても、ブラウザのユーザーインタフェイスを妨げることがなくなる。先ほどのキャンセルボタンの仕組みも問題なく実現することができるのだ。

また、近年のパソコンはマルチコアと呼ばれるCPU、もしくはそれに近いメカニズムを持ったCPUが搭載されている。

Web Workers によってバックグラウンドで行われる処理は、このマルチコアの恩恵を受けることができる。コアの数だけ重い処理を分散し、それらをバックグラウンドで処理させることで、状況によっては大幅なパフォーマンス向上にも つながる。

これは2011 年2 月現在で、すでにFirefox、Opera、Safari、Chrome に実装されている。ブラウザを限定できるサービスであれば、いまからでも利用できるAPIだ。

将来の新技術

現在W3Cが策定を進めている仕様の中で、将来有望な仕様についても簡単に紹介しよう。もちろん、現時点ではこれらの機能を実装したブラウザはない。しかし、オープンWebが、ハードウェアやOSに特化したネイティブ・アプリケーションの領域をカバーしようとしていることがよくわかるはずだ。


HTML Media Capture
Media Capture API

現在販売されているスマートフォンにはカメラやマイクといったさまざまなデバイスが搭載されている。本来、これらのデバイスにはネイティブアプリケーションからしかアクセスすることができない。

ところがHTML5では、JavaScriptからこのようなデバイス内蔵の機能にアクセスするための仕様が策定されているのだ。カメラやマイクロフォンによって撮られた写真や動画などを扱うのがMedia Captureと呼ばれる仕様だ【3】【4】。


【3】HTML Media Capture:http://www.w3.org/TR/html-media-capture/



【4】Media Capture API：http://www.w3.org/TR/media-capture-api/

Media Captureによって、Webアプリケーションからディスク上のメディアファイルを取り込んだり、内蔵カメラを使った写真やビデオの撮影、その撮影された写真やビデオデータの取り込みなどが実現できる【5】 。


【5】写真撮影のイメージ（HTML Media Capture仕様より）

すでに撮影または録音したデータを扱うだけでなく、リアルタイムの処理も考えられている。カメラやマイクロフォンから入力される映像や音声をストリームとして扱うのがdevice要素だ。これはビデオチャットなどの利用を想定したもので、まだHTML5 仕様の新要素として盛り込まれ ておらず、独立して仕様の策定が進められている。


System Information API

デバイスにアクセスするAPIとして興味深いのが、System Information APIだ【6】。これは、JavaScriptを通してデバイスのハードウェアの情報にアクセスするための仕様で、CPUの負荷状況、ネットワーク利用帯域、バッテリー状況など、通常であればデバイスに搭載されたOSやネイティブアプリケーションでなければ取得できない情報を扱うことができる。


【6】System Information API：http://www.w3.org/TR/system-info-api/



Application Launcher API

さらにハードウェアからソフトウェアに目を移すと、どのデバイスでも、ネイティブアプリケーションを起動するランチャーが用意されている【7】。通常、ランチャーはOSの機能として用意されるものだが、Webアプリケーションがランチャーを担うことを可能にする仕様が策定されている。このAPIでは、OS上にインストールされたさまざまなネイティブアプリケーションすら起動することが可能となる。


【7】Application Launcher API:http://dev.w3.org/2009/dap/app-launcher/


Widget Packaging and
Configuration Widget Interface

ウィジェットとは、デスクトップやブラウザ上で動作するミニアプリケーションのことを指すが、その作り方などが標準化されている【8】【9】。

ウィジェットといえば、すでにWindows Vistaに搭載されたサイドバー・ガジェットや、Windows 7に搭載されたデスクトップ・ガジェットが有名だ。また、各ブラウザベンダーも、ブラウザをベースとしたウィジェット機能を搭載し始めている。こういったミニアプリケーションが、特定の企業が策定した環境ではなく、Web標準のテクノロジーとして作成することができるようになるのだ。



【8】Widget Packaging and Configuration：http://www.w3.org/TR/widgets/



【9】Widget Interface http://www.w3.org/TR/widgets-apis/


Clipboard API and events

このAPIでは、クリップボードを経由したコピー、カット、ペーストといったネイティブアプリケーションでは当たり前となっている機能をWebアプリケーションでも実現するものだ【10】。もともとはHTML5 仕様の一部だったが、現在は独立した仕様として策定が進められている。



【10】Clipboard API and events http://dev.w3.org/2006/webapi/clipops/ http://www.w3.org/TR/widgets-apis/