ストリーミングはほとんどのブラウザと
Developerアプリで視聴できます。
-
次世代のCarPlayアーキテクチャについて
次世代のCarPlayのアーキテクチャを詳細に解説します。車両システムとiPhoneがどのように連携して、車両とiPhoneの両方の可能性を最大限に引き出し、統一性のある共通の体験を実現するのか、確認しましょう。UIがどのようにレンダリングおよび合成されているかについて学び、各車両モデルの特別な体験を生み出すための構成とカスタマイズの方法を知ることができます。このセッションは、次世代のCarPlayに興味のある自動車メーカーおよびシステムデベロッパの方を対象としています。
関連する章
- 0:00 - Introduction
- 1:35 - Architecture
- 11:37 - Next generation CarPlay UI
- 21:19 - Enable custom features
- 26:43 - Wrap-up
リソース
関連ビデオ
WWDC24
WWDC23
-
ダウンロード
こんにちは Tanyaと申します 今日は Car Experienceチームを 代表してお話しします ここで次世代CarPlayの背景を 皆さんにご紹介できることを うれしく思います Ben Crickによるデザインシステムの ビデオをご覧になったかと思いますが このデザインシステムについて 詳しくご説明したいと思います その前に概要に触れておきましょう CarPlayが最初に公開された時期から 車は大きく変わりました 大きな画面にさまざまな情報を表示し
多彩な機能を利用できるようになっています ユーザーは iPhoneから お気に入りの機能をCarPlay搭載の車で 利用できることを期待しています iPhoneユーザーは 現在の CarPlayを利用できるほか すべてのドライバーにコンテンツを提供する この次世代CarPlayを 使用することもできます 全面的に統合されたインターフェイスによって きわめてシームレスで一貫性があり 機能性に富んだ体験が実現します これは 個々の車独自の設定に 最適な体験にもなっています iPhoneの優れた各種機能と 使い慣れた操作パターンを 最良の車内体験と 組み合わせることができるのです
今日は このような内容のほか アーキテクチャ 次世代CarPlay UI そしてカスタム機能を有効にする方法 についてもお話しします よろしいでしょうか このような新しい体験を実現するために 追加された機能を見てみましょう まず 既存のCarPlayの アーキテクチャから始めます 機能強化したSiriや バッファを使用したメディア再生 HEVCビデオストリーミングのサポートなど 高度なCarPlay機能は必須です 次世代CarPlayは 無線のみで動作します 前回の運転で使用したCarPlayが シームレスに再接続して表示されます 快適な車内体験を実現するには この無線接続に 一定の安定性とパフォーマンスが必要です まとめると 以上が現在のCarPlay動作の 基本になっています ここまでは皆さんもご存じかもしれません 車のシステムとiPhoneとの間で Communicationプラグインが 主要なインターフェイスとして機能します このプラグインは ビデオとオーディオを 提供し 車からユーザー入力を受け付けます これは一般的なCarPlay設定です iPhoneからビデオストリームが 提供されると それが車のシステムに渡され デコードとコンポジットを経て 画面に表示されます 簡単ですね では次世代CarPlay UIと その内容をつぶさに見てみると もっと複雑であることがわかります 計器盤表示に重点を置いて アーキテクチャを見ていきましょう 計器盤表示には独特の 配慮がされているからです 当然のことながら 車内のすべての表示に この考え方が当てはまります
では 実際の表示を見てみます UIをいくつかのレイヤーに分解します ここでは 最前面のレイヤーを オーバーレイUIとします オーバーレイUIには きわめて重要なUI要素があります 残りのレイヤーには 他のすべてのUI要素があります 両方のレイヤーがシステムによって合成され 画面に直接表示されます
オーバーレイUIとは何でしょうか オーバーレイUIには 車に固有の表示機能と 必須の表示機能があります これらの機能は再設計できるほか 新しいUI体験に適した位置に 再配置することもできます 重要なことは これらがすべてシステムに よってレンダリングされることです
ではUI要素のほとんどが置かれた この残りのレイヤーの内容を見てみましょう このレイヤーも分割できます 各レイヤーには それぞれに固有の目的があります 最下部のレイヤーをリモートUIとします リモートUIは 親しみのある充実した iPhone体験を車にもたらします ここには タイヤ空気圧 走行情報 地図 オーディオアプリなどが表示されます ご想像のとおり 他の表示にもリモートUIの効果が及び メディアや空調といった iPhoneのコンテンツが表示されます これらの機能をすべて実現するには 車内表示ごとに1本のiPhone ビデオストリームが必要になります これはアーキテクチャにとって 何を意味するでしょうか 1つのディスプレイの性質を考えれば コンテンツを表示する 別のディスプレイが必要になります これは特段目新しいことではありません この機能はCarPlayでサポートされて いますが ほかに何が必要なのでしょうか それはローカルUIです ローカルUIはちょっと面白いUIです ここに実際に表示されるのは 運転関連の計器やインジケータです ローカルUIの機能は何でしょうか ここには 車から高い頻度で 送信される信号に応答して 低遅延でレンダリングできる UIを配置できます このUIは堅牢で Wi-Fiの干渉を受けず 接続が絶たれることもありません データが車のローカルで維持されるうえ UIの起動も速いからです 次世代CarPlayを前回の運転で 使用していれば その起動は瞬時で完了します ディスプレイがオンになったり 車のドアを開けたりしたときや さらにドライバーが車に近付いただけでも コンテンツがすぐに表示されます さらにはまだiPhoneが検出され 再接続されていなくても 急いで車に乗り込んで発車しただけで 瞬時に起動されるのです このような動作は システムに直接 レンダリングされることが明らかな ローカルUIによって実現されます ローカルUIはどう機能するのでしょう このUIは 車自体へのレンダリングが可能な OpenGLベースの レンダラによって起動します Appleでは 画像や動作スクリプトを 収めたアセットパッケージで ローカルUIを補強しています これらのスクリプトは UIの生成を 支援するロジックを実装しています アセットパッケージは 車ごとに異なり ペアリングの際に iPhoneから転送されます 新しいアセットパッケージを使用する前に その信頼性が車によって検証されます この機能によって ローカルレンダリングの すべての利点が得られるほか 時間の経過に伴って UIが更新される可能性も開けます 気の利いた機能ですね これらのコンポーネントを アーキテクチャに追加します まず ローカルレンダラから始め 個々の車に適したアセットと スクリプトを追加します 当然ながら この作業は個々の ディスプレイごとに実施します このレイヤーに関してはここまでです 次に進みましょう 最後のレイヤーは パンチスルーUIと呼ばれています パンチスルーUIを使用すると 個々の車に 固有のUIを体験に取り込むことができます パンチスルーUIとして 運転支援機能 車外カメラ その他の視覚補助機能を 任意のディスプレイに表示できます 当然ながら これらの画像はすべて 車によってレンダリングされますが 重要な点は UIが統合されているように見えることです パンチスルーUIは 表示の展開が洗練されていて 表示の遷移やアニメーションに シームレスに溶け込み ユーザー体験全体に無理なく整合します ではその操作方法を見ていきます でもその前に ここまでのお話を 復習しておきましょう
まず オーバーレイUIを取り上げ それが 車で直接合成される様子を確認しました 次にリモートUIを紹介しました
そして ローカルUIと パンチスルーUIも見てみました OpenGLを使用して単一の統一された 出力をシステムのコンポジタに提供する 専用のコンポジタによって この3つのレイヤーが処理され 各画面の表示が生成されます では 元のアーキテクチャに戻って コンポジタを追加してみましょう コンポジタは iPhoneから ビデオストリームを受け取り ローカルレンダリングのUIも受け取ります つづいて パンチスルーUIを 直接受け取ります
すでに見たように 次世代CarPlayは 車がローカルでレンダリングした コンテンツと iPhoneがリモートで レンダリングしたコンテンツの 両方を取り込みます 一方で この体験にはiPhoneで おなじみのシームレスなレイアウトの遷移と アニメーションがあります このような体験を実現するには フレームレベルでの同期を使用します
CarPlay同様にリモートレンダリングの iPhoneビデオフレームには 表示のタイムスタンプがあります このタイムスタンプはフレームをドライバーに いつ表示するかを指定しています 次世代CarPlayでは iPhoneから各ディスプレイへの 専用の低遅延チャネルである UI Syncが追加されています レンダリング元に関係なく ディスプレイ間を移動するUI要素が iPhoneによって UI Syncを使用して調整されます 動作スクリプトによって この情報が解釈され ローカルUI パンチスルーUI リモートUIからのフレームが 毎秒60フレームの速さで 一度に1フレームずつ互いに整合されます ディスプレイの能力に応じて これよりも 速い速度で処理されることもあります 魔法のようですね ここでは皆さんの役割が重要です 車載システムによって ビデオフレームとUI Syncパケットが システム全体に適切な時点で送信され 付随するタイムスタンプが保持されます
最後に オーバーレイUIを追加して グラフィックスアーキテクチャ全体を 見てみましょう すでに説明したように オーバーレイUIは 車のコンポジタへ直接提供されます 以上です これで 次世代CarPlayのUIを 作成する過程の全体像が見えてきました では これらの背景を見ていきましょう このUIの基盤は何でしょうか それは車の状態です 次世代CarPlayは 車載システムに依存して 常に最新の状態情報を提供します この情報がUIに反映されます 個々の情報がレンダリングされる場所や その情報がシステムで 利用できる場所に応じて 異なるインターフェイスが用意されます 当然のことながら Appleはユーザーのプライバシー保護を 重要視しています 車の状態に対するこのアプローチでは データは それが必要になる 条件下でのみ使用され 多くの場合 車の外部へは持ち出されません
計器盤に表示されるUIには 専用の車両状態インターフェイスがあり センターディスプレイの ローカルUIにも同様の インターフェイスがあります また リモートUIでは 車の状態をサポートするように Communicationプラグインが 拡張されています ここでも 車の状態情報が 実際に得られる場所は 車での統合状態と 情報の入手可否によって 大きく異なります これで 次世代CarPlayが動作できる アーキテクチャの概要についての 説明を終わります つづいて この新たなユーザー体験を どのように実現するか その体験で何が必要かを理解しましょう
次世代CarPlay UIの 利用を検討するに当たって 考慮すべき主なタスクが3つあります 第1に 使いやすい快適なUIの設定と 車独自の機能との整合性です 第2に 車の状態を常に認識している UIにすることです 最後に 車の状態やユーザーの操作に応じて UIを表示することです これらのタスクを達成するには 車両状態プロトコルを使用します まず UIの設定から始めましょう 次世代CarPlayは柔軟性に優れ 車の機能セットに適応します UI要素を適宜使用できるように 要素の追加や削除が可能です 車両状態プロトコルを使用すると さまざまなモデルや トリムレベル 詳細な設定オプションを特定の機能に 簡単にマッピングできます UIのすべての設定は 車の状態が 初期化されたときに有効になり そのセッションの間は 変更されずに保持されます 具体的な例として空調を取り上げます 次世代CarPlayには 機能や性能が異なる 広範な車種に対応できるように設計された 機能満載の空調UIが用意されています ここでは それをすべて消去し 空白の状態から目的に応じて設定してみます まず 車の内装を表現した カスタム画像を追加します 3種類の空調ゾーンがある 5人乗りセダンに 対応する必要があるとします まずVehicleResourcesを使用し この例では識別子として 5Seaterを指定します この識別子は 内装画像のバリアントに対応します この画像でサポートする バリエーションの数は あなた次第です たとえば スポーツシートや 赤いシートを備えた車では そのような特徴をこの識別子で 詳しく表現できます 新しい識別子とそれに対応する 画像アセットの追加は非常に簡単です
では空調機能を設定し 次に対応する 空調ゾーン毎にコントロールを追加します ドライバーの空調ゾーンから始めましょう ドライバーは 室温 ファンの速さ 風の方向を調整できるものとします これらそれぞれのインスタンスを作成します 室温は 快適で居心地の良い値にします そしてファンです しかし これらすべてがドライバー向けで あることはどうすればわかるでしょう これはVehicleLayoutKeyに任せます この車ではドライバーは左側に座るので ここがドライバーゾーンになります これらのコントロールも その作成時に初期化しています この例にある3つの通気口コントロールを 表示するインスタンスを同様に作成します まず 上側の通気口です つづいて中央の通気口です これはオンになっています 最後に下側の通気口です 当然 シートヒーターやファンがあれば それらも同じ方法で追加できます 助手席ゾーンにはドライバーと同じ コントロールがあり 同様に設定するため ここでは詳しく説明しません 助手席ではドライバー側とは 少し違う気温は設定になりました では 後席のゾーンに進みましょう
この例で後席の同乗者が調整できるのは 室温とファンの速さのみです したがって 2つのインスタンスを設定し seat_2nd_rowを使用して それらのインスタンスを後席に割り当て 初期値を指定します 後席の空調ゾーンができあがりました 最後に すべてのゾーンに適用する コントロールを設定します この例では 内気循環と外気取り入れを切り替える 空気循環コントロール エアコンのオン/オフの 車室内コントロール ゾーンの設定を同期する セレクターを追加しています この例のSYNCボタンを押すと 助手席ゾーンの設定のみが ドライバーゾーンの設定と同じになります ここでもVehicleLayoutKeyを 使用して設定します 以上です 以上で この素晴らしい車の 空調コントロール設定が完了しました この設定では ここでご覧に入れるように すべての空調UIが表示されていなくても ドライバーはドックの 空調コントロールを使用できます コントロールはタップするだけで簡単です ではUIの設定方法がわかったので 最新の状態に維持する方法を確認します 反応性と正確さに優れたUIを維持するには 車両情報を継続的に更新する必要があります ドライバーがハードウェアボタンや 画面上のコントロールを操作すると 状態に対する要求変更が通知されます 迅速に該当のアクションを実行し 必要に応じて状態を調整します
車内で状態が変化したときは ただちにUIに通知します 応答の遅延は望ましくありません 最後に 指定したどの値も ドライバーに表示される内容を 正確に表現している必要があります あらゆる円滑化や調整は UIに送られる前に 車によって実行されます 次世代CarPlayでは送信したとおりの 内容が表示されます では 実際の動作を見てみましょう これはローカルレンダリングの2つの計器で 表示の頻繁な更新が必要です 左側の計器は速度計です 速度計は 3種類の単位による速度を 常に受け取ることが想定されています 最も高精度な値は 最上部に 表示されるm/h単位の速度で これはアナログ計器のアニメーションです 他の2つには速度が デジタル表示で示されます すべての単位による表示が常に必要で UI側ではこれらの値を一切計算しません UIには 指定の内容が表示されるだけです 運転を始めて速度が上がるにつれて その値が計器にアニメーション表示されます シンプルですね 右側にはRPM単位の回転速度計があります 回転速度計の値は 単一の値と それに関連する状態によって更新されます ほとんどの場合 この状態は Normalに設定されていますが ドライバーがエンジンの最高回転数を超えて 運転した場合は 値と状態の両方を更新して UIに反映させるかどうかを選択できます ご想像のとおり 実際にはこのようになります
ここまでに例をいくつか挙げましたが お話ししたことは すべての機能に当てはまります 表示させたい内容を設定し それを最新の状態に維持するのです 次に 表示するコンテンツを 要求する方法を考えてみます ドライバーが車を操作したときに その応答として 何らかの表示が必要になることがあります 例えば ドライバーがボタンを押したときや 車からの信号に応答したときなどです どのような機能を使用できるでしょうか 計器盤には さまざまな種類の通知と警告 独自の運転支援情報 ユーザーが選択操作で使用する 独自のピッカーなどを表示できます センターディスプレイには 必要とする柔軟さと汎用性で リモート通知を表示できます
ではタイヤ空気圧の警告を表示する例を 見てみましょう すでに4つのTirePressure インスタンスでタイヤ機能を設定し RequestContentインスタンスで 計器盤を設定してあります 運転中はPressureと PressureStateを更新し続け タイヤ空気圧が不足したらドライバーに 実際の警告が表示されるようにします タイヤ空気圧UIの表示をトリガします ここでは ドライバーが手動で 警告を解除できるようにしています タイヤの空気が完全に抜けると 状態はDeflationになり それがUIに反映されます 他の警告や通知を表示する場合でも 同じ基本原則が適用されます センターディスプレイの場合も同様です ところで リアビューカメラは とても便利なものです どのカメラであっても 車に導入することはちょっとした挑戦です その解決策は興味深いことに 実際のカメラストリームに パンチスルーUIを使用し 独自のユーザーコントロールに リモートUIを使用することです リアビューカメラの画面はこうなります ドライバーがシフトレバーを バックに入れたときや ハードキーまたはUIのボタンを押したときに この画面が表示されます どの場合も 2つのインターフェイスが使用されます パンチスルーUIを表示する AutomakerInputStreamsと ユーザーに見せたいコントロールを表示する AutomakerExteriorCameraです もちろん これらのAPIを使用して カメラの映像を俯瞰表示にしたり 駐車支援機能を使用したりもできます なおカメラのパンチスルーはドライバーが 車に乗り込んだばかりでまだiPhoneが 接続されていなくてもただちに表示されます 重要なことはパンチスルーが ローカルでレンダリングされる点です これは実際に機能している様子です これらのAPIを同時に呼び出すと 車をバックして駐車スペースに 駐める準備ができます ではここまでに 次世代CarPlayに用意された各種機能の 使用方法についてお話ししましたので 次に個々の車に合わせて さらにカスタマイズする方法と 固有の体験を作成する方法を 確認してみましょう カスタマイズに関しては 多彩なオプションが用意されています 例えば視認性の高い特別なUIを表示して 新たな体験を追加することが 考えられます また 固有の設定や設定メニューを提供したり 独自のアラートや通知を表示したりして ドライバーとのインタラクションを 行うこともできます さまざまなことが可能なので それらを実際に 実装する方法を確認してみましょう
次世代CarPlayに 車の各機能を示すうえで 柔軟性に優れた方法は 自動車メーカー製アプリの使用です 自動車メーカー製アプリは iPhoneで実行されるので iOSの全能力を活用して 充実した独自のUIを作成できます もちろん 長期間にわたって体験を アップグレードし続けることもできます カスタム設定が表示されるようにすると ドライバーはその設定を車両設定アプリで 探し出せます ここをタップすると 頻繁に使用する 設定オプションの一覧が表示されます
ここで重要な点は すべてを定義しておくことです つまり 使用する設定の種類 ラベル アイコン 機能 構造 順序などを定義しておきます これらはすべて皆さんが決定します この定義には完全にカスタマイズ可能な 自動車メーカー製の設定APIを使用できます 次に 定義した設定や機能の いくつかを強調表示して 簡単に見つかるようにするのも良い考えです ProminenceInfo APIを使用すれば 目的に応じて設定の外観と 操作性をわずかに変更し その設定を最上位に 表示させることができます 一部の設定は 実際には次世代CarPlayの いずれかの体験に属していることから 空調設定やオーディオ設定 メディア設定に 置かれている場合もあります その場合も操作は簡単です タップして 何が表示されるか見てみましょう
これらはすべて 皆さんが定義してきた カスタム設定です ご覧のように ドライバーにとって 本当に重要な設定の強調表示もできます 他には何ができるでしょうか ドライバーが空調のスケジュールを 設定する方法なども追加できます そして この方法は すでにiOSアプリに存在しています それを使用できるでしょうか イエスであれば使用してみましょう その設定をディープリンクとして設定すると ドライバーがそのリンクから 直接アプリへ移動できます ここで少し時間を置きます この機能では 皆さんが次世代 CarPlay UIで定義して追加した カスタムのエントリポイントから ドライバーがiOSアプリの 機能を利用できます 素晴らしいと思いませんか つづいて 車内の特定の空調ゾーンに 最適と考えられるいくつかの 機能や設定を見ていきます ここでもVehicleLayoutKeyを 使用してメッセージ設定を ドライバーが使いやすいものに することができます
ドライバーがこのボタンを タップしたときに 別のオプションがあるサブメニューに リンクされるようにするか シートの高度な視覚化表現が すでに組み込みUIにあれば パンチスルーUIでそれにリンクできます これはわずか2つの例にすぎません UIのどこにカスタム設定を 追加したかに関係なく ユーザーがその設定を選択したときに 何が表示されるかをいつでも指定できます 自動車メーカー製アプリの場合と同様に カスタム設定メニューに エントリポイントを追加できるほか 組み込みパンチスルーUIを次世代の CarPlay UIに追加することもできます 次に カスタム通知の表示に 移りましょう まず 計器盤の表示をご覧ください 通知のラベル アイコン ボタンなどは 自由にカスタマイズできます これらは既存の通知を容易に 有効化できるように設計されています どちらを表示するかいつ表示するかは 皆さんが決定できます 通知をいつ削除するかも 皆さんの判断次第です これらの通知をローカルで レンダリングするか リモートUIに レンダリングするかも ユースケースに基づいて決定できます センターディスプレイには 高度なカスタマイズが可能な 同様の機能があります 通知は自由に設定できますが ここでも自動車メーカーの通知を使用します まったく同じAPIを使用して さらに多くの設定ができます たとえば ドライバーが 車のドライブモードボタンを押したとします 現在の設定を表示して 設定ボタンで別のオプションが 表示されるようにします ドライバーがこのボタンをタップしたら その後に何を表示させるかは 自由に指定できます おなじみのオプションがここに表示されます アプリ カスタムメニュー または 組み込みパンチスルーUIへのリンクを 設定します ここでも これらは簡単な例にすぎませんが そこに潜む可能性は非常に大きいので 皆さんがこれらのオプションを どのように使用して 車に次世代CarPlayを取り入れるかを とても楽しみにしています
今回は最新のCarPlay基盤上に構築された 次世代CarPlayアーキテクチャと 車内レンダリング コンポジション 車両状態のサポートなど このアーキテクチャに追加された新機能を 見てきました UIはそれぞれの車の機能に合わせて 容易に設定し 構築できます カスタマイズしたUIを使用して 特別な機能を有効にするための 多彩なオプションも用意されています さらに踏み込んだ学習をお望みであれば リンク先のビデオをご覧ください テクニカルドキュメントをご希望の場合 Apple MFi Programにご登録ください 以上です 本日は ご視聴ありがとうございました 車への次世代CarPlayの導入は 実に興味深いテーマです 皆さんの今後の開発を楽しみにしています
-
-
18:29 - Vehicle state categories
Audio settings Charging Climate control Closures Drive state Driver assistance Electric engine Fuel High voltage battery Internal combustion engine Media Notification history Notifications Now playing information Paired devices Request content Seat Tire Trip computer UI control Units Vehicle motion Vehicle resources
-
-
特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。
クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。