普及期の HyperLink ポータルサーチエンジン 3 Web2.0 クラウトと呼ばれるものポータルのクラウド化 Proprietary Database? 4 2

(1)

1

HTML5とSVG Map

ＫＤＤＩ技術戦略部

高木悟

企画セッション「次世代AV情報システムにおけるインタラクション」

２０１０年６月２７日

_{2010年度第38回画像電子学会年次大会}

初期のWWW

HyperLink

(2)

3 普及期のWWW

HyperLink

ポータル

サーチエンジン

２０１０年６月２７日

_{2010年度第38回画像電子学会年次大会}

Web2.0⇒ｸﾗｳﾄﾞと呼ばれるもの

Proprietary Database?

ポータルのクラウド化

(3)

5 ＷＷＷの寡占化と分断

Proprietary

Interfaces?

クラウド１

クラウド２

クラウド３

ハイパーリンクのような

接続の簡便さはない

２０１０年６月２７日

_{2010年度第38回画像電子学会年次大会}

WWWの変化の分析(仮説)

• 元来のWWW

(ハイパードキュメントコンテンツネットワーク)

から、

クラウドサービス

にWWWの中心が変化

– CMSなどによりコンテンツは作りやすく、便利になった

– 情報はクラウドの非公開DB内に格納・公開性低下

オリジナルのWWWは役割を終えつつある？？

• 初期のWWWのメリット～より高いオープン性

– ｺﾝﾃﾝﾂを利用者（発信者)が掌握

⇒ HTML+WebServer

– あらゆるｺﾝﾃﾝﾂが無制限に連結可能 ⇒ ﾊｲﾊﾟｰﾘﾝｸ

＝ポータルによる支配が薄い

利用者(お客様)中心

の環境

⇒ 新たなWWWの変革に向けた課題

(4)

7 ＨＴＭＬ５

２０１０年６月２７日

_{2010年度第38回画像電子学会年次大会}

2009年 HTML5は大きな話題に

(5)

9 主要３社の対応の実際

• Apple

Safari

iPad

iPhone

• Google

Chrome

ChromeOS

Android

Maps, Wave, Gears, YouTube ・・・・・・

• Microsoftも追随

次期ＩＥ(IE9) が対応

(3/17ニュース)

２０１０年６月２７日

_{2010年度第38回画像電子学会年次大会}

HTML5 : 新世代のウェブブラウザ規格

• １９９９年以来のバージョンアップ

– インターネット速度・端末性能の大幅な増加・モバイル化を背景に

• マルチメディアプラグインを不要にする技術

– Ｆｌａｓｈ

, Windows Media, Quick Time に代わり

⇒HTML5 Video

(動画),

Audio

(音声),

ＳＶＧ

/Canvas

(ｸﾞﾗﾌｨｯｸｽ&ＧＵＩ)

• モバイルデバイス

を対象にした機能拡張

– Geolocation API (測位デバイス)

