ストリートビュー サービス、レンダリングとモバイル対応を強化
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
自分で歩いているかのように身の周りの世界を散策できるストリートビューは、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
