Maps SDKの新バージョンである、GL JS v3（Web）とMobile Maps SDKs v11（Android、iOS）がMapboxをご利用の全てのお客様向けにベータ版としてリリースされました。 これらの新バージョンは旧バージョンを踏襲し、将来的な開発に向けてSDKの基盤を安定させるものです。また、新しい3Dスタイルを導入し、よりクリーンなコードと最新のフレームワークのサポートにより、開発者の使用感を向上させています。

新しい3D環境が道案内と位置認識を強化

新しいMapbox Standardスタイルは、ダイナミックな光源機能、ランドマークとなる3D 建物、そしてシンボリックな美しさを備えた、高性能な3Dマッピング体験を可能にします。Standardはカスタムレイヤーと共にベースマップを提供し、手動でのアップデートなしで最新のデータ、レンダリング、スタイリング機能を提供します。

jetpack compose、Swift UI、その他のフレームワークのサポート

Mobile SDKはすでにSwiftUIやJetpack Composeのような宣言的UIツールキットと互換性がありましたが、v11はこれらの技術のサポートを念頭に置いて構築されました。開発者は、今より少ない定型的なコードで魅力的なマップを作ることに集中することができ、より迅速で簡素化された開発をもたらします。

Jetpack ComposeとSwift UIのサポートについての詳細はドキュメントをご覧ください。

GL JS v3では、ライブラリの一部を必要なときだけ動的にロードし、使用されていない機能のパフォーマンスコストを回避しています。その結果、軽量の2Dマップをロードする場合でも、最新のMapbox Standard 3Dスタイルをロードする場合でも、クラス最高のパフォーマンスを提供することができます。

さらに、WebGL2にアップデートし、より洗練された3Dレンダリング機能を実現し、よりリッチでパフォーマンスの高いマップ体験を可能にしました。

パフォーマンスの向上

Web上では、多くのカスタム・データ・ポイントを使用して構築されたマップによくある問題である、多くのシンボルを含むマップをパンする際のスタッタ（画面のカク付き）を解消しました。また、クラスタ化されたソースのパフォーマンスを改善し、ロード時間を20%短縮し、メモリ・オーバーヘッドを40～60%削減しました。

▲更新前：z13からz16.5へズームインして戻る際にマップが乱れる

▲更新後：パフォーマンスの向上によりスタッターが解消

モバイルでは、更新されたGeoJSON Source API により、開発者はGeoJSON データセット全体ではなく、単一のフィーチャを更新できるようになりました。この変更により、特に大規模なデータセットをアニメーション化する際のパフォーマンスが大幅に向上しました。

プロファイリングおよびデバッグ・ツールの向上

v11 Mobile SDKでは、開発者が複雑なスタイル、データ、またはデバイスの制約に起因するパフォーマンスのボトルネックをピンポイントで特定できるようにするAPIを通じて、パフォーマンス分析に強い重点が置かれています。

Tracing API（iOS、Android）は、レンダリング エンジンによって実行される操作の詳細な概要を提供します。これには、スタイルのロード、タイルの解析、およびレンダリング イベントが含まれます。特筆すべきは、Tracing APIがXCodeおよびAndroid Studioのパフォーマンス・プロファイリング・ツールと効率的に統合されており、開発者にとって合理的なワークフローを保証する点です。

さらに、MapRecorder API（iOS、Android）は、マップのインタラクションをキャプチャして再生する機能を開発者に提供します。これは、マップとのインタラクションを必要とする複雑なシナリオを再現する場合に特に便利です。記録されたセッションは、それが作成されたアプリケーションから独立して再生することができ、トラブルシューティング時の貴重な時間とリソースを節約します。トレースAPIと併用することで、ベンチマーク・スイートを作成することができます。

