MapKitによる場所の可能性の実現

MapKitによる場所の可能性の実現

MapKitとMapKit JSを使用してアプリやWebサイトにマップを取り入れる、新しいパワフルな方法を学びましょう。場所IDを使用して特定の場所を保存し、参照する方法を説明します。適切な場所をより効率的に検索できるようにするための機能強化のほか、場所に関する豊富な情報を表示してユーザーがアプリから目的地を直接探せるようにする、新しいPlace Card APIもご紹介します。さらに、シンプルな方法によるトークンのプロビジョニングとWeb Embed APIを利用して、Webサイトにすばやくマップを埋め込む方法も習得できます。

関連する章
- 0:00 - Introduction
- 0:54 - Reference a place
- 6:12 - Display place details
- 12:05 - Find a place
リソース
関連ビデオ

WWDC23
- SwiftUI向けのMapKitについて
ダウンロード

ようこそ Mikeですこんにちは Jeffです私たちはMapKitのエンジニアです今日は MapKitフレームワークと Web向けMapKit JSの両方の新機能をいくつかご紹介します多くの場合地図の役割は目的の場所を見つけることです Appleマップを使用して世界中の場所を探索したりナビゲートしたりするとその場所に関する様々な情報にアクセスできます今年はこれらの場所を皆さんのアプリに新しい方法で取り込むための機能が MapKitに追加されました説明したいことは沢山ありますがここでは3つのユースケースを取り上げます具体的には識別子を使用して場所を参照する方法アプリのUIに場所の詳細を表示する方法機能強化された検索APIを使用して場所を効果的に見つける方法ですまず場所を参照する方法を説明しましょう今年は場所の識別子が導入されましたこの場所IDを使用すると MapKitフレームワークではマップアイテム MapKit JSではPlaceで表される場所を参照できます場所IDを使用して様々な場所を参照できます美術館レストラン公園学校など関心のある場所で場所IDを使用できますアプリで場所IDを使用すると例えば新刊を出した作家がサイン会で訪問する書店の場所を確認できますこの参照は一意であり長期にわたって有効です場所が存在する限りその参照も保持されます本のサイン会ツアーアプリには訪問する各書店のWebサイトリンクを表示すると便利です WebサイトのURLなどの店舗データが Appleによって更新されると場所IDを使用しているアプリにその最新情報を表示できますこれらの識別子は一意なのでアプリではそれぞれのデータ構造で場所IDをキーとして使用できます識別子は永続化と共有が可能です Appleではこのデータを追跡しているのでアプリでいつでも参照できます Mikeが開発しているアプリでは場所IDをはじめ多数の新機能が使用されていると聞きましたどのようなアプリか教えてくれますか？もちろんです！このアプリの目的は場所の収集なので場所IDが非常に役立ちますこちらがApple Storeコレクターです私は各国を歩き回って特徴のある洗練された Apple Storeの情報を集めています場所IDを使用するとこのような素晴らしい店舗インデックスができあがります情報収集には出発点が必要ですが Apple Park Visitor Centerはこのアプリの出発点として最適ですインデックスを作成するにはまずこのCenterの場所IDを検出する必要があります場所IDの検出では SearchやGeocodingなど既存のAPIを使用できますがここでは新しい場所IDの検索ツールを使用します少数のIDの検索ではこのツールの方が高速だからですまずdeveloper.apple.com/jp/maps/ にアクセスして画面右上にあるリンクをクリックしますページを下方にスクロールするとがあります
ここでApple Park Visitor Centerを簡単に検索できますまた地図上でこの場所をタップすると場所IDが表示されます素晴らしい！場所IDがわかったのでアプリの地図上にこの場所を表示してみましょうわずか数行のコードで場所を表示できますこちらは Apple Park Visitor Centerを表示するためのコードですここでは検索ツールから取得した場所IDを使用して識別子を作成していますこの識別子を使用し非同期リクエストでマップアイテムを取得しますこのアプリは取得したアイテムのマーカーが追加された地図を表示します座標をハードコードする代わりに場所IDを使うことで Appleマップエディタの機能を活用します例えば場所の配置が誤っていてマーカーの移動が必要と判断された場合はコードを更新しなくてもその変更を引き継ぐことができますこの場所IDはすべてのネイティブアプリや Webコンテンツツールと共有できますこれは Webに同等の画面を作成するために使用するJavaScriptコードですまず entryPoint関数を作成しますこの関数を初期化してから呼び出すことをMapKit JSに指示しますこの関数では場所IDの検索Webサイトで検索した場所IDを別の関数に渡しますそこでは渡されたIDに該当する場所を検索しそれをコールバックannotatePlaceに送ります annotatePlace関数はその場所を中心とする新しい地図を作成し場所オブジェクトPlaceAnnotationを表示するための新しい種類の注釈を追加します次に entryPoint関数が読み込まれたらそれを呼び出すようMapKit JSに指示します今年は MapKit JSを初期化するコードがこれまでになく短くなりましたまずこの非同期スクリプトタグを追加して MapKit JSのsrc属性を指定します次に entryPoint関数を data-callbackとして記述し読み込み後に MapKit JSによって呼び出されるようにします最後の属性はdata-tokenですこのトークンはどこから得るのでしょうか？今年動的なJWT生成プロセスをドメイン固有のトークン文字列を生成する合理化されたUIに置き換えましたこのトークンは手動で無効にしない限り期限切れになりません新しいトークンプロビジョニングツールで新しいトークンを作成しますまずdeveloper.apple.com/jp/maps/ にアクセスして画面右上にあるリンクをクリックしますページを下方にスクロールするとがあります
追加ボタンをクリックすると MapKit JS生成トークンを作成するための簡単なフォームが表示されますこのトークンは有効期限がなく私のドメインでのみ有効ですトークンを作成した後それが不要になったときはこの画面に戻って無効化できますここからトークンをスクリプトタグにコピーするだけです有効期限や動的なJWT生成に留意する必要がなく mapkit.initを再度呼び出す必要もありませんこれでアプリとWebで最初のApple Storeを表示するための設定が完了しました素晴らしいアプリになりそうですねアプリとWebサイトで同じ識別子を使用して個々のApple Storeを参照できればとても便利です場所IDを使用してできることはたくさんありますこの技術を使用して複数の場所IDを独自に作成および維持する方法について詳しくはこのセッションのリソースにある「Identifying Unique Locations With Place IDs」リンクをご覧くださいこのように場所IDを使用すると目的の場所の最新情報を入手できます次はその場所情報をアプリやWebサイトに表示しましょう Mapsアプリで場所をタップすると場所カードが表示されます場所カードには営業時間や電話番号などの情報が表示されています今年は皆さんのアプリやWebサイトに場所カードを導入できるようになります新しいSelectionAccessory APIを使用すると地図上で場所を選択されたときにいつでもその場所の情報を表示できますその際大きな全画面表示にするか
場所を取らないコンパクトな表示にするか Mapsアプリへのリンクのみを表示するかをそれぞれのユースケースに合わせて選択できますまたデフォルトの自動スタイルを使用するとマップビューのプラットフォームとサイズに最適なスタイルが自動的に選択されますアプリやWebサイトにマップビュー機能がなくても場所カードを表示できます MapItemDetail APIと PlaceDetail APIによって柔軟性が得られ多彩なユースケースに対応できます最後に Webサイトに地図を追加するための簡単な方法として埋め込みがありますデベロッパWebサイトのツールではコピー＆ペーストが可能な HTMLを生成できます Mikeがアプリに場所カードを取り込んでいます見せてもらえますか？もちろんです Visitor Centerを地図上に表示できたのでこの場所に関する美しい最新情報を見栄えよく表示しようと思いますこれは訪れた全店舗の地図をアプリに表示したところですあとはコードを1行追加するだけです出来上がりました訪問したいずれかの店舗をタップするとその店舗に関する多くの詳細情報がアプリに表示されます良質な場所データには価値があります Webサイトも以前の状態から更新しましょう MapKit JSコードに2行追加しました 1行目で新しいPlaceSelectionAccessoryを作成し 2行目でそのアクセサリを以前からの既存の注釈に追加します Apple Park Visitor Centerを選択すると豊富なデータがポップアップ表示されます関心のある場所が複数あるページや使用パターンが複雑なページでは MapKit JSを使用してこの情報を表示すると非常に効果的ですデータを表示する場所が 1つのみのWebサイトでは Jeffが紹介した新しいローコードソリューション「埋め込み」を使用できますこのWebサイトでは 1つのApple Storeの現時点での詳細のみが表示されるので同じ機能を埋め込みで実現する方法を考えたいと思いますまずdeveloper.apple.com/jp/maps にアクセスして画面右上にあるリンクをクリックしますページを下方にスクロールするとがあります
ここで新しいボタンを選択すると埋め込んだ地図を場所IDやデベロッパトークンなどでカスタマイズできます目的の情報が地図に表示されたら生成されたHTMLスニペットを Webサイトにコピーするだけで JavaScriptを1行記述しなくても美しい地図が得られます詳細な場所情報を表示するための最後の方法は地図の利用方法からは完全に外れています収集した全店舗を地図ではなく迅速にスクロールできるリストに表示したい場合もあります各リスト項目の場所情報を確認できればもっと便利になるはずですこれは気に入った店舗をリスト表示するコードですまずすべての店舗をリスト表示します各リスト項目には店舗の名前が表示されますこの行によりリスト項目をタップしたとき場所カードが全画面スタイルで表示されます気に入った店舗の詳細情報を Webでも見たいので Webサイトも更新しましょうこれは以前のWebコードですが annotatePlace関数をわずか2行のステートメントで置き換えています最初の行ではページから要素を取得します 2番目の行では検索した場所の詳細情報をその要素に格納しますさらに新しいアダプティブなカラースキームを使用しており場所の詳細をシステム推奨のカラースキーム（ライトまたはダーク）に合わせることができます同じ値を使用してアダプティブな MapKit JSマップも作成できますアプリとWebが同じような機能を備えることになりますどうでしょう？本当に同じになりますね新しいAPIを使用して店舗について収集した場所情報を表示しています MapItemDetail APIを使用するとマップビューがないアプリでも場所カードを表示できます UIKit AppKit SwiftUIで APIを利用できます MapKit JSでは PlaceDetail APIを使用して場所カードをWebページのコンテンツとして扱うことができます SelectionAccessory APIを使用すると地図上に場所情報を表示できます MapKitには様々なプラットフォームやテクノロジーで使用できる SelectionAccessory APIが用意されています
Mikeのおすすめの店舗がすべて表示された地図を見ていたら同じ道筋をたどってどれかの店舗へ行ってみたくなりました娘たちを連れて行って初めてのApple Tシャツを選んでもらうのもいいですね彼女たちはピクニックも大好きなので公園を探して軽食をとるのもいいでしょういい考えがあります SelectionAccessory APIを使用すれば Apple Storeだけでなく地図上のすべての場所について場所カードを表示できます気に入った店舗の周辺をタップするだけでピクニックにぴったりな公園が見つかります訪問するApple Storeを選ぶときにこの情報が役立ちます試してみましょう気に入った店舗を表すマップアイテムごとにアプリによってマーカーが追加されます SwiftUIでは MapSelectionを使用して独自のコンテンツと地図上のマップ機能の両方を選択できますこのモディファイアを使用することでマップ機能が選択されたときに場所カードのコールアウトを表示できます SelectionAccessory APIを初めて使用する場合これはお勧めの方法ですマップ機能についてアプリの既存のコードでこのAPIを有効にするだけですアプリでは注釈のコンテンツをこれまでどおりに表示できるのでユーザーは地図上のコンテンツ周辺の場所について詳しく知ることができますこの追加のコンテキストで多くの価値を提供できます場所IDで場所を参照する方法と場所カードに有用な情報を表示する方法がわかりましたでは目的の場所はどこにしましょうか目的の場所が場所IDの検索ツールを使用して見つけた場所に限らないのであればアプリ側で場所を検索する必要があります今年は検索APIの機能が向上し新しい方法で検索結果を絞り込めるようになりましたコンサート会場スケートパークさらには城など多彩な場所を検索できます川や山脈など地形的な特徴も検索できます都市名や郵便番号など住所の一部を検索することも可能です特定の領域に限定した検索もできるので目的の地域のみを検索対象とすることができますサーバAPIでは改ページ機能を追加していますこれで大量の検索結果が返される場合はそれらを複数のページに表示できますこれらの新しい検索機能により店舗の検索と収集がより効率的になると思いますか？もちろんです目的のApple Storeを探してベイエリアを一日中動き回った後は濃いコーヒーを飲んで一休みしたくなるかもしれませんこれらの新しい検索機能を使用して Webサイトで事前に計画を立て飲みたいときに好きなだけコーヒーを飲めるようにしましょうさらにネイティブアプリにも同じ機能を追加しますまずクパティーノ市を探す必要がありますこれは新しいAddressFilterを使用するとできそうですここでは市区町村のみを検索する AddressFilterを作成します大半の国ではこれは都市に該当します次にそのフィルタを新しい検索オブジェクトに接続します最後に「クパティーノ」を指定して検索を実行しこの都市を見つけますこの時例えばクパティーノの Classy Cleaners社がヒットするようなことはありません「クパティーノ」に一致する都市の検索結果は私が設定したshowMap関数へ送られますこの関数では最初の検索結果を取りそれを使用して新しい地図に渡す地域を作成しますこのコードによって希望どおりクパティーノを中心とした地図が得られます次にこの地域内での新しい検索を作成してコーヒーショップを探します最後にコーヒー店の各検索結果について新しいPlaceAnnotationを追加しますすべての結果が地図上に表示されましたしかしまだ少し問題があります地図をズームアウトすると最初のビューポートの外部で地図に追加した注釈が多すぎることがわかりますこんな遠方のコーヒーショップまで行く気はないので RegionPriorityを使用してこれらを除外しますこのプロパティ1つで検索に渡した地域内の結果のみを返すように要求できますこの変更によって最初に指定した地域のみの検索結果がページに表示されますこれらは自転車で行ける範囲にあるコーヒーショップですもちろんこれらの機能はネイティブアプリでも使用できます私のアプリもまったく同じ方法で改善していきますここでは各コーヒーショップのマーカーを表示するビューを作成しました findCityを非同期で使用して都市の地域を取得し findCoffeeを使用してその地域のコーヒーショップを検索しますこちらがfindCityです JSコードと同様に addressFilterを使用して場所を検索しますそしてこちらがfindCoffeeですここでクパティーノ地域を取り込み regionPriorityを使用して指定の地域にあるコーヒーショップを検索しますさてこの改善によって素晴らしいApple Storeコレクターになる準備ができましたそのとおりですねコレクションが充実していく様子を見るのが楽しみですパスポートのスタンプ収集まで行き着くかもしれませんね
ここまで多くを説明してきました最新バージョンのMapKitでは場所IDによる場所の参照場所カードによる有用な情報の表示 Webページへの場所の埋め込みを簡単に行えます MapKitを使用すると様々な種類の場所を検索できるほか検索範囲を特定の地域に制限することもできます MapKitサーバAPIでは改ページによってこれまで以上に多くの結果を表示できます MapKit JSにはトークンの簡潔なプロビジョニングプロセスが用意されており MapKit JSの使用を容易に開始できます最後に皆さんに宿題です場所IDを使用して土曜日の朝にファーマーズマーケットが開かれる公園を見つけてください場所カードを使用してアプリに場所情報を表示してください場所カードを使用するとアプリの検索結果と重要な特定の場所に関する詳しい情報が得られます地図上のすべての重要な地点で場所カードを有効にしてアプリで地域の情報を調べるユーザーに有益なコンテキストを提供します「Identifying Unique Locations With Place IDs」リンクで場所IDの詳しい使用方法をご確認ください MapKitの新機能に興味をお持ちいただけましたら幸いです地図作成を続けてください私は収集を続けます！

