MapKitの最新情報

(音楽)

皆さん WWDCにようこそ! 私はEric Mapsチームのエンジニアです 今日は同僚のYingxiuと一緒に MapKitの新機能について見ていきます

3年前に Apple Mapsは刷新的なマップを導入し 没入感のある Look Around体験を 生み出しました

当初は米国のみをサポートする形でスタート その後新マップと Look Aroundの カバーエリアは広がり 今ではカナダや ヨーロッパ諸国や日本なども含まれています

昨年 Apple Mapsはさらなる飛躍を遂げ 3D City Experiencesの導入で 右左折車線や横断歩道や 自転車専用道路や フェリービルディングのような 3Dランドマークが表示されます

マップに追加された詳細で これまでにないレベルでの コンテキストや精度を持ち 3Dの地形標高も加わったことで 他のマップとは比較に ならないほどのリアルさです!

今年 MapKitが Apple Mapから皆さんのAppに 最新のイノベーションをお届けすることで ユーザーは驚くほど詳細に 世界を探検できるようになります

今回は MapKitの新機能の いくつかについてお話します まず 最新のマップを採用し Map Configuration APIを使用して マップを最大限に利用する方法です

次に コンテンツをマップと シームレスに統合するために オーバーレイ APIに施した 様々な改善についてです

また 新しいブレンドモードの サポートについても説明し マップコンテンツの提示を さらに強化するための サポートの使い方をお見せします そして新しい Selectable Map Features APIの採用によって マップをインタラクティブにする 方法も説明していきます 最後は 没入型の Look Around体験を 皆さんのAppに 直接統合するお話です 盛りだくさんな内容なので 早速 最初のトピックに入りましょう 最新のマップの採用と Map Configuration APIの使用です

最新のマップのAppへの採用はiOSでも macOSでも tvOSでも 非常に簡単です Appを新しい SDKでリコンパイルするだけで 自動的に最新の Appleマップへと オプトインされ 3D City Experienceも 利用可能な場所では表示できます 多くのAppでは リコンパイルだけで 事が足ります

もちろん マップの表示に関し もっとコントロールが 必要な方もいるでしょう iOS 15での マップの設定は MKMapViewの様々なプロパティを 通して行います ですが iOS 16では このようなプロパティは非奨励で 新しい Map Configuration APIをその代わりに 導入しています

MKMapConfigurationは新しい Map Configuration APIの中核クラスです MKMapConfigurationは抽象基底クラスで 3つの具象サブクラスを持ちます

ImageryMapConfigurationは 航空写真の表示に使われます HybridMapConfigurationは 航空写真の表示に加え 道路名やPOIなどを表示するのに使われます

StandardMapConfigurationは CGベースのマップ表示に使われます この3つは既存のマップの タイプに似ていますので 馴染み深く感じるでしょう

ベースの MapConfigurationクラスが elevationStyleプロパティをサポートし flatでも realisticでも可能です

flatな elevation styleでは 地面が平らに表示されます 橋や歩道橋を含む道路も平らに表示されます flatがデフォルトになっています

realisticな elevation styleでは 地面の地形が現実世界の起伏を再現していて 丘や山などが現れます 道路も現実的な起伏が詳細に描かれています

それでは MapConfiguration サブクラスを見ていきましょう

ImageryMapConfigurationは航空写真のみ示し 他のマップ機能はありませんので 他のプロパティもありません

HybridMapConfigurationには 追加のプロパティがあり POIのカテゴリのフィルタをコントロールしたり 交通情報の表示の有無を決定したりします

StandardMapConfigurationは EmphasisStyleプロパティをサポートし デフォルトにしたりぼかしたりできます

名前で分かる通り別途明記されていない限り これがデフォルトです

弱められた emphasis styleは 詳細のコントラストを和らげ それによって上に載せたい画像情報に対して 注目を集められるわけです StandardMapConfigurationも 追加のプロパティがあり POIのカテゴリのフィルタをコントロールしたり 交通情報の表示の有無を決定したりします

以上が 利用可能なMapConfigurationクラスと そのプロパティでした

この新しい APIなら サポートされるオプションの 組み合わせだけを設定できます また マップの設定を わずかに変更することも可能です 既存の APIに対する 素晴らしい改善だと思っています

