Japan
このブログでは、Google から開発者のみなさま向けの情報をいち早くお届けします。
ストリートビュー サービス、レンダリングとモバイル対応を強化
2016年9月1日木曜日
[この記事は、Elena Kelareva, Product Manager, Google Maps APIs による Geo Developers Blog の記事 "
New JavaScript Street View renderer brings rendering improvements and better mobile support
" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。]
自分で歩いているかのように身の周りの世界を散策できるストリートビューは、Google マップでも特に人気の機能です。
Google Maps JavaScript API のストリートビュー サービス
は世界中の開発の場で利用され、独創的でエキサイティングなアプリ作りに活かされています。実際にその場所を訪れているような感覚は、ストリートビューならではと言えるでしょう。
そのストリートビューの使い勝手が、一段とよくなりました。Google は、Google Maps JavaScript API ストリートビュー サービス向けの新しいレンダラーを公開しました。全体的によくなっていると自負していますが、モバイル機器での改善がとくに目立つ内容となっています。今回の記事では、その内容を余すところなくご紹介します!
表示の改善
なめらかな移動
ストリートビューで別の地点へ移動する際のアニメーションのフレームが増えました。従来の表示には、一歩一歩ジャンプしながら進むようなぎこちなさがありましたが、新しいレンダラーでは、歩いている感覚により近い、なめらかなアニメーションを実現しています。
従来のレンダラー
新しいレンダラー
アニメーションの読み込みも滑らかに
従来のレンダラーは新しいコンテンツを読み込みながら画像をリピートしていたため、画像が乱れることがありました。新しいレンダラーでは、読み込み中は解像度の低いイメージを使用します。このため、ストリートビューで視点を変えるときのアニメーションが以前よりもなめらかになっています。
従来のレンダラー
新しいレンダラー
オブジェクトモデリングの改善
レンダラーが新しくなったことで、ストリートビューのオブジェクトの見栄えがよくなっています。新しいレンダラーが構築する 360°のモデルは、可能性としてありえる全視点を考慮しているためです。一例として、高くそびえるこちらの建物をご覧ください。従来のレンダラーではくねくねと線が波打っていますが、新しいレンダラーではまっすぐなラインが伸びています。
従来のレンダラー
新しいレンダラー
もう 1 つ例を挙げましょう。従来のレンダラーでは、勾配のある斜面(たとえば急な坂道)で撮影されたイメージについては、オブジェクトがおかしな具合に傾いていました。新しいレンダラーはこうした傾きを修正するので、オブジェクトが正しく表示されます。
従来のレンダラー
新しいレンダラー
モバイルの対応強化
WebGL によるイメージ
新しいレンダラーは WebGL を利用しています(
対応ブラウザ
はこちら)。その結果として、フレームレートが高くなり、レンダリングが改善しています。その恩恵はモバイル機器でとくに顕著となっています。従来のレンダラーは、モバイル機器で見た場合、魚眼レンズで写したような画像を表示していました。WebGL ではその球体をレンダリングした画像を表示するため、実際の姿により近い見え方になっています。下の画像の例をご覧ください。モバイル機器で見た場合、従来のレンダラーでは端のほうが歪んでいましたが、新しいレンダラーでは道がまっすぐに表示されています。
従来のレンダラー
新しいレンダラー
タッチ操作に対応
モバイル機器でのウェブの利用が増えるにつれ、タッチ操作に慣れたユーザーはあらゆるものがタッチで動くことを期待するようになりました。新しいレンダラーは Android 向けアプリの Google マップで利用できた自然なタッチ操作のジェスチャー、すなわちピンチでのズームとダブルタップでの移動に対応しています。従来のレンダラーでは、ズームイン/ズームアウトの動作は「+/-」ボタンでしか実行できませんでした。移動についても、地面に表示された矢印をクリックする以外に方法がありませんでした。
モバイル機器のモーショントラッキングに対応
開発者は、モバイルアプリのユーザーがより自然な形で探索やインタラクトを行える機会を用意できるようになりました。今回の変更で、ストリートビューは「デバイスオリエンテーションイベント」に対応しています。これにより、モバイル端末を動かすことでストリートビューの視点を変えられるようになりました。なお、この機能は開発者の好みに応じて無効にすることができます。詳しくは
開発者向けドキュメント
をご覧いただくか、モバイル機器でドキュメントのリンクを開いて実際のモーショントラッキングをご覧ください。
コントロールの改善
X で前進
マウスやトラックパッドに対応したデスクトップ機器で利用する場合、カーソルの位置に「X」の形をした記号が表示されるようになっています。これは前進したときの次のカメラ位置を表します。矢印は移動する方向です。壁の四角形は、カメラが指す方向を表しています。
従来のレンダラー
新しいレンダラー
道路の名前、ラベル、ターゲットが読みやすく
新しいレンダラーでは、道路の名前やラベルがコントロールから分離しました。これにより、文字同士が重なってしまう問題が解決したほか、横書きの言語で表示される文字がより読みやすくなっています。
従来のレンダラー
新しいレンダラー
以上が新しくなったストリートビューの概要です。いかがでしょうか?
開発者の皆様からのフィードバックは、Google 製品を改善していくうえで必要不可欠です。バグの報告や新しい機能のご要望などがありましたら、
イシュートラッカー
よりお願いします。
Google Maps JavaScript API のストリートビュー サービスに関する詳しい情報は、
開発者向けドキュメント
をご覧ください。
Posted by 丸山 智康 (Tomoyasu Maruyama) - Google Maps Solution Architect, Google Maps for Work
コメントを投稿
ラベル
#hack4jp
3
Addy Osmani
1
ADK
2
AdMob
8
Ads
1
ALPN
1
AMP
6
Analytics
6
Andorid
7
Android
176
Android Auto
1
Android Design Support Library
1
Android Developer Story
3
Android N
13
Android Pay
1
Android Studio
14
Android Support Library
3
Android TV
8
Android Wear
21
androidmarket
3
Angular 2
1
AngularJS
2
API
21
APIExpert
45
apk
1
app engine
21
App Indexing
7
App Invites
6
AppCompat
2
Apps Script
6
aprilfool
3
ArtTech
1
Audio
3
Auth Code
1
Authentication
3
AuthSub
2
Autotrack
2
Awareness API
1
Beacons
6
BigQuery
6
BLE
4
Blink
1
blogger
1
Brillo
1
Brotli
1
Calendar
1
Cardboard
3
Career
1
Case Study
1
chrome
56
Chrome Custom Tab
1
chrome extension
2
Chrome for Android
1
Chrome for iOS
1
Chrome OS
1
Chromebook
2
Chromecast
7
chromewebstore
6
Chromium
4
CLI
1
ClientLogin
3
Cloud
8
Cloud Test Lab
2
CocoaPods
1
codejam
5
codelab
2
compute engine
3
Context
1
Dart
2
DataCenter
1
Daydream
3
Deep Learning
1
Demo Party
1
Design Sprint
3
DesignBytes
1
DevArt
3
DevBytes
6
Developer
14
Developer Console
4
Developer Preview
3
Developer Relations
2
DevFest
6
DevFestX
3
devtools
3
DirectShare
1
Doodle
1
DoubleClick
4
Doze モード
1
drive
2
Dynamic Links
1
EarlGrey
1
Easter Egg
1
ECMAScript 2015
1
Eddystone
4
egypt
1
English
2
ES2015
1
ES2016
1
ES6
2
ES7
1
Firebase
27
Firebase Cloud Messaging
1
Firebase Database
1
font
2
game
15
GDD11JP
56
GDD2010JP
23
GDE
2
GDG
10
Geo
28
Gingerbread
1
GLIDE
5
Gmail
1
Go
1
golang
4
goo.gl
1
Google
5
Google Apps
2
Google Apps Script
1
Google Cast
8
Google Cloud Messaging
10
Google Cloud Platform
6
Google Developer Experts
2
Google Developers Academy
1
Google Developers live
5
Google Developers Summit
1
Google Drive
3
Google Fit
2
Google for Work
1
Google Maps
33
Google Play
36
Google Play Game Services
6
Google Play Services
18
Google Plus
14
Google Search
4
Google Sign-In
10
Google Tag Manager
1
Google+
1
Googleapps
10
GoogleGames
1
GoogleI/O
27
GoogleLabs
1
GoogleTV
1
gRPC
2
GTUG
5
GWT
2
hack4jp
2
hackathon
6
Hosting
1
HTML5
17
HTML5Rocks
1
HTTP/2
3
HTTPS
2
ID Token
1
Identity
12
Identity Toolkit
1
Ignite
4
IME
10
Instant Apps
1
intern
2
Invites
1
iOS
10
IoT
1
IPv6
1
Japanese Input
1
JavaScript
5
K-12
1
Knowledge Graph
1
l10n
8
Lollipop
10
Machine Learning
1
Marshmallow
10
Material
1
Material Design
18
MDL
1
MIDI
2
Mobile
11
Mobile Bootcamp
4
Mobile Vision
3
mod_pagespeed
1
monetize
3
Mozc
14
Music
1
NativeDriver
2
Nearby
4
Nexus
2
Nexus S
1
NFC
1
Node.js
1
NPAPI
2
NPN
1
oauth
6
OpenGL
3
OpenID
3
OpenID Connect
2
OpenSocial
1
opensource
11
Optimization
1
Payment
2
People API
1
Performance
6
PersonFinder
1
Physical Web
3
Place Picker
1
Player Analytics
4
Policy
2
Polymer
6
Progressive Web Apps
6
project hosting
1
Promise
1
Promo code
1
Protocol Buffers
1
publicdata
1
Push API
1
Push Notification
3
QUIC
1
RAIL
1
React Native
2
Realtime Database
1
Remote Config
1
Remote Display API
1
Runtime Permission
1
Sample Code
2
schema.org
1
security
13
Service Worker
3
sketchup
1
SmartLock for Passwords
4
social
4
SPDY
3
speak2tweet
1
startup
3
Storage
1
streetview
3
Study Jams
3
SwiftShader
1
techtalk
12
TensorFlow
2
test
2
Test Lab
1
ToS
1
Transliteration
1
Twitter
1
Udacity
15
Unity
2
UX
1
V8
2
VP9
1
VR
4
Vulkan
2
Watch Face
2
wave
2
Weave
1
Web
3
Web Animations
1
Web Components
5
Web Manifest
1
WebAssembly
1
WebMusic
4
WTM
2
YouTube
15
YouTube API
1
インタビュー
1
コードサンプル
1
プライバシー
1
言論の自由
1
節電
3
東日本大震災
9
日本語入力
40
ブログ アーカイブ
2016
9
8
7
6
5
4
3
2
1
2015
12
11
10
9
8
7
6
5
4
3
2
2014
12
11
10
9
8
7
6
5
4
3
2
1
2013
12
11
10
9
8
7
6
5
4
3
2
1
2012
12
11
10
9
8
7
6
5
4
3
2
1
2011
12
11
10
9
8
7
6
5
4
3
2
1
2010
12
11
Feed
Google
on
Follow @googledevjp
"プロダクトに関するご意見は
プロダクトフォーラム
にお願いします"