3:06 - Display a visitor center annotation

// Display a visitor center annotation

struct PlaceMapView: View {
    var placeID: String // "I63802885C8189B2B"
    
    @State private var item: MKMapItem?
    
    var body: some View {
        Map {
            if let item {
                Marker(item: item)
            }
        }
        .task {
            guard let identifier = MKMapItem.Identifier(
                rawValue: placeID
            ) else {
                return
            }
            let request = MKMapItemRequest(
                mapItemIdentifier: identifier
            )
            item = try? await request.mapItem
        }
    }
}

3:44 - Display an annotation for the center

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    #map {
      margin: 0 auto;
    }
  </style>
</head>
<body>

<script
  crossorigin async
  src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"
  data-callback="entryPoint"
  data-token="TODO: Add your token here"
></script>

<script>
window.entryPoint = () => {
  const id = "I63802885C8189B2B";
  const lookup = new mapkit.PlaceLookup();
  lookup.getPlace(id, annotatePlace);
};

const annotatePlace = (error, place) => {
  const center = place.coordinate;
  const span = new mapkit.CoordinateSpan(0.01, 0.01);
  const region = new mapkit.CoordinateRegion(center, span);
  const map = new mapkit.Map("map", { region });

  const annotation = new mapkit.PlaceAnnotation(place);
  map.addAnnotation(annotation);
};
</script>