ここまでのまとめとして この表では 新しいMapConfigurationクラスと MKMapTypeプロパティとの対応が示されています

3D City Experienceのついた最新のマップには 互換性のあるハードウェアが必要です iOSでは 最新マップのサポートには A12搭載かそれ以降で macOSでは 最新マップのサポートには M1搭載かそれ以降である必要があります

3D City Experienceが利用できない地域では マップは自動的にフラットな標高表示で 最新マップを表示します

その他の全てのデバイスでは マップはフラットエレベーションで 表示されます

M1搭載の Macでは Xcodeで どちらの表示のシミュレーションも OSバージョンの変更によって行えます ぜひ 両方を試してみて 全てのデバイスでApp表示が ベストなことを確かめましょう!

3D City Experienceは世界中の 多くの大都市地域で利用できます

新たな都市がどんどんと リストに追加されていますので このセッションの概要にあります iOS and iPadOS Feature Availabilityの 3D City Experienceのセクションを ぜひ ご覧ください 最新マップの採用とMap Configuration APIの 使用に関するセクションはこれで終了します

次はオーバーレイのお話です MapKitは複数のスタイリングオプションで 長年オーバーレイをサポートしてきました iOS 16では 既存の APIを改善して オーバーレイをシームレスに マップに統合できるようになりました オーバーレイのレベルについて 簡単におさらいしましょう

オーバーレイは異なる2つのレベルで レンダリングが可能で 1つは道路上もう1つはラベル上です MapKitのオーバーレイ挿入機能の1つを使えば レンダリングレベルを挿入時に指定できます

aboveLabelsはラベルを含む 全ての上にオーバーレイを表示します ラベルは重要な コンテキスト情報を提供するので aboveLabelsの使用は データとマップのインタラクションを 望まないような稀なケースだけに 使うことをお勧めします コンテンツがマップよりも目立つことが 狙いであるという場合は ぼかしたマップ強調や ブレンドモードもありますが これらについては また後ほど

aboveRoadsではオーバーレイが 道路や土地被覆や 水域を含む地形の上に表示されています ですが 表示はラベルの下になり また ある程度は木や ビルの下に表示されます それに関してはこの後に aboveRoadsは iOS16での 新しいデフォルトモードです 次にお話するのはiOS 16で導入された新機能 “透明な建物”です

オーバーレイレベルが道路上か ラベル上かにかかわらず 真上から見る場合 オーバーレイは常に ビルの上にレンダリングされます しかし ピッチマップと組み合わせて aboveRoadsを使うことで マップ体験が改善されました

木やビルなどの地上の物体は オーバーレイ上にある場合は 自動的に透明度を加えて レンダリングされるので 不明瞭度が下がります マップのピッチ角度に応じて アルファ値は変わります ピッチ角度が0度の真上からマップを見れば 地上の物体は効果的に表示から消えて オーバーレイが完全に表示されています

透明な建物は 半透明なオーバーレイにも効果的です オーバーレイのアルファ値が追加されて それが 透明な建物のアルファ値と組み合わされます オーバーレイへの変更はもう1つあります リアルな地形のマップに オーバーレイを加えると MapKitが自動的にマップを フラットな表示に変えます オーバーレイが排除されると マップは自動的に再び リアルな地形に戻ります このルールへの明らかな例外は オーバーレイが MapKitの Directions APIで作られた場合です このオーバーレイは自動で地形を追跡します ではここで Yingxiuと交代しましょう ありがとう Eric皆さん Yingxiuです Mapsチームのエンジニアです MapKitの新機能を実演して アップデートされた APIによる 素晴らしいマップ体験の作成が 容易であることをお見せします 私が使うサンプルAppは サンフランシスコを観光するユーザーの スクーターレンタルのためのAppです

Appには数多くの機能があり このテーブルビューに列挙されています “移動区域”ではスクーターで 行ける範囲を表しています “ライド”は金門橋を渡る ツアーの案内をしています “探索”はサンフランシスコダウンタウンの インタラクティブマップが表示されるので 埠頭のアトラクションが探索できます “ハイライト”は必見の場所の 詳細情報を提供します このセッションでこれらの機能を 実装またはアップグレードします では始めましょう!

