Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
1
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
1
HTML5とSVG Map
KDDI技術戦略部
高木 悟
企画セッション「次世代AV情報システムにおけるインタラクション」
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
2
初期のWWW
HyperLink
2
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
3
普及期のWWW
HyperLink
ポータルサーチエンジン
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
4
Web2.0⇒クラウドと呼ばれるもの
Proprietary Database?
ポータルのクラウド化
3
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
5
WWWの寡占化と分断
ProprietaryInterfaces?
クラウド1
クラウド2クラウド3
ハイパーリンクのような接続の簡便さはない
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
6
WWWの変化の分析(仮説)
• 元来のWWW(ハイパードキュメントコンテンツネットワーク)から、クラウドサービスにWWWの中心が変化– CMSなどによりコンテンツは作りやすく、便利になった
– 情報はクラウドの非公開DB内に格納・公開性低下
オリジナルのWWWは役割を終えつつある??
• 初期のWWWのメリット ~ より高いオープン性– コンテンツを利用者(発信者)が掌握 ⇒ HTML+WebServer
– あらゆるコンテンツが無制限に連結可能 ⇒ ハイパーリンク
= ポータルによる支配が薄い利用者(お客様)中心の環境
⇒ 新たなWWWの変革に向けた課題
4
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
7
HTML5
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
8
2009年 HTML5は大きな話題にGoogleトレンド“HTML5”
5
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
9
主要3社の対応の実際
• Apple SafariiPadiPhone
• Google ChromeChromeOSAndroidMaps, Wave, Gears, YouTube ・・・・・・
• Microsoftも追随次期IE(IE9) が対応 (3/17ニュース)
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
10
HTML5 : 新世代のウェブブラウザ規格
• 1999年以来のバージョンアップ– インターネット速度・ 端末性能の大幅な増加・ モバイル化 を背景に
• マルチメディアプラグインを不要にする技術– Flash, Windows Media, Quick Time に代わり
⇒HTML5 Video(動画), Audio(音声), SVGSVG/Canvas(グラフィックス&GUI)
• モバイルデバイスを対象にした機能拡張– Geolocation API (測位デバイス)
– Web Storage (ローカルデータベース(オフライン対応)
⇒ WebOS ~ OSと同等の機能 全てがブラウザに搭載– 高性能化したJavaScript処理系 ( 新のJAVA VMに並ぶレベルにまで進歩)
– WebWorkers(マルチスレッド)
– APIの充実(上記 + ローカルデバイスアクセス)
6
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
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ブラウザ
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
12
SVG Map
7
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
13
地図~ 大のウェブアプリ
⇒ 地図サービスの変革が、WWW全体の変革の引き金に
Web2.0APIの利用シェア TOP10
• Web2.0サービスランキングでも1位 (Google Maps)
⇒ も典型的なクラウド型サービス(マッシュアップの代名詞)
地図乗換案内
ウエブメール
翻訳動画共有サイト
ファイル保存
動画写真編集
アフィリエイトカレンダー
アクセス解析
写真共有サイトソーシャルブクマ
グループウェア
ワープロ表計算
ToDo管理
0 20 40 60 80 100
ウェブアプリ利用率ランキング(インターネット白書2009)
• ウェブアプリ利用率ランキング:1位⇒ ポータルのキラーサービス
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
14
相互利用は今もMap/GISの最大の課題地理空間情報産学官連携協議会:内閣府・東京大学地理空間情報の利活用に係るアンケート調査より
Web2.0/Google Maps出現から数年経過しているにも関わらず
8
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
15
SVG 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コンテンツに埋め込める
画面解像度に応じた綺麗な描画プリンタの解像度も 大限活用
図形単位で識別・表示制御⇒ アニメーション・GUI
Flashコンテンツに見られるアニメーションや高度なUIは、ベクタ図形の特徴を生かしたもの
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
16
等高線
50m
100m
150m
200m
SVGの地図応用地図はベクタグラフィックスでの表現が最適
自分の位置の表示
ナビ(経路探索・検索)
3D表示
図形メタデータにより高度なサービスに応用
北緯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
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
17
SVG Map~HTML5標準機能による地図PF
• ブラウザを中心にした地図サービスを実現する標準仕様– 高性能化・高機能化したHTML5ブラウザに機能(描画・マッシュアップ等)の大半を
WWWWWW新世代のWebブラウザ新世代のWebブラウザ
ハイパーリンクを辿り、コンテンツを集約
WWWWWW
従来のWebブラウザ従来のWebブラウザ
単なる表示端末として機能
従来のWeb地図サービス
SVG Map
Optional
SVG File
WWW自身が、地図DB/クラウドとなる
コンテンツの集約はサーバが実施
• KDDI保有の基本特許– 地図マッシュアップに関する基本特許:JP3503397,US6107961:多くの既存ウェブサービスが関係
の無償利用が宣言された唯一の形式
無償無償
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
18
SVG Mapを実現する仕様:SVG Tiling and Layeringの概要
動物園ガイドマップ
ハイパーリンク
レイヤリング
全て標準のSVGファイルとハイパーリンクだけで地図プラットホームを実装
統合GISに適す
小縮尺SVGファイル
中縮尺SVGファイル群
大縮尺SVGファイル群
ハイパーリンク
ハイパーリンク
タイリング大規模基盤地図に適す
レイヤーSVGファイル群
コンテナーSVGファイル
10
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
19
SVG MapによるWWWの構造変革
WWWWWW新世代のWebブラウザ新世代のWebブラウザ
ハイパーリンクを辿り、コンテンツを集約
WWWWWW
従来のWebブラウザ従来のWebブラウザ
単なる表示端末として機能
従来のWeb地図サービス
SVG Map
Optional
SVG File
SVG”ファイル“をWWW上で配信、
情報の連結はハイパーリンクで
コンテンツの集約はサーバが実施
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
20
1/3: SVGMapは、地図サービスのサーバコストを低下させる
• 単純・安価なウェブサーバ(単なるウエブストレージサーバ)で運用可能
WWWWWW新世代のWebブラウザ新世代のWebブラウザ
WWWWWW
従来のWebブラウザ従来のWebブラウザ
従来のWeb地図サービス
SVG MapSVG File
も単純なウェブサーバが、地図サービスを代替
性能が大幅に向上したのに、その能力を使わないままの状態
端末の能力を活かし、サーバ側の処理を削減
高負荷~大規模(クラウド)化による低コスト化努力
11
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
21
2/3: SVGMapは、地図サービスの分散化を促す
• コンテンツだけあればブラウザ自身がマッシュアップ
WWWWWW新世代のWebブラウザ新世代のWebブラウザ
WWWWWW
従来のWebブラウザ従来のWebブラウザ
従来のWeb地図サービス
SVG MapSVG File
WWW上にコンテンツが分散
データはクラウド内に集中
分散したコンテンツへの
アクセスと集約はブラウザが実行
コンテンツの集約(マッシュアップ)をポータルが行う
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
22
3/3: SVGMapは、地図サービス間の互換性を向上させる
• 地図サービス・連携の仕様がオープン標準化されるので利用者側に、選択の自由が広がる
WWWWWW新世代のWebブラウザ新世代のWebブラウザ
WWWWWW
従来のWebブラウザ従来のWebブラウザ
従来のWeb地図サービス
SVG MapSVG File
特定クラウド専用データ
終顧客への窓口は地図ポータルプロバイダが掌握特定クラウド独自I/F
終顧客へ情報提供者が直接配信
データ: SVGプロトコル: ハイパーリンク+HTTP
標準化
12
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
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
• ブラウザ・コンテンツプロバイダ・地図・GIS・測量業界・政府自治体の接点
– SVG Map コンソーシアム:http://blog.svg-map.com/• SVG Map仕様の策定、SVG Mapビューアの公開
• KDDIの事業– 災害時ナビ:回線断でも現在位置を地図+GPSで確認
Copyright © 2010 by Satoru Takagi @ KDDI All Rights Reserved
2010年6月27日 2010年度第38回画像電子学会年次大会
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ガイドマップ