<div id="map" style="width: 100dvw; height: 100dvh;"></div>

</body>

</html>

7:32 - Display my favorite apple stores

// Display my favorite apple stores

struct VisitedStoresView: View {
    var visitedStores: [MKMapItem]
    @State private var selection: MKMapItem?
    
    var body: some View {
        Map(selection: $selection) {
            ForEach(visitedStores, id: \.self) { store in
                Marker(item: store)
            }
            .mapItemDetailSelectionAccessory()
        }
    }
}

7:50 - Display a selectable annotation

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    #map {
      margin: 0 auto;
    }
  </style>
</head>
<body>

<script
  crossorigin async
  src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"
  data-callback="entryPoint"
  data-token="TODO: Add your token here"
></script>

<script>
window.entryPoint = () => {
  const id = "I63802885C8189B2B";
  const lookup = new mapkit.PlaceLookup();
  lookup.getPlace(id, annotatePlace);
};

const annotatePlace = (error, place) => {
  const center = place.coordinate;
  const span = new mapkit.CoordinateSpan(0.01, 0.01);
  const region = new mapkit.CoordinateRegion(center, span);
  const map = new mapkit.Map("map", { region });

  const annotation = new mapkit.PlaceAnnotation(place);
  map.addAnnotation(annotation);

  const accessory = new mapkit.PlaceSelectionAccessory();
  annotation.selectionAccessory = accessory;
};
</script>

