More Related Content
What's hot
What's hot (20)
Similar to CarPlayの対応方法と日本での現状
Similar to CarPlayの対応方法と日本での現状 (20)
More from Yuji Hato
Recently uploaded
CarPlayの対応方法と日本での現状
- 2. About me Yuji Hato CyberAgent, Inc. / AbemaTV, Inc. dekatotoro @dekatotoro Contributed service
- 3. What is CarPlay 対応状況 対応方法 UI 実装 iOS10 新機能 まとめ
- 4. What is CarPlay • 2014年3月3日にCarPlayが正式発表 • iPhone端末をカーナビ等の車載機器に連動させる システム • Maps、Music、Phone、Messages、Podcastsなどの iOSアプリやSiriを車載ディスプレイで直接操作できる • サードパーティのAudioアプリも対応可能 • 本体アプリの一部として動作する
- 6. What is CarPlay 対応状況 対応方法 UI 実装 iOS10 新機能 まとめ
- 7. 対応 Device
- 8. 対応 Device • iPhone5以上 • iPad、iPodには対応していない http://www.apple.com/jp/ios/carplay/
- 9. 対応 iOS
- 10. 対応 iOS • iOS7.1以上 • iOS8.4、iOS9.0でAPIに少し変更あり • iOS10でUI、APIに変更が入る
- 11. 対応 アプリ
- 12. 対応 アプリ • Tuneln Radio • MLB.com At Bat • NHK WORLD TV ? • Audible • VOX • Audio Books • Spotify • AWA 日本 海外 etc…
- 13. 対応 ナビ
- 14. 対応 ナビ 純正ナビ 対応ナビ 対応車種 トヨタ - - スズキ 多機能メモリーナビゲーション イグニス、ソリオ、スペーシア、ハス ラー 日産 プレミアムナビ 選択ナビ次第 ホンダ スタンダードナビ以上 選択ナビ次第、Accord、Legend等は× マツダ - - 三菱 - 欧州向けパジェロ。日本はまだ未対応 スバル 次期インプレッサ ベンツ A,B,CLA,CLS,GLA,GLE、今後順次 BMW - Audi - A4, Q7。今後順次 VW Composition-media New Polo,Tiguanなど。今後順次 GM 2016年以降発売の全モデル対応 Ford 2016年発売の全モデル対応 Volvo XC90/2016 S90,V90/2017 サードパーティ 対応ナビ 対応車種 パイオニア SPH-DA700 アルパイン iLX-007 日本では未発売 メーカーホームページなどからの独自調べ 2016/08/14現在
- 15. What is CarPlay 対応状況 対応方法 UI 実装 iOS10 新機能 まとめ
- 21. What is CarPlay 対応状況 対応方法 UI 実装 iOS10 新機能 まとめ
- 22. UI • リスト表示 • 階層構造 • 再生表示 • エラー表示
- 24. UI 再生表示
- 25. UI エラー表示
- 26. What is CarPlay 対応状況 対応方法 UI 実装 iOS10 新機能 まとめ
- 27. 実装 • MPPlayableContentManager • MPPlayableContentDataSource • MPPlayableContentDelegate リスト表示・階層構造
- 28. 実装 MPPlayableContentManager class CarPlayDemo: NSObject, MPPlayableContentDataSource, MPPlayableContentDelegate { static let shared = CarPlayDemo() func setup() { MPPlayableContentManager.sharedContentManager().delegate = self MPPlayableContentManager.sharedContentManager().dataSource = self } … } func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool { … CarPlayDemo.shared.setup() … }
- 29. 実装 MPPlayableContentDataSource func numberOfChildItemsAtIndexPath(indexPath: NSIndexPath) -> Int { // indexPathに応じたリストの件数を返す return 4 } func contentItemAtIndexPath(indexPath: NSIndexPath) -> MPContentItem? { // indexPathに応じたMPContentItemを返す let contentItem = MPContentItem(identifier: "container1") contentItem.title = “container1" contentItem.artwork = CarPlayArtwork.Home.artwork contentItem.container = true contentItem.playable = false return contentItem }
- 30. 実装 MPPlayableContentDelegate func playableContentManager(contentManager: MPPlayableContentManager, initiatePlaybackOfContentItemAtIndexPath indexPath: NSIndexPath, completionHandler: (NSError?) -> Void) { // indexPathに応じたコンテンツを再生 … completionHandler(nil) }
- 31. 実装 補足 NSIndexPath let indexPath = NSIndexPath(indexes: [1,4,3,2], length: 4) print(indexPath.length) // 4 print(indexPath.indexAtPosition(0)) // 1 print(indexPath.indexAtPosition(1)) // 4 print(indexPath.indexAtPosition(2)) // 3 print(indexPath.indexAtPosition(3)) // 2 // Get with pointer var indexesPtr = UnsafeMutablePointer<Int>.alloc(indexPath.length) indexPath.getIndexes(indexesPtr) let indexes = [Int](UnsafeBufferPointer(start: indexesPtr, count: indexPath.length)) indexes.forEach { value in print(value) // 1 4 3 2 }
- 33. 実装 MPNowPlayingInfoCenter var trackInfo: [String: AnyObject] = [:] trackInfo[MPMediaItemPropertyTitle] = "trackName" trackInfo[MPMediaItemPropertyArtist] = "artistName" trackInfo[MPMediaItemPropertyAlbumTitle] = "albumName" trackInfo[MPMediaItemPropertyPlaybackDuration] = 60 trackInfo[MPNowPlayingInfoPropertyElapsedPlaybackTime] = 10 trackInfo[MPNowPlayingInfoPropertyPlaybackRate] = isPlaying ? 1 : 0 trackInfo[MPMediaItemPropertyArtwork] = MPMediaItemArtwork(image: UIImage(asset: .ArtworkDemo)) MPNowPlayingInfoCenter.defaultCenter().nowPlayingInfo = trackInfo
- 34. 実装 MPRemoteCommandCenter let remoteCommandCenter = MPRemoteCommandCenter.sharedCommandCenter() remoteCommandCenter.nextTrackCommand.addTarget(self, action: #selector(RemoteCommand.next)) remoteCommandCenter.previousTrackCommand.addTarget(self, action: #selector(RemoteCommand.previous)) remoteCommandCenter.playCommand.addTarget(self, action: #selector(RemoteCommand.play)) remoteCommandCenter.pauseCommand.addTarget(self, action: #selector(RemoteCommand.pause)) remoteCommandCenter.togglePlayPauseCommand.addTarget(self, action: #selector(RemoteCommand.playOrPause)) …
- 35. 実装 エラー表示 // MPPlayableContentDataSource func beginLoadingChildItemsAtIndexPath(indexPath: NSIndexPath, completionHandler: (NSError?) -> Void) { // Error completionHandler(CarPlayErrorType.NoData.error()) } // MPPlayableContentDelegate func playableContentManager(contentManager: MPPlayableContentManager, initiatePlaybackOfContentItemAtIndexPath indexPath: NSIndexPath, completionHandler: (NSError?) -> Void) { // Error completionHandler(CarPlayErrorType.PlaybackError.error()) }
- 36. 実装 • リストの生成は一度に件数分MPContentItemが生成される • MPContentItemのidentifierが同じだとitemが再利用される • dataSource、delegateはメインスレッドでこない • iOS8.4からはMPPlayableContentManagerContextが利用できる 注意点
- 37. What is CarPlay 対応状況 対応方法 UI 実装 iOS10 新機能 まとめ
- 38. iOS10 新機能 • タブナビゲーションのサポート • シャッフルとリピート表示など • 再生中メディアのマーク表示 Audio apps • Siriサポート Automaker apps Messaging apps • Siriサポート
- 39. What is CarPlay 対応状況 対応方法 UI 実装 iOS10 新機能 まとめ
- 40. まとめ • UIはシンプル • 開発コストは低い • 日本での普及はこれから ナビの付帯機能としてのCarPlay ナビとしてのCarPlay CarPlayのナビ精度改善/機能 拡充と対応アプリの増加
Editor's Notes
- まず、簡単に自己紹介します。 波戸と申します。ネット上ではだいたいdekatotoroという名前で活動しています。 サイバーエージェントのAbemaTVというサービスのiOSアプリを開発してまして、 これまでは、AmebaアプリやAWAという音楽ストリーミングサービスのアプリを開発してきました。 今回は、AWAでCarPlayの対応を行った時の知見について、お話したいと思います。
- はじめに、CarPlayとはなんぞや？ということですが、
- ・CarPlayは、2014年の3月に正式発表された、 ・iPhone端末をカーナビなどと連動させるシステムです。 ・Apple純正のマップ、Music、電話などのiOSアプリやSiriを、車載ディスプレイで直接操作できます。 ・サード・パーティのAudioアプリも対応可能となっています。 ・CarPlayはExtension等では無く本体アプリの一部として動作しますので、 本体アプリとターゲットを分けるなどの必要はありません。
- はい、こちらCarPlayの画像になります。 車載のディスプレイにiOSのようなホーム画面が表示されているのがわかるかと思います。 タッチパネルで操作するものや、メーカーや車種によっては専用のコントローラーを使うものもあります。
- 次に、日本でのCarPlay対応状況です。
- まず、対応Deviceは
- iPhone5以上で、 iPad、iPodには対応してません。
- 次に、対応してるOSは
- iOS7.1以上で、 iOS8.4と9.0でAPIに少し変更が入りました。 後ほどお話しますが、iOS10でUI，APIの変更が入るということがWWDCで発表されています。
- そして、対応してるアプリですが、
- サード・パーティのものだと、 わたしが調べた限りでは、日本企業で開発されているのは、AWAとNHK WORLD TVしか見当たりませんでした。NHK WORLD TVは４月頃対応していたのですが、最新版だと対応してなかったので、おそらく現在だと日本のサービスだとAWAが初ではないかと思います。 また、海外はかなりの数のアプリが対応していて、オーディオ系のアプリは基本対応する、という印象を受けています
- はい、で、対応してるナビですが
- ざっとこんな感じです。 Appleと主要な自動車メーカーのホームページを見てまとめてみました。 ・国産メーカーはトヨタ、マツダは現状対応していませんが、他の国産メーカーは、2016年になって少しづつ対応車種やナビが出てきました。 ・欧米のメーカーは基本的に積極的に対応しており、今後は標準装備になるところが多そうです。 ・下の図ですが、日本で買えるサード・パーティのナビとしては唯一、パイオニアのSPH-DA700があります。 以上が日本での対応状況になります。
- では、ここから開発の話に入ります。
- まず、実装前の準備として、CarPlayに対応したい旨を申請します。
- 申請がOKであれば、Agreementが送られてくるので、内容を確認して、記入・署名し返送します。
- Agreementが問題なければ、TeamIDを聞かれるので、それをAppleに伝えます。
- AppleからCarPlay開発の設定が有効にされると、Provisioning Profile作成時にCarPlayのEntitlements設定が出てくるようになるので、CarPlayのEntitlementsを選択してProvisionning Profileを再作成する必要があります。
- 開発は、CarPlay用のSimulatorを使ってできます。 XocdeのHardwareのexternalDisplaysからCarPlayを選択することで、CarPlayのシミュレーターを使うことができます。 これで開発の準備は整いました。
- ここで、CarPlayのUIを紹介します。
- CarPlayのUIは大きく分けて４パターンで、非常にシンプルなものになります。 ・リスト表示 ・階層構造 ・再生表示 ・エラー表示 の４つになります。 順番に説明していきます。
- 基本的にCarPlayのUIは、リスト表示と、階層構造でコンテンツを表示する、というシンプルなものです。 下の図は実際のAWAのUIですが、第一階層でHomeをタップ、第二階層でDiscoveryをタップ、第三階層と、リストを表示していくことができます。
- 再生表示は、右の図のように コンテンツのtitleやsubtitleなど、決められたフォーマットで表示する形となってます。
- エラー表示は、Alertを表示できます。 こちらもUIは決まっていて、textを指定できるのみです。 以上がUIの大枠になります。
- はい、では実装の話です。
- CarPlayはMedia Player Frameworkのクラスを使うのですが、 リスト表示と階層構造の実装は、主に３つのクラスを使って実装します。 ・MPPlayableContentManager ・MPPlayableContentDataSource ・MPPlayableContentDelegate の３つになります。 順番に説明していきます。
- MPPlayableContentManagerはexternal media playerを管理するクラスで、 sharedContentManagerを使って、singletonで扱います。 この例ではCarPlayDemoというクラスのsetupでdataSourceとdelegateを設定していて、AppDelagateのdidFinishLaunchingWithOptionsでsetupします。
- 次にMPPlayableContentDataSourceを実装します。 上のnumberOfChildItemsAtIndexPathでは、階層に応じたListの件数を返します。 下のcontentItemAtIndexPathでは、階層とListのpositionに応じたMPContentItemを返します。 MPContentItemは、 identifierはtrackやalbumなどの音源データの一意のidを設定します コンテンツをタップして次の階層に行く場合は、containerをtrueにします。container trueだと>(DisclosureIndicator)が表示されるようになります。 コンテンツをタップしたときに再生する場合は、playableをtrueにします。
- 次にMPPlayableContentDelegateですが、このdelegateでは再生の実装を行います。 先ほど言いましたが、MPContentItemでplayableをtrueにしたコンテンツがタップされた時に呼ばれます。 階層とリストのpositionに応じたコンテンツの再生を実装します。 completionHandlerは再生が成功した場合はnil、失敗した場合はerrorを返すようにします。 リスト表示と階層構造の実装は基本的には以上です。
- そして補足ですが、NSIndexPathについて少し説明しておきます。 普段TableViewやCollectionViewで使っているsectionやrow，itemは、UIKitで拡張されたものですが、元々のFoundationのNSIndexPathは、配列の階層を表現するクラスになります。 この例でいくと、生成したNSIndexPathが表すものは、全部で４階層で、 で、右の図がわかりやすいと思うのですが、第一階層の1番目の第二階層の4番目の第三階層の3番目の第四階層の2番目を表すindexpathになります。 lengthが階層の深さで、indexAtPositionでそれぞれの階層の配列の位置が取得できます。 一応pointerでも取得できる例を下に書いています。 CarPlayでは、dataSourceとdelegateで渡ってくるNSIndexPathから、階層と配列の場所を特定して、処理を書くことになります。
- 次に再生表示・制御ですが、 MPNowPlayingInfoCenterとMPRemoteCommandCenterを使います。 この２つのクラスはCarPlayだけでなくて、ロック画面やコントロールセンター、AirPlayの対応でも同様ですので、ご存知の方も多いかと思います。
- MPNowPlayingInfoCenterは、再生中の音源情報を表示するためのクラスです。 trackNameやartistName、再生時間などを設定します。 Dictionaryに、定義されたキーで値を設定して、nowPlayingInfoに設定することで、表示に反映できます。
- MPRemoteCommandCenterは 再生画面の再生、曲送り、曲戻しなどの操作のためのイベントハンドラーのクラスです。 他にもlikeCommandやdislikeCommandなどいくつかあります。 それぞれイベントハンドラーを登録して再生・ストップなどの処理を書けばOKです。 //言わない iOS7.1から使えますが、CarPlayはiOS7.1以上なので iOS4からある (void)remoteControlReceivedWithEvent:(nullable UIEvent *)event NS_AVAILABLE_IOS(4_0); は使う必要はありません
- エラー表示ですが、 dataSourceのデータロード処理を行うbeginLoadingChildItemsAtIndexPath とdelegateの再生処理を行うplayableContentManagerで表示できます。CompletionHandlerにnilを返せば正常表示、errorを返せばエラー表示というふうになります エラーメッセージはNSErrorのlocalizedDescriptionが使われるので、CarPlay用のNSErrorとNSErrorTypeを定義して独自のエラークラスを作成すると綺麗に実装できると思います。
- 最後に、実装するときの注意点です。 ・目安として階層は5、リスト件数は12にしておくと良いです。 階層は、超えるとcrashしてしまうので必ず守る必要があります。リスト件数は超えても削除されるだけなので、あくまで目安という形です。 ・iOS8.4からは、MPPlayableContentManagerContextが利用できます。 contextから階層やリスト件数のlimitが取得できるので、それを使って制限のチェックを行うと良いです。 ・リストの生成は、一度に件数分MPContentItemが生成されます。 tableViewなどのように、描画時に表示分呼び出されるわけではなくて、 リストの件数分一度に生成されます。なので、Artworkとして使用する画像サイズは小さくする、リストの件数も制限するなどしてメモリ使用量を考慮する必要があります。 ・MPContentItemのidentifierが同じだと、itemが再利用されるので、意図せぬ表示や動きになる場合があります。その点で、注意が必要です。 ・dataSource、delegateはメインスレッドで来ません。 tableViewのように、メインスレッドでくるわけではなく、また、呼び出されるたびに異なるサブスレッドで来る場合もあるので、スレッド制約があるライブラリを使っている場合は注意が必要です。 以上が実装の説明になります。
- では、冒頭でチラっとお話した、iOS10の新機能を紹介します。
- WWDCで発表されたiOS10のCarPlay新機能ですが、Audio appsとAutomaker Appsそれぞれにいくつかあります。 まずAudio appsの新機能として、 ・タブナビゲーションのサポート、 ・再生中メディアマークの表示 ・シャッフル、リピート表示などです。 タブナビゲーションやシャッフル・リピートなどは、純正のMusicアプリで使われている機能なので、iOS10になってサード・パーティに公開される、という感じでしょうか。 次にAutomaker appsですが、Audioアプリの他に自動車メーカーのアプリもCarPlayに対応できます。で、そちらにSiriがサポートされるようです。 最後に、CarPlay対応できるアプリのカテゴリとして、Messagingアプリが追加されるようです。おそらくLineのようなメッセージ系のアプリも、CarPlayに対応できるようになるのではないかと思われます。 以上がiOS10の新機能になります。
- はい、最後にまとめです。
- ・先ほどお話したとおり、UIは、非常にシンプルなものになります。 GoogleのAndroidAutoは、なるべく６タップ以内で再生するなどありますが、 CarPlayでも、決められたUIの中で、情報整理となるべく少ないタップでコンテンツを再生できるようにするなどの工夫が必要だと思います。 ・開発コストは低いということでUIがシンプルでカスタマイズできないこともあり、開発はそんなに大変じゃないです。 Audioアプリを開発してる方は、付加価値としてCarPlayの対応を検討してもよいのではないかと思います。 ・最後に、日本での普及はこれからということで、現状まだまだなのですが、 その背景には，トヨタのT-ConnectやレクサスのG-link、マツダのマツダコネクトなど、独自プラットフォームとのバッティングがあると思います。 日本でCarPlayが普及するかどうかは、マップアプリやSiriの精度が上がる、また、支持されるCarPlay対応のアプリが出てくるかどうかで決まるような気がしています。 特に、iOS10でmessageアプリも対応できるようになるようなので、Lineなどのメジャーなメッセージアプリが対応することや、トヨタ、マツダがCarPlay対応するかどうかも大きな分岐点になるかもしれません。 エンジニアとしては、今後のCarPlayの動向や機能拡大をキャッチアップして、使いやすいアプリを開発していければと思っています。 以上で私のお話を終わります。ご清聴ありがとうございました。