新しい開発者向けサービスのスイートを完成させるPerformance Statistics APIは、重要なレンダリング・パフォーマンス・メトリクスに関する情報を提供します。これは、描画コール数、GPUメモリ使用量などのメトリクスを包含し、最もリソースを消費するレイヤーとレンダーパスを明らかにします。

//{
 "cumulativeRenderingStats": {
   "drawCalls": 788,
   "textureBytes": 43456730,
   "vertexBytes": 17355252,
   ...
 },
 "perFrameRenderingStats": {
   "uploadGroupStats": {
     "maxMs": 14.71900177001953,
     "medianMs": 0.302
   },
   "topRenderLayers": [
     { "name": "trees", "durationUs": 1443 },
     { "name": "building-models", "durationUs": 1222 },
     { "name": "3d-building", "durationUs": 1091 },
     { "name": "water", "durationUs": 694 },
     { "name": "waterway", "durationUs": 641 },
     { "name": "poi-label", "durationUs": 626 },
     { "name": "natural-point-label", "durationUs": 360 },
     { "name": "road-label", "durationUs": 235 },
     { "name": "landuse", "durationUs": 222 },
     { "name": "road-number-shield", "durationUs": 215 }
   ],
   ...
 	}
 }

Mobile Maps SDKs v11では、リソースグループ、ディスク圧縮オプション、個別リソースの削除サポートなど、TileStoreにも多くの機能強化が施されています。これらの改善により、タイル管理の制御性が向上し、開発者はオンライン、オフラインを問わず、一貫したパフォーマンスの優れたUXを提供することができます。

マップのインタラクティブ性とカスタマイズ性の向上

画像表現は、明るいシーンと暗いシーンのバリアントとして使用できる2つのアイコンIDをサポートするようになりました。また、これら2つのバリアント間の遷移を制御する新しいプロパティ icon-image-cross-fadeも追加されました。

これで、スタイルはmeasure-lightexpressionを使用してマップの照明設定を認識できるようになり、レイヤーのスタイルを変更したり、異なるアイコンのバリアント間でクロスフェードすることもできます。これにより、Mapbox Standardスタイルの動的なライティング機能を最大限に活用した明暗切り替えが可能になります。

GL JS v3では、ボーダー付きの路線線をサポートしました。境界線の幅と色を指定することができます。これにより、複数の線レイヤーを必要とする対処が不要になり、CPUとメモリ使用量が節約され、より高性能な地図につながります。これは特に複雑なナビゲーションシナリオに関連します。また、SDKに同等性をもたらし、包括的で一貫性のあるクロスプラットフォームに貢献します。

同様に、デザイナーはGL JS v3でHSLA値の構成要素の表現を利用できるようになりました。 これにより、HSLA構成要素を直接制御できるようになり、色管理がよりシンプルで柔軟になります。HSL色空間は、色相、彩度、明度を使用して、より本質的に色を定義します。

そして、Mobile SDKのカメラAPIも強化しました。主な人間工学的な問題に対処し、非推奨のコードを一掃し、GL JSの機能に合わせました。これには、パディングパラメータをオプションにし、CameraManagerにmaxZoomとoffset引数を追加することが含まれています。

今すぐ開発してみましょう

今すぐv3/v11に移行して、新機能やパフォーマンスの向上などをご利用ください。GL JS v3とMobile Maps SDK v11 for AndroidとiOSの移行ガイドで、改善点の全リストと移行要件、移行方法をご覧いただけます。

これらのバージョンは、GL JS v2とMobile Maps SDKsのv10で導入したアーキテクチャをベースにしています。今回のメジャーバージョンアップでは、APIにいくつかの変更を加えたものの、ほとんどのユーザーには移行プロセスは簡単で、新しいバージョンは以前のバージョンを反復するものだと感じていただけると思います。

Mapboxの使用を開始したい場合は、Mapboxアカウントにサインアップし、上記の移行ガイドで最新バージョンに関する情報をご覧ください。

＊本記事は、Mapbox Inc. Blogの翻訳記事です。