<div id="map" style="width: 100dvw; height: 100dvh;"></div>

</body>

</html>

9:15 - List stores and show details when selected

// List stores and show details when selected

struct StoreList: View {
    var stores: [MKMapItem]
    @State private var selectedStore: MKMapItem?
    
    var body: some View {
        List(
            stores,
            id: \.self,
            selection: $selectedStore
        ) {
            Text($0.name ?? "Apple Store")
        }
        .mapItemDetailSheet(item: $selectedStore)
    }
}

9:37 - Show visitor center details

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    #map {
      margin: 0 auto;
    }
  </style>
</head>
<body>

<script
  crossorigin async
  src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"
  data-callback="entryPoint"
  data-token="TODO: Add your token here"
></script>

<script>
window.entryPoint = () => {
  const id = "I63802885C8189B2B";
  const lookup = new mapkit.PlaceLookup();
  lookup.getPlace(id, annotatePlace);
};

const annotatePlace = (error, place) => {
  const el = document.getElementById("place");
  const detail = new mapkit.PlaceDetail(el, place, {
    colorScheme: mapkit.PlaceDetail.ColorSchemes.Adaptive
  });
};
</script>

<div id="place"></div>

</body>

</html>

11:17 - Display a place card for the selected map feature, too

// Display a place card for the selected map feature, too

