CarPlay対応のオーディオAppとナビゲーションApp

(音楽)

(拍手) CarPlayのオーディオと ナビのアプリケーションです 開発担当のジョナサンと 申します CarPlayアプリケーションの 構築に関する― 最新情報をお伝えします

CarPlayオーディオ アプリケーションを復習し ナビ用のCarPlay フレームワークを紹介します これを使えば ナビのアプリケーションが 簡単に構築できるのです ではCarPlayの 復習をしましょう

CarPlayは より優れた安全な方法で 車載スクリーン上での iPhone操作を実現します 通話やメッセージの送受信 音楽 Podcast ラジオ ナビアプリケーションを 使った走行など すべて運転中に可能です iPhoneの 外部ディスプレーと言えます 車載スクリーンは 各社 車種によって UIや外観の仕様が異なります しかしCarPlayは その点も考慮しています

CarPlay搭載車の 入力方法は様々です タッチスクリーン 回転つまみで 調整や動作を選ぶ方式 指の動きを感知して 入力する― タッチパッドもあります

右ハンドル車の場合は CarPlayの表示は自動的に 運転席側に変更されます

夜間やライト点灯時の ダークモードへの変更を iOSに通知する 車種もあります そのタイミングで 地図表示を変更する― 仕様にもできます

CarPlay搭載車は 様々な仕様の スクリーンに対応 すべてiOSが管理します アプリケーションを 作ってしまえば あとはCarPlayに任せるだけ アプリケーションの種類には ５つのカテゴリーがあります 車は特別な場所です これらのアプリケーションを お持ちなら CarPlayへの連携を ご検討ください

このカテゴリーに該当するか ご不明であれば 後ほど ご質問をお受けいたします こちらのURLからも 確認できます アプリケーションの一例を 紹介します

自動車メーカーの アプリケーションは そのメーカーの車種用に 構築されたものです 各社 独自のUIを持ち 温度調節や座席制御など 車内の設定をつかさどります SiriKitを使えば 音声による操作が可能です

昨年導入したのが メッセージとVoIPです SiriKitとも連携します CarPlayに接続すれば 運転したまま メッセージのやり取りが できます SiriKitの詳細については 昨年の発表をご覧ください

こちらはCarPlay対応の オーディオアプリケーション 車載スクリーンに 表示するデータには 専用のテンプレートを 使用しています 今回さらに性能をアップし 最適化を実現したので 紹介します

ナビアプリケーション用の CarPlayフレームワークにも ご期待ください

(拍手) ナビアプリケーションが 車載スクリーン上で使えます 入力方法や画面の仕様を 心配する必要はありません ナビが随時更新されれば いいのです CarPlayフレームワークは 各種テンプレートも提供 ユーザ操作に対する レスポンスを 各種テンプレートを使って 自由に構築できます 後ほど詳しく紹介します

この５つの中から ２つのカテゴリーに 着目します オーディオとナビです オーディオの説明は アルバートから

(拍手) ありがとう この情報を早く お知らせしたかったんです お伝えするのは CarPlayへの設定方法と 最新のiOS 12用に 最適化された情報です また アプリケーション開発の 最適な手順や よくあるケースも紹介します

ドライブと言えば音楽です 運転中は好きな音楽を 聞きたいですね クラシック音楽や Podcast― ラジオのニュースも聴きます 皆さんのアプリケーションで 最高のドライブを 提供しましょう その一例に 私の作品を紹介します たぶんヒットするはず

名前はSrirocka

由来は私の大好物である― チリソースと音楽です 大人気のアプリケーションに なるでしょう Srirockaは 十分機能していますが CarPlayと連携させます その過程をお見せします

ジョナサンが お伝えしたとおり CarPlayでは わずらわしい側面を排除 入力方法や 画面の仕様などです そのためアプリケーションに 求められるのは 情報の表示と 楽曲の提供だけです 通常はテーブルビューや タブで表示しますね そこで重要なのが 適切なコンテンツです 開発者の方なら 既存のAPIはご存知でしょう 詳しく見ていきます

CarPlayで知っておくべき ３つのAPIです 各APIの詳細は 昨年の発表時に触れましたが 簡単に説明しましょう コンテンツを見るには MPPlayableContentを使用 これはデータソースと デリゲートを保有し アプリケーションの情報を CarPlayに追加します またCarPlay上での選曲も コールバックされます “Now Playing”を ロック画面で表示できるなら 次の２つのAPIは すでにご存知だと思います

