WWDC Quick Look 💓 By SwiftGGTeam
Accelerate your app with CarPlay

Accelerate your app with CarPlay

元の動画を見る

ハイライト

iOS 14 では、CarPlay フレームワークのテンプレートが、ナビゲーションからオーディオ、通信、EV 充電、駐車場、ファーストフード注文アプリケーションまで拡張されています。開発者は、UIScene、事前定義されたテンプレート、および単一カテゴリの資格を使用して、車内タスクを数秒で完了できる車内画面エクスペリエンスに変えることができます。

主要内容

CarPlay の以前のサードパーティ フレームワーク機能は、主にナビゲーション アプリに提供されていました。オーディオ アプリは再生可能なコンテンツ API に依存し、通信アプリは SiriKit と CallKit に依存し、駐車、充電、ファーストフードの注文などの運転に直接関連するタスクは、同じ CarPlay テンプレート セットを使用して車の画面に配置できません。その結果、車内で行うべき操作の多くは依然として携帯電話に戻っており、ドライブシーンはこれには適していません。

iOS 14 の変更により、これらのカテゴリに新しい CarPlay テンプレートが提供されるようになりました。 Apple は問題を非常に狭く限定しています。CarPlay はドライバー向けであり、インターフェイスは最も一般的な車内タスクに焦点を当てている必要があり、対話は短く、情報は一目で判断できる必要があります。アカウント設定、フルメニュー、複雑な管理ページはすべて iPhone 上に残すべきです。

開発者にとって、これは iPhone アプリを車のスクリーンに移動させることではありません。 CarPlay アプリは iPhone 上で実行され、CarPlay フレームワークを通じて車の画面に事前定義されたテンプレートを表示します。アプリは UIScene を使用し、CarPlay シーンを宣言し、車の画面に接続するときにそれを取得する必要がありますCPInterfaceController、リスト、タブ バー、再生中、POI、情報ページなどのテンプレートを安全な車内プロセスに整理します。

セッションの後半では、新しいカテゴリを特定のシナリオに置きます。ファストフード注文アプリでは、近くの店舗、注文履歴、お気に入り、注文情報を表示できます。 EV の充電および駐車アプリは、地図を使用して場所を検索し、空き状況を確認し、選択、ナビゲーション、または概要ページに進むことができます。最後に、開発者は、CarPlay は資格を申請する必要があり、アプリは単一のカテゴリを選択する必要があることを思い出させられます。

詳細

CarPlay シーンは Info.plist から始まります

(04:24) CarPlay フレームワークを使用するための前提条件は、UIScene を使用することです。アプリは入っているはずですUIApplicationSceneManifestその中で追加の CarPlay テンプレート アプリケーション シーンを宣言し、対応するシーン デリゲートを指定します。この構成は iPhone シーンと共存します。ユーザーが CarPlay ホーム画面からアプリを起動すると、システムは車の画面シーンに接続されます。

// CarPlay Scene Manifest

<key>UIApplicationSceneManifest</key>
<dict>
    <key>UISceneConfigurations</key>
	<dict>
		<key>CPTemplateApplicationSceneSessionRoleApplication</key>
		<array>
			<dict>
				<key>UISceneClassName</key>
				<string>CPTemplateApplicationScene</string>
				<key>UISceneConfigurationName</key>
				<string>MyApp—Car</string>
				<key>UISceneDelegateClassName</key>
				<string>MyApp.CarPlaySceneDelegate</string>
			</dict>
		</array>
	</dict>
</dict>

キーポイント:

  • UIApplicationSceneManifestUISceneへの入り口であり、CarPlayの設定がここに置かれます。
  • CPTemplateApplicationSceneSessionRoleApplicationこれを CarPlay テンプレート アプリ シーンとして宣言します。
  • CPTemplateApplicationSceneシステムに車の画面用の CarPlay シーンを作成させます。
  • MyApp.CarPlaySceneDelegateその後、CarPlay の接続と切断を受け取るのはデリゲートです。

車の画面に接続した後、ルート テンプレートを設定します

(05:12) CarPlay シーン デリゲートdidConnectアプリが車の画面で起動されると呼び出されます。開発者は節約する必要があるCPInterfaceController後からのプッシュ、ルートの設定、テンプレートの更新はすべてこれに依存するためです。この例では、最初にリストが作成され、次にルート テンプレートとして設定されます。

// CarPlay App Lifecycle

import CarPlay