まず 移動区域機能を使って 最新マップの採用が簡単であることを示し オーバーレイに施した いくつかの改善点をお見せします 既にプロジェクトは Xcodeで開いてあります それでは iOS16 SDKとコンパイルし どうなるか見てみましょう

できました! 既に最新マップに変わっています マップのビューも非常に詳細で 地形表示に美しいライティングや 丘のシェーディングが施されていますね ズームインすると見えてくるのが ビルや木や…

ランドマークです

では移動区域を視覚化するのに ポリゴンオーバーレイを加えましょう

移動区域のためのポリゴンデータを ここに用意してあります ビューがロードされたら まず領域とカメラの境界を設定します 正しい区域であることを確認しましょう

そしてオーバーレイを追加するだけです

では作成して 見てみましょう!

ポリゴンオーバーレイは真っ直ぐ 見下ろすと 不透明です ズームインして… ピッチすると 建物が見え始め ピッチ角度が上がると透明度も上がってきます AboveRoadsのオーバーレイレベルを 使用した場合のみの効果です 透明化した建物や木を利用したい場合は 正しいオーバーレイレベルを選びましょう

オーバーレイは良い感じですが ピッチされていない時も マップを半透明にしたいと思います それではコードに戻って半透明に変えましょう

アルファ値を 0.8に変えます

オーバーレイに透明度が出て ピッチしていなくても道路や建物が見えます ズームインしてマップをピッチした場合もなお 透明度が上がります 良いですね! ポリゴンオーバーレイは以上です 次はリアルな地形の統合方法と 道の高度のつけ方をお見せします これで金門橋を渡るツアーの “ライド”機能が完成します

マップビューの設定から始めましょう エレベーションのスタイルは コードで変更するか 右側にあるInterface Builder inspectorを 開ければ…

マップビューのコンフィグレーション 設定が出てきます エレベーションを realisticに設定しましょう

次に経路です

この機能では ユーザーが “経路を表示”のスイッチを 入れた時に経路が表示される ようにしたいと思います 経路に焦点を当てるようにカメラを動かします

金門橋を渡る経路を見せたいわけですから プレシディオパークを始点に バッテリースペンサーを終点に設定します

マップビューが作成されたら アノテーションを作り スタート地と目的地をマークします

そして座標とタイトルを設定し アノテーション配列に追加して マップビューに追加します

ここで経路のポリラインに注目です

通常のオーバーレイでは マップをフラットにしますが MapKit's Directions APIが返すポリラインは リアルな地形を維持します

このアクション機能でスイッチがオンになれば 先に定義した座標で プレースマークを作成します

そして 行き方のリクエストを作成するために… 出発地と目的地を使います ようやく 行き方をリクエストします

フェッチ操作が成功したら 経路のポリラインを オーバーレイとして追加するだけです

これでよし ではコンパイルしたらどうなるでしょうか!

アノテーションが自動的に 勾配付きの新しい表示に なっているのが分かります 正しいエレベーションで シームレスに表示されています “経路を見せる”をオンにすると カメラがピッチして さらにハッキリ見えるようになります

ご覧のように経路の線が 勾配のある地形に追随します 複雑な交差点のナビゲートに これは非常に便利ですね 橋を渡る道路も通っています また 経路がわずかに 橋の柱を通して見えていますね

マップがかなりピッチされると 経路の前に立つ木を通して 経路が見えているのが分かります 見てください経路の色が木のない所で 褪せていますね ズームアウトして様子を見てみましょう

なるほど 経路のこの部分はトンネルですね それで透過性が出るわけです ElevationRealisticStyleと elevated route line機能は A12搭載の iOSデバイスでサポートされています 同じAppを古いデバイスで実行すれば 自動的に2Dのマップになり 2Dの経路が表示されます 3D City Experienceマップに 高度のついた経路を加えるのは こんなにも簡単です! ここでまたEricにお願いしましょう ありがとう Yingxiu! 金門橋をスクーターで渡るAppは 素晴らしい出来栄えですね! MapKitオーバーレイの新機能の 一部をご覧いただいたわけです

次はブレンドモードに移ります この新しい APIで オーバーレイが 色んな面からコントロールでき クリエイティブな可能性が 大きく広がっていくのです