MPNowPlayingInfoCenterは メタデータを追加 曲のタイトルや アートワークが CarPlayの “Now Playing”と連動 ロック画面でも同じです MPRemoteCommandCenterは 遠隔操作に対応 “Play”や “Next Track”などです CarPlayでも連続再生を 実現します コードを見ましょう

Srirockaを例に挙げて 説明します アプリケーションに 最低限必要なのはこちら まずは MPPlayableContentManager Srirockaが情報を CarPlayに提供し 必要に応じて表示します 次に使うのは NowPlayingInfoCenter メタデータに情報を提供し “Now Playing”を 表示します 最後が MPRemoteCommandCenter 特に“Play”の時に Srirockaが “Now Playing”を表示

CarPlayに必要なAPIは MPPlayableContentです iOS 12では この最適化に着目し MPPlayableContentを リマスターしました

(拍手) MPPlayableContentを 見直し データソースやデリゲートの 要求のパフォーマンスを向上 既存のアプリケーションを 変更せずに 素早く起動し 様々な動作に スムーズに対応します アプリケーションとの 互換性も向上し ユーザの操作を予測し CarPlayに表示します これでアプリケーションが 進化しますね 私たちが検討したのは reloadDataの実装 データをリロードして 最適化してくれるのです 実際 reloadDataを使うのは 限られた時だけでした reloadDataはCarPlayの 階層を脱構築し すべてを構築し直します これは費用のかかる オペレーションです

コンテンツの更新だけなら beginUpdatesとendUpdatesが 使えます 問題なく処理できます beginUpdatesとendUpdatesは データとの 非同期動作を行います 内部データは別の場所に 格納しておいてください 必要な時だけ 情報を共有できれば 連携がうまくいきます 次はCarPlayでの動作の 最適化についてです Srirockaは一部で 実装されています ユーザは このプレイリストを選択 大人気のプレイリストです なぜかロードに 手間取っていますね 一定時間を過ぎると タイムアウトします 原因は完了ハンドラか 情報の読み込みです 電話の状態は？ 運転時に考えられるのは 通信の遅さや 画面のロックです 多くのユーザは運転中に パスコードをかけています

ロック時に データにアクセスできないと 情報が得られず CarPlayは機能しません ロック時でも アクセスできるように 利用規約を見直しましょう

もう１つの問題は―

携帯の電波が入らない場所で 運転している時です 運転場所は田舎から都会まで 様々ですね 走行場所が違えば CarPlayやデータサービスも 異なります Wi-Fiがない状況にも 備えねばなりません

Srirockaも同じですが 話題の曲を選ぶには 高度な技術が必要です しかもデバイス上で 行わねばなりません 処理にも時間が必要です では その解決策は？

beginLoadingChildItemsを 使えばいいのです CarPlayでIndexPathが 閲覧できれば呼び出せます テーブルのスクロールや タブで選ぶと beginLoadingChildItemsが 呼び出されます

コンテンツを選ぶ前に ロードが可能になります これはSrirockaのコードです 先ほどのプレイリストが CarPlayに表示されると 処理が始まります ネットワークリクエストを 経由して コンテンツの提供が可能です

CarPlay用の アプリケーション開発で 想定される事態とは？ Srirockaは満足度の高い サービスです ご覧のとおり デザインもすばらしく リピート率も高いでしょう では CarPlayでは？

ログアウト時は 接続不可能です これでは楽しくありません アプリケーションに 接続できないのです

ログアウト中でも 操作を可能にし 楽しい体験が できるようにしましょう そうすれば 満足度は上がります

オーディオに関しては 利点が多いです MPPlayableContentの テンプレートを使えば CarPlayでも最高の体験を 提供できます ログアウトや ロック画面の時を想定して スムーズに機能させましょう iOS 12のおかげで アプリケーションの開発でも 最適化や性能アップが 期待されます 皆さんのアプリケーションも 改良してみてください 正しい方向に進むために CarPlayフレームワークを 紹介します では (拍手) ありがとう ナビのアプリケーションに 関する発表です CarPlayにおける ナビの役割は大きく なじみのアプリケーションが 使えたら最高です お伝えしたとおり テンプレートを基にして それを実現しました

