SwiftUI向けのMapKitについて

♪ ♪

Jeff：こんにちは Jeffです MapKitチームのエンジニアで 今日はみなさんに SwiftUIのためのMapKitを紹介します SwiftUI APIが大幅に拡張され すべてのプラットフォームで マップをアプリに統合するのが これまでになく簡単になりました みなさんもきっと SwiftUIのための MapKitを使って ユーザーのためにパワフルなマップ体験を 楽しく作成できるでしょう その簡単さを分かってもらうために 機能満載のトリッププランナーを 一から作成します セッション終了まで 一つ一つの ステップを説明していきます 今週末 私は家族と ニューイングランドに帰り 土曜日は一緒に 美しいボストンの街を散策します 午前中に街の中を歩き 景色を見て 歴史的なノースエンドで昼食を取り おそらくデザートに カノーリを食べます 天気も非常に良さそうなので 午後はビーチに行って 砂の上を裸足で歩きます 楽しい日になりそうです その日の計画を立てるのに 役立つアプリを作ります マップ上の場所をマークするのに アノテーションを使います 選択を有効にして マーカーをタップすれば その場所の詳細が分かるようにします Look Aroundを統合して 行きたい場所が見回せるようにします ビーチへの運転ルートが分かるように オーバーレイを追加します 異なる位置や地域を表示するのに マップを使います 現実的な地形標高を有効にして マップに別の次元を追加します 航空写真表示方法についても見ていきます マップに追加するコントロールボタンに ユーザーの現在位置ボタンも含み 自分の位置が分かるようにします 見ていく内容が多いので 早速 始めましょう！ まずは 真新しいSwiftUIプロジェクトから始めます MapKitを使います Mapを追加します 良いですね！ 一行のコードだけで インタラクティブなマップができました！ その日 家族はまず 車で市内に入り 車を停め 一緒に歩き回ります ボストンの近くには 車を停めるのに特定の場所があるそうですが ボストンコモンの真下にある 地下駐車場にします ボストンコモンはすべての中心にある 美しい公園なので 市内散策のスタート地点として もってこいの場所です 最初に行う事は マップにコンテンツを追加して 駐車場をマークします マークする地点は 駐車場に 車が入っていくスロープの真上で 散策を始めるのに乗り込む エレベーターの近くです マップの特定の座標に コンテンツを表示するための マーカーやアノテーションの使い方も 学んでいきます では 車を停めて 歩き始めましょう！ MapContentBuilderクロージャを使って マップにマーカーを追加します よし！ SwiftUIを使い慣れていれば マップへのマーカーの追加は リストへのビューの追加に似ています ズームインしてマーカーを表示すると マップは自動的にコンテンツに フレームを付けています では 一体マーカーとは何でしょう？ コンテンツビルダーを使って 他に表示できるタイプの コンテンツはあるのでしょうか？ マーカーはマップの特定の座標にある コンテンツを表示するのに使われます バルーンの形は見慣れていると思います Mapsのアプリやプラットフォーム中に マーカーが使われていて App Storeで見かける 幅広い種類のアプリでも使われています マーカーと同様 アノテーションも 特定の座標のコンテンツを表示します マーカーのバルーンの代わりに アノテーションは SwiftUIビューです コンテンツビルダーはオーバーレイの コンテンツの表示にも使えます それについては のちほど話します 今 理解しておきたいのは コンテンツビルダーのクロージャを使って あらゆる種類のコンテンツを マップに追加できるという事です 駐車場のためにはカスタムの SwiftUIビューを使いたいので アノテーションを使ってマークします ここでは ZStackを使って 形状や画像を作成します このSwiftUIビューは 中心が 駐車場の座標の右側に来るよう マップに表示されます 代わりに座標の真上に ビューを置きたい場合は アノテーションの アンカーパラメータが使えます アンカー値を「bottom」と特定すれば ビューの下側が アノテーション座標の真上になります 良いですね！ アプリに散策ルートの始点が マークされました MapContentBuilderを使ってマップに アノテーションコンテンツを表示しました 次に マップを見てその場所の雰囲気が 伝わるようなアプリにします そのために mapStyleを使って 現実的な地形標高を有効にします mapStyleを使って 上空からの画像を表示する方法も学びます

