html5とsvg map -...

1

Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved

２０１０年６月２７日 2010年度第38回画像電子学会年次大会

1

HTML5とSVG Map

ＫＤＤＩ技術戦略部

高木悟

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



2

初期のWWW

HyperLink

2



3

普及期のWWW

HyperLink

ポータルサーチエンジン



4

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

Proprietary Database?

ポータルのクラウド化

3



5

ＷＷＷの寡占化と分断

ProprietaryInterfaces?

クラウド１

クラウド２クラウド３

ハイパーリンクのような接続の簡便さはない



6

WWWの変化の分析(仮説)

• 元来のWWW(ハイパードキュメントコンテンツネットワーク)から、クラウドサービスにWWWの中心が変化– CMSなどによりコンテンツは作りやすく、便利になった

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

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

• 初期のWWWのメリット～より高いオープン性– ｺﾝﾃﾝﾂを利用者（発信者)が掌握 ⇒ HTML+WebServer

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

＝ポータルによる支配が薄い利用者(お客様)中心の環境

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

4



7

ＨＴＭＬ５



8

2009年 HTML5は大きな話題にGoogleトレンド“HTML5”

5



9

主要３社の対応の実際

• Apple SafariiPadiPhone

• Google ChromeChromeOSAndroidMaps, Wave, Gears, YouTube ・・・・・・

• Microsoftも追随次期ＩＥ(IE9) が対応 (3/17ニュース)



10

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

• １９９９年以来のバージョンアップ– インターネット速度・端末性能の大幅な増加・モバイル化を背景に

• マルチメディアプラグインを不要にする技術– Ｆｌａｓｈ, Windows Media, Quick Time に代わり

⇒HTML5 Video(動画), Audio(音声), ＳＶＧＳＶＧ/Canvas(ｸﾞﾗﾌｨｯｸｽ&ＧＵＩ)

• モバイルデバイスを対象にした機能拡張– Geolocation API (測位デバイス)

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

⇒ ＷｅｂＯＳ～ＯＳと同等の機能全てがブラウザに搭載– 高性能化したJavaScript処理系 ( 新のJAVA VMに並ぶレベルにまで進歩)

– WebWorkers(マルチスレッド)

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

6



11

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

WWWWWW

従来のWebブラウザ従来のWebブラウザ

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

WWWはクラウドサービスの伝送路

主な機能はサーバが提供情報はクラウド内独自DBに蓄積

Web2.0

ユーザ体験の高度化～高度な端末側処理リモートVirtual Machine化・マルチメディア化

HTML5ブラウザHTML5ブラウザWWWWWWWeb2.0の高度化

Web3.0の時代

ブラウザ自体のOS化 (Web OS) ＝ブラウザが自律・独立した情報処理ノードにWWWが分散ｺﾝﾋﾟｭｰﾃｨﾝｸﾞ環境に

(=クラウドのWWW化)

WWWWWW

サーバはサーバにしかできない処理を提供

ストレージ HTML5ブラウザHTML5ブラウザ



12

ＳＶＧＭａｐ

7



13

地図～大のウェブアプリ

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

Web2.0APIの利用シェア TOP10

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

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

地図乗換案内

ウエブメール

翻訳動画共有サイト

ファイル保存

動画写真編集

アフィリエイトカレンダー

アクセス解析

写真共有サイトソーシャルブクマ

グループウェア

ワープロ表計算

ＴｏＤｏ管理

0 20 40 60 80 100

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

• ウェブアプリ利用率ランキング：１位⇒ ポータルのキラーサービス



14

相互利用は今も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は、ベクタ図形の特徴を生かしたもの



16

等高線

50m

100m

150m

200m

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

自分の位置の表示

ナビ(経路探索・検索)

３Ｄ表示

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

北緯35.12度,東経134.22度6m

学校

地理座標

カテゴリ

包含

幅

接続

–GPSの座標系

–道路・建物等の識別

–階数・標高等の設定

3階建

図形メタデータの例：<polygon points=“10,10 10,50 50,50 50,100 100,100 100,10” fill=“blue”

dc:title=“南町郵便局” rdf:type=“poi:postOffice” foaf:phone=“+81-3-xxxx” />

9



17

SVG Map～HTML5標準機能による地図PF

• ブラウザを中心にした地図サービスを実現する標準仕様– 高性能化・高機能化したHTML5ブラウザに機能(描画・マッシュアップ等)の大半を

WWWWWW新世代のWebブラウザ新世代のWebブラウザ

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

WWWWWW



従来のWeb地図サービス

SVG Map

Optional

SVG File

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

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

• ＫＤＤＩ保有の基本特許– 地図マッシュアップに関する基本特許：JP3503397,US6107961：多くの既存ウェブサービスが関係

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

無償無償



18

SVG Mapを実現する仕様：SVG Tiling and Layeringの概要

動物園ガイドマップ

ハイパーリンク

レイヤリング

全て標準のSVGファイルとハイパーリンクだけで地図プラットホームを実装

統合GISに適す

小縮尺SVGファイル

中縮尺SVGファイル群

大縮尺SVGファイル群



タイリング大規模基盤地図に適す

レイヤーSVGファイル群

コンテナーSVGファイル

10



19

SVG MapによるWWWの構造変革


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

WWWWWW




SVG Map

Optional

SVG File

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

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

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



20

1/3：ＳＶＧＭａｐは、地図サービスのサーバコストを低下させる

• 単純・安価なウェブサーバ（単なるｳｴﾌﾞｽﾄﾚｰｼﾞｻｰﾊﾞ）で運用可能


WWWWWW



SVG MapSVG File

も単純なウェブサーバが、地図サービスを代替

性能が大幅に向上したのに、その能力を使わないままの状態

端末の能力を活かし、サーバ側の処理を削減

高負荷～大規模(クラウド)化による低コスト化努力

11



21

2/3: ＳＶＧＭａｐは、地図サービスの分散化を促す

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


WWWWWW



SVG MapSVG File

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

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

分散したコンテンツへの

アクセスと集約はブラウザが実行

コンテンツの集約(マッシュアップ)をポータルが行う



22

3/3: ＳＶＧＭａｐは、地図サービス間の互換性を向上させる

• 地図サービス・連携の仕様がオープン標準化されるので利用者側に、選択の自由が広がる


WWWWWW



SVG MapSVG File

特定クラウド専用データ

終顧客への窓口は地図ポータルプロバイダが掌握特定クラウド独自I/F

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

データ： SVGプロトコル：ハイパーリンク＋HTTP

標準化

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で確認



24

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

•1996年地図マッシュアップの基本特許発明(特許番号：日:3503397,米:6107961)

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

•2003年 W3C SVG1.1勧告(一部機能標準化)←SVGでの利用に限り特許利用無償

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

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

•2007年 SVG Map コンソーシアム設立au携帯電話で実用化・・・・・・・・・ ⇒

•2009年 HTML5が大きな話題に全ブラウザにSVG標準搭載が確実にSVG JIS化開始W3C SVG Tiling & Layeringの標準化開始

•201x年 SVG Tiling & Layeringが全てのブラウザに標準搭載！！

災害時ナビ EZｶﾞｲﾄﾞﾏｯﾌﾟ

13



25

参考：SVG Mapを用いたauのサービス：災害時ナビ起動方法：データフォルダ⇒災害時ナビ⇒（地図を選択）

http://www.au.kddi.com/notice/saigai_torikumi/gaiyo/index_3.html

html5とsvg map -...

Documents