アプリケーションの データやメタデータは 車載スクリーンに 表示されます 動作状況も順調です でもナビアプリケーションは 勝手が違います 皆さんの地図は美しい そんな見事な地図なら 当然 車内でも使いたいはず iOS 12ではCarPlay フレームワークを発表 CarPlayフレームワークは ナビアプリケーションを 構築する最高のツールです テンプレートオブジェクトを 使えば iOSがアプリケーションの UIに変換します これさえあれば 簡単に CarPlayでの動作を実現 詳しく説明します 我々が開発した CountryRoadsは 景色を優先して 道案内してくれます CarPlay版がこちら

ホーム画面にCountryRoadsの アイコンが出ています 起動すると タイル画像が表示されました CarPlayに接続すると ウインドウが表れます ここに表示されるのは 非対話型のナビに関連した コンテンツです テンプレートのおかげで iOSがアプリケーションの UIに変更します CarPlay接続時の コードがこちら

アプリケーションの デリゲートと CarPlayのプロトコルを 一致させます CPApplicationDelegate です これは didConnectCarInterfaceController 重要なオブジェクトを ２つ提供します １つは CPInterfaceController アプリケーションと テンプレートをつなぎ 車載スクリーンへの 表示を可能にします そして先ほどのウインドウも 表示させます ２つのリファレンスは 覚えておいてください そしてView Controllerを 作り出し Review Controllerに 割り当てます ルートテンプレートを 作ったら InterfaceControllerで 設定します いくつかテンプレートを 紹介しましょう １つは おなじみのもので ユーザにも 関連するものです それは MapTemplate 他のテンプレートと違い 透過的になっています ウインドウ上のコンテンツは MapTemplateの下に 表示されます テンプレートの構成は様々で ボタンの追加も可能 左右に２つずつ 設定することができます これらはCPBarButtonです テキストや画像で作成し サイズや仕様を 自動で合わせます ボタン操作は 定義されていないので 独自のアクションハンドラが 必要です 車載スクリーン上で ボタンを押すと アクションハンドラが 呼ばれます 地図のウインドウ上部に 専用のボタンを ４つまで配置できます 通常のバーボタンと異なり カスタマイズが可能です MapTemplateには 多くの機能があります 地図をパンする機能や 重要な情報を通知する アラート機能などです もちろん ルート案内もそうです ルート案内の説明の前に パンとアラートについて お話します パン機能を付けるなら パンモード用の ボタンが必要です ナビゲーションバーか 地図ウインドウに配置します パンモードでは４方向に ボタンが表示されます アプリケーションは APIを介し方向を認識します 車載システムの 複雑さを軽減する― 一例を紹介します タッチ操作において スクリーンのレイテンシは 問いません 回転つまみや タッチパッドも使えます 回転つまみについて 補足します 方向の変換ができれば APIで連携が可能です システム間の連携は 心配無用です 運転中に 知りたい情報と言えば 道路情報や より最適なルートでしょう そこで使うのが ナビゲーションアラート機能 MapTemplateの ナビゲーションアラートには タイトル サブタイトル 画像 アクションの設定が可能です アラートを消すタイミングも 設定できます

テンプレートの構成を 見ながら CountryRoadsに ボタンを追加してみます

これは以前の テンプレートなので まずCPMapTemplateの インスタンスを生成します 次に 追加するボタンを作ります CountryRoadsの特色は よく使う項目から 検索できること このボタンを作ります CPBarButtonのType Imageに よく使う項目を表示する アクションを指定します 画像を ボタンに割り当てます すでにあるボタンの横に 配置するので ナビゲーションバーに ２つのボタンを割り当てます これで完了です 新たなボタンができました 次は ユーザへの表示方法です ここで最適なテンプレートが GridTemplateです グリッド上に最大８つの ボタンが配置できます ボタンには画像とタイトルを 設定できます ナビゲーションバーにも 適用可能で タイトルのみでも GridTemplateを利用できます 早速 GridTemplateを 使ってみます

まずは “Parks”ボタンの画像を リトリーブします

“Parks”と リトリーブした画像で インスタンスを生成

