CarPlayでAppの利用を増やそう

CarPlayでAppの利用を増やそう

CarPlayなら、ドライブ中にiPhoneをスマートかつ安全に使用することができます。ここでは、CarPlayの最新のAppタイプを紹介します。CarPlay Simulatorにより、Appの開発やテストがデスクにいながら行えるようになる仕組みをご覧ください。また、ナビゲーションAppが、サポート対象車両のデジタルインストルメントクラスタと接続する仕組みについても解説します。

リソース
関連ビデオ

Tech Talks
- エンタープライズデベロッパ向けの最新情報
WWDC23
- 車両システムのためのCarPlayの最適化
WWDC20
- CarPlayによるAppの高速化
WWDC18
- CarPlay対応のオーディオAppとナビゲーションApp
ダウンロード

（軽快な音楽）
“CarPlayでAppの利用を増やそう”にようこそ僕はAndré 本日のセッション担当者です
CarPlayなら iPhoneを車でスマートかつ安全に使えますね本日は CarPlayでAppを使用する方法について話しますまずはサポートされるAppのタイプについて軽く確認し今年追加する新しいAppをいくつか取り上げてその後 Appの開発をサポートするために追加した新ツールについて説明します締めくくりはナビAppに特化した新しい重要な機能を紹介します前置きはこのぐらいで始めていきましょう！
CarPlayの基本的特性といえば運転手のためだという事です Appを作る時には主要なユーザーは運転手だと念頭に置きましょうつまり運転中に関係するユースケースのみを有効化し運転中にしないようなユースケースはすべて排除すべきです一度切りのコンフィグレーションや Appへのサインイン利用規約の確認などは運転の前後に行うべきであり Appの CarPlayのUIからは外されるべきです
CarPlayにAppを表示するにはエンタイトルメントが必要です作りたいAppのタイプに合わせ Apple CarPlay開発者用のウェブサイトでエンタイトルメントをリクエストできます現在サポートされている Appの種類はご覧の通りです運転中に行うかなり多くのタスクをカバーしていますが多くの方がさらに多くの運転関係Appの有効化を望んでいると聞いています嬉しいことに今年はここに２つの新しいタイプが加わりました燃料と運転タスクのAppです後にこれらのタイプについて詳細を説明しますがまずはテンプレートについて簡単に見ていきましょうテンプレートは CarPlayでの AppのUIを表示します Appがデータを供給しシステムが車両ディスプレイに UIを描いてくれるわけですこのテンプレートのシステムは Appが採用しやすく利点の例を挙げるとAppが運転中の使用に適切になるよう誘導してくれる事ですフォントサイズなどを心配する必要はなく UIが複雑にならないことをテンプレートが確実にしてくれて AppのUIは CarPlayの他のAppと調和してユーザーが必要に応じて簡単に使えるわけですまたスクリーンのサイズや入力デバイスのタイプに関係なく CarPlayをサポートするすべての車においてAppが問題なく機能するようテンプレートが対処します異なるコンフィグレーションでの Appのテストについてはセッションのあとの方でお話しますがテンプレートが仕事の大半をしてくれるのは確かです Appの作成時には複数のテンプレートから選べますボタンが配列されたグリッドレイアウトのものから表のついたリスト型のテンプレートまでデベロッパにも iOSユーザーにも馴染みのあるものです CarPlayを使って運転するユーザーにとって表示形式が馴染み深いのは非常に大切です既に言いましたが CarPalyでは様々なAppがサポートされ Appによってテンプレートの関連性の度合いが異なりますこの図表で Appのタイプによりどのテンプレートが使用可能か理解しやすいと思いますなんだか DMV用の視力テストのように見えますね同じ図表がデベロッパ用オンラインドキュメンテーションに出ていますここで覚えておきたいのは Appの使えるテンプレートは Appのタイプによる事ですそのAppに関連する適切なテンプレートのみが許可されるという事ですテンプレートの話の次には iOS 16で新たに登場する Appのタイプについて詳しく見ていきますまずは燃料補給のAppについてお話しましょう
iOS 14ではEV充電Appのサポートを開始しましたね EV充電器の場所を探すだけでなく例えばユーザーを正しい充電スタンドに繋げ充電を開始するなど他の機能があるのですこういった機能は電気自動車以外にも非常に便利だという声がデベロッパから上がっています従来のガソリン車であれ代替燃料車両であれ燃料Appで CarPlayをサポートできる新カテゴリーです場所を見つけて運転するだけなら多くのユーザーはナビAppを使っているので燃料Appは CarPlayのUIにそれ以上の機能を備えている必要がありますその例として挙げられるのはガソリンポンプの始動ですね次は運転タスクのAppを見ていきましょう運転タスクは CarPlay Appの新しいタイプでシンプルなAppを非常に多様にしてくれますこれらのAppの主な目的は運転中に必要なタスクを可能にする事であって単に運転中に何かのタスクを行うためのものではありません
そのようなAppとして考えられるものの例を挙げるとアクセサリの制御を支援するAppや運転状況、道路状況を提供するApp 運転の開始時および終了時のタスクを支援するAppです具体的な例をいくつか見ていきましょう
まずは重要な道路情報をユーザーに与えてくれる道路状況に関するAppですこのApp作成に使ったのは CPPointOfInterestTemplateです繰り返しますが Appのユーザーは運転中なのでユーザーの現在地の近くに非常に短いリストを表示するべきですこれは運転前の完全なルート計画に使うための Appではありません
ユーザーが目的地を選ぶとこのようになりますご覧のように文字のスペースは意図的に制限されており一目で情報が分かるように正確な言葉を選ぶ必要があります
次は車のアクセサリをコントロールするAppで… ここでは被けん引車のコントローラーです CPInformationTemplateを使ってアクセサリの基本情報を提供しユーザーが操作をするためのボタンも２つありますこのAppの CarPlayでのUIはたったのこれだけです他にスクリーンはありません！もちろんAppの機能は他にもたくさんあって例えば接続したアクセサリを管理できる能力などですが運転に必要でない機能はどんなものも Appの CarPlay UIには含まれていませんユーザーは車を降りてから運転と関係のないタスクを iPhoneにあるAppの主要UIで行うべきです
CPGridTemplateを使った例を２つほど見てみましょうこれはボタンが２つしかない究極にシンプルなAppです！ユーザーは個人走行距離かビジネス走行距離として走行距離の記録ができます新しい運転タスクAppにぴったりなAppでユーザーは運転中にすべきシンプルなタスクを不要なタスクを一切有効化せずに行うことができますシンプルながら適切ですこのスタイルのUIは色んなタイプのAppに合いほぼ同じUIを持つ別の例を見てみましょうこれは CPGridTemplateを使った高速有料道路応答機でAppでユーザーが車内の乗車人数を選べるようになっています先程の例と全く同じ目的を果たしていて運転タスクAppとして完璧だと言えます
まとめると運転タスクAppのデザインではユーザーが運転中に必要な最低限の機能を提供する１画面のみのAppの作成を考慮するべきで瞬時に達成できるタスクのみを有効化することです複雑あるいは稀なユースケースは避けましょうつまり初期設定や詳細なコンフィグレーションなどですそして最後に運転に無関係な機能はたとえ車に関係していてもAppに加えません何でもかんでも入れないことです運転タスクAppについては以上です今度は少し方向転換して CarPlay Appのテスト方法です選べるいくつかの方法を見直してから CarPlay Simulatorという新ツールにを紹介しますデベロッパとして CarPlayで有効にしたAppをテストするツールがいくつかありますまずは Xcodeシミュレータが持つ内蔵CarPlayウィンドウです他のAppのテストに既に使っている場合はこれで CarPlay UIも素早くテストできますまた現物の iPhoneでAppをテストするなら CarPlayのついた車両かアフターマーケットのヘッドユニットに繋げられます最近までは現物の iPhoneでAppの CarPlay UIをテストする方法はこれだけでしたが３つ目の選択肢が気に入ると思いますよ CarPlay Simulatorです！これについてもう少し詳しく見てみましょうどういう物なのでしょうか？ CarPlay Simulatorはスタンドアローンの Mac Appで CarPlay環境を再現します “Xcode用追加ツール”を Appleのデベロッパ向けウェブサイトからダウンロードしてAppを実行し iPhoneをケーブルでMacに繋げるだけです CarPlayが iPhoneで起動し本物の車に繋げた場合と同じ様に作動しますこれを使おうと思うような特別な理由とは？利点がいくつかあります
まず CarPlay Simulatorを使っていると本物の車に繋げた時と同じ様に iPhoneでも実際に作動する事ですつまり駐車場に行ったり来たりするとかアフターマーケットのヘッドユニットを購入せずとも iPhoneでテストを行うことができるわけですもう１つの大きな利点は iPhoneが Macに繋がっているため CarPlay Simulatorを使いながら Macにある他の優れたツールを同時に使う事ができるわけで Xcodeでのデバッグや Instrumentsの性能チューニングなどもできます同様に iOSの側から見てもiPhoneの機能全てにアクセスすることができるという利点があります実際の CarPlayシステムか CarPlay Simulatorがなければテストできない状況もあります
分かりやすい例は FMラジオのような車側の音源とあなたのナビAppのガイダンス音声が適切にミックスされるかテストする場合ですこれが今ではデスク上で便利にテストできます
そして CarPlay Simulatorで複数の異なる車のコンフィグレーションもテストできますディスプレイのサイズが異る車がその一例です作動中の CarPlay Simulatorはどんな感じでしょうかご覧ください iPhoneに繋がれたCarPlayのディスプレイがいくつかのコントロールと一緒に Appに表示されますその機能のいくつかを見ていきましょうスクリーンの下側にはいくつかの異なるハードキーと車のノブ型コントロールを真似たボタンがあります
タッチスクリーン付き車両のように直接 CarPlayビューをクリックする事もできます
上部にはいくつかの簡易コントロールがありますスクリーン上の一定のコンテンツの制限を走行中の車両が要求した場合を再現できるボタンで例えばオーディオAppのリスト内容の短縮化です
次の２つのボタンは UIとマップそれぞれのコンテンツのダーク／ライトモードの変更を車両が求めた場面を再現します
最後のボタンはiPhoneと CarPlayを素早く切断および再接続する場面を再現します iPhoneはこの時もMacに繋がったままなのでこのボタンを使うとXcodeを使ってApp内のー CarPlay再接続シナリオをデバッグできます
さてとばした最初のボタンは何でしょうか？ご想像通りより高度な機能を表示する二次ウィンドウのボタンですその高度な機能を見てみましょう
“一般”のタブで CarPlayのメインディスプレイのサイズを選ぶことができます AppのUIがテンプレートのみで構成されている場合は色々なサイズを試して異なる車でのUIの見え方を確かめられますが先ほども言ったようにサイズに関わらずシステムがその動作を確実にしますですがナビAppの場合は地図の描画が正しく行われるか確かめるために色々なサイズやアスペクト比を試すのは非常に重要です Appでのテストを奨励するサイズはこちらですクラスタ表示のタブを見てみましょう計器クラスタにセカンドディスプレイを持つ車を再現できるようになっていますね！チェックを入れて有効化しセッションをリスタートすると計器クラスタ用の二次ウィンドウが主要ディスプレイと一緒に表示されます繰り返しますがナビApp関連です計器クラスタディスプレイはマップか方向指示カードを計器クラスタを目の前にする運転手に表示するものです計器クラスタに関してはこのあともう少しお話しますが CarPlay Simulatorの簡単な説明は以上ですその便利さが皆さんに伝わったでしょうか CarPlayが計器クラスタにライブマップを描けるのは見ましたが皆さんのナビAppはどうでしょうか？計器クラスタのサポートを加えたりテストできますか？では見てみましょう iOS 13の時に APIが加わり CarPlayダッシュボードにナビAppが表示できるようになりましたねそのためにはAppのInfo.plistを編集しダッシュボードのサポートを宣言し必要なデリゲートを実装しましたダッシュボードへの表示の有無をデリゲートがAppに通知し UIWindowがAppに渡されマップの画描ができるわけです簡単ですね既にこれが実践済みなら計器クラスタサポートの追加は同様の手順なので嬉しいことにとても簡単にできるのです僕の試作ナビApp Space Roadsでどうやったかを見ましょう Info.plistを編集して計器クラスタナビゲーションシーンのサポートを宣言し要求された Scene Session Roleを追加しましたその後実装したのが CPTemplateApplicationInstrument ClusterSceneデリゲートと CPInstrumentClusterControllerデリゲートですどちらもコンテンツを描画するウィンドウを渡し計器クラスタの開始および終了を通知して計器クラスタのビューを見える状態にしてくれますこれだけで車の計器クラスタにマップがライブで表示されるようになります！ダッシュボードのサポートの実装と似ていますが計器クラスタに特化した注意点も少しありますまず計器クラスタではマップの拡大や縮小ができる事です Appにこれを実装するのを忘れずに CPInstrumentClusterController Delegatesを使いましょう同様に Appにコンパス表示や速度制限表示が含まれる場合対応するデリゲートがその描画に適切な時をAppにおしえてくれますまた計器クラスタのビューは車の計器クラスタにある他の構成要素のせいで不明瞭になる場合があります iOSの持つトップクラスの機能がこれに対処してくれます… セーフエリアです！ viewSafeAreaInsetsDidChangeをオーバーライドしてセーフエリアが変更されたタイミングを知りクラスタビューでsafeAreaLayoutGuideを使い見えることが保証されたエリアに重要なコンテンツを維持しますユーザーの位置を示すのが青いルートラインなら重要な部分は必ずセーフエリアの中に含まれるようにしましょう CarPlay Appを制作するデベロッパのための新機能や Appのテストに使う新ツールを見てきました実際に使った様子を見てみましょうまず僕の MacにあるCarPlay Simulatorです Appは実行中で今からiPhoneを繋げます
するとほらCarPlayが作動していますよ CarPlay SimulatorがAppをテストする様子を見てみましょうテンプレートベースのAppでもそのアートワークがライトモード、ダークモードの両方で正しく見えるか確認できます Express Lane Appを実行して…
ツールバーのボタンを使い表示モードを切り替えられますこのAppではそれぞれ違うアートワークになっていますねいい感じですでは僕が書いたナビAppの試作 Space Roadsを見ましょう
メインの設定パネルを使って異なるスクリーンサイズでマップ描画コードを試します
そして計器のクラスタ表示を有効化し計器クラスタサポートをテストします
問題ありません！先ほどこのAppを CarPlay Simulatorでテストしたので実際の車でも問題なく作動すると自信が持てますやってみますよ！さあ僕の車の中でご覧のようにiPhoneが車に繋げられてCarPlayを実行しています
まずは被けん引車コントローラー Appを実行してみてテンプレートベースのAppでもノブ対応車両で作動する事をお見せします
この車はタッチパネルとノブコントローラーがありますが運転中はノブの方を好むユーザーが多いのでノブを使ってAppが機能することが大切ですご覧のようにAppの全てのボタンにアクセス可能で何が最高かと言えば僕が何もせずともテンプレートが全てやってくれた事です！
次にナビAppのSpace Roadsに切り替えます Appを起動し… ナビゲーションを開始し… “出発”を押しますジャーン！ Appがライブマップをセンターコンソールと計器クラスタの両方に表示します！運転手から見やすい位置のライブマップは最高です皆さんのナビAppを使う方々もきっと気にいると思いますでは本日はこれまでですさらなる詳細は CarPlayのデベロッパ用ポータル developer.apple.com/CarPlayでご覧くださいご清聴ありがとうございました！

