1 HTML5の 動 向 とサービスプラット フォームとしての 可 能 性 2013.12.20 柳 原 広 昌 KDDI 研 究 所
アウトライン 2 背 景 HTML5の 動 向 ( 概 要 ) サービスプラットフォームとしてのHTML5 デモ インテリジェントクラウド(コミックレイアウト 表 示 ) HTML5の 組 込 系 への 適 用 ( 車 向 けインフォテイメン トシステム) 地 理 情 報 システムプラットフォーム まとめ
背 景 3 HTML5Webアプリが 各 ブラウザ 上 でサポートされつつある デバイス 非 依 存 な 共 通 アプリプラットフォームとして 期 待 高 度 なアプリがどこまで 提 供 できるかもカギ 現 状 と 予 測 2016 年 のモバイル 向 けブラウザ 台 数 が21 億 台 に (API Research) トップ100サイトのうち34%がHTML5 利 用 (binvision.com) 開 発 者 の75% がHTML5を 利 用 中 もしくは 計 画 中 (Evans Data) HTML5がIT 業 界 でのNo.1 求 人 トレンド(.netmagazine, indeed.com) 本 発 表 HTML5の 動 向 高 度 なユーザエクスペリエンスを1ソース マルチデバイスで 提 供 可 能 なHTML5プラットフォームについて 実 例 を 交 えて 紹 介
HTML5 概 要 (1/2) 4 文 書 構 造 の HTML5 デザインの CSS3 プログラム 要 素 の JavaScript で 構 成 HTML5 厳 密 規 定 でブラウザ 差 分 抑 制 文 書 の 論 理 構 造 や 表 示 の 仕 方 などを 記 述 既 存 のHTML4.0に 対 し 新 タグ(Canvas,Video, WebGL, SVG, など) の 追 加 と 記 述 方 法 を 簡 素 化 視 覚 的 にリッチに Webページの 見 栄 え(デザイン)を 定 義 CSS2.1に 比 べてよりリッチな 表 現 が 可 能 既 存 のCSS2.1と 互 換 CSS3 性 あり JavaScript オフライン 実 行 も 可 能 に 静 的 なWebページ 内 の 各 要 素 ( 文 章 ボタンなど)に 動 作 を 組 み 込 むことを 可 能 に 新 しいAPI(Application Cache, Web Workers, Web Socket, DeviceAPI, Geolocation, 等 )が 追 加
HTML5 概 要 (1/2) 5 HTML5から 新 たに 導 入 された 主 な 機 能 (1)Application Cache:オフライン 環 境 下 でのWebアプリケーションの 動 作 を 可 能 に (2) Local Storage: key-value 型 の 小 規 模 なデータベース (Web Storage), Indexed Database (IndexedDB), etc. (3) Device Access: 位 置 情 報 (Geolocation API), 端 末 の 向 き (Screen Orientation 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を 用 いたクラウドベースのフォトシス
HTML5 関 連 仕 様 の 俯 瞰 6
何 が 変 わる? 7 従 来 (HTML4.01 以 前 ) 今 後 (HTML5) ホームページ ゲーム 写 真 編 集 Web ページ Web アプリ ブラウザだけでアプリを 使 える
何 を 意 味 する? 8 エンドユーザ アプリインストールの 手 間 が 不 要 更 新 の 手 間 も 不 要 コンテンツプロバイダ マルチOS 向 けアプリ 開 発 が 容 易 に サービスプロバイダ 新 たなWebアプリマーケットの 誕 生 常 に 最 新 のサービスを 提 供
各 プレイヤーのW3C 標 準 化 スタンス 9 システムベンダー 知 財 に 関 してRANDが 基 本 だったが RFの 価 値 を 評 価 基 盤 的 標 準 についてはRFとし 市 場 拡 大 を 促 し 製 品 売 上 を 伸 ばす <より 効 率 よく 動 作 するなどの 非 標 準 部 分 は 知 財 は 確 保 と 思 われる> ケーブルTVオペレータ 商 業 TVサービスをHTML5 Videoで 提 供 する 上 でのギャッ プを 埋 める リモコン 音 声 多 重 マルチルーム 著 作 権 保 護 など チップベンダー モバイル 以 外 の 用 途 への 進 出 も 視 野 に 入 れ Webアプリを 効 率 よく 実 行 するためのAPIおよびライブラリ 整 備 を 行 う W3Cの 従 前 からのRoyalty Freeの 原 則 を 産 業 界 からも 支 持 W3C AC 会 合 2012におけるチュートリアルより
HTML5は 万 能 か? 10 課 題 1:ブラウザ/OS 別 の 実 装 差 分 HTML5の 仕 様 実 装 に 差 分 が 存 在 仕 様 として 策 定 されていても 実 装 されない 可 能 性 課 題 2: 処 理 パフォーマンス ネイティブアプリと 比 較 して 処 理 パフォーマンスは 劣 る 課 題 3:その 他 PFからの 移 植 既 存 アプリからの 移 植 は 必 ずしも 容 易 ではない 課 題 4:セキュリティ 機 能 DRM 系 が 未 規 定 Javascriptで 処 理 を 行 う 場 合 ソースコードが 露 出
ブラウザ 別 HTML5 機 能 サポート 率 11 Source:http://caniuse.com/
モバイル 向 けブラウザ 対 応 状 況 12 ios Safari (6.0) Opera mini (5.0-7.0) Android Browser (4.1) Opera Mobile (12.0) Chrome for Android (18.0) CSS 81 % 38 % 71 % 66 % 76 % HTML5 73 % 10 % 62 % 71 % 81 % JS 72 % 6 % 54 % 61 % 81 % WebGL WebStorag e IndexedDB WebSQL http://caniuse.comによる Recommendation, Proposed Rec., Candidate Rec.,Working Draftのサポート 状 況 ブラウザ 名 の 後 の 数 字 はバージョン 番 号
KDDIの3M 戦 略 13 FTTH CATV
通 信 キャリアから 見 たHTML5の 価 値 14 マルチデバイス OS プラットフォームをまたがる 統 一 的 サービス 単 一 ソースへの 集 約 によるコスト 削 減 コンパイル 不 要 ( 開 発 プロセスの 簡 易 化 ) ブラウザのみで 実 行 ( 即 実 行 可 能 更 新 インスト ール 不 要 ) オフライン 実 行 DLタイプコンテンツ( 電 子 書 籍 ) 提 供 や 待 ち 時 間 低 減 高 度 なグラフィックス 表 現 可 能 (CSS3, SVG) デバイスアクセスAPIの 整 備 (Geographic Info によるロケーション 型 サービス)
KDDIにおけるHTML5への 取 り 組 み 15 サービスオペレータとしての 環 境 整 備 オープン 化 コミュニティ 連 携 W3Cへの 貢 献 (SVG) Mozilla Factoryへの 協 賛 事 業 パートナーとの 連 携 クルマ 向 けインフォテインメント 車 載 器 にHTML5が 載 る 時 代 におけるNW 中 継 技 術 (WJ2012) インテリジェントなバックエンド 処 理 によるNW 魅 力 向 上 クラウド 上 のユーザ 写 真 コンテンツの 活 用
サービスプラットフォームとしてのHTML5 16 HTML5 Webコンテンツはアプリケーション プロ グラム 的 な 動 作 が 可 能 となっている サーバサイドにおける 進 化 もある アプリケーションマーケット 的 なWebアプリマーケット Webインテントによる 様 々なWebアプリの 登 録 と 呼 び 出 し エコシステムを 構 築 可 能 に HTML5はこれらから サービスレイヤのインフラと なっており 従 来 の 単 純 な 表 示 の 仕 組 みから 質 的 に 変 化
17 以 降 サービスレイヤの 事 例 を3 点 紹 介 (1) インテリジェントクラウド (サーババックエンドにお けるコミックレイアウト&スライドショー 自 動 生 成 ) (2) HTML5の 適 用 範 囲 をPCやスマートフォンから 組 込 系 デバイスへ 拡 大 ( 車 向 けインフォテイメントシス テム) (3) 日 常 生 活 に 利 用 できる 地 理 情 報 プラットフォーム
18 (1)インテリジェントクラウド(コミックレイアウト 表 示 ) HTML5では 従 来 のFlashに 迫 る 魅 力 的 な 表 現 をブラウザだけで 表 示 可 能 それを 活 かすため 画 像 理 解 や 感 性 に 訴 える 演 出 など バックエンド 技 術 の 研 究 開 発 も 推 進 ビデオや 写 真 のコミック 風 コマ 割 りレイアウト 表 示 技 術 1 画 像 選 定 2 切 り 抜 き コミック 風 コ 領 域 設 マ 割 り 生 成 定 撮 り 溜 められた 大 量 の 写 真,ビデオ 3 ぴったり ハマる 効 果 の 付 与 4 HTML5 表 現 3 1 2 4 上 下 に 隙 間 あり 5 6 7 9 8 10 時 間 順 類 似 度 から 画 像 選 択 重 要 領 域 の 認 識 隙 間 のないコマ 割 りを 自 動 作 成 各 コマのフェードインや コマ 内 でのカメラワーク 等 の 演 出 をHTML5で 実 現
自 動 切 り 抜 き 領 域 設 定 の 技 術 的 ポイント 切 り 抜 かれる 領 域 の 自 由 度 ( 柔 軟 性 )を 高 めるため 複 数 の 切 り 抜 き 領 域 を 設 定 できるように 19 この 写 真 は 横 長 矩 形 では 切 り 抜 かない こちらは 隙 間 が できちゃうな この 写 真 をこのコマに 入 れたいんだけど 複 数 の 領 域 を 自 動 指 定 W W H H こちらは うまくハマるけど 切 り 抜 きに 自 由 度 のある 画 像 がバッファとなり 自 由 度 のない 画 像 がコマにはまりやすくなる 注 目 領 域 絶 対 必 要 な 領 域 この 領 域 は 切 られない 推 奨 領 域 注 目 領 域 を 含 み 許 容 できる 縦 長 横 長 の 領 域 この 写 真 は 横 長 矩 形 でも 縦 長 矩 形 でも 切 り 抜 ける
最 終 レイアウト 上 の 調 整 20 コマ 数 指 定 レイヤーの 最 大 値 指 定 枝 分 岐 の 最 大 値 指 定 を 与 えると 0 H V 見 た 目 良 く 重 複 のない テンプレートを 網 羅 的 に 全 自 動 生 成 1 V 7 2 1 H 456 2 3 3 012332221 コマ 割 り 候 補 作 成 生 成 したテンプレートに 対 し 切 り 抜 き 領 域 形 状 とコマ 形 状 の 乖 離 度 を 評 価 評 価 の 高 いテンプレートを 選 択 (i)アスペクト 比 の 乖 離 度 評 価 Amin Ei ( aspect) max(log Api (ii) 画 像 重 要 度 の 乖 離 度 評 価 さらに Ei ( size) Fi Lri こんな 隙 間 が i,log Api Amax i,0) これらを 総 合 的 に 評 価 なくなるように 微 調 整 2 等 分 割 3 等 分 割 4 等 分 割
HTML5 デモ (Comic-Layout & SlideShow) 21
(2) HTML5の 組 込 系 への 適 用 ( 車 向 けインフォテイメントシステム) 22 ~( 例 )スマフォンのネットワーク 中 継 機 能 とHTML5 車 載 機 の 連 携 ~ Smartphone 車 載 機 Cloud 社 内 FTTH/CATV 3G/WiMAX/LTE 宅 内 Wi-Fi Wi-Fi 車 載 機 ではHTML5アプリが 動 作 Wi-Fiエリアでスマートフォンに HTML5コンテンツをダウンロード コンテンツプロバイダ KDDI 載 機 ベンダー 組 み 込 み 機 器 へも サービス 提 供 可 能 へ 載 機 ベンダーへのSL CPへの 新 マーケット 提 供 低 コスト 車 載 器 の 実 現 トラヒックオフロードによる 高 レスポンス スマートフォンにWebサーバ 載 器 にHTML5ブラウザ 載 器 はスマートフォンからWebア プリをロード 表
インフォテイメントシステムの 特 徴 23 コンテンツやアプリのマルチデバイス 利 用 スマートフォンのストレージに 格 納 されているコンテンツへの アクセス (A/V, 地 図, アドレス 帳, etc) 車 のパーソナル 化 パーソナル 化 されたHMIとWebアプリをユーザのスマートフォ ンから 一 元 的 に 提 供 レンタカーに 乗 っても 自 分 仕 様 の 設 定 に ナビに 対 してユーザの 嗜 好 を 反 映 シームレス ネットワーキング キャシュや 事 前 DLにより NW 断 でもサービス 継 続
シームレスサービスコンセプト 24 いつでも どこでも どんなデバイスでもサービス 提 供 サービスのパーソナル 化 ドライブ 中 も クルマを 降 りた 後 もサービス 継 続
スマートフォン 内 部 のナヒ ケ ーションマッフ 表 示 25
(3) 地 理 情 報 システムプラットフォーム 重 ねあわせ 地 図 の 実 現 手 法 の 比 較 分 散 型 マップ: SVG Map 各 々 異 なる 場 所 にある 地 図 データ を ブラウザから 直 接 アクセス (オープンなシステム) 26 システムA システムB ブラウザ システムC SVG Mapアプリ 配 信 サーバ システムA システムB 中 央 集 中 型 マップ 統 合 マップシステム Maps Server 共 通 システム 管 理 者 システム 毎 に 独 自 の APIを 呼 んでサーバ 側 で 統 合 処 理 (クローズド なシステム) ブラウザ システムC
SVG Mapプラットフォームの 特 徴 27 地 図 重 ねあわせ 表 示 のオープンプラットフォームである (W3Cでの 標 準 化 進 行 中 ) サーバ ハイパーリンクデータ ブラウザから 構 成 地 図 や 重 ねあわせようデータをSVGで 表 現 し それらの 関 係 をハイ パーリンクで 記 述 ブラウザ 内 でそれぞれのデータをマッシュアップ Static server Browser Mash-up Map Rendering
HTML5 Browser 上 でのSVG Mapのデモ 28 地 図 に 対 して 大 気 圧 や 降 雨 量 の 地 域 別 情 報 を 重 畳 ( 気 象 情 報 は3G 基 地 局 の 天 候 センサから 取 得 ) Weather Chart on 19 th June http://tenki.jp/past/detail/?day=19&m onth=6&year=2012 Viewing Atmospheric Pressure on SVG Map 大 気 圧 の 時 間 変 化 降 雨 量 の 時 間 変 化
SVG TL (Tiling & Layering) 29 SVG TLはSVGを 利 用 したマッピング 処 理 の 本 質 1 地 理 座 標 系 の 変 換 2Tiling 3Layering SVG 座 標 系 0,0 500,300 Viewbox Hyperlink 小 スケール SVGファイル コンテナファイル Hyperlink Layer A 座 標 系 変 換 Hyperlink 中 スケール SVGファイル コンテナファイル 大 スケール SVGファイル コンテナファイル Layer B Layer C 136.569,35.276 緯 度 経 度 座 標 系 表 示 に 必 要 な SVGファイルをリ ンクに 従 って 動 的 に 取 得 座 標 系 に 基 づいて 各 レ イヤの 情 報 化 をブラウザ 上 で 重 畳
まとめ 30 HTML5の 動 向 紹 介 HTML5の 特 性 を 活 用 した 実 用 的 なアプリケーションを 紹 介 HTML5のサービスインフラストラクチャとしての 可 能 性 を 提 示 今 後 の 展 開 さらなる 実 用 的 アプリケーションの 展 開 W3Cへの 必 要 機 能 の 提 案