次に配置を指定します 同じく CPGridTemplateで よく使う項目の “Favorites”を作成し コードで作成した ボタンと並べます ここで使うのが InterfaceControllerです 車載スクリーンの表示に GridTemplateを 追加することができます

よく使う項目の 検索が可能になりました 検索結果の表示には ListTemplateを使います リスト表示用の テンプレートです アイテムには文字 画像 記号などを設定できます 複数セクションに対応し ナビゲーションバーも 同じように表示できます CarPlayフレームワークは 必要に応じ スクロールバーを表示します 簡単に結果が確認できます ListTemplateを 構成しましょう

まず 検索結果の配列を CPListItemの配列に 変換する必要があります 検索結果のプロパティを 使います

CPListTemplateを セクションとともに初期化し タイトルとユーザ操作の デリゲートを割り当てます テンプレートの追加方法は 先ほどと同じです ユーザが 検索結果を確認します

この時 テンプレートに 完了ハンドラが呼ばれます

CarPlayフレームワークには 他にもアイテムがあります

CarPlayフレームワークの 優れた点の１つが 車載システムの複雑さを 軽減してくれること こちらは SearchTemplateにある― タッチスクリーン用 キーボードです タッチスクリーン搭載車は 限られます 回転つまみを使う 車も多いでしょう その場合は 文字列で表示します 同じ検索APIを介し 文字認識ができれば タッチパッドでも 問題ありません

重要な情報をユーザに 表示したい時は ActionSheetStyleの CPAlertを使います 特に重要な情報は 全画面表示が可能です

また 音声も重要な要素です 音声コントロールの テンプレートもあります ここで再び ジョナサンに代わります ジョナサン (拍手)

ありがとう CountryRoadsを例に デモを行います

Xcodeの CarPlayシミュレータです まずはホーム画面です CarPlay仕様の CountryRoadsを 起動してみます

最初に地図が表示されます 透過性のオーバーレイ方式で タイル画像が 美しい地図になりました すばらしいですよね 地図の拡大と縮小には CPMapButtonを利用します

パンモードへの 切り替えもできます

これらのボタンは 簡単に設定できます ユーザが ボタンを操作すると アプリケーションに 指令が伝わり実行されます 先ほど追加したボタンが ナビゲーションバーに ありますね ボタンをタップすると GridTemplateと連動し よく使う目的地の項目が 表示されます “Parks”を選ぶと ListTemplateと連動し 近くの公園が リストで表示されました 続きはまた後ほど マイクに代わります

(拍手)

ありがとう

ユーザにとって 最も重要な機能の１つ それはルート案内です ルート案内開始までの 典型的な流れを ユーザ視点で 見ていきます まずは目的地を選びます ナビ上から選ぶ場合もあれば すでに 決まっている場合もあります 次はルートと 関連情報を確認 例えば 所要時間や到着予定時刻です ルート候補が複数あれば プレビューを見て 最適なルートを選ぶでしょう

そして ナビをスタートさせます ここからアプリケーションの ルート案内が始まり 到着 あるいは 案内の停止まで続きます CarPlayフレームワークで 同じ流れを見ていきます

まずは ルートのプレビューから 目的地までのルートを 視覚化したデータを 画面上に表示し ユーザに提供します 目的地の名称はもちろん 注意喚起なども含まれます 到着予定時刻も提供します 複数の候補があれば それを知らせるボタンを 表示します ユーザがルートを 切り替えるためのボタンです

クラスとメソッドを見ながら ルートプレビューを 構成します

まずはCPTripです これはルート表示用の クラスです 起点や目的地の他 ルートを予測する CPRouteChoiceも含まれます CPTravelEstimatesは 距離と所要時間を算出します ルートプレビュー表示の 準備が整ったら showTripPreviewsを 呼び出します 表示内容の更新は ユーザがルートを 切り替えた時です インスタンスメソッドが 呼び出され 表示内容が更新されます この機会にお伝えしたいのが MapTemplateの コンテンツの表示方法です コンテンツをユーザに 確実に見てもらうには safeAreaのAPIが 有効ですよね MapTemplateで コンテンツ変更が生じると safeAreaInsetsが更新され 最適な領域を教えます safeAreaInsetsDidChangeを 実装すれば コンテンツを 範囲内に収めてくれます