class CarPlaySceneDelegate: UIResponder, CPTemplateApplicationSceneDelegate {
    var interfaceController: CPInterfaceController?

    func templateApplicationScene(_ templateApplicationScene: CPTemplateApplicationScene,
            didConnect interfaceController: CPInterfaceController) {

        self.interfaceController = interfaceController
        let item = CPListItem(text: "Rubber Soul", detailText: "The Beatles")
        let section = CPListSection(items: [item])
        let listTemplate = CPListTemplate(title: "Albums", sections: [section])
        interfaceController.setRootTemplate(listTemplate, animated: true)
    }

  func templateApplicationScene(_ templateApplicationScene: CPTemplateApplicationScene,
            didDisconnect interfaceController: CPInterfaceController) {
    self.interfaceController = nil
}

キーポイント:

  • CPTemplateApplicationSceneDelegateこれは、CarPlay シーンのライフサイクルへの入り口です。
  • didConnect interfaceController車の画面が接続され、テンプレートの表示を開始できることを示します。
  • CPListItemCPListSectionCPListTemplateリストインターフェイスを結合します。
  • setRootTemplateテンプレートを車のスクリーン スタックのルートに配置します。
  • didDisconnectリリースinterfaceController、切断された車の画面を操作し続けることは避けてください。

オーディオ アプリは再生可能なコンテンツからテンプレートに移行します

(05:54) 再生可能なコンテンツは iOS 14 では廃止されますが、古いシステムでも引き続き使用できます。新しいオーディオ テンプレートを使用すると、アプリが独自のリスト、タブ バー、再生中のエクスペリエンスを構築できるようになります。 iOS 13 以前のバージョンでは、再生可能なコンテンツを引き続き使用できます。

// CPListTemplate

import CarPlay

let item = CPListItem(text: "Rubber Soul", detailText: "The Beatles")
let section = CPListSection(items: [item])
let listTemplate = CPListTemplate(title: "Albums", sections: [section])
self.interfaceController.pushTemplate(listTemplate, animated: true)

キーポイント:

  • CPListItemリスト内の 1 行のコンテンツに相当し、アルバム、プレイリスト、メッセージ スレッドなどのオブジェクトに適しています。
  • CPListSection複数の項目を同じリスト ブロックに整理します。
  • CPListTemplateこれは、CarPlay の最も基本的なテンプレートの 1 つです。
  • pushTemplate現在のページからテンプレートの次のレイヤーに入るために使用されます。

(06:09) リスト項目が選択されると、CarPlay が呼び出します。listItemHandler。ハンドラーでは、まず再生を開始するか、次のテンプレートを構成してから、completion()。非同期作業がすぐに完了しない場合、CarPlay は完了が呼び出されるまでリスト項目にスピナーを表示します。

// CPListTemplate

import CarPlay

let item = CPListItem(text: "Rubber Soul", detailText: "The Beatles")
item.listItemHandler = { item, completion, [weak self] in
    // Start playback, then...
    self?.interfaceController.pushTemplate(CPNowPlayingTemplate.shared, animated: true)
    completion()
}

// Later...
item.image = ...

キーポイント:

  • listItemHandlerユーザーがリスト項目をクリックした後の入り口です。
  • ハンドラーは選択されたものを受け取りますitemそして呼ばれなければなりませんcompletion
  • 再生開始後にサンプルが共有にプッシュされますCPNowPlayingTemplate
  • completion()現在の選択内容の処理が完了し、ビジー状態を解除できることを CarPlay に通知します。
  • item.image = ...iOS 14で追加された新しい動的リストアイテム更新機能に対応します。

07:58CPTabBarTemplateこれは、iOS 14 で追加された新しいコンテナ テンプレートです。複数のテンプレートを CarPlay ユーザーにとって使い慣れたタブ バー インターフェイスに変え、タブの動的追加、削除、再配置、またはタブ上のバッジの更新を可能にします。

// CPTabBarTemplate

import CarPlay

let item = CPListItem(text: "Rubber Soul", detailText: "The Beatles")
let section = CPListSection(items: [item])
let favorites = CPListTemplate(title: "Albums", sections: [section])
favorites.tabSystemItem = .favorites
favorites.showsTabBadge = true

let albums: CPGridTemplate = ...
albums.tabTitle = "Albums"
albums.tabImage = ...

let tabBarTemplate = CPTabBarTemplate(templates: [favorites, albums])
self.interfaceController.setRootTemplate(tabBarTemplate, animated: false)

// Later...
favorites.showsTabBadge = false
tabBarTemplate.updateTemplates([favorites, albums])

キーポイント:

  • favoritesそしてalbumsタブ バーにある 2 つのテンプレートです。
  • tabSystemItemシステムが提供するタブ バー アイコンを使用します。
  • showsTabBadgeステータスのヒントをテンプレートのラベルに表示できます。
  • CPTabBarTemplate(templates:)複数のテンプレートを同じコンテナに入れます。
  • updateTemplates実行時のタブ バーのコンテンツとバッジ ステータスの更新をサポートします。

(09:34) iOS 14 では、オーディオ リストの表示機能がさらに強化されました。CPListImageRowItem一連のカバー画像を連続して表示でき、各画像は選択に個別に応答します。 Apple Books は、CarPlay で最近のオーディオブックを表示するためにこれを使用します。

// List Items for Audio Apps

import CarPlay

let gridImages: [UIImage] = ...
let imageRowItem = CPListImageRowItem(text: "Recent Audiobooks", images: gridImages)

imageRowItem.listItemHandler = { item, completion in
    print("Selected image row header!")
    completion()
}

imageRowItem.listImageRowHandler = { item, index, completion in
    print("Selected artwork at index \(index)!")
    completion()
}

let section = CPListSection(items: [imageRowItem])
let listTemplate = CPListTemplate(title: "Listen Now", sections: [section])
self.interfaceController.pushTemplate(listTemplate, animated: true)

キーポイント:

  • CPListImageRowItem一連の画像を使用して、一連のオプションのコンテンツを表現します。
  • listItemHandlerタイトルの行全体が選択されている場合を処理します。
  • listImageRowHandler特定のカバーが選択されている場合の状況を処理します。index具体的な場所を指摘してください。
  • 非同期作業の終了後に両方のハンドラーを呼び出す必要がありますcompletion()

(12:50) Now Playing は共有テンプレートです。ユーザーが CarPlay ホーム画面の [再生中] ボタンをクリックすると、システムがアプリを直接起動して表示する場合があるため、CarPlay シーンが接続されたらできるだけ早くオーディオ アプリを設定する必要があります。CPNowPlayingTemplate.shared

// Now Playing Template

import CarPlay

class CarPlaySceneDelegate: UIResponder, CPTemplateApplicationSceneDelegate {

    func templateApplicationScene(_ templateApplicationScene: CPTemplateApplicationScene,
            didConnect interfaceController: CPInterfaceController) {

        let nowPlayingTemplate = CPNowPlayingTemplate.shared

        let rateButton = CPNowPlayingPlaybackRateButton() { button in

            // Change the playback rate!

        }
        nowPlayingTemplate.updateNowPlayingButtons([rateButton])
    }
}

キーポイント:

  • CPNowPlayingTemplate.sharedアプリ内に Now Playing テンプレート インスタンスが 1 つだけ存在することを示します。
  • システムがアプリのこのテンプレートを表示できるように、初期化をできるだけ早く行う必要があります。
  • CPNowPlayingPlaybackRateButtonNow Playing の下部に再生速度ボタンを追加します。
  • updateNowPlayingButtons「再生中の更新」表示ボタン。

コミュニケーション アプリは引き続き SiriKit と CallKit に依存します

(14:07) iOS 14 では、コミュニケーション アプリで CarPlay フレームワークを使用して連絡先、メッセージ リスト、メッセージ ステータスを表示することもできますが、音声と電話の機能は引き続き SiriKit と CallKit を通じて提供されます。新しいCPMessageListItemメッセージ スレッドのリストに使用されます。ユーザーがクリックすると、Siri は通常のリスト ハンドラーを呼び出す代わりに、項目パラメータに従って書き込み、読み取り、または返信のプロセスを自動的に開始します。

(16:12) コミュニケーション カテゴリには、新しい連絡先テンプレートも追加されます。連絡先の画像、最大 3 行の説明テキスト、最大 4 つのアクション ボタン、およびナビゲーション バー ボタンを表示できます。このテンプレートは、車の画面上のアドレス帳の中核となる操作を配置しますが、完全なアドレス帳管理を CarPlay に移行することを避けるために、短いプロセスが必要です。

POI テンプレート サービスの駐車場、充電、ファーストフードの注文

(17:52) EV の充電、駐車、ファーストフードの注文の最初の作業は、多くの場合、場所を選択することです。 iOS 14の新機能CPPointOfInterestTemplateMapKit の地図および情報パネルと組み合わせると、アプリは最大 12 の情報を提供します。CPPointOfInterest, CarPlay は、地図の表示、パンとズーム、近接ポイントの自動集計を担当します。

(19:46) マップエリアが変更されると、アプリは近くの場所を再計算し、新しい結果をテンプレートに渡す必要があります。このようにして、ユーザーが地図を移動、パン、またはズームすると、車の画面上の位置リストが現在のエリアで更新されます。

// CPPointOfInterestTemplateDelegate

func pointOfInterestTemplate(_ template: CPPointOfInterestTemplate,
                             didChangeMapRegion region: MKCoordinateRegion) {

    self.locationManager.locations(for: region) { locations in
        template.setPointsOfInterest(locations, selectedIndex: 0)
    }
}

キーポイント:

