ハイパフォーマンスなMapKit JSの紹介

こんにちは Tim Chienです AppleのMapKitチーム所属の エンジニアで MapKit JSを担当しています 今日は皆さんにすばらしい新機能を いくつか紹介します ウェブAppにMapKit JSを組み込んで これらの機能を使用することで 優れたユーザー体験を実現できます 2018年にMapKit JSを リリースしてから たゆみない取り組みで毎年 新機能を追加してきました その甲斐あって MapKit JSは AppleのWebサービスに 不可欠なものとなり 多くの Webサイトに組み込まれています たとえば icloud.comの 「探す」機能のサーバや DuckDuckGoのような サードパーティのWebサイト また ギリシャの不動産物件 検索サイトなどでも使われています このWebサイトでは 地図機能をローカライズする MapKit JSの機能が 利用されています ウェブAppにMapKit JSを 導入するのはとても簡単です MapKit JSを読み込み 初期化するだけです しかし Appのパフォーマンスを 最適化できるように 柔軟にMapKit JSを 導入できるようにしたいと 私たちは考えています そこで今年からは パフォーマンスに目を向けました 私たちが目指したのは よりレスポンシブで 読み込みが早く 制御性に優れた ページを実現する方法です 必要なときに必要な機能だけを 取り入れられるようにしています 今日はそのための新機能を3つ紹介します MapKit JSを高速に読み込むための 新しいマークアップと 追加のMapKit JSライブラリを オンデマンドで読み込む機能 そして ユーザーに提示する地図機能を Appで優先指定する新しい方法です ここでは これらの新機能が ウェブAppの改善に どう役立つかを説明します たとえば 仲間の海賊のために インタラクティブな宝の地図を 作っているとしましょう MapKit JSのデフォルト実装は 導入済みです しかし 海賊船の質の悪いWi-Fiで このページを表示すると 読み込みに時間がかかり 地図が表示されるまでに 長時間待たなくてはならず 船員たちは苛立っています 彼らが暴れ出さないように 新しいマークアップを使って MapKit JSを高速に 読み込めるようにしましょう デフォルトの実装を 拡張マークアップに置き換え 追加されたプロパティを使って ウェブAppを調整します まず MapKit JSには 新しいJavaScriptのバンドル market.core.jsがあり 始めるのに必要な 最小限のコードが含まれています 次に MapKit JSに対して 必要な機能のサブセットを 指定する必要があります ここではmapライブラリのみを 指定しています インタラクティブな地図表示のための 最小限の機能セットです MapKit JSでページの読み込みが ブロックされないように async属性を使用します 読み込みが終了すると data-callback属性で指定した コールバック関数が呼び出されます MapKit JSでページの読み込みが ブロックされなくなるので 初回のインターフェイスの 評価を行う前に ウェブAppの準備状態を確保できます こちらは非同期関数の一例で MapKit JSが使用可能になると MapKitインターフェイスに 解決されます 通常どおり MapKit JSは 読み込みが完了するとすぐに グローバルウインドウオブジェクトで 使用できます MapKitオブジェクトが 未定義の場合は MapKit JSの読み込みが 完了していません また ここでは最初のライブラリが 読み込まれているかどうかを チェックします マークアップで data-library属性を使って mapライブラリを指定したことを 思い出してください 2つのテストのいずれかが 駄目であれば data-callback属性で設定した コールバック関数が呼び出されていません ここではコールバック関数を 非同期関数のPromiseに変換し Promiseの解決後に コールバックを クリーンアップしています これで この機能が返されたら MapKit JSの準備が できていることになります では 構文に戻りましょう 高パフォーマンスの マークアップには他にも 便利な属性があります crossorigin属性を使用すると 1つのHTTP/2コネクションを ブラウザで再利用して MapKit JS CDNへの すべてのリクエストに対応できます また 適切なタイミングで MapKit JSが自ら初期化 できるようにする必要もあります それには マークアップで data-initial-tokenを 設定します これらを組み合わせることで さらに高速にページを読み込めますが まだ完成ではありません

mapライブラリしか 指定していないので 海賊船と財宝を 地図上に描画するために annotationsライブラリを 読み込む必要があります ここで2つ目の最適化が役立ちます そのための新しいメソッドが mapkit.loadです 追加のライブラリをオンデマンドで 非同期に読み込みます 読み込むライブラリが 他のライブラリを必要とする場合 処理は自動で行われます このように使用します mapkit.loadメソッドを呼び出して annotationsライブラリを 読み込みます loadイベントのリスナーを追加し 呼び出されたら 注釈を追加します annotations以外のライブラリも 読み込むことができます たとえばServicesには searchやgeocoderなどの すべてのサービスのAPIが含まれます Full Mapでは MapKitのmapクラスで使用可能な すべての機能が読み込まれます これには基本的な地図やオーバーレイ 注釈 ユーザーの位置情報を 表示するライブラリも含まれます GeoJSONでは GeoJSONインポーターが読み込まれます

これで読み込みの エクスペリエンスが改善されますが これだけではありません これが今日紹介する 3つ目の機能 地図起動時の優先指定です 新しい優先読み込みの プロパティを使うと 興味のある場所を先に表示するように MapKit JSで指定できるので 仲間の野蛮な海賊たちが いち早く動き出せるようになります 優先読み込みの設定では ユーザーのニーズに応じた 最適なエクスペリエンスを実現します 優先読み込みには 3つのオプションがあります MapKitの地図でPoints of Interestを指定すると 地図のラベルや興味のある場所が いち早く 注釈よりも先に表示されます これに対してLand Coverでは 土地被覆や道路 境界線のみが表示されます これらのオプションでは 回転やビューポートの 精細地図範囲など 起動時の一部の 地図動作が妨げられるため Noneを設定して 優先読み込みを 無効にすることもできます 実際にはこのように使用します mapコンストラクタの オプションのloadPriorityで 必要な優先指定を行います MapKitの地図で興味のある場所を 先に表示するよう指定しています

これで読み込みエクスペリエンスを さらに向上できます 今日は Appでの地図の 読み込みエクスペリエンスを 向上させる 3つの機能を紹介しました 全体的なユーザー体験を損なうことなく シームレスにMapKit JSを 組み込むことができるはずです 既存のAppに これらの新機能を 段階的に取り入れてみてください 機能ごとのメリットが得られます 以下に示した詳細なドキュメントや Maps Server APIの セッションをぜひご覧ください 皆さんに新機能を 活用していただければ 幸いです ご視聴ありがとうございました