グルメサイトや不動産サイトで目的地までのルート確認や所在情報を載せるために、Googleマップが埋め込まれているのを皆さんも目にしたことがありますよね？かく言う筆者も、そのマップの情報を頼りに様々なスポットへ行く機会が多々あります。
そんなGoogleマップについて、GoogleはGoogleマップにおける傾き機能と回転機能、またWebGL Overlay Viewのベータ版をリリースすると発表しました。これらの機能によって、Googleマップは更に利便性が増すことになりそうです。
今回は、これらの機能による変化とその効果について言及していきます。
○WebGLを利用したマップ機能
Maps Javascript APIに元々搭載されていたOverLay Viewは、地図上に透明なレイヤーを描写することでWebブラウザ上に二次元の地図を作成することができました。裏を返せば、Overlay Viewでは二次元の地図に記載されたレイヤーにしか情報を付随することができなかったのです。
しかし、今回発表されたWebGL Overlay Viewでは、クラウドベースのマップのスタイル設定の一部にベクトル地図を導入することで（今後JavaScript API経由で一般提供する予定です）、WebGLによる複雑な2Dと3Dグラフィックをウェブ上でレンダリングできるようになりました。これは、これまでのGoogleマップと同じような地図がマップアプリ上でも利用可能になることと同義です。
これらの機能を可能にしたWebGLは低レベルのブラウザAPI（Application Programming Interface、ソフトウェアやプログラム、Webサービスの間をつなぐインターフェース）であり、このAPIを用いることでスマートフォンやコンピュータなどの個人のデバイスのGPU（3Dグラフィックスなどの画像描写を行う際に必要となる計算処理を行うプロセッサ）のレンタリング能力や処理能力をウェブアプリからでも利用できるようになります。ブラウザ単体では3D空間のオブジェクトのレンダリングといった重い処理を実行することはできませんが、WebGLを使用すれば、そのような重い処理に特化して設計されたGPUで処理することができます。
○傾き機能と回転機能
これまで、地図の表示方法は真上から基本地図を見る二次元ビューに限定されていました。しかし、今回発表された新機能を使用すると、読み込み時と実行時の両方で、最大67.5 度の傾きと 360 度の回転が可能になり、地図の新たな視点をユーザーに提供できるようになります。これは斜め視点からの 3D の建物モデルが初めてウェブアプリで表示できるようになったということでもあります。
また、キーボードとマウスによる制御が追加されたことでユーザーが地図の傾斜と回転を手動で変更できるようにもなっています。これによって、ユーザーは自分の思い通りにマップを様々な角度から見ることが可能になりました。
○WebGL Overlay View
WebGL Overlay Viewは、ベクトル地図のレンダリングに使用する WebGL レンダリング表現を背景地図の上に直接重ね合わせて操作できるようにようにするというものです。この機能により、初めて二次元と三次元のオブジェクトを基本地図に直接レンダリングできるようになりました。つまり、レンダリングされたオブジェクトが地図に表示されるだけでなく、そこに遠近感も兼ね備えた三次元空間で地図の一部としてレンダリングされます。地図を回転させるとマーカーが建物に隠れて非表示になったり、カメラから離れるに連れてマーカーが小さくなったりする具合です（下の画像をクリックすると別ページでその様子が体験できます）。
【WebGL Overlay Viewで基本地図に直接レンダリング】
○その他の機能
WebGL Overlay Viewのベータ版リリースでは、「moveCamaera」も紹介しています。これは新しくい統合されたカメラコントロール手法で、カメラの位置、傾き斜、回転、ズームを同時に設定できます。アニメーションのループで「moveCamera」を連続的に呼び出すと、カメラの位置の間で滑らかなアニメーションを作成できます。ズームや浮動小数点数のサポートも含め、これらの調整によって従来では不可能であったようなカメラのコントロールが可能になるだけでなく、高い精度でカメラ位置をコントロールできるようになります。
○これからの展望
以上が今回のWebGL Overlay Viewのベータ版リリースの内容になります。筆者の私見として、現在地図機能はものすごい進化を遂げている最中なんだなと改めて感じたところです。今回のリリースによって、いわば現実世界をいわゆる神の視点で360度自由に動かしながら現在地や目的のスポットへのルートを検索できるようになります。この変化はとても重要な意味を持ちます。と言うのも、これまで二次元の地図では感じることができなかった遠近感や現実空間とのリンク感を、ユーザーは疑似的に感じながら地図を利用できるようになるからです。
一方、この地図を提供する側にも大きなメリットがあります。例えば、入り組んだ路地の3階に店舗を構えている事業者は、これまでの二次元のみの地図からだと詳細な位置情報を得るのは限界がありました。似たようなビルが並んでいることや上の階層に店舗があるため、真上からの視点しかない二次元では描写しきれない情報があったからです。しかし、今後三次元でも位置情報を提供できるようになったことである程度精度の高い情報を地図に載せることができるようになります。
このベータ版リリースを受けて、筆者は、別記事で取り上げたInstagramの地図検索機能（リンク）との併用を強く推します。確かに、Instagram一つで現在位置から周辺のスポットの検索やルート把握までができるようにはなりました。しかし、WebGL Overlay Viewによって精密な三次元地図が一般的に利用できるようになると、Instagramでスポット検索しGoogleマップでルート検索をするという流れが生まれると予測しています。どちらにも、ユーザーが満足できる情報をきちんと掲載することで、更なる集客を見込むことができるのではないでしょうか。
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
○FISDesignができること
FISDesignでは
創造（個々のスキルをデザインで表現しまだ知らない多くの人に伝えていく。）
共創（顧客の課題はFISの課題 顧客と共に創り上げていく。）
この理念をもと、FISDesignは様々な方の「思いを形に」していきます！
FISDesignでは、エンジニアによるHP制作、SEO対策やSNSマーケティングによるアカウントの最適化できるよう対応しています。
https://www.fis-design-jp.com/about-us （FISDesignについて）
https://www.instagram.com/fis_design.web/ （Instagram、ホームページ制作実績紹介）
ホームページ制作、システム開発、SNSアカウント運用を委託したい方は是非FISDesignまでご連絡ください！ホームページやSNSに関する疑問などお気軽にご相談お待ちしております！
ホームページ制作をご自身で行った場合でもリデザイン可能です！