  • CPPointOfInterestTemplateDelegateマップエリアの変更を受信します。
  • didChangeMapRegion新しいものを与えるMKCoordinateRegion
  • アプリは独自の位置データベースをクエリしたり、MapKit と組み合わせて近くのターゲットを見つけることができます。
  • setPointsOfInterestテンプレート上のリストとマップのポイントを新しい場所に置き換えます。

(20:23) 各場所を次のように変換する必要がありますCPPointOfInterest。 Session サンプルでは、​​アプリケーション独自のモデルをタイトル、サブタイトル、説明、画像にマッピングし、既存のモデルを可能な限り再利用してテンプレートの更新コストを削減します。

// CPPointOfInterest creation

func locations(for region: MKCoordinateRegion,
               handler: ([CPPointOfInterest]) -> Void) {
    var tempateLocations: [CPPointOfInterest] = []

    for clientModel in self.executeQuery(for: region) {
        let templateModel : CPPointOfInterest = self.locations[clientModel.mapItem] ??
                CPPointOfInterest(location: clientModel.mapItem,
                                  title: clientModel.title,
                                  subtitle: clientModel.subtitle,
                                  informativeText: clientModel.informativeText,
                                  image: clientModel.mapImage)


        tempateLocations.append(templateModel)
    }
    handler(templateLocations)
}

キーポイント:

  • locations(for region:)現在の地図エリアごとにPOIリストを生成します。
  • executeQuery(for:)アプリ自体に代わって近くの場所をクエリします。
  • CPPointOfInterestマップの場所、タイトル、サブタイトル、説明、画像を要約します。
  • 再利用例self.locations[clientModel.mapItem]、更新のたびにすべてのモデルが再構築されるのを避けるため。

(21:05) 場所を選択すると、情報パネルには最大 2 つのボタンが表示されます。例ではCPPointOfInterestButton場所を選択し、ピン画像を更新するために使用されます。selectedIndex、車の画面に新しく選択したステータスがすぐに反映されるようになります。

// Point of Interest Template location selection

let primaryButton = CPPointOfInterestButton(title: "Select") { button, [weak self] in
            let selectedIndex = ...

            if selectedIndex != NSNotFound {
                // Remove any existing selected state on previous location
                self?.selectedLocation.image = defaultMapImage
                // Change annotation for selected POI
                self?.selectedLocation = templateModel
                templateModel.image = selectedMapImage
                // Update the template with new values
                self?.pointOfInterestTemplate.selectedIndex = selectedIndex
            }
        }

let templateModel: CPPointOfInterest = ...

templateModel.primaryButton = primaryButton

キーポイント:

