1

HTML5の動向とサービスプラット
フォームとしての可能性
2013.12.20
柳原 広昌 KDDI研究所

アウトライン背景

HTML5の動向（概要）

サービスプラットフォームとしてのHTML5



デモ

インテリジェントクラウド（コミックレイアウト表示）HTML5の組込系への適用 (車向けインフォテイメントシステム)



地理情報システムプラットフォーム

まとめ

2

背景
HTML5Ｗｅｂアプリが各ブラウザ上でサポートされつつある。
 デバイス非依存な共通アプリプラットフォームとして期待。
 高度なアプリがどこまで提供できるかもカギ
 現状と予測









2016年のモバイル向けブラウザ台数が21億台に (API Research)
トップ100サイトのうち34%がHTML5利用 (binvision.com)
開発者の75% がHTML5を利用中もしくは計画中 (Evans Data)
HTML5がIT業界でのNo.1求人トレンド(.netmagazine, indeed.com)

本発表

HTML5の動向
高度なユーザエクスペリエンスを１ソース・マルチデバイスで提供可
能なＨＴＭＬ５プラットフォームについて、実例を交えて紹介。

3

HTML5概要（1/2）

4

文書構造の「HTML5」、デザインの「CSS3」、プログラム要素の「JavaScript」で構成
厳密規定でブラウザ差分抑制
 HTML5


文書の論理構造や表示の仕方などを記述。
 既存のHTML4.0に対し、新タグ(Canvas,Video, WebGL, SVG,など) の追加と記述方法を簡素化。




CSS3

視覚的にリッチにWebページの見栄え(デザイン)を定義。
 CSS2.1に比べてよりリッチな表現が可能。既存のCSS2.1と互換性あり。


JavaScript

オフライン実行も可能に

静的なWebページ内の各要素(文章、ボタンなど)に、動作を組み込むことを可能に。
 新しいAPI(Application Cache, Web Workers, Web Socket,DeviceAPI, Geolocation, 等)が追加。
HTML5概要（1/2）
HTML5から新たに導入された主な機能(1)Application Cache:オフライン環境下でのWebアプリケーションの動作を可能に
 (2) Local Storage: key-value型の小規模なデータベース (Web Storage),Indexed Database (IndexedDB), etc.
 (3) Device Access:位置情報 (Geolocation API),端末の向き (ScreenOrientation API), etc.
 (4) Application Communication:非同期通信 (WebSocket API),イベント
プッシュ (Server-Sent Events)
 (5) Multimedia: 音声 (HTMLAudioElement)、 映像 (HTMLVideoElement)の再生
 (6) Graphics:ベクタグラフィクス (SVG: Scalable Vector Graphics), canvas
要素, etc. （後述） SVGを用いた地図情報プラットフォーム.
 (7) External collaboration and performance improvement:
XMLHttpRequest Level 2, マルチスレッド (Web Workers) (8) Cascading Style Sheet (CSS3): Animations, Transitions,Transforms (2D and 3D). （後述） CSS3を用いたクラウドベースのフォトシス
テムを.
 ・・・・・・


5

HTML5関連仕様の俯瞰6

7

何が変わる?
従来（HTML4.01以前）

今後（HTML5）

ゲーム
ホームページWeb ページ

写真編集
Web アプリブラウザだけでアプリを使える何を意味する?


エンドユーザアプリインストールの手間が不要 更新の手間も不要

コンテンツプロバイダ


マルチOS向けアプリ開発が容易に

サービスプロバイダ
新たなWebアプリマーケットの誕生
 常に最新のサービスを提供


8

各プレイヤーのW3C標準化スタンス

9システムベンダー
知財に関してRANDが基本だったが、RFの価値を評価
 基盤的標準についてはRFとし、市場拡大を促し、製品売上を伸ばす <より効率よく動作するなどの非標準部分は知財は確保と思われる>


ケーブルTVオペレータ


商業TVサービスをHTML5 Videoで提供する上でのギャップを埋める

リモコン、音声多重、マルチルーム、著作権保護など

チップベンダー

モバイル以外の用途への進出も視野に入れ、Webアプリを効率よく実行するためのAPIおよびライブラリ整備を行う

W3Cの従前からのRoyalty Freeの原則を産業界からも支持※W3C AC会合2012におけるチュートリアルより

HTML5は万能か?


課題①:ブラウザ/OS別の実装差分
HTML5の仕様実装に差分が存在
 仕様として策定されていても、実装されない可能性

課題②:処理パフォーマンス