struct VisitedStoresView: View {
    var visitedStores: [MKMapItem]
    @State private var selection: MapSelection<MKMapItem>?
    
    var body: some View {
        Map(selection: $selection) {
            ForEach(visitedStores, id: \.self) { store in
                Marker(item: store)
                    .tag(MapSelection(store))
            }
            .mapItemDetailSelectionAccessory(.callout)
        }
        .mapFeatureSelectionAccessory(.callout)
    }
}

13:09 - Find Cupertino, then find coffee

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    #map {
      margin: 0 auto;
    }
  </style>
</head>
<body>

<script
  crossorigin async
  src="https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js"
  data-callback="entryPoint"
  data-token="TODO: Add your token here"
></script>

<script>
window.entryPoint = () => {
  const addressFilter = mapkit.AddressFilter.including([
    mapkit.AddressCategory.Locality
  ]);
  const citySearch = new mapkit.Search({ addressFilter });
  citySearch.search("Cupertino", showMap);
};

const showMap = (error, cities) => {
  const center = cities.places[0].coordinate;
  const span = new mapkit.CoordinateSpan(0.01, 0.01);
  const region = new mapkit.CoordinateRegion(center, span);
  const map = new mapkit.Map("map", { region });

  const coffeeSearch = new mapkit.Search({
    region,
    regionPriority: mapkit.Search.RegionPriority.Required,
    pointOfInterestFilter: mapkit.PointOfInterestFilter.including([
      mapkit.PointOfInterestCategory.Cafe
    ])
  });
  coffeeSearch.search("coffee", (error, results) => {
    for (const place of results.places) {
      const marker = new mapkit.PlaceAnnotation(place);
      map.addAnnotation(marker);
    }
  });
};
</script>