  • CPPointOfInterestButtonロケーションカードのアクションをハンドラーにバインドします。
  • selectedIndexは、現在選択されている場所の場所です。
  • 更新するimageマップラベルの表示状態を変更できます。
  • 設定pointOfInterestTemplate.selectedIndex選択ステータスは車の画面に同期されます。

情報テンプレートの完全な注文、パーク、または料金の概要

22:29CPInformationTemplateテキストを表示し、ユーザーの応答を受信するために使用されます。 1 列または 2 列のラベルとフッター ボタンをサポートします。ファストフード注文アプリはこれを使用して注文概要や確認ページを表示でき、EV 充電アプリはこれを使用して充電ステーションに関する重要な情報を表示できます。

(24:38)公開前に権利も処理する必要があります。 CarPlay アプリは単一のカテゴリである必要があり、選択した資格によってアプリが使用できる CarPlay テンプレートが決まります。オーディオ アプリがまだ iOS 13 以前をサポートしている場合は、再生可能なコンテンツと iOS 14 オーディオ テンプレートの共存を許可できます。

重要ポイント

カーオーディオのホームページ

対処方法: 音楽、オーディオブック、またはポッドキャスト アプリの CarPlay ホームページを、お気に入り、アルバム、最近再生したもの、および再生中を含むタブ バーに変更します。

実行する価値がある理由: iOS 14 のオーディオ テンプレートを使用すると、アプリは、再生可能なコンテンツ用にシステムが生成したツリー インターフェイスから、リスト、画像行の整理、および再生中の共有を独自に行うことができます。

開始方法: UIScene を使用し、CarPlay シーンを宣言し、CPListTemplateリストを作成するには、次を使用しますCPListImageRowItem表紙を表示するには、次を使用します。CPNowPlayingTemplate.shared車の画面に接続するときの再生ボタンを設定します。

駐車場の検索と選択

何をすべきか: CarPlay で近くの駐車場を表示し、ドライバーに料金、距離、または空き状況情報を確認させてから、場所を選択してナビゲーションを続行します。

実行する価値がある理由: セッションは、iOS 14 で初めてサポートされる CarPlay カテゴリとして駐車場を明示的にリストし、POI テンプレートがマップ エリアの変更と場所の選択をどのように処理するかを示します。

開始方法: 駐車カテゴリーの利用権を申請し、使用してくださいCPPointOfInterestTemplateに基づいて、最大 12 個の関連する場所を提供します。MKCoordinateRegionリストを更新します。

EV充電ステーション入口

対処方法: 車の画面エントリを充電アプリに追加して、近くの充電ステーション、ステータスの概要、選択ボタンを表示します。

実行する価値がある理由: EV 充電は、iOS 14 に追加された新しい CarPlay カテゴリです。POI テンプレートと情報テンプレートは、サイトの検索、情報の表示、次のステップの確認のみをカバーします。

開始方法: 充電ステーションのモデルをCPPointOfInterest、使用informativeText最も重要なステータス情報を入力して再度使用するCPInformationTemplateサイトの詳細または確認ページを表示します。

ファーストフードの受け取りプロセス

何をすべきか: ファーストフード アプリに、CarPlay 上の近くの店舗、過去の注文、お気に入り、現在の注文の概要を表示させます。

実行する価値がある理由: 講演内のクイック サービス レストランの例では、詳細なメニュー、アカウント管理、設定を表示せずに、一般的なタスクにワンクリックでアクセスできることを強調しています。

開始方法: CarPlay エクスペリエンスを繰り返しの購入と食品のピックアップに限定し、タブ バーを使用して店舗、注文履歴、コレクションを整理し、情報テンプレートを使用して注文の概要を表示します。

通信メッセージステータスパネル

対処方法: メッセージング アプリまたは通話アプリ用の CarPlay 連絡先とメッセージ スレッド エントリを作成します。

価値がある理由: iOS 14 では、コミュニケーション アプリが CarPlay フレームワークを使用して連絡先、メッセージ リスト、ステータスを表示できるようになりますが、音声と通話は引き続き SiriKit と CallKit によって処理されます。

開始方法: SiriKit と CallKit の機能を維持し続けるには、次を使用します。CPMessageListItemメッセージ スレッドのステータスを表現し、連絡先テンプレートを使用して連絡先の写真、説明、アクション ボタンを提供します。

関連セッション

  • 車のキーのご紹介 — 車内体験にも焦点を当て、iPhone と Apple Watch のデジタル車キーの登録、共有、セキュリティ モデルを紹介します。
  • 高品質の Siri メディア インタラクションをデザインする - オーディオ アプリの Siri 再生品質を補完し、CarPlay Now Playing による車内の再生エクスペリエンスに共同で影響を与えます。
  • App Clip を合理化する — 注文と駐車場の支払いを使用して、オンサイトのトランザクション プロセスを解体します。これは、ファーストフードの注文と駐車場のシナリオに拡張できます。
  • Core NFC の新機能 - CarPlay 位置情報タスクのオフライン トリガーの補足として適した、パーキング メーターや充電ステーションなどの物理デバイスへの入り口を紹介します。
  • Wallet と Apple Pay の新機能 — 車内駐車場、ファーストフードの注文、App Clip のシナリオで必要となる可能性のある支払い入口を補足します。

コメント

GitHub Issues · utterances