おそらくブレンドモードは既に 皆さんの多くが写真編集Appや Appleの CoreGraphics APIで ご存知だと思います ブレンドの操作中には 2つのグラフィックレイヤーが ブレンドモードに指定された 一連の方程式に従って混合されます では MapKitコンテキストでの ブレンドモードの使用例を 見ていきましょう

ここでは サンフランシスコの プレシディオパーク付近を マップの中心に置いて 強調表示をつけるという設定です まず マップの全体をカバーする オーバーレイを作成し プレシディオの形で切り抜きます

ブレンドモードはまだ使っていません プレーンなオーバーレイのままで 大きな四角いドーナツ状態ですね 次に 色相ブレンドモードを オーバーレイに割り当てて グレーで塗り潰します これでプレシディオの外側の マップ部分の彩度が下がります 次に そのオーバーレイを複製し それをハードライトのブレンドモードに割当て 濃いグレーで塗り潰します

これでプレシディオの周りを 暗くする効果が出ます 既に良い感じですが オーバーレイをもう1枚 追加しましょう 今度はプレシディオの形の オーバーレイを追加し 彩度ブレンドモードに割り当てて 黄色で塗り潰します おっと これは狙った効果とは ちょっと違いますね 色が明るすぎます 別の方法を試しましょう 焼き込みブレンドモードにして グレーで塗り潰しましょう

よし これならさり気ないですね 完璧です! では コードを見てみましょう

今のような効果を有効にするには MKOverlayRendererにプロパティを追加します ブレンドモードです! 欲しい CoreGraphicsブレンドモードを オーバーレイレンダラーに セットすれば 完了です! 繰り返しますがブレンドモードは 順序に依存します スタックの1番下のオーバーレイは マップとブレンドされ 下から2番目のオーバーレイはその前に行われた ブレンド操作の結果にブレンドされ 以降 同じように続きます MapKitでは オーバーレイの順序は 挿入時に決められます 絶対的配置でもいいですし… 相対的配置でも構わず MKMapViewのオーバーレイ 挿入機能をどれか使ってください

MapKitがサポートする ブレンドモードの数は膨大で 今日 その全てをカバーするのはとても無理です 是非 試してください ブレンドモードは以上です! ご覧いただいたように ブレンドモードはマップのスタイリングを コントロールする強力なツールです 地理的領域の強調に使ったり 地味にしてコンテンツを 目立たせるために使ったり 色々と できます

次にお話するのは選択可能な マップフューチャーです! これは以前からかなり要求されていた機能で 紹介できるのが嬉しいです!

現在Appで MapKit を使用している場合 おそらく都市 POI または物理的な オブジェクトの位置を示すために アノテーションを活用していると思います

POIフィルタリングを使用していない限り Appleが提供する多くの既存の アノテーションが マップに配置されているでしょう これまでユーザーがインタラクトできたのは 皆さんの提供するアノテーションのみでした iOS 16では それを変えています 新しい Selectable Map Features APIを使えば ユーザーにマップのフューチャーを選択 可能にするオプションができるわけです

選択可能なマップフューチャーには 店やレストランや ランドマークといったようなPOIと 都市や州などの領域と 山脈や湖などの地形的特徴があります

Appに選択可能なマップフューチャーを 加えるためには 非常にシンプルな手順をいくつか行うだけです まずは どのフューチャータイプを 選択可能にするかの設定です ご覧いただいたように 主なフューチャータイプは3つですが 全てをAppのコンテキストで インタラクティブにするのは 無意味かもしれません POIのフューチャーには 既存のフィルタ APIを使って どのPOIのカテゴリが表示され選択可能か さらに制限できます

次に MKMapViewのデリゲート コールバックを実行し 選択イベントを処理します お好みに合わせて処理していただます 選択したフューチャーの表示方法の コントロールでも 選択イベントに応じた UIへの追加表示でも構いません

3つ目に AppのUIに 追加の場所情報を リクエストし表示しましょう マップのフューチャーに埋め込まれた情報は スクリーン上のものに限られています

ユーザーが選んだ場所について コンテキストを増やすには 追加情報のリクエストが必要です 新しい APIを使った手順を 1つずつ見ていきましょう

まずはどのマップフューチャーを 選択可能にするかの 設定で始めますが 新しい selectableMapFeatures プロパティを使います