<div id="map" style="width: 100dvw; height: 100dvh;"></div>

</body>

</html>

14:41 - Finding coffee in Cupertino

// Finding coffee in Cupertino

struct CoffeeMap: View {
    @State private var position: MapCameraPosition = .automatic
    @State private var coffeeShops: [MKMapItem] = []
    
    var body: some View {
        Map(position: $position) {
            ForEach(coffeeShops, id: \.self) { café in
                Marker(item: cafe)
            }
        }
        .task {
            guard let cupertino = await findCity() else {
                return
            }
            coffeeShops = await findCoffee(in: cupertino)
        }
    }
    
    private func findCity() async -> MKMapItem? {
        let request = MKLocalSearch.Request()
        request.naturalLanguageQuery = "cupertino"
        
        request.addressFilter = MKAddressFilter(
            including: .locality
        )
        
        let search = MKLocalSearch(request: request)
        let response = try? await search.start()
        return response?.mapItems.first
    }
    
    private func findCoffee(in city: MKMapItem ) async -> [MKMapItem] {
        let request = MKLocalSearch.Request()
        request.naturalLanguageQuery = "coffee"
        let downtown = MKCoordinateRegion(
            center: city.placemark.coordinate,
            span: .init(
                latitudeDelta: 0.01,
                longitudeDelta: 0.01
            )
        )
        request.region = downtown
        request.regionPriority = .required
        let search = MKLocalSearch(request: request)
        let response = try? await search.start()
        return response?.mapItems ?? []
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

関連する章

リソース

関連ビデオ

WWDC23