Google M1p AwI と Google
Web Speech AwI, St eet
Vie 簡単 一例
GDG Kyoto
藏野文子 Fumiko Kurano
自己紹介
O 藏野文子 Fumiko Kurano
O GDG Kyoto Manager
O Job UI /UX Desgin, Programing
O I have a license of clinical laboratory
technologist.
Google M1ps と ？
O Google 供し い ン 地
O
位置情報 地 用い 視覚 可能
O
地理空間 視覚
O
Web や 向 ョン作成
O
地
Google M1ps AwI と
O Google Maps Javascript API 指し
ン 利用可能
O 利用制限 あ 地 読 込 ,
回以 場合 課金
O 基本的 API キ 必要
基本的 構造 – HTML ５
O PC Web 用 Google
Maps API 想定
O ョン HTML し 作成
<! DOCTYPE html> 宣言
O 最新 DOCTYPE 宣言し ン
ン 標準 し ン ン
O DOCTYPE 認識 場合 互換
し 表示
基本的 構造 – CSS
O
互換 CSS 標準 手 動作し
い事 あ <style> 宣言 必要
例
<style type= text/css >
html, body, #map-canvas {
height %
margin px
padding px
</style> }
基本的 構造 – 地図 )OM 要素
O
地 表示 領域 用
意
O
キ ン
DOM 内 前付 div 要素 作成
例
<div id= map_canvas style= width %
height % ></div>
map_canvas いう <div> 定義
style 属性 設定
Google M1ps 基本的 構造
function initialize {
var kyoto = new google.maps.LatLng . , . var mapOptions = {
center kyoto, zoom
}
var map = new google.maps.Map document.getElementById
"map_canvas , mapOptions }
※参照 ン map_sample.html
基本的 構造 – M1ps ョン
地 初期 地 初期 変数 保持 Map
options 作成
var mapOptions = {
center kyoto,
zoom
mapTypeId google.maps.MapTypeId.ROADMAP
}
M1ps ョン – cente 中心 緯度経度
Latlug 関数 緯度経度 設定
center new google.maps.LatLng - . , .
var kyoto = new google.maps.LatLng . , .
var mapOptions = {
center kyoto,
}
M1ps ョン – zoom ー ベ
O zoom ： 設定
O zoom ： し 地球全体 表示
O ンし 解
像度 高
M1ps ョン – m1pTypeId
O
初期 明示的 設定 必要 あ
mapTypeId google.maps.MapTypeId.ROADMAP
O
ROADMAP ： あ D
OSATELLITE ：写真
O
HYBRID ：写真 主要 対象物 道路 地
組 合わ
O
TERRAIN ：物理的 起伏 示
高度や水系 対象物 山 河川
基本構造 - 地図 ク
O 地 表 JavaScript Map あ
var map = new
google.maps.Map document.getElementById
"map_canvas" , mapOptions
O 地
定義し 複数作 可能 あ
基本構造 - 地図を読 込
O
読 込 完了後 地 配置
<body> 要素 onload ン
Map 作成 関数 実行
<body onload="load ">
※ 年現在 API Key 必要
O
予測不可能 動作 防 地 画 方法
ン 確 ン 可能
ー ー 追加
O
地 場所 指定
O
：標準 ン 使用
var map = new
google.maps.Map document.getElementById map_
canvas , mapOptions
var marker = new google.maps.Marker {
position kyoto, // 位置 指定
map map
}
※参照 ン ： maker.html
情報 ン 追加
O
InfoWindow 地 吹 出し う 浮い ン
内容 表示
O
情報 表示
O
情報 ン 内容 キ 文字列 HTML
DOM 要素等
O
InfoWindowOptions 以内 指定 明示的
情報 ン setContent 呼び出
※参照 ン ： infowindow .html
情報 ン - setContent
O setContent 利用例
// ン ン 作成
var infowindow = new google.maps.InfoWindow
// キ 用意 Hello
var text = 'Hello!'
// キ 含
// 時 情報 ン 開
google.maps.event.addListener marker, click , function {
infowindow.setContent text // 情報 ン キ 追 infowindow.open map, marker // 情報 ン 開
}
情報 ン – もう一つ 方法
O Infowindo ソ 直接文字列 配置
例
// infowindow 追 var text = 'Hello!'
var infowindow = new google.maps.InfoWindow { content text
}
// 情報 ン 開
google.maps.event.addListener marker, 'click', function { infowindow.open map, marker // 情報 ン 開 }
※参照 ン
：infowindow .html
Google )i ection AwI ついて
Google )i ection AwI と ？
O HTTP 使用し 地点間
計算
O 利用可能
O
交通機関 運転 徒歩 自転車
O 指定
O
出発地 目的地 び ン キ
文字列 例 , 京都駅 京都 嵐山
O
緯度 / 軽度
ー ク
O Google Maps API 外部 へ 呼び
出し 行う必要 あ 非 期 処理
O ソ 渡し 完了
時 実行 必要
O 複数 各々独立
し routes[] 配列 し 返 事 あ
ー 検索 使用方法
O DirectionsService 作成
var directionsService = new google.maps.DirectionsService
O DirectionsService.route 呼び出し
へ 開始
directionsService.route request, function response, status { if status == google.maps.DirectionsStatus.OK {
directionsDisplay.setDirections response }
}
※参照用 ン ：DirectResult.html
oute ソッ ついて
O 記 参照
directionsService.route request, function response, status { if status == google.maps.DirectionsStatus.OK {
directionsDisplay.setDirections response }
}
route ソ 以 結果 返
O response：検索結果
O status：
O 成 ：google.maps.DirectionsStatus.OK
O 無効
：google.maps.DirectionsStatus.INVALID_REQUEST
DirectionsResult 表示
O
DirectionsRenderer 使用し DirectionsResult 表
示
O
DirectionsRenderer
function initialize {作成
directionsDisplay = new google.maps.DirectionsRenderer var kyoto = new google.maps.LatLng . , .
var mapOptions = { zoom ,
center kyoto } map = new
google.maps.Map document.getElementById 'map-canvas' , mapOptions
directionsDisplay.setMap map }
DirectionsResult 表示
O
Renderer setMap 呼び出し 地 ン
function initialize {
directionsDisplay = new google.maps.DirectionsRenderer var kyoto = new google.maps.LatLng . , .
var mapOptions = { zoom ,
center kyoto }map = new
google.maps.Map document.getElementById 'map-canvas' , mapOptions
directionsDisplay.setMap map }
DirectionsResult 表示
O
ン setDirections 呼び出し DirectionsResult 渡
var directionsService = new google.maps.DirectionsService function calcRoute {
var start = 京都駅
var end = 京都 芸繊維大学 var request = {
origin start, destination end,
travelMode google.maps.TravelMode.WALKING
} directionsService.route request, function response, status { if status == google.maps.DirectionsStatus.OK {
directionsDisplay.setDirections response }
}}
)i ectionsRe uest ク
O
DirectionsRequest
必須
O
Origin ： 計算 開始位置
O
Destination ： 計算 終了位置
O
travelMode ： 計算 使用 交通手段
function calcRoute {var start = 京都駅
var end = 京都 芸繊維大学 var request = {
origin start,
destination end,
travelMode google.maps.TravelMode.WALKING }
t 1 elMode 種類
O
道路網
： google.maps.TravelMode.DRIVING
O
自転車 自転車専用道路 優先道路
google.maps.TravelMode.BICYCLING
O
公共交通機関
google.maps.TravelMode.TRANSIT
O
歩行者専用道路 歩道 徒歩 ：
google.maps.TravelMode.WALKING
travelMode google.maps.TravelMode.WALKING
ー ッ ついて
O DirectionsStep ： 構成 最小単位
O 行程内 具体的 指示 示
例 東 目 折 Turn left at E. th St.
O DirectionsStep
持
)i ectionsStep ー
O instructions ： 指示 キ し 格納
O start_location ：
始点 LatLng ン し 値
O end_location 終点 緯度経度 LatLng
O steps[] 乗換案内時 徒歩 運転
詳細 含 DirectionsStep
O 他多数 参照
ー ン
O 出発地 目的地 入力し 場合 Json 読 込 例
O var myRoute = directionResult.routes[ ].legs[ ]
※引用先：
https //developers.google.com/maps/documentation/directi ons/?hl=ja
{ "status" "OK", "routes" [ {
"summary" "I- W", "legs" [ {
"steps" [ {
"travel_mode" "DRIVING", "start_location" {
"lat" . , "lng" - .
},
"end_location" { "lat" . , "lng" - .
},
ー ッ
O ン： start_location
myRoute.steps[i].start_location
O ン ン ： end_location
myRoute.steps[i].end_location
{ "status" "OK", "routes" [ {
"summary" "I- W", "legs" [ {
"steps" [ {
"travel_mode" "DRIVING", "start_location" {
"lat" . , "lng" - .
},
"end_location" { "lat" . , "lng" - .
},
※引用先：
https //developers.google.com/maps/documentation/directi ons/?hl=ja
ー ー ーを置く例
O ン
緯度経度 利用
var myRoute = directionResult.routes[ ].legs[ ] for var i = i < myRoute.steps.length i++ { var marker = new google.maps.Marker {
// ン 緯度経度 位置指定
position myRoute.steps[i].start_location, map map
}
※参照用 ン ：DirectResult_stepmkr.html
Web Speech AwI ついて
※HIS 講習会 京都 芸繊維大学 荒木准教授 資料 引用
Web Speech AwI と
O W C Web Speech API Specification 定義
O 音声認識 音声合成 い I/F 定義
O 式 勧告 い
O 将来勧告へ 動い い わ い
O 全 機能 実装 い
O ン ン 異 い 事 あ
対応状況 4.9
※引用先：http //caniuse.com/#feat=web-speech
音声認識
基本的 音声認識 AwI
// 認識 行う ン ン 作成
var recognition = new webkitSpeechRecognition
// 言語 指定日本語：ja-JP 米語：en-US 英語：en-GB recognition .lang = "ja-JP"
recognition .onresult = function event {
// 結果 返 来 場合
if event.results.length > {
// z 番目 入力, 次 番目 候補 結果文字列 transcript p .value = event.results[ ][ ].transcript
}
結果文字列
最初 番目
候補
最初 番目
入力
ebkitSpeechRecognition 属性
O lang 認識対象 言語
O 日本語：ja-JP, 米語 en-US, 英語 en-GB
O continuous 認識 連続 行う
O false 発話 切 目 い 結果 返
O true 切 目毎 い 結果 返し続
O i nterimResults 途中結果
O false 最終結果 返
O true 途中結果 返
O
maxAlternatives 認識候補数：
ebkitSpeechRecognition
ソッ
O onstart 音声認識 開始
O onend 音声認識 終了
O onerror SpeechRecognitionError
ン ン 返
O onresult SpeechRecognitionEvent
ン ン 返
音声合成 AwI 最も単純 例
<script type="text/javascript">
// 合成内容を表すインスタンス
：SpeechSynthesisUtterance()
var msg = new SpeechSynthesisUtterance(); msg.text = 'これ 音声合成 テス です';
msg.lang = 'ja-JP';
// speak メソッ 呼び出し
window.speechSynthesis.speak(msg);
</script>
HIS 講習会 京都 芸繊維大学荒木准教授 資料 引用
speechSynthesis ソッ
O 音声合成
O speak SpeechSynthesisUtterance utterance 開始
O pause 時停
O resume 時停 し い 合成 再開
O cancel 即時停
SpeechSynthesisUtte 1nce
属性
O text 発話内容
O lang 言語
O
日本語 'ja-JP' 米語 'en-US' 英語 'en-GB
function tts str {
var msg = new SpeechSynthesisUtterance str // lang 対象言語
msg.lang = 'ja-JP'
speechSynthesis.speak msg }
St eetVie ついて
St eetVie と ？
O 指定 道路 対象範 全体 度
表示 事 可能
O 画像 StreetViewPanorama 使
用
google.maps.StreetViewPanorama document.getElementById pano , panoramaOptions
O 各地 あ 地
getStreetView ソ 得
※今回 利用し い
St eetVie コン
O DOM 要素 HTML <div> 要素 内
StreetViewPanorama 表示
StreetViewPanorama ン DOM
要素 渡
O 画像 最適 表示 最小 x
推奨
ー ビュー 場所と視点 POV
Var kyoto = new google.maps.LatLng . , . Google Maps 設定
position kyoto, // streetview 中心 位置 pov { // streetview 場所 視点
heading , // 視点 向 時 向 度 東 pitch , // 角度
zoom // }}
//
var panorama =
new google.maps.StreetViewPanorama document.getElementById pano , panoramaOptions
map.setStreetView panorama // 地
作成後 setPosition setPov 場所 視点 変更可能
視点を ー 進行方向へ 変更
O
利用
O
ョン 関数 computeHeading 利用
２点間 角度 計算
O
今回 ン ン
ン 緯度経度 用い 計算
O
data : ン
O
data : ン ン
heading =google.maps.geometry.spherical.
computeHeading data , data
ー ビュー ータへ 直接
ク
O
ン
画像 得 機能 利用
O
getPanoramaByLocation 緯度経度
検索し 半径 m 以内 位置 番近い
var sv = new google.maps.StreetViewService
// data 緯度経度 半径
sv .getPanoramaByLocation data , , processSVData
St eetVie w1no 1m1)1t1
ク 仕様
O 形式
含
{ location {
latLng LatLng, description string, pano string
}, copyright string, links [{
heading number, description string, pano string,
roadColor string, roadOpacity number }],
省略
引用
先https //developers.google.com/maps/docu mentation/javascript/streetview?hl=ja#StreetVi ewService
ー ビュー ク 作成
O StreetViewPanorama 作成 O setPano 呼び出
O location.pano 指定 ID 渡
O status 記 通
O ok： 致 あ
O ZERO_RESULTS：条件 合致 い状態
O UNKNOWN_ERROR： 処理
理由 不明
コー 例
function processSVData data , status {
if status == google.maps.StreetViewStatus.OK { // Status OK 場合 // StreetViewPanorama 作成
var panorama = new
google.maps.StreetViewPanorama document.getElementById 'pano' // location.pano 指定
var markerPanoID = data .location.pano
// setPano 呼び出し ID 使
panorama.setPano markerPanoID panorama.setPov { } panorama.setVisible true } else {
// Status OK い場合 処理
alert ' 地点 あ '
} }
謝辞
O 今回使 ン HIS 講習会
い 京都 芸繊維大学 荒木准教授
作成し 荒木先生 厚意
GDG 京都 勉強会 い
使用 し
感謝 意 表し
参考資料 引用元資料
O Google Maps Javascript V API
O Google Maps API
- Google Directions API
O
O Directions service complex
- ン , ン ン
O Google Street View and Driving Directions
O Daytripper O
O へ 直接
O Directly accessing Street View data
O Street View service
O Daytripper O
O Navigation functions heading
O HIS 4講習会 -京都 芸繊維大学荒木教授 資料
※ 資料や ン ン 先
情報 引用し