課題③:その他PFからの移植ネイティブアプリと比較して、処理パフォーマンスは劣る
既存アプリからの移植は必ずしも容易ではない

課題④:セキュリティ機能
DRM系が未規定
 Javascriptで処理を行う場合、ソースコードが露出

10

ブラウザ別HTML5機能サポート率

Source：http://caniuse.com/

11

モバイル向けブラウザ対応状況
iOS Safari Opera(6.0)
mini(5.0-7.0)

AndroidBrowser(4.1)

OperaMobile(12.0)

ChromeforAndroid(18.0)

CSS

81 %

38 %

71 %

66 %

76 %

HTML573 %

10 %62 %71 %81 %

JS

72 %

6%

54 %

61 %

81 %

WebGL×××○

×WebStorage○

×

○

○

○

IndexedDB ××××○

WebSQL×○○○○

http://caniuse.comによる、Recommendation, Proposed Rec.,
Candidate Rec.,Working Draftのサポート状況
ブラウザ名の後の数字はバージョン番号

12

13

KDDIの3M戦略

FTTH CATV通信キャリアから見たHTML5の価値

マルチデバイス・OS
プラットフォームをまたがる統一的サービス
 単一ソースへの集約によるコスト削減


コンパイル不要(開発プロセスの簡易化)
 ブラウザのみで実行(即実行可能、更新インストール不要) オフライン実行


DLタイプコンテンツ(電子書籍)提供や待ち時間低減

高度なグラフィックス表現可能 (CSS3, SVG)
 デバイスアクセスAPIの整備 (Geographic Infoによるロケーション型サービス)
14

KDDIにおけるHTML5への取り組み

サービスオペレータとしての環境整備オープン化・コミュニティ連携
W3Cへの貢献 (SVG) Mozilla Factoryへの協賛


事業パートナーとの連携

クルマ向けインフォテインメント


車載器にHTML5が載る時代におけるNW中継技術(WJ2012)

インテリジェントなバックエンド処理によるNW魅力向上

クラウド上のユーザ写真コンテンツの活用

15

サービスプラットフォームとしてのHTML5
HTML5 Webコンテンツはアプリケーション・プログラム的な動作が可能となっている。
 サーバサイドにおける進化もある

アプリケーションマーケット的なWebアプリマーケット
 Webインテントによる様々なWebアプリの登録と呼び出し

エコシステムを構築可能に
HTML5はこれらから、サービスレイヤのインフラとなっており、従来の単純な表示の仕組みから質的に変化

16

17



以降、サービスレイヤの事例を3点紹介(1) インテリジェントクラウド (サーババックエンドにおけるコミックレイアウト&スライドショー自動生成) (2) HTML5の適用範囲をPCやスマートフォンから組込系デバイスへ拡大 (車向けインフォテイメントシステム)
 (3) 日常生活に利用できる地理情報プラットフォーム(1)インテリジェントクラウド(ｺﾐｯｸﾚｲｱｳﾄ表示)
HTML5では、従来のFlashに迫る魅力的な表現をブラウザだけで表示可能
それを活かすため、画像理解や感性に訴える演出など、バックエンド技術の研究開発も推進

ビデオや写真のコミック風コマ割りレイアウト表示技術① 画像選定② 切り抜き領域設定

撮り溜められた大量の写真，ビデオ③ コミック風コ
マ割り生成

①

○
ぴったりハマる×
上下に隙間あり

時間順、類似度から画像選択④ 効果の付与
HTML5表現

重要領域の認識

隙間のないコマ割りを自動作成

②

③

④
⑤

⑥ ⑦

⑧

⑨

⑩

各コマのフェードインやコマ内でのカメラワーク等の演出をHTML5で実現

18

19

自動切り抜き領域設定の技術的ポイント
切り抜かれる領域の自由度（柔軟性）を高めるため、複数の切り抜き領域を設定できるように・・・

×こちらは隙間ができちゃうな・・・

この写真をこのコマに入れたいんだけど・・・

この写真は横長矩形では切り抜かない複数の領域を自動指定
WWHH○こちらはうまくハマるけど注目領域
この写真は横長矩形でも縦長矩形でも・・・絶対必要な領域。
切り抜ける
この領域は切られない。
推奨領域
・・・注目領域を含み、許容できる縦長・横長の領域

切り抜きに自由度のある画像がバッファとなり、自由度のない画像がコマにはまりやすくなる。

20

最終レイアウト上の調整•コマ数指定•レイヤーの最大値指定•枝分岐の最大値指定を与えると・・・
見た目良く、重複のないテンプレートを網羅的に
全自動生成