POIと領域と地形的特徴の組み合わせを 自由に選びましょう 選択可能なフューチャーを設定して ユーザーがそのうちの1つをタップしたら 新しいデリゲートコールバックを受け取り始め 選択動作のカスタマイズが可能になります 最初は新しい didSelect annotation コールバックを受け取ります このコールバックはマップアイテムの 追加情報をリクエストする 良い機会であり その際に使う 新しい APIについては この後 お話します

2つ目のコールバックは既存の view for annotationコールバックです 選択状態で表示されるビューのカスタマイズは ここで行うことができます これは既存の APIですが 追加された新しいタイプの アノテーションクラスがあり マップフューチャーアノテーションと呼ばれます ユーザーがマップフューチャーを 選ぶとこのクラスが アノテーションのビューにパスされます

マップフューチャーアノテーションには 多くのプロパティがあります featureTypeプロパティを調べれば マップフューチャーが POIなのか 領域なのか地形的特徴なのか分かります

POIであれば pointOfInterestCategoryプロパティが どのカテゴリなのか教え iconStyleプロパティによって アイコンの追加情報を取得でき 例えば 背景の色だとか アイコン画像そのものです

アノテーションコールバックのビューを使った アノテーションビューの カスタマイズ例を見ましょう

MapsAppと同じ 選択様式を入手したければ nilと戻すだけです

カスタマイズしたい場合は アノテーションビューを 自分のアノテーションの場合と 同じ様に戻します

MarkerAnnotationViewは良い選択肢ですね MapsAppと同じような バルーンや勾配処理が 手に入りますし 独自の色やアイコンを選ぶこともできます

この例では フューチャーの アイコンスタイルにあったのと 同じ画像を色だけ変えてAppの色合いと マッチさせました

完全なカスタム化を望むなら 自作のアノテーションビューサブクラスを どれでも提供できます 今あったように フューチャーアノテーションを使って 選んだフューチャーの視覚情報が取得できます フューチャーアノテーションを 新しい MKMapItemRequest APIにパスすれば 選んだフューチャーの マップアイテムも取得できます

このマップアイテムは場所についての 追加メタデータを含んでいて 住所や名前や電話番号 そして URLが入っています

また MapKitからは得られなかった 追加のメタデータを ユーザーが見たい場合もマップアイテムが MapsAppにパンチアウトさせてくれます

では再び Yingxiuにバトンタッチです ありがとう Eric

Ericに 選択可能なマップフューチャーの 説明をしてもらいました 今度は その APIの利用が いかに簡単かをお見せします

そのために Appの探索機能を実行しましょう ユーザーに埠頭近くで面白そうな場所の探索が できるようにします POIをタップすれば アノテーションが現れます タップされた場所のカメラ映像が作動して 下に情報カードが表示されます

まずは マップのPOIにフィルタをかけ ツアーに無関係なカテゴリを削除していきます

コードでフィルタを適用する代わりに Interface Builder inspectorでの フィルタの適用もできます マップビューを選んで 右側のインスペクターに行きます

ここで除外フィルタにします

欲しくないカテゴリを選びます 例えば 空港や… レンタカーや… 病院…ランドリーですね

これでマップビューでの表示は 絞り込んだ種類の POIだけです

選択可能なマップフューチャーの 有効化はとても簡単です 選択可能なフューチャーのうち 欲しいものだけのセットを 特定すればいいだけです

このサンプルAppでは POIだけを使っていますが 地形的特徴や領域の 選択可能なフューチャーのサポートも あることをお忘れなく

既存のデリゲートメソッド mapView viewForAnnotationを使って フューチャーアノテーションの ビューを作成します

ここでは 今のところnilを戻して…

MapKitが提供するデフォルトの 勾配アノテーションを使います 後ほどまた カスタマイズしましょう

アノテーションが選ばれた状態であれば 新しいデリゲートメソッドの mapView didSelect Annotation を通して知らされます

この機能を使って選択した フューチャーでカメラ映像や ズームを作動させましょう

まず アノテーションを フューチャーアノテーションにして 一緒にマップアイテムリクエスト を作成します

これは新しい APIでフューチャー アノテーションと一緒に 追加の場所情報をフェッチします

リクエストを交付します

