HTML5の最新動向

5 –2
第
第
1
2
技術 ［ HTML5 の最新動向 ］
HTML5 の最新動向
部
部
黄 聖實 株式会社ミツエーリンクス コンテンツ・インテグレーション本部
第
第
3
4
積極的に HTML5 の関連技術を取り込む OS やブラウザー
独自仕様からウェブ標準へ市場の関心が集中
部
部
HTML5 は、HTML4 に 28 種類の新規マークアップ
を追加し、HTML5 仕様と関連仕様として W3C
（World
第
5
Wide Web Consortium）により 2011 年 5 月に最終草
案
の形で策定され、2014 年までに勧告にすること
（＊ 1）
部
さらに、ウェブアプリケーション開発のために追加され
第
6
7
た関連 API も、次々に勧告候補や勧告案として策定さ
部
部
スマートフォンやタブレット端末の成功に大きく影響
を与えたものはアプリだろう。2012 年 4 月現在、アップ
Play」には 45 万本以上のアプリが登録されている。
ほかにも
「Windows Phone 7」
向けの
「Windows Mar-
れている。このAPIの標準開発はWG
（Working Group）
ketplace」や ウ ェブアプリケ ーシ ョンを 提 供 す る
に分かれており、Web Application WG、Geolocation
「Chrome Web Store」など、アプリケーションストアは
WG などの各 WG で関連標準の開発が進められている。
デバイスやプラットフォームとともに増えている。この
ネイティブアプリと同等の
ウェブアプリが開発可能に
きるハイブリッドタイプのアプリケーションが注目されて
影響で、開発にかかる費用の低減とソースを再利用で
いる。iOS なら Objective-C、Android なら Java といっ
HTML5 に含まれている内容は幅広い。現在、主なブ
たプラットフォーム独自の開発言語を駆使して開発す
ラウザーが提供する機能を見ると、ユーザーの入力情報
る必要があるが、ハイブリッドアプリケーションは Web-
に使用される入力タイプに関するWeb Form、二次元の
Viewコンポーネントなどのネイティブのコンテナをアプ
ラスターグラフィックを表現するための Canvas、XML
リの中に置いて、コンテンツは HTML5 で開発できる。
ベースの二次元ベクトルグラフィックを表現するための
HTML5 単体で開発したウェブページやウェブアプリ
SVG、映像および音声を表現するための Video/Audio、
はアプリケーションストアに公開できないが、ネイティブ
デバイスの位置情報を提供する Geolocation、ウェブア
のコンテナを用いることでアプリケーションとしてパッ
プリケーションとサーバー側プロセスの双方向通信のた
ケージすることで、それを可能にしている。また、ネイ
めの Web Socket、ウェブアプリケーションのスレッド処
ティブのコンテナを使うことで、ブラウザーからはアクセ
理のための Web Worker などがある。このような API
スできないカメラ、マイク、GPS、プッシュメッセージな
が HTML5 仕様に策定されることで、ウェブ開発者はネ
どデバイスのネイティブ機能が使えるようになる。
イティブアプリケーション（Native Application）と同等
のウェブアプリケーションおよびスマートフォンやタブ
OS やブラウザーへの HTML5 の実装状況
レット端末でも動作するハイブリッドアプリケーション
マイクロソフトは、2011 年 6 月に同社のクラウドスト
（Hybrid Application）の開発が可能になった。
200
ルの「App Store」には 50 万件以上、グーグルの「Google
を目標としている。
第
ソースを再利用できる
ハイブリッドアプリに注目
第 5 部 製品・技術動向
レージサービスである「Windows Live SkyDrive」を同
技術 ［ HTML5 の最新動向 ］
社の製品である Silverlight をやめ、HTML5 Video、
lightを含めプラグインに非対応とするなど、ウェブ標準
CSS3 などの HTML5 関連技術を採用し、特別なソフト
にさらにこだわっている。
ウェアやプラグインなどを利用しなくても、ファイルの
表示から閲覧まで操作できるようになった。
者向けのイベント「Windows Developer Days」
（WDD）
MediaQuery を使ったり、Metro スタイルアプリと In-
にて、Windows OS 開発の責任者であるスティーブン・
ternet Explorer 10 のデータ共有を IndexedDB で処理
シノフスキー氏は、2012 年 6 月1 週目に Windows 8 のリ
したりするなどマイクロソフトは積極的に HTML5 関連
リースプレビュー版（RC 版）を公開する予定と発表し
技術を Windows 8 で取り込もうとしている。
いユーザーインターフェースと「Metro スタイルアプリ」
HTML5 のウェブ開発者や デザイナーへの影響
アドビシステムズはマルチデバイス対応と HTML5 関
ケーションを採用している。2011 年 9 月に開催された開
連技術に集中することを表明している。2011 年 10 月に
発者向けのカンファレンス「//build/」
（BUILD）では、同
開催されたウェブ開発者やデザイナー向けカンファレン
社 の 開発環境 で あ る「Microsoft Visual Studio 11」
ス「Adobe MAX 2011」にて、同社の技術である Flash
（2012 年 5月現在、ベータ版）
とHTML5関連技術を使っ
プラットフォームの独自言語「ActionScript」から GPU
て Metro スタイルアプリの開発ができると紹介された。
（Graphics Processing Unit）を活用してグラフィック処
Metro スタイルアプリは、
「Trident（トライデント）6.0」
理を行うStage3Dとアドビのアプリケーション開発環境
と呼ばれる Internet Explorer 10 にも搭載されている
である Adobe AIR（Adobe Integrated Runtime）から
HTMLレンダリングエンジン上で動作し、WinRT
（Win-
OS のネイティブコードの連動が実現できる ANE（Ac-
dows Runtime）API を利用してネイティブ機能にアク
tionScript Native Extensions）を発表した。ANE は、
セスする仕組みになっている。Metro スタイルアプリは
PC、iOS、Android などの OS ネイティブコードのメソッ
専用アプリケーションストアである「Windows Store」か
ドを読み出せるため、ネイティブ言語の習得が必要だが
らダウンロードできる。
HTML5 では実装できないハイブリッドアプリケーショ
また、Adobe MAX 2011 では、ウェブフォントサービ
ルアプリでは、視覚効果（Visual Effects）
、タッチ操作
ス「TypeKit」の 買収 と W3C に CSS Regions と CSS
などの CSS3 や WebGL、画像やスクリプトライブラリな
Shaders を提案して HTML5 への対応を表明した。そ
どをローカルにキャッシュするApplication Cache API
のほか、技術や開発中のソフトウェアでもHTML5 対応
（AppCache）
、ローカルファイルを管理するFile API、入
を進めている。
「Adobe Labs」
に公開された
「Fireworks
力画面をデザインする Web Forms、JavaScript で並列
CSS3 Mobile Pack」には、同様のソフトウェアで制作し
処理を行うWeb Workers、異なるコンテキストコードが
たデザイン要素から CSS3 プロパティーを抽出したり独
互いに通信できる Channel Messaging、サーバーと双
自の「jQuery mobile」用スプライト画像とテーマ用 CSS
方向通信を行うWebSocketなどのHTML5関連技術が
を作成したりする機能が含まれている。ベクター画像を
追加されている。アップルの App Store やグーグルの
作成できる Fireworks の特性を十分活用したこの機能
Google Play などに登録されているアプリがほかのプ
を使うと、ウェブ開発者やデザイナーの共同作業はやり
ラットフォーム用ハイブリッドアプリへ移行することが
やすくなるだろう。
特に Metro UI の Internet Explorer 10 は、Silver-
第
第
第
第
第
第
ン制作には有用だろう。
plorer 10 と同様のエンジンを使っている Metro スタイ
が考えられる。
部
DTP ソフトウェアの「Adobe InDesign」は、
「Digital
Publishing Suite」に含まれている「Folio Producer」と
第 5 部 製品・技術動向
2
3
部
部
と呼ばれるマルチデバイス向けのハイブリッドアプリ
Windows 8 の最新版の新機能である Internet Ex-
1
Windows 8 が正式にリリースされるまでは機能変更
スクリーンに分割して表示するスナップ（Snap）機能に
Preview 版）には「Metro（メトロ）UI」と呼ばれる新し
第
や追加が続くだろうが、2 つの Metro スタイルアプリを
また、2012 年 4 月に東京で開催された Windows 開発
た。Windows 8 最新版（2012 年 5 月現在、Consumer
5 –2
201
4
5
6
7
部
部
部
部
5 –2
第
第
1
2
部
部
技術 ［ HTML5 の最新動向 ］
「Folio Builder」拡張コンポーネントを使用して、iPadと
プラットフォーム技術が市場を牽引してきた。しかし、
Androd タブレット端末用の電子書籍に書き出せる。さ
PC やスマートフォン、タブレット端末などのデバイスの
らに、ローカル画像や HTML、JavaScript、CSS などを
多様性、仕様変更サイクルの速さなどに、独自仕様の
ページの要素として追加できるので、モバイル用のアプ
RIA プラットフォームはついていくのが難しかったた
リケーション開発の経験がないウェブ開発者やデザイ
め、自然な流れで、プラグイン技術である RIA よりはマ
ナーはコンテンツだけに集中できる。
ルチデバイスに簡単に対応できるHTML5 のようなウェ
2012 年 5 月に公開されたアドビ向けの開発者やデザ
第
第
第
第
第
3
4
5
6
7
部
部
部
部
イナー用クラウド共有サービスである「Adobe Creative
実際に、2011 年 10 月にソーシャルゲーム会社のジン
Cloud」
（Creative Cloud）は、HTML5 関連技術を採用
ガは 自社 の ゲ ームプラ ットフ ォ ームを Flash か ら
してマルチデバイスに対応している。Creative Cloud に
HTML5 に転換して「Mafia Wars Shakedown」を公開
は「Adobe Creative Suite 6（Adobe CS6）Master Col-
した。2011 年 3 月にディズニーは、HTML5 ベースの
lection」と共に新しい HTML5 のデザインと開発ソフト
ゲ ーム 開発 エンジン「Rocket Engine」を 提供 す る
ウェア「Adobe Muse」と「Adobe Edge」プレビュー版を
Rocket Pack を 買収 し た。2012 年 2 月、Facebook は
提供している。
「Adobe Flash Professional CS6」
（Flash
W3C コミュニティー・ビジネスグループ「Core Mobile
CS6）は同様のソフトウェアで作成したシンボルやアニ
Web Platform Community Group」
（CG）の立ち上げと
メーションシーケンスに反映されているグラフィックや
モバイルアプリケーションに向けた標準仕様開発に協力
座標の情報をスプライトシートと JSON/XML に書き出
するほか、モバイル事業者と提携し、モバイルアプリ
して HTML5 アニメーションに簡単に適用できるように
ケーションから決済ができるシステムを準備していると
なっている。また、Flash CS6 の拡張機能「Toolkit for
発表した。また、2012 年 5 月にはウェブアプリを提供す
CreateJS」を使うと、オープンソースの CreateJS フレー
る「Facebook App Center」開設も発表した。
ムワークを使用して、タイムラインで作成したアニメー
HTML5と関連仕様は勧告に向けて開発中ではある。
ションとグラフィック要素を HTML5 の Canvas と Ja-
スマートフォン、タブレット端末、TV、カメラ、冷蔵庫、
vaScript に書き出せる。
部
ブ標準仕様に市場の関心が集中している。
デジタルサイネージなど、新しいデバイスやプラット
また、アドビは 2011 年 11 月にモバイル用 Flash Play-
フォームは現在も徐々に増えている。このような状況
er の開発を中断し、モバイルでは HTML5 関連技術に
で、アプリケーションは、ネイティブアプリからハイブ
集中することを発表すると同時に、同社のオープンソー
リットアプリへ、そして最終的には環境依存が少ない
スで あ る「Flex SDK」や「BlazeDS」な ど を Apache
ウェブアプリに変わっていくだろう。オフラインキャッ
Software Foundation（ASF）寄贈すると発表した。こ
シュを使ってインストールできるアプリを作る、We-
の 発表 に よ り、モバイル 用 Flash Player は「Flash
bRTC（Web Real-Time Communications）を使ってカ
Player 11.1 for Android」
「Flash Player 11.1 for Black-
メラやマイクでリアルタイム通信をする、AR
（Augment-
berry Playbook」のリリースを最後に、今後は新たなモ
ed Reality）
を使ってディスプレーにバーチャル情報を重
バイル向けのチップセット、ブラウザー、OS向けにFlash
ねる。今後も、市場のニーズに応え、マルチデバイスに対
Player を開発 することはないとしている。そして、
応した HTML5 と関連技術の策定は着実に進んでいく
W3C と協力し、Flash と同等の機能が実現できるよう
のではないだろうか。
に HTML5と関連技術に集中する予定と明らかにした。
独自仕様からウェブ標準へ
1999 年の HTML 4.01 仕様公開から 2007 年 HTML5
の策定までの隙間は、アドビの Flash やマイクロソフト
の Silverlight などの RIA（Rich Internet Application）
202
第 5 部 製品・技術動向
（＊ 1）W3C の仕様策定プロセスには「草案（Working
「最終草案（ Last
Draft）」
「勧告候補（ Candidate Recommendation ）」
Call Working Draft）」
「 勧 告 案（ Proposed Recommendation ）」
「 勧 告（Recommendation）」の 5 段階がある。