この記事は、HTML5が引き寄せる近未来を、9つの「○○ウェブ」で理解する。（前編）の続きです。
5. Webプラットフォーム
HTML4からHTML5への変化の中でも、最も大きなパラダイムシフトは、「アプリケーションプラットフォームを志向する」という姿勢を明確に打ち出したところでしょう。 そうした旗印のもと、様々な機能をWebに付け加えてきた結果、「WebはもはやOSである」と言っても良いくらい豊富な機能を保持しつつあります。
とは言え、プラットフォームとしてのWebはまだまだ発展途上段階です。以下の様なプラットフォームが、Web技術をプラットフォームの基盤言語として採用しています。
- Google Chrome OS・・・Google Chromeをベースとしたオペレーティングシステム。ラップトップ用のOSとして採用が進んでいる。
- Windows 8・・・最新版のWindowsでは、Web技術を使ってアプリケーションを開発することができる。
- Firefox OS・・・Mozillaが開発中のモバイル向けOS。全てがWeb技術で構築されており、それ以外に「ネイティブ」な開発言語を持たない。
- Tizen・・・SumsongとIntelが共同開発しているモバイル向けOS。Web技術のほか、C/C++でも開発できる。車載向けの[Tizen IVI]というプロジェクトも存在する。
- Ubuntu Touch・・・Ubuntu Linuxのモバイル版。QMLというUI言語と、JavaScript/C/C++の組み合わせでアプリケーションを開発する。
中でもChrome OSとFirefox OSは、Web技術以外の開発言語を持たないところから、OSが備える低レベルな機能もJavaScriptで呼び出すことが可能です。Chrome Appsで使えるAPIやFirefox OSが備えるAPI、そしてW3CのSystem Applications Working Groupで標準化作業中のAPIを見ると、BluetoothやUSB、TCP/UDPソケットなど、低レベルなAPIを備えていることがわかります。
Firefox OS（シミュレータ）
Webはもはや、プラットフォームとして十分な機能を備えつつあるだけではなく、様々なプラットフォームでWeb技術が一級市民として採用されつつあるのです。
6. レスポンシブWeb
「レスポンシブWebデザイン」という単語は、2012年に大流行したため、お聞き及びになった方も多いのではないでしょうか。 CSSメディアクエリという技術を中心に、可変グリッドや可変イメージというテクニックを併用することで、様々なスクリーンサイズ向けのWebページを1ソースで構築する手法です。
レスポンシブWebデザインを採用したサイトは、Webページを表示しているスクリーン（ウィンドウ）のサイズに応じて、動的にその見た目を変化させます。それをためしてみるのは実に簡単で、レスポンシブ対応のWebサイトをブラウザで表示した後、ウィンドウのサイズを変えてみれば良いのです。
昨年大流行したことから、レスポンシブWebデザインの例はWeb上にいくらでも転がっています。 例えば、Magnus CederholmというWebデザイナーのWebサイト「Formfett」では、ウィンドウの幅に応じてレイアウトが大きく変化します。
Formfett（デスクトップサイズ）
Formfett（モバイルサイズ）
こうした手法が大きく取り沙汰された背景には、デバイスやプラットフォーム、スクリーンサイズが非常に多様化しつつあるという事実があるでしょう。あらゆるデバイスで、あらゆるプラットフォームで、あらゆるスクリーンサイズ上で、ユーザにとって最適な形のWebページが表示されることが望ましい。レスポンシブWebデザインは、その理想を実現するための一手段として捉えることができるでしょう。
7. セマンティックWeb
セマンティックWebとは、ウェブを発明したTim Berners-Lee氏が提唱する、「Webをデータベースにする」取り組みです（W3CのセマンティックWebに関するページには、「The Semantic Web is a web of data」（セマンティックWebとは、データのWebである」とあります）。
私たちが普段目にするWebページは、実はデータの固まりです。例えば映画の紹介ページであれば、その映画のタイトル、監督、俳優、上映時間などのデータが埋め込まれています。それらのデータは、人間が見ればデータの「意味」を理解できますが、そのページを読み取るプログラム（Webブラウザや検索エンジンが代表的です）にとっては、単なるテキスト以上のものではないかもしれません。 しかしセマンティックWebのテクノロジーを使うと、こうしたデータの意味をプログラムでも理解できるようになります。「この映画の名前は『2001年宇宙の旅』で、監督は『スタンリー・キューブリック』である」ということを、プログラムによっても解釈することが可能になるのです。
HTML5は、セマンティックWebを実現するのに大きく寄与します。まずHTML5では、要素の「セマンティクス」（意味合い）を明確化するための多大な努力が払われました。新たな意味合いを持つ要素が数多く追加されたほか、既存の要素も意味合いが明確化されたり、微妙に変化したりしています。 さらに、マイクロデータやRDFa/RDFa Liteといった技術を使うと、データの意味をより詳細に表現することができます。
例えば、Google検索で「Google Play Angry Birds」と検索してみましょう。Angry Birdsの検索結果が表示されますが、そこには通常の検索結果では表示されないような「☆」マークによるレビュー点数、レビューの票数、アプリケーションの価格などが表示されます。
「Google Play Angry Birds」の検索結果
このように、カスタマイズされた検索結果が表示されるのは、Google PlayのWebページにメタデータが埋め込まれているからです（Google Playではマイクロデータが使用されています）。Googleのクローラがそれらのメタデータを適切に解釈し、検索結果の表示をカスタマイズしているのです。
8. リアルタイムWeb
Google DocsやFacebook、Twitterなどの先進的なWebサービスは、リアルタイム性が非常に高いのが特徴です。世界中のユーザが行った活動が、インターネット越しに一瞬で自分の手元に伝わります。例えば、Google Spreadsheetを複数人で操作すると、他のユーザのカーソル移動や修正が、同じスプレッドシートを見ているユーザ全員に対してリアルタイムで伝わります。
Google Spreadsheet
従来、こうしたリアルタイムなWebアプリケーションを開発するのは非常な困難を伴いました。しかし、WebSocketやWebRTCという新しい技術により、その状況は大きく改善されつつあります。リアルタイムなWebアプリケーションを開発するのは、もはや困難なことではありません。
WebSocketは、サーバとクライアントが双方向のリアルタイム通信を行うための、新たな通信プロトコル及びJavaScript APIです。モバイルブラウザを含む、多くのブラウザで既に利用可能であり、リアルタイムWebを実現する土壌は既に出来上がっているといっても過言ではありません。
また、WebRTC（Web RealTime Communication）という技術を使用すると、Webブラウザ間でP2P通信を行うことができます。サーバを介さずに、Webブラウザ同士で直接通信を行うため、サーバを必要とするWebSocketよりも更に高いリアルタイム性を実現出来ます。また、動画や音声などのメディアデータはもちろんのこと、任意のデータも送受信することができるため、応用範囲の非常に高いテクノロジーです。
WebSocketを使用した例としては、「World Wide Maze」は素晴らしいデモンストレーションです。「任意のWebサイトを3Dの立体迷路にできる」というコンセプトで、作成した迷路内を「玉転がし」して遊ぶことができます。スマートフォンをリモコンのように使用でき、デバイスを傾けることでボールを転がしていくことができます。このリモコン操作には、WebSocketが利用されています。
World Wide Maze
World Wide Mazeの技術面については、HTML5Rocksに日本語の素晴らしい解説記事があるので、興味がある方は読んでみると良いでしょう。
また、「Cube Slam」というゲームは、WebRTCを応用した例です。このゲームは、一言で言えばエアホッケーのようなゲームですが、インターネット越しに友人と対戦ができるのが特徴です。動画や音声、ゲームのリアルタイムデータなどは、全てWebRTCを用いて通信されています。こちらも、テクノロジーを解説した日本語のページがあるので、一読することをオススメします。
Cube Slam
9. Webコンポーネント
ユーザーインターフェースを提供する多くのプラットフォームでは、UIを「コンポーネント化」する枠組みが提供されていることが一般的です。コンポーネント化されたUI部品は再利用が容易なため、UI開発の手間を大幅に軽減してくれます。 もちろん、Webの世界でもUIコンポーネントを提供するフレームワークは既に数多くあります。jQuery UI、jQuery Mobile、Sencha Touch、Ext.js、Google Closure Libraryなどが代表的です。ただし、コンポーネントを開発する標準的な枠組みがWebには不足していたため、フレームワークごとに利用方法がばらばらで、複数のフレームワークを併用することも容易ではありませんでした。また、その気になればコンポーネントの内部に（CSSやJavaScriptを用いて）手を入れることも可能で、コンポーネントの独立性も今ひとつでした。
Web Componentsと呼ばれる一連の仕様群が、この問題を解決しようとしています。Web Componentsの目的は、Webにおけるコンポーネント開発の標準的な枠組みを提供することです。例えば、エキスパートNo.3の吉川さんが開発した以下の<htmlday>要素を使うと、<htmlday>というイベントのロゴが表示されます。表示方法を、属性を用いてカスタマイズすることも可能です。
:html:
<htmlday></htmlday>
htmlday要素を使用した結果
また、Web Componentsを語る上で欠かせないのは「Polymer」というフレームワークです。このフレームワークは、Web Componentsを簡単に開発するための様々な機能を提供するだけではなく、現在Web Componentsが未実装のブラウザ上でもWeb Componentsが動作するようにしてくれます。
Polymerのアーキテクチャを表す図。platform.jsがWeb Componentsの基盤を提供し、その上でpolymer.jsがWeb Componentsの開発を容易にする枠組みを提供する
Web Componentsは、将来のWeb開発のあり方を完全に変えてしまうような可能性を秘めています。サードパーティ製のコンポーネントを組み合わせてWebアプリケーションを迅速に開発する、という時代の到来を告げる、Web Components仕様の動向にはこれからも注目が必要です。
まとめ
2回にわたって、「現在、そして近未来のWebが可能にすること」をご紹介してきましたが、いかがだったでしょうか。広がり続け、進化し続けるWeb技術を把握する一助になれば幸いです。