0(i)アスペクト比の乖離度評価
Ei (aspect )  max(log⑦
1 V
2 ① H ④⑤⑥
3 ②③

等分割

4

これらを総合的に評価

さらに、、、
012332221

コマ割り
候補作成

2等分割

Amini
Api, log,0 )
Api
Amaxi

(ii)画像重要度の乖離度評価

Ei ( size) | Fi  Lri |HV

3等分割

生成したテンプレートに対し、切り抜き領域形状とコマ形状の乖離度を評価。評価の高いテンプレートを選択こんな隙間が・・・

なくなるように微調整HTML5 デモ (Comic-Layout & SlideShow)21

(2) HTML5の組込系への適用(車向けインフォテイメントシステム)

22～（例）スマフォンのネットワーク中継機能とHTML5車載機の連携～
Smartphone
Cloud

社内
3G/WiMAX/LTE

Wi-Fi

FTTH/CATV

車載機ではHTML5アプリが動作

宅内

Wi-FiエリアでスマートフォンにHTML5コンテンツをダウンロード

Wi-Fi

コンテンツプロバイダ

組み込み機器へもサービス提供可能へKDDI

⾞載機ベンダーへのＳＬ、CPへの新マーケット提供•

スマートフォンにWebサーバ•

⾞載器にHTML5ブラウザ•

⾞載器はスマートフォンからWebア
プリをロード・表⽰

車載機

⾞載機ベンダー

低コスト車載器の実現
トラヒックオフロードによる高レスポンス

インフォテイメントシステムの特徴コンテンツやアプリのマルチデバイス利用

スマートフォンのストレージに格納されているコンテンツへのアクセス (A/V, 地図, アドレス帳, etc)

車のパーソナル化
パーソナル化されたHMIとWebアプリをユーザのスマートフォンから一元的に提供
 レンタカーに乗っても自分仕様の設定に
 ナビに対してユーザの嗜好を反映

シームレス ネットワーキング

キャシュや事前DLにより、NW断でもサービス継続23

シームレスサービスコンセプト

いつでも、どこでも、どんなデバイスでもサービス提供
サービスのパーソナル化。ドライブ中も、クルマを降りた後もサービス継続24

スマートフォン内部のﾅﾋﾞｹﾞｰｼｮﾝﾏｯﾌﾟ表示25

(3) 地理情報システムプラットフォーム
重ねあわせ地図の実現手法の比較
分散型マップ： SVG Map

各々異なる場所にある地図データを、ブラウザから直接アクセス。
（オープンなシステム）

システムA

ブラウザ
システムB
システムC
SVG Mapアプリ
配信サーバ

中央集中型マップ
統合マップシステム
システムA

システムB

システムC

Maps
Server共通システム
管理者

システム毎に独自のAPIを呼んでサーバ側で統合処理（クローズドなシステム）

ブラウザ

26

27

SVG Mapプラットフォームの特徴
地図重ねあわせ表示のオープンプラットフォームである(W3Cでの標準化進行中)
 サーバ、ハイパーリンクデータ、ブラウザから構成

地図や、重ねあわせようデータをSVGで表現し、それらの関係をハイパーリンクで記述

ブラウザ内でそれぞれのデータをマッシュアップ
Static serverBrowser
Mash-up

Map
Rendering

HTML5 Browser上でのSVG Mapのデモ

地図に対して、大気圧や降雨量の地域別情報を重畳(気象情報は3G基地局の天候センサから取得)

Weather Chart on 19th June
http://tenki.jp/past/detail/?day=19&m
onth=6&year=2012

Viewing Atmospheric Pressure on
SVG Map
大気圧の時間変化

降雨量の時間変化

28

29

SVG TL (Tiling & Layering)
SVG TLはSVGを利用したマッピング処理の本質①地理座標系の変換③Layering②Tiling
Viewbox

SVG 座標系

小スケール
SVGファイル

0,0500,300

Hyperlink

Hyperlink

コンテナファイル
中スケール
SVGファイルコンテナファイル

Layer A
Hyperlink
Layer B
コンテナファイル
Layer C大スケール
SVGファイル

座標系変換
136.569,35.276
緯度、経度座標系

表示に必要なSVGファイルをリンクに従って動的に取得

座標系に基づいて各レイヤの情報化をブラウザ上で重畳

まとめ
HTML5の動向紹介
 HTML5の特性を活用した実用的なアプリケーションを紹介
 HTML5のサービスインフラストラクチャとしての可能性を提示


今後の展開
 さらなる実用的アプリケーションの展開
 W3Cへの必要機能の提案

30