<key>UIApplicationSceneManifest</key>
<dict>
    <!-- Indicate support for CarPlay dashboard -->
    <key>CPSupportsDashboardNavigationScene</key>
    <true/>
    <!-- Indicate support for instrument cluster displays -->
    <key>CPSupportsInstrumentClusterNavigationScene</key>
    <true/>
    <!-- Indicate support for multiple scenes -->
    <key>UIApplicationSupportsMultipleScenes</key>
    <true/>
    <key>UISceneConfigurations</key>
    <dict>
        <!-- For device scenes -->
        <key>UIWindowSceneSessionRoleApplication</key>
        <array>
            <dict>
                <key>UISceneClassName</key>
                <string>UIWindowScene</string>
                <key>UISceneConfigurationName</key>
                <string>Phone</string>
                <key>UISceneDelegateClassName</key>
                <string>MyAppWindowSceneDelegate</string>
            </dict>
        </array>
        <!-- For the main CarPlay scene -->
        <key>CPTemplateApplicationSceneSessionRoleApplication</key>
        <array>
            <dict>
                <key>UISceneClassName</key>
                <string>CPTemplateApplicationScene</string>
                <key>UISceneConfigurationName</key>
                <string>CarPlay</string>
                <key>UISceneDelegateClassName</key>
                <string>MyAppCarPlaySceneDelegate</string>
            </dict>
        </array>
        <!-- For the CarPlay Dashboard scene -->
        <key>CPTemplateApplicationDashboardSceneSessionRoleApplication</key>
        <array>
            <dict>
                <key>UISceneClassName</key>
                <string>CPTemplateApplicationDashboardScene</string>
                <key>UISceneConfigurationName</key>
                <string>CarPlay-Dashboard</string>
                <key>UISceneDelegateClassName</key>
                <string>MyAppCarPlayDashboardSceneDelegate</string>
            </dict>
        </array>
        <!-- For the CarPlay instrument cluster scene -->
        <key>CPTemplateApplicationInstrumentClusterSceneSessionRoleApplication</key>
        <array>
            <dict>
                <key>UISceneClassName</key>
                <string>CPTemplateApplicationInstrumentClusterScene</string>
                <key>UISceneConfigurationName</key>
                <string>CarPlay-Instrument-Cluster</string>
                <key>UISceneDelegateClassName</key>
                <string>MyAppCarPlayInstrumentClusterSceneDelegate</string>
            </dict>
        </array>
    </dict>
</dict>

16:00 - Application instrument cluster scene delegate

extension TemplateApplicationSceneDelegate: CPTemplateApplicationInstrumentClusterSceneDelegate {
    
    func templateApplicationInstrumentClusterScene(
        _ templateApplicationInstrumentClusterScene: CPTemplateApplicationInstrumentClusterScene,
        didConnect instrumentClusterController: CPInstrumentClusterController) {
        // Connected to Instrument Cluster
        TemplateManager.shared.clusterController(instrumentClusterController, didConnectWith: templateApplicationInstrumentClusterScene.contentStyle)
    }
    
…

    func instrumentClusterControllerDidConnect(_ instrumentClusterWindow: UIWindow) {
        // Window in which to draw instrument cluster contents 
       self.instrumentClusterWindow = instrumentClusterWindow
    }

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

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

リソース

関連ビデオ

Tech Talks

WWDC23

WWDC20

WWDC18