– Web Storage (ローカルデータベース(オフライン対応)

⇒ ＷｅｂＯＳ

～

ＯＳと同等の機能全てがブラウザに搭載

– 高性能化したJavaScript処理系

(最新のJAVA VMに並ぶレベルにまで進歩)

– WebWorkers(マルチスレッド)

– ＡＰＩの充実(上記＋ローカルデバイスアクセス)

(6)

11 HTML5によるWWWの構造変革への期待

WWW

従来のWebブラウザ

単なる表示端末として機能

WWWはクラウド

サービスの伝送路

主な機能は

サーバが提供

情報はクラウド内独自DBに蓄積

Web2.0

ユーザ体験の高度化～高度な端末側処理

リモートVirtual Machine化・マルチメディア化

HTML5ブラウザ

WWW

Web2.0の高度化

Web3.0の時代

ブラウザ自体のOS化 (Web OS) ＝

ブラウザが自律・独立した情報処理ノードに

WWWが分散ｺﾝﾋﾟｭｰﾃｨﾝｸﾞ環境に

(=クラウドのWWW化)

WWW

サーバはサーバにしか

できない処理を提供

ストレージ

_{HTML5ブラウザ}

２０１０年６月２７日

_{2010年度第38回画像電子学会年次大会}

ＳＶＧＭａｐ

(7)

13 地図～最大のウェブアプリ

⇒ 地図サービスの変革が、ＷＷＷ全体の変革の引き金に

Web2.0APIの利用シェア TOP10

• Web2.0サービスランキングでも１位 (Google Maps)

⇒ 最も典型的なクラウド型サービス(マッシュアップの代名詞)

地図乗換案内ウエブメール翻訳動画共有サイトファイル保存動画写真編集アフィリエイトカレンダーアクセス解析写真共有サイトソーシャルブクマグループウェアワープロ表計算ＴｏＤｏ管理 0 20 40 60 80 100

ウェブアプリ利用率ランキング(インターネット白書2009)

• ウェブアプリ利用率ランキング：１位

⇒ ポータルのキラーサービス

２０１０年６月２７日

_{2010年度第38回画像電子学会年次大会}

相互利用は今もMap/GISの最大の課題

地理空間情報産学官連携協議会：内閣府・東京大学

地理空間情報の利活用に係るアンケート調査より

Web2.0/Google Maps

出現から数年経過して

いるにも関わらず

(8)

15 ＳＶＧ

Scalable Vector Graphics(HTML5のベクタ図形ﾌｫｰﾏｯﾄ）

• ベクタグラフィックスの特徴

画像を、図形（線・円・面など）の集合として処理

<?xml version="1.0" encoding="UTF-8"?>

<svg xmlns="http://www.w3.org/2000/svg">

<polygon points=“10,10 10,50 50,50 50,100 100,100 100,10” fill=“blue” />

①：ポリゴン

<circle cx=“170” cy=“50” r=“40” fill=“yellow” stroke=“green” stroke-width=“3” />

②：円

<polyline points=“250,10 250,100 340,100 340,50” fill=“none” stroke=“red” stroke-width=“10”/>

③：線

</svg>

①

②

③

• データの記述例：

HTML5ｺﾝﾃﾝﾂに埋め込める

画面解像度に応じた綺麗な描画

プリンタの解像度も最大限活用

図形単位で識別・表示制御

⇒ アニメーション・ＧＵＩ

Flashコンテンツに見られるアニメーションや

高度なUIは、ベクタ図形の特徴を生かしたもの

２０１０年６月２７日

_{2010年度第38回画像電子学会年次大会}

等高線

50m

100m

150m

200m

SVGの地図応用

地図はベクタグラフィックスでの表現が最適

自分の位置の表示

ナビ

(経路探索・検索)

３Ｄ表示

図形メタデータにより高度なサービスに応用

北緯35.12度,東経134.22度

6m

学校

地理座標

カテゴリ

包含

幅

接続

–GPSの座標系

–道路・建物等の識別

–階数・標高等の設定

3階建

図形メタデータの例：

(9)

17 SVG Map

～

HTML5標準

機能による地図PF

• ブラウザを中心にした地図サービスを実現する標準仕様

– 高性能化・高機能化したHTML5ブラウザに機能(描画・マッシュアップ等)の大半を

WWW

新世代のWebブラウザ

ハイパーリンクを辿り、コンテンツを集約

WWW

従来のWebブラウザ

単なる表示端末として機能

従来のWeb

地図サービス

SVG Map

Optional

SVG File

WWW自身が、地図DB/ｸﾗｳﾄﾞとなる

コンテンツの集約はサーバが実施

• ＫＤＤＩ保有の基本特許

– 地図マッシュアップに関する基本特許：

JP3503397,US6107961：多くの既存ウェブサービスが関係

の無償利用が宣言された唯一の形式

無償

２０１０年６月２７日

_{2010年度第38回画像電子学会年次大会}

SVG Mapを実現する仕様：

SVG Tiling and Layeringの概要

動物園

ガイドマップ

ハイパーリンク

レイヤリング

全て標準のSVGファイルとハイパーリンクだけ

で地図プラットホームを実装

統合GISに適す

小縮尺

SVGファイル

中縮尺

SVGファイル群

大縮尺

SVGファイル群

ハイパーリンク

タイリング

大規模基盤地図に適す

レイヤー

SVGファイル群

コンテナー

SVGファイル

(10)

19 SVG MapによるWWWの構造変革

WWW

新世代のWebブラウザ

ハイパーリンクを辿り、コンテンツを集約

WWW

従来のWebブラウザ

単なる表示端末として機能

従来のWeb

地図サービス

SVG Map

Optional

SVG File

SVG”ファイル“をWWW上で配信、

情報の連結はハイパーリンクで

コンテンツの集約はサーバが実施

２０１０年６月２７日

_{2010年度第38回画像電子学会年次大会}

1/3：ＳＶＧＭａｐは、地図サービス

のサーバコストを低下させる

• 単純・安価なウェブサーバ

（単なるｳｴﾌﾞｽﾄﾚｰｼﾞｻｰﾊﾞ）

で運用可能

WWW

新世代のWebブラウザ

WWW

従来のWebブラウザ

従来のWeb

地図サービス

SVG Map

SVG File

性能が大幅に向上した

のに、その能力を使わな

いままの状態

端末の能力を活かし、

サーバ側の処理を削減

高負荷～大規模

(クラウド)化による低コスト化努力

(11)

21 2/3: ＳＶＧＭａｐは、地図サービスの

分散化を促す

• コンテンツだけあればブラウザ自身がマッシュアップ

WWW

新世代のWebブラウザ

WWW

従来のWebブラウザ

従来のWeb

地図サービス

SVG Map

SVG File

ＷＷＷ上にコンテンツが分散

データはクラウド内に集中

分散したコンテンツへの

アクセスと集約はブラウ

ザが実行

コンテンツの集約

(マッシュアップ)

をポータルが行う

２０１０年６月２７日

_{2010年度第38回画像電子学会年次大会}

3/3: ＳＶＧＭａｐは、地図サービス間の

互換性を向上させる

• 地図サービス・連携の仕様がオープン標準化されるので

利用者側に、選択の自由が広がる

WWW

新世代のWebブラウザ

WWW

従来のWebブラウザ

従来のWeb

地図サービス

SVG Map

SVG File

特定クラウド専用データ

最終顧客への窓口は地図ポータルプロバイダが掌握

特定クラウド独自I/F

最終顧客へ情報提供者が直接配信

データ：

SVG

標準化

(12)

23 現在の状況

• 標準化と、政府連携

– W3C SVG WGでの標準化活動(～2003年)

– W3C SVG Interest Groupでの標準化活動

– 経済産業省：SVG Tiny 1.2 及び SVG MapのJIS化事業

– 国土地理院：

[SVGコンテンツを利用した電子国土の実用的な普及戦略に関する研究]

等の共同活動

• 推進活動

– gコンテンツ流通推進協議会：

http://www.g-contents.jp/

• デジュール標準化推進 JIS・ISO

• ブラウザ・コンテンツプロバイダ・地図・ＧＩＳ・測量業界・政府自治体の接点

– SVG Map コンソーシアム：

http://blog.svg-map.com/

• SVG Map仕様の策定、SVG Mapビューアの公開

• KDDIの事業

– 災害時ナビ：回線断でも現在位置を地図+GPSで確認

２０１０年６月２７日

_{2010年度第38回画像電子学会年次大会}

参考：研究開発・標準化活動の経緯

•1996年地図マッシュアップの基本特許発明

(特許番号：日:3503397,米:6107961)

•2000年標準化活動を開始(W3C SVG WG , JIS G-XML)

•2003年 W3C SVG1.1勧告(一部機能標準化

)

←SVGでの利用に限り特許利用無償

しかしSVGはブラウザへの実装が進まない状況が続く

•2005年 google Maps/Web2.0：「マッシュアップ」が広く一般に認知

普及期の HyperLink ポータルサーチエンジン 3 Web2.0 クラウト と呼ばれるもの ポータルのクラウド化 Proprietary Database? 4 2

1

HTML5とSVG Map

ＫＤＤＩ技術戦略部

高木 悟

企画セッション「次世代AV情報システムにおけるインタラクション」

２０１０年６月２７日

2010年度第38回画像電子学会年次大会

初期のWWW

HyperLink

3

普及期のWWW

HyperLink

ポータル

サーチエンジン

２０１０年６月２７日

2010年度第38回画像電子学会年次大会

Web2.0⇒ｸﾗｳﾄﾞと呼ばれるもの

Proprietary Database?

ポータルのクラウド化

5

ＷＷＷの寡占化と分断

Proprietary

Interfaces?

クラウド１

クラウド２

クラウド３

ハイパーリンクのような

接続の簡便さはない

２０１０年６月２７日

2010年度第38回画像電子学会年次大会

WWWの変化の分析(仮説)

• 元来のWWW

(ハイパードキュメントコンテンツネットワーク)

から、

クラウドサービス

にWWWの中心が変化

– CMSなどによりコンテンツは作りやすく、便利になった

– 情報はクラウドの非公開DB内に格納・公開性低下

オリジナルのWWWは役割を終えつつある？？

• 初期のWWWのメリット ～ より高いオープン性

– ｺﾝﾃﾝﾂを利用者（発信者)が掌握

⇒ HTML+WebServer

– あらゆるｺﾝﾃﾝﾂが無制限に連結可能 ⇒ ﾊｲﾊﾟｰﾘﾝｸ

＝ ポータルによる支配が薄い

利用者(お客様)中心

の環境

⇒ 新たなWWWの変革に向けた課題

7

ＨＴＭＬ５

２０１０年６月２７日

2010年度第38回画像電子学会年次大会

2009年 HTML5は大きな話題に

9

主要３社の対応の実際

• Apple

Safari

iPad

iPhone

• Google

Chrome

ChromeOS

Android

Maps, Wave, Gears, YouTube ・・・・・・

• Microsoftも追随

次期ＩＥ(IE9) が対応

(3/17ニュース)

２０１０年６月２７日

2010年度第38回画像電子学会年次大会

HTML5 : 新世代のウェブブラウザ規格

• １９９９年以来のバージョンアップ

– インターネット速度・ 端末性能の大幅な増加・ モバイル化 を背景に

• マルチメディアプラグインを不要にする技術

– Ｆｌａｓｈ

, Windows Media, Quick Time に代わり

⇒HTML5 Video

(動画),

Audio

(音声),

ＳＶＧ

普及期の HyperLink ポータルサーチエンジン 3 Web2.0 クラウトと呼ばれるものポータルのクラウド化 Proprietary Database? 4 2

高木悟

_{2010年度第38回画像電子学会年次大会}

_{2010年度第38回画像電子学会年次大会}

_{2010年度第38回画像電子学会年次大会}

• 初期のWWWのメリット～より高いオープン性

＝ポータルによる支配が薄い

_{2010年度第38回画像電子学会年次大会}

_{2010年度第38回画像電子学会年次大会}

– インターネット速度・端末性能の大幅な増加・モバイル化を背景に

ＯＳと同等の機能全てがブラウザに搭載

– ＡＰＩの充実(上記＋ローカルデバイスアクセス)

_{HTML5ブラウザ}

_{HTML5ブラウザ}

_{2010年度第38回画像電子学会年次大会}

ＳＶＧＭａｐ

_{2010年度第38回画像電子学会年次大会}