フェッチ操作が成功したら マップアイテムの作動です

カメラ映像が完了したら フューチャーアイテムから詳細が届き それを情報カードに表示します

コンパイルして見てみましょう

埠頭の面白そうな場所を見てみましょう

勾配アノテーションが表示されます カメラはタップされた場所に動きます そして情報カードが表示されます 博物館ですね URLが出ています 興味があれば見られます 住所も出ていますね

ランドマークの場合は このような素敵な図像が出ます

では コードに戻って 選択状態のアノテーションを カスタマイズしましょう

nilの代わりに Marker Annotation Viewを作りましょう アノテーションを最初は フューチャーアノテーションにして そこからの特定データを使い ビューをカスタマイズします

アノテーションに紫っぽい色合いをつけて コーポレートアイデンティティに合わせます

グリフのカスタマイズもできます

SelectedGlyphImageは選択状態の アノテーション用です

GlyphImageはもっと小さく 未選択状態のアノテーション用の グリフを意味します

未選択から選択への移行が スムーズになるように 同じグリフを割り当てましょう

フューチャーアノテーションから得た アイコンスタイル画像を使います

MKIconStyleは iOS16での新クラスです 選択した POIの図像や色の情報が 入っています コンパイルしてAppを見てみましょう

良いですね! コーポレートカラーと合った アノテーションの色で Appleの図像を維持しています

このように 選択可能なマップフューチャーを 有効にして 自分のAppでアノテーションを カスタマイズできます! 以上で 再びEricにお願いします ありがとう Yingxiu! ご覧のようにSelectable Map Features APIで ユーザーのマップとのインタラクションは 大きく変わります MapFeatureAnnotationクラスと MapViewデリゲートコールバックを併用すれば 選択の表示や感覚がカスタマイズできますし 一方 MapItemRequestで フューチャーをマップアイテムに変え 選択されたマップフューチャーの 追加情報への アクセスが可能になります では Look Aroundに移りましょう!

MapsAppは iOS 13でLook Aroundを導入し 以来 大人気を誇っています Look Aroundを使えば 臨場感が得られます Look Aroundの画像は驚くほど詳細であり 3Dモデルを駆使して他のマップでは見られない リアル感を出しています

Look Aroundが利用可能な 世界の都市はご覧の通りで 国全体の場合もあります!

新たな地域でのサポートを 追加し続けていますので セッションの概要に貼られた iOS and iPadOS Feature Availability で Look Aroundのセクションを チェックしてください iOS 16では Look AroundをMapKitに取り込み その適用方法は3つの簡単な手順だけです

まず 希望する場所のデータが 入手可能かどうかの確認です 目的とする地域でLook Aroundが利用可能でも 全ての場所が通りから見えるわけではないので Look Aroundの画像は 無い場合もあるのです Look Aroundのデータが 入手可能であると分かれば そのデータをパスしますが パスの先は Look Around View Controllerか Look Around Snapshotterです

そして Look Aroundデータが入手可能であれば Appの UIをアップデートして Look Aroundのプレビューを表示しましょう 皆さんが使う新しい APIの 仕事ぶりを見てみましょう

Look Aroundプレビュー表示のための 最初の手順は データの入手可能性の確認です そのためには Look Around Scene Requestの作成が必要で これは iOS 16で導入された新しいクラスです 新規インスタンスの初期化は緯度経度か マップアイテムでできます

次に シーンプロパティの取得です これはオプショナルな非同期プロパティです データが入手可能なら シーンインスタンスを受け取ります 入手不可能なら nilが戻ってきます リクエストに問題があれば エラーと出てきます

Look Around Sceneは不可視オブジェクトで プロパティがありません リクエストされた場所の Look Around画像の入手可能性を確認するための トークンの役割なのです

Look Aroundのインタラクティブな プレビューを表示するには シーンを初期化パラメータとして 新しい Look Around View Controller の インスタンスに パスするか または 既存のインスタンスの r/w シーンプロパティに割り当てます あるいは 静止画が欲しいだけという場合なら シーンを初期化パラメータとして 新らしい Look Around View Snapshotter の インスタンスに パスすれば その後に スナップショットが非同期の プロパティで取得できます