mapStyle修飾子を使って スタイルが設定できます

これは標準のマップスタイルです デフォルトでは 紙の地図のように 平坦な表示が使われます

ラグーンを渡る橋があるようなので 片側から向かい側まで歩けます この平坦なマップでは 実際の様子がピンと来ませんね 現実的な地形標高を有効にして マップに別の次元を加えようと思います

現実的な地形標高を有効にした事で マップに現実味が出てきました ラグーンを見ると想像できます 夏に周遊するスワンボートに乗る姿や 橋の下をボートが通過する光景が 目に浮かびます イメージマップスタイルを使うのも 場所の雰囲気を伝えるのに 非常に良い方法です イメージマップのスタイルは 人工衛星写真や航空写真を使って 描画されたマップです ハイブリッドのマップスタイルは 画像と道路や標識を組み合わせます まとめると 標準のマップスタイルで 現実的な地形標高を有効にし 他のマップスタイルの 使い方についても見てきました 次は 行きたい場所の検索に 役立つアプリにしたいと思います 子供たちも一緒にボストンを歩き回るので 子供にも楽しい朝にしたいと思います 大人は歴史的なものを見て楽しめますが 子供たちはブランコや滑り台や うんていの方が喜びます！ そこで 公園を探すボタンと ビーチを探すボタンを追加します アプリにはそれぞれの検索結果に マーカーを加えます マーカーについてはもう少し 詳細を説明しますし 検索結果の邪魔にならないように マップ上にUIを表示する方法も 学んでいきます 先ほど ちょっとした BeantownButtonsビューを作りました ボタンをタップすれば 単純なクエリで検索機能を呼び出し playgroundでもbeachでも構いません 検索機能は MKLocalSearchを使って ボストンコモン駐車場近くの 場所を探し出し バインディングを使って 結果を書き込みます

AppのメインのContentViewに戻って Stateを追加して検索結果を記録します BeantownButtons UIが検索を行うと バインディングを使って このStateに結果を書き戻します マップの上の画面下部分に ボタンを追加します safeAreaInsetを使ってアプリのUIが 私の追加するコンテンツや Apple MapsのロゴやLegalリンクなど マップ上に出ている システム提供のコントロールを 邪魔しないことを確かめます 次に コンテンツビルダーを使って 検索結果のマーカーを追加します ForEachを使って 各検索結果のマーカーを追加します

ボタンを試してみます 公園を見つけましょう 出ました　公園です！ マップは自動的にズームアウトしているので 全部の公園が見えます ビーチはどうでしょうか？ 検索結果は MKMapItemsで 場所を表示するMKLocalSearchのような MapKit APIタイプです ここでは マーカーのマップアイテム イニシャライザを使っています このように作成されたマーカーは マップアイテムの名前をタイトルにして マップアイテムの情報を使って 場所を表示するアイコンや 色合いを表します 検索結果の大半は水色の傘の マーカーを表示しています マップアイテムを使って作業していると マーカーのコンテンツとスタイルへの 自動サポートは非常に便利です マップアイテムを使っていない時でさえ マーカーの表示内容が コントロールできます ここにあるように デフォルトでは バルーンにピンが入ったアイコンです Imageアセットかシステムイメージを使って 自分自身のアイコンを提供できます モノグラムを使って最大三文字の テキストも表示できます 色合いのmodifierを使って Markerの色を変更できます まとめると safeAreaInsetを使って ボタンをマップの上に表示し 一方で 検索結果マーカーの 邪魔にならないようにしました 次に マップの表示内容を アプリにコントロールさせます これまでマップにコンテンツを 追加してきました 追加のたびに マップが自動でコンテンツの フレームを作ってくれました 必要な時に この便利なビヘイビアを 有効にする方法を見せていきます また ボストン地域の ノースショアの沿岸線など 別のものを全体表示する方法も 説明していきます 今は ビーチを見ています

別のエリアに移動して公園を検索すると… マップはもう 自動的にボストンコモンの 駐車場近くでの検索結果を表示しません ユーザーがマップを操作したあとに 検索結果を表示するには Mapのカメラ位置状態を 再設定する必要があり そうすればマップは マーカーのフレームを作り…

