あたらしいWeb地図ライブラリ開発の取り組み
こんにちは、きむたかです。ナビタイムジャパンでWebサービス開発を担当しています。
この記事では、昨年度から進めております、「NAVITIME」サービスで利用するWeb地図ライブラリの刷新に関する取り組みについてご紹介させていただきます。
事例紹介
あたらしいWeb地図ライブラリは、コンシュマー向けサービスである PC-NAVITIME の地図機能ですでに利用されています。
また、先日法人向けサービスである NAVITIME API での提供も開始されました。
このWeb地図ライブラリによって、従来のものと比べて新たに以下のようなことが実現できるようになりました。
・ 回転/傾き操作
・ 3Dランドマーク表示
・ 地図注記のクリック操作
開発の背景
今回Web地図のライブラリを刷新することになった大きな理由の1つは、「従来の方式で地図の表現に限界があった」ことでした。
まず、ナビタイムジャパンで提供しているサービスは、大きく分けてアプリ(iOS/Android)・Webサービスの2つのプラットフォーム上で提供されており、それぞれで提供される地図にはざっくりと以下のような特徴があります。
◆ アプリ
・地図の移動/拡縮がおこなえる(タッチ操作)
・地図を回転できる
・地図を傾けられる
・3Dオブジェクトの描画がおこなえる(ランドマークや降雨レーダーなど)
◆ Web
・地図の移動/拡縮がおこなえる(PCはマウス操作、スマートフォンはタッチ操作)
これを見るとわかるように、現在Web地図ではアプリの地図と比べて操作・表現の面において劣っている部分が多くあります。
これには、Web地図を実現する上でのしくみが大きく関わっています。従来の地図は、
・ メルカトル図法によって描かれた地図画像を正方形に分割してサーバーから配信
・ クライアント(ブラウザ)側で必要な領域だけ都度サーバーから取得して並べて表示
することで機能を提供していました。いわゆる「タイル地図」と呼ばれるもので、他社でも提供されている多くの地図ライブラリで利用可能なものです。
しかし、この方式では事前に描画された地図画像を利用するという制約があるため、(先に挙げた回転操作のように)地図のより高度な表現がしづらいという課題がありました。
今日において、地図はアプリで直感的に操作できるのが当たり前となっています。一方、近年ではWeb技術も大きく進歩しており、アプリに引けを取らない表現・操作感をブラウザ上で実現できる環境も整っています。
これらを鑑みて、アプリに引けをとらない機能・表現・操作性をWeb地図で実現することを目標とし、今回のWeb地図ライブラリの開発が進行していきました。
開発のポイント
(1) モダンな開発環境に対応するための技術選定
従来までの地図ライブラリは、2010年代前半にベースがつくられ、JavaScriptによって開発・運用されていました。最近ではライブラリ自体が大規模化・複雑化してきており、運用自体が非常に困難な状況となっていました。
今回新たに開発したライブラリではベース言語にTypeScriptを採用しています。今日においてはフロントエンドの開発ではTypeScriptの採用が主流になりつつあり、型の恩恵によって機能追加や改修をしやすい環境を整えることができました。CI/CDやユニットテスト環境の整備、 TypeDoc を用いたAPIドキュメント自動生成といった部分にも対応しているので、運用面でもこれまでの環境から大きく改善されました。
また、成果物はnpmライブラリとしての利用・CDN配信による利用の両方に対応できるようにし、社内外の様々な開発環境に適応できるようにしました。npmライブラリ利用時には型定義ファイルも同梱させるようにしており、ライブラリ利用者の開発体験も向上しています。
全体像に起こすと以下のような感じです。
(2) WebGLの採用
ブラウザ上でのより高度な描画表現を実現するために、WebGLの技術を採用しました。これにより、例えばglTFに代表される3Dオブジェクト描画が可能になるなど、従来の画像のみの地図では行えなかった高度な表現が可能になります。
また、現在はまだ地図の道路・建物といった形状についてはタイル画像をテクスチャ化する方法をとっていますが、ベクターデータを採用した描画処理を実装することでより高速で柔軟な描画を実現できると見込んでいます。
(WebGLを用いた描画の詳しい話は、別の機会に改めて触れたいと思います。)
(3) IE11をサポート外に
PC-NAVITIMEの利用ユーザーは3割近くがIEユーザーであることや、WebGL自体はIE11でも動作することから、IE11をサポートするか？という点の議論はギリギリまで行われていました。
しかし、「Microsoftが公式にIE11のサポート終了期限をアナウンスしていること」「IE11では満足のいく描画パフォーマンスが出せなかった」こともあり、最終的に今回開発するライブラリではIE11をサポートしない方針となりました。
内製ライブラリのこだわり
Web地図ライブラリという観点でいうと、Google Maps Platform や Mapbox といった他社ベンダーからも多く提供されていますが、ナビタイムジャパンでは自社での内製を大切にしています。これには、大きく以下の2つの理由が挙げられます。
(1) ナビタイムジャパンがもっている様々なデータを柔軟に扱える
ナビタイムジャパンでは、ナビゲーションに関する様々なデータを扱っています。(スポットデータ、鉄道データ、渋滞情報、etc...)
これらのデータを地図上でユーザーが利用しやすい形で表現できるようにする上では、内製は大きな強みとなります。
(2) コストを抑えられる
ナビタイムジャパンのサービス全体の月間ユニークユーザーは約5,100万人(2018年9月時点)です。これだけ多くのユーザーに利用される場合、他社ベンダーのライブラリ利用コストが内製のコストを大きく上回るケースがほとんどです。
まとめ
このWeb地図が目指すところはアプリと同等の機能・表現・操作性です。そこに向けては、現在様々な課題に直面しています。
課題の1つとして、アプリと異なり「利用できるリソースに制限があること」が挙げられます。アプリでは(パーミッション制約などはさておき)OS上のリソースを比較的有効活用しやすいですが、Webではブラウザというアプリ上でのリソースに限られているため、アプリと同等のロジックを組み込むというわけにはいきません。
そんな中でも、よりアプリに近いパフォーマンスを出すために、 Web Assembly や Web Worker といった技術を用いてリソースを最大限活用できないか？とも考えています。
昨年度から始まったWeb地図ライブラリの開発はまだまだ道半ばといったところです。今後もよりユーザーが使いやすい、ハイパフォーマンスでリッチな表現が可能な地図を目指し、引き続き取り組んでまいります！