Look AroundViewControllerは Look Aroundの画像の小さな静止画プレビューを できるだけ埋め込みやすいように デザインされていて そのプレビューをタップすれば フルスクリーンの Look Aroundに 入れるわけです

ここで再び Yingxiuにお願いして これを全て実行する事の 簡単さを見せてもらいましょう ありがとう Eric MapKitに登場する Look Aroundの 没入体験のサポートについて 説明してもらいました そのサンプルAppへの統合が いかにシンプルであるか これからお見せします そのために最後の機能ハイライトに移ります 必見の場所のリアルなビューが表示されます

既にスクリーン上部のコントロールバーに ランドマーク名がいくつかあります

ユーザーがどれかをタップした時 タップされた場所のカメラ映像を 表示したいわけです

左下にはプレビューも表示したいですね これを押せばフルスクリーンになります では 始めます!

まずは プレビューのための コンテナビューの作成です

サイズインスペクタに行きましょう

位置とサイズを入力します

最初はプレビューが出ないようにしたいので アトリビュートインスペクタを開き… “Hidden”にチェックを入れます

次は Look Around ViewControllerの作成で…

それをコンテナビューに埋め込みます

他のセグエと同様で 識別子の付与が必要です

呼び出しましょう “presentLook AroundEmbedded”

それをコードにインポートします

“preview”と名付けます visibilityは後で変更します

ここで既に Look Around ViewControllerが出ています あとはprepare関数でそのインスタンスを 取得するだけです

セグエの識別子が同じなのを確認します

Segment Controlで ランドマーク名でローカルサーチを作成します

リクエストが成功なら マップアイテムを受け取り カメラ映像やLook Aroundのシーン取得に それを使います

カメラ映像では まず 新しい APIでカメラの作成が必要です

MapCamera lookingAt map itemです マップビューのフレームサイズを ビューサイズに使って pitchの許可を真に設定します

これによってランドマークは 角度のあるビューが見られ 他の場所は真上からのビューです

新しいカメラを割り当てて…終了です

カメラのアニメーションが完了したら Look Aroundプレビューを表示します

まずは このマップアイテムに Look Aroundデータが 入手可能かの確認です そのために使うのが 新しい LookAroundScene Requestクラスです リクエストを作成して マップアイテムにパスします

リクエストを実行します

リクエストが成功すれば Look AroundViewControllerに シーンを割り当てればいいだけです エラーは無いけれどnilを受け取った場合は Look Aroundデータは その場所には無いという意味です

最後に プレビューの表示を 忘れないようにしましょう

Appはどうなっているでしょう!

フェリービルで試しましょう

出ました ランドマークのビルなので 素敵なフレーミングの 斜め撮りになっていて プレビューも出ています ドラゴンゲートでも試してみましょう

ランドマークではないので 真上からのビューになります

プレビューをタップして フルスクリーンにしましょう

インタラクティブビューなので 自分でナビゲートできます

フルスクリーンのビューでは このように店のアイコンや ラベルも表示されます

Look Aroundの没入体験をAppに加えるのは こんなに簡単です 以上で Ericに戻します ありがとう Yingxiu! Look AroundへのInterface Builderサポートで 簡単にできますね! 本日は多くのトピックをカバーしてきました 最新マップの自動適用から 新しい Map Configuration APIや オーバーレイに関する新しいビヘイビアや進歩 そして Selectable Map Featuresや Look Around のサポートなど 最新機能についてお話しました 皆さんのAppにおける マップ体験を向上させる要素が 盛りだくさんでしたので 是非 利用して目標を達成してください 最後に少し 皆さんにお伝えしておきます

皆さんのフィードバックは 我々が次に取り組む内容を 見極める重要な力です ですから feedback assistantを ご利用いただいて バグレポートや最も役立った機能などについて ご意見を送ってください

また 先ほどお伝えした内容に合わせて 既存のサンプルの多くを アップデートしています 是非 チェックしてみてください

そして 新しい REST APIの セットを発表しましたので お見逃しのないように ジオコーディングやETA測定などといった よく使う機能をサーバーに 移そうと考えている方には これらの APIは非常に便利だと考えています

これらの詳細に関しては ムービーの下に出ている セッションをご覧ください

Mapsチームを代表して視聴者の皆さん… ご清聴ありがとうございました!