次はルート案内です CarPlayフレームワークへ 情報を与えると 案内カードが作られます ここで追加される情報は 走行ルートに残りの距離― さらに右折 左折 直進などの指示も含まれます

CarPlayのルート案内では 次のことを覚えてください

CPMapTemplateDelegateと MapTemplate この２つは必須です プレビューのボタンが 押されると インスタンスメソッドが 呼び出されます これで指令が実行され 目的地への ルート案内が始まります アプリケーションが 案内を開始すると フレームワークへの データ更新も始まります 次に必要な startNavigationSessionは CPNavigationSessionの インスタンスを提供します この先のルート案内を 管理するものです

CPNavigationSessionと CPManeuverで 自動的に運転指示を案内し 次の指示があることも 表示します 継続的に運転操作を 予測し更新しているので リアルタイムの 案内が提供できます 音声案内を行うケースも 多いでしょう オーディオセッションの 設定には確認が必要です 車内では音楽などを 楽しむことが多いですよね iOSにカーオーディオと 音源は様々です オーディオセッションに 適した変数を使えば 音源を 気にする必要がありません 音声は適切に作動します オーディオセッションの 設定には duckOthersなども 利用できます iOS音源との相性が 良くなります 次に必要なのは？ 運転は続いています 運転操作と到着予定時刻を 更新し 引き続き ルート案内を行います

ルートを外れたら？ 新しいルートの 算出が必要です その間は 再検索中と表示できます

道路状況が 変わることもあるでしょう その時は地図上に アラートを表示します ナビのおかげで 無事 目的地に到着です ここまでは スクリーン前面での話です たいてい スクリーン前面は 地図かオーディオです Srirockaのようなね バックグラウンド処理中に 情報を表示したい場合 その時はスクリーン前面に バナー通知を表示します アラートだけでなく ルート案内にも使えます

MapTemplateの メソッドを３つ紹介します まずは ShouldShowNotificationForManeuver バックグラウンドから 運転指示を出す時 このメソッドを呼び Trueを返します これで案内が バナー通知に変換されます 指示を通知したら 到着予定時刻も更新されます 到着予定時刻を通知する メソッドが呼び出され バナーのコンテンツが 更新されます 新たな通知の作成ではなく コンテンツが 更新されるだけです アラートも 同じように表示可能です アラート用のメソッドも 用意しています ここで再び ジョナサンのデモです ルートプレビューと ルート案内をお見せします ジョナサン (拍手)

ありがとう 再びCountryRoadsを例に ルート案内のデモを行います まずはコードから 見ていきます

目的地が選択されたら 現在地と目的地の位置から ナビゲーションエンジンが ルートを算出します デモでは ルートは１つですが ルート候補が 複数となる場合もあります そこでルート選択を助ける 追加情報を入れます CPTripを作成し showTripPreviewsを呼び出し ルート案内の開始を 知らせます そして 到着予定時刻を 更新します CarPlayと連動する様子を 見てみます

ユーザが ナビをスタートさせたら 不要なルート候補を隠します 次にセッションの開始を MapTemplateに指示 ローディング状態に入り 運転操作を算出し CPManeuverの オブジェクトを構成します こうして 最初の案内が始まります 準備ができたら ドライブを始めます

“Favorites”から “Parks”を検索します

候補地をタップすると 地図の画面に戻り ルート案内が 表示されます “Go”ボタンをタップすると ナビゲーションモードに 入ります ナビゲーションバーの ボタン表示は更新可能で キャンセルボタンなどを 表示できます 楽しいドライブのようです 目的地に到着すると 地図モードに戻ります

以上でデモは終了です 本日のおさらいをしましょう 劇的に進化したCarPlayに より良いユーザ体験への 最適化 アプリケーションのための 最新CarPlayフレームワーク Stringやデバイスは 問いません ナビ開発者の皆さんに 注力して欲しいのは 美しい地図を描くことです あとは 我々にお任せを CPMapTemplateで 地図を描き CPNavigationSessionで ナビを管理 情報の表示や ユーザ操作のための テンプレートもありました

ご質問のある方は 本日午後２時に ラボ11までお越しください 詳細はこちらのURLでも ご確認いただけます CarPlayアプリケーションの 構築準備ができましたね 皆さんに期待しています ありがとう (拍手)