位置を追跡するstateを追加します マップに追加したコンテンツの フレームを作るデフォルトの 自動位置決定を使います

そしてマップのイニシャライザに バインディングを受け渡します

検索結果が更新されたら分かるように onChange modifierを使います 更新があると 単にカメラ位置を自動に戻し それが見えるようにします

試してみましょう ビーチを検索して 結果を見て… 公園を探す前に 別のエリアに移動します

やりました！ これで ロードアイランドまで 画面を動かしても 検索すれば結果が表示される ようになりました この位置状態を使って やりたいことがもう一つあります ボストンで楽しい朝を過ごしたら 家族で北部に車で移動して ビーチで午後を過ごします アプリでノースショアの海岸線を見やすくして どこに向かっているかを 実感できるようにしたいと思います そのために位置stateを使います

街とノースショアの座標領域を追加します BeantownButtons UIに切り替えて 位置状態のための バインディングを追加します

ボタンを二つ追加して それぞれが 1つの領域に対するカメラ位置を設定します

Cityボタンを押すと マップはボストンを表示します Wavesボタンを押すと マップはノースショアの海岸線を表します

ContentViewに戻って ボタンUIに 位置のバインディングを渡します

試してみましょう！ 「waves」ボタンをタップすると マップの位置は更新されて ノースショア海岸線領域を表示します 「city」ボタンをタップすると 更新されてボストンを表示します マップが示す内容は 見えない部分で MapCameraがコントロールしています カメラは一定の距離から 地面の座標を見ていて マップで何が見えるかを決めるのは カメラの向きです 私の作っているアプリは カメラ自体を 作ったり設定したりする必要はありません その代わりに MapCameraPositionを使った ビューの中のものを特定するだけです カメラはMapKitに任せます アプリは検索結果などのコンテンツの フレーム作成に自動カメラ位置を使います ボストンやノースショアの表示に 領域位置を使います カメラ位置を特定して 他の物のフレームも作れます 先ほど領域で使ったように エリアの表示には長方形が使われます 座標領域の代わりに その領域を表す 長方形の地図を使うのです では アイテムとカメラと ユーザー ロケーションのカメラ位置の詳細です MKMapItemを使って 特定の場所が表示できます これはあらゆる種類の マップアイテムで有効です マップアイテムがケープコッド湾を 意味するのなら MapKitは自動的にズームアウトして その場所が画面に入るようにします ノースエンドの特定の公園を 表示しようとするなら カメラはズームインしてその周囲を表示し その場の雰囲気を届けます お好み通りの設定にして MapCameraを付け加える事もできます ピッチ角付きでMapCameraを使うと 3D的な視点が実現できます あるいは カメラがユーザーの 現在位置を追いかけて 一緒にチャールズ川を渡るのも良いですね 位置情報の利用許可が下りていなかったり デバイスが位置修正をしようと している時など ユーザーの現在位置が不明な場合に 使われるような 代替案を提供しておく事もできます カメラ位置の状態に バインディングを付与しておくと カメラ位置が変われば MapKitがそれを更新します ユーザーロケーションカメラ位置です followsUserLocationプロパティはtrueです ユーザーがマップの表示位置をずらしたら もうユーザー位置は追っていません ユーザーがマップに何かすると カメラ位置ステートは positionedByUserになります アプリがカメラ位置状態を userLocationに戻すと カメラはユーザー位置を追います アプリがカメラ位置ステートを設定すると positionedByUserにはなりません どのタイプのカメラ位置が 特定されていても ユーザーはマップを操作して カメラの位置を決められます さあ！ アプリがマップのビューに 出るものをコントロールできますよ ユーザーがマップを操作したあとでも 検索結果が見えるように 自動カメラ位置を利用しています ボストンとノースショアの表示に 領域カメラ位置を使いました 次は ボストンコモンの付近を 検索するだけではなく マップを行ってみたいエリアに動かして 代わりにそこを検索してみたいと思います カメラが変わった時に どう領域を可視化するかを見せます マップで見える領域を 追跡するステートを追加します onMapCameraChange modifierを追加し そこに アップデートコンテクストから 見える領域をつかむ場所に 自分のステートに入れ込みます デフォルトでは onMapCameraChangeに 供給されたクロージャは ユーザーがマップを操作し終えた時に 呼び出されます ユーザーがマップを操作している間に クロージャを呼び出すには 周波数パラメータを受け渡して 継続的アップデートをリクエストします ここで使っている領域プロパティに加えて コンテクストには可視的 マップの長方形のプロパティと マップカメラ自体のプロパティがあります 必要に合わせてそれらも使えます BeantownButtonsをアップデートして ユーザーに見える領域内で 検索を行うようにします ボタンにvisibleRegionを加えます

