一度ビルドすれば、どこでも実行可能：Mapbox SDK for FlutterにWeb対応機能が追加されました

Mapbox SDK for FlutterのWeb版が、パブリックプレビューを開始しました。AndroidやiOSで地図を表示するためのDartコードが、ブラウザ上でも実行できるようになりました。依存関係は1つ。APIは1つ。対応プラットフォームは3つです。

Webとモバイルの各プラットフォームで共通のFlutterコードベース

Flutterは、モバイル、Web、デスクトップ向けの単一のコードベースを実現することを約束しています。これまで、Mapbox SDK for Flutterを使用して開発を行う開発者は、1つのDartプロジェクトからAndroidおよびiOS向けにリリースすることができましたが、Web向けの公式な方法は存在しませんでした。多くのチームは、コミュニティのパッケージに頼るか、Flutterアプリケーションとは別にJavaScriptの実装を維持していました。その結果、作業の重複やバグの重複が生じ、時間の経過とともに動作がずれてしまう可能性がありました。 モバイルでは洗練されていると感じられたカメラのアニメーションも、Web上では異なる動作をする可能性がありました。スタイルの更新も、多くの場合、2回実装する必要がありました。

Mapbox SDK for Flutter の v3 では、この点が変更されました。モバイルで使用されているのと同じマップウィジェットが、同じコードベースから Web 上でもレンダリングされるようになりました。カメラビューの定義、スタイルの読み込み、レイヤーの追加、ジェスチャーの処理など、どのような処理であっても、一度コードを記述するだけで、Flutter がビルド時に各プラットフォームに適した実装を選択するようになりました。

その結果、アプリケーションがAndroid、iOS、あるいはブラウザのいずれで実行されても、マップの操作体験がより一貫したものとなり、プラットフォーム固有の動作による差異が生じる可能性が低くなります。

v3におけるWebサポートの仕組み

Mapbox SDK for Flutter の v2 は、モノリシックなプラグインとして提供されました。Dart API、バインディング、および Android と iOS のネイティブ実装がすべて単一のパッケージに収められていました。このアーキテクチャは、ネイティブランタイムを共有する 2 つのモバイルプラットフォームではうまく機能しましたが、根本的に異なるレンダリングスタックを持つ 3 つ目のプラットフォームに対応するようには設計されていませんでした。

v3では、Mapbox SDK for Flutterにフェデレーテッド・プラグイン・アーキテクチャが導入されました。アプリケーションは単一のファサード・パッケージに依存し、 mapbox. その表層の下には、共通のプラットフォームインターフェースと、プラットフォーム固有の実装が存在します： mapbox AndroidおよびiOS向け、そして mapbox ブラウザ用です。

Flutter はビルド時に適切な実装を自動的に選択するため、アプリケーションのコードに条件付きインポートやプラットフォーム固有の分岐を含める必要がありません。

AndroidおよびiOSでは、Dartはプラットフォームチャネルを通じてMapbox SDKと通信し、そのSDKがGL Nativeを駆動します。Web上では、Dartはdart:GL JS Mapbox GL JS と通信し、WebGLを基盤とするHtmlElementViewにレンダリングします。

この分離により、各ビルドを軽量に保つことができます。Webアプリケーションは必要なJavaScriptバインディングのみを、モバイルアプリケーションはネイティブの依存関係のみを配布します。

v3 パブリックプレビューでサポートされている機能

Mapbox SDK for FlutterのWeb対応は、現時点ではモバイル版と同等の機能には達していません。これは意図的なものです。Mapbox 、Web対応を早期にリリースすることで、開発者の皆様に今すぐ開発を開始していただく機会Mapbox 、一般提供に向けた道筋を築く一助Mapbox 。実際のアプリケーションからのフィードバックは、今年を通じてサポートが拡大していく中で、改善の優先順位付けや機能開発の指針となるでしょう。

以下の機能比較をご覧ください。

Webでの利用を開始する

まず、Mapbox GL JS あなたの web/index.html:

<!-- web/index.html -->
<link href="https://api.mapbox.com/mapbox-gl-js/v3.25.0/mapbox-gl.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox-gl-js/v3.25.0/mapbox-gl.js"></script>

その後、既存の Flutter マップのコードを実行してください。Web 専用のブランチは必要ありません：

Dart

import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart';
MapboxOptions.setAccessToken(const String.fromEnvironment('ACCESS_TOKEN'));
MapWidget(
  viewport: CameraViewportState(
    center: Point(coordinates: Position(24.9384, 60.1699)),
    zoom: 12,
  ),
  onMapCreated: (map) { /* ... */ },
);

pub.dev からプレビュー版をインストールしてください：

YAML

依存関係: 
mapbox: ^3.0.0-alpha.1

セットアップの手順の詳細は、インストールガイドに記載されています。

Mapbox SDKMapbox にご協力ください

開発者の皆様は、GitHub上でバグの報告や機能のリクエスト、フィードバックの共有を行うことができます。

機能の不足やWeb特有の制限によってプロジェクトが停滞している場合は、イシューを登録するのが、その問題に注目してもらうための最も手っ取り早い方法です。アカウントやアクセストークンに関するご質問は、Mapbox お問い合わせください。

開発者からのフィードバックは、一般提供に向けたロードマップを策定する上で重要な役割を果たしており、最も重要な修正や機能の優先順位付けに役立っています。