検索リクエストでそれを使います ContentViewではvisibleRegionを ボタンUIに渡します

ノースショアのビーチを探しましょう！ ノースショアが出ました ビーチを見せてください！ やりました！ ロードアイランドは？

よし！ これでロードアイランドでも ビーチが検索できるようになりましたね この有効化で使ったのは onMapCameraChangeで 表示内容に変更が起こった時に 知らせてくれます 次は どのビーチに行くか簡単に 選べるアプリにしたいと思います 選択肢がたくさんありますね まずは 検索結果を選ぶのための サポートを加えます 今は検索結果マーカーをタップしても 何も起こりません 選択ステートが無いので マーカーは選択不可能です

選択を有効にするには Mapに 選択バインディングを追加します

では 結果をタップすると どうなるでしょうか

バルーンが動いて 選択された事を示します！ MKMapItemを選択タイプとして 使っているので マップアイテムを表す個々のマーカーが 選択可能になっています 駐車スポットのアノテーションは マップアイテムを表さないので 選択できません 同じIDタイプを持たないような マーカーやアノテーションを サポートしたい場合は それらをタグ付けすればいいのです PickerやListで選択管理しているのと 同じ働きがあります ここでは selectedTagステートはIntです 各マーカーはIntでタグ付けされているので バインディングが両方の 選択を有効にします 選択の有効化にタグを使う時は 選択ステートがhashableに準ずる どんなタイプのものも使えます まとめると MKMapItemの 選択バインディングをマップに加え 検索結果マーカーの選択を有効化しました 次は 選択された 検索結果についての追加情報を アプリに表示させましょう Look Aroundのプレビューを加えて ビーチを試しに見られるようにし ビーチの名前と運転時間も 加えることにします 先ほどBeantownButtons Viewを書いている時に 一緒に書いた ちょっとした ItemInfoViewが表すのが… タイトルと 推定移動時間と Look Aroundプレビューです Look Aroundプレビューは 選んだビーチの様子を見せてくれます プレビューは Look Aroundシーンを 表示します 一定のマップアイテムのシーン取得は MKLookAroundSceneRequestを使います ビューが提示された時に シーンがフェッチされ また 検索結果の選択が 変わるたびにもフェッチされます 最後に MKRouteの推定移動時間を 表示するために DateComponents Fomatterを使ってフォーマットする プロパティがあります ContentViewに切り替えて ItemInfoViewを加えます まず最初に 駐車場から選択した検索結果の 場所までのルートを付けます ルートを追跡するステートを追加し… それを得るために MKDirectionsを 使う機能を加えて… stateを設定します

選択に変更が起こった時に 機能を呼び出す もう一つの onChange modifierを追加します

アプリは検索結果が選ばれると アイテム情報ビューを表示します

ついでに 検索結果のための マーカータイトルを隠して マップの見た目を少し スッキリさせようと思います 代わりに ItemInfoViewが 選択した場所の名前を表示します よし！ どうなったか見てみましょう

この近くに 公園があると 聞いたんですが…

良い感じですね

こっちには何があるんでしょうか？

やった！ すぐそこに公園のあるビーチだ うちの家族には もってこいですね ボストンコモンから約30分です とても良さそうです まとめると Look Aroundプレビューを加え マーカーが選択されると 表示されるようにしました MKRouteからの推定移動時間も加わって ビーチを選ぶのに非常に役に立ちます 既に移動時間を示すルートがあるので 今度はそれを使ってボストンコモンから 選択された検索結果の場所までの 運転ルートを表示しましょう ルートを表すために MapPolylineのオーバーレイを追加し 追加可能なオーバーレイコンテンツの 他のタイプも見ていきます ルートが見つかったら MapPolylineを加えて 青で線を引きます マップで見てみましょう

良いドライブコースのようですね！ MKRouteでMapPolylineを使うのは かなり簡単でした MapPolylineを使って自分自身の 位置情報データを示す事もできます StrokeStyleを使うと かなりカッコいい事もできて ダッシュや勾配なども表せます エリアのハイライトを考えているなら MapPolygonかMapCircleを 使うといいでしょう ここでは2つの公園を 2つのポリゴンがマークしています ここでは2つのサークルが 同じ公園をマークしています それぞれのサークルに固有の オーバーレイレベルになっていますね ピンクのサークルは道路の上の デフォルトのオーバーレイレベルで マップのラベルが サークルの上に出ています 青のサークルはラベルの上の レベルを使っています アプリが出来上がりつつありますね MapPolylineを加えて ビーチへの運転ルートを表示し 利用可能な他のオーバーレイタイプも 紹介しました 次は アプリで自分の現在位置が 簡単に分かるようにしたいと思います ボストンに着いて歩き始めれば もしかして いやたぶん 少し迷ってしまうでしょうね 自分の現在地を示すコンテンツとして UserAnnotationを追加し 自分の位置が見つけられるように MapUserLocationButtonを加えます 他にも使えるマップコントロールの いくつかのタイプを見ていきましょう 自分の位置を探そうとする時は 通常 マップの小さな青い点を 探す事から始めます UserAnnotationをマップの コンテンツに加えたので 自分の現在地がマップに 現れるようになっています 私はどこにいるでしょうか？ いました！ 今まで見ていた公園やビーチから どうやら随分と遠い場所にいるようですね

かなりズームアウトして移動して やっとApple Parkにたどり着きました MapUserLocationButtonなら もっと簡単に探せます

これでボタンをタップすれば 自分の現在位置を表示します 動けばマップカメラが一緒についてきます MapCompassとMapScaleViewも追加しました

デフォルトのmapControls設定は マップが回転した時に方位磁石を表し ユーザーがズームインやアウトすると スケールインジケータを表示します このようなデフォルトコントロールが このアプリにも欲しいので ユーザー現在地ボタンへの追加に これらを特定しました mapControls modifierを使うこれらを すべて追加したので デフォルトのロケーションで マップは自動的にそれらを表示します これはすべてのプラットフォームの マップコントロールを含み macOSにあるMapZoomStepperや MapPitchSliderも含まれます これらのコントロールを 自分で位置付けたいなら 自分のUIに付けられます マップコントロールは単なるビューなので mapControls modifierを使う代わりに ほかのビューと同様で 追加すればいいだけです その時には mapScope modifierを使って 特定のMap scopeでコントロールを 関連づける必要があります セッションも終わりに近いので 今日学んだ事を まとめてみましょう SwiftUIのためのMapKitは マップをアプリに統合するための 非常にパワフルで使いやすいAPIです マーカーやアノテーションや オーバーレイを使って マップにコンテンツを表示できます マップカメラとマップコントロールで 希望にあったマップを作成できます 最後に MapStyleとLook Aroundで ユーザーに臨場感を与えます これらは SwiftのためのMapKitの 一部の機能ですので デベロッパ向けのドキュメントで 詳細をご覧ください SwiftUIなので どのプラットフォームでも マップは素晴らしいものになります！ 最後に 少しお知らせです AutocompleteとDirectionsのサポートに Apple Maps Server APIを拡張しました 当社のServer APIについての詳細は 昨年のセッション「Meet Apple Maps Server APIs」をどうぞ いつものように みなさんからの フィードバックもお待ちしています！ Feedback Assistantを使って ご意見を聞かせてください 最後になりましたが 今年のSwiftUIの新機能を 是非 試してみてください Animation Plansでマップに アニメーションを加えてください！ より詳細は下に出ているセッションをどうぞ 以上です！ ご視聴ありがとうございました！ では またビーチで！ ♪ ♪