FlutterでCarPlayのサンプルを作ってみた

Posted at 2025-01-10

はじめに

FlutterでCarPlayを作る機会があったので、サンプルを作ってみました。

更新履歴

2024.1.10 初回投稿

準備(ここはChatGPTに聞いてそのままコピペ)

Apple Developer Programへの登録
まず、Apple Developer Programに登録している必要があります。まだ登録していない場合は、Apple Developerの公式サイトから登録してください。
CarPlay対応アプリのカテゴリ確認
Appleが現在CarPlay対応アプリとして認めているカテゴリは以下の通りです：
- オーディオ
- ナビゲーション
- 通信（VoIPなど）
- EV充電管理
- 駐車
- クイックフード注文
- 燃料補給
  注意: CarPlayアプリはこれらのカテゴリのいずれかに該当する必要があります。
適合性確認

アプリがCarPlay対応要件に準拠していることを確認する必要があります。Appleは、CarPlayアプリのUI、ユーザーエクスペリエンス、機能がガイドラインに従っていることを求めています。

Human Interface Guidelines (HIG) for CarPlayを確認してください。
CarPlay App Entitlementの申請
CarPlayアプリを開発するには、CarPlayの権限（Entitlement）をAppleにリクエストする必要があります。このプロセスでは、以下の情報を提供する必要があります：
- アプリの詳細
- 使用ケース
- CarPlayとの統合計画
- 申請は、Apple Developer Programのお問い合わせフォームを通じて行います。)
  - 以下の手順で進めます：
    Apple Developer Programのアカウントにログイン。
    「お問い合わせ」セクションに移動。
    「技術サポート」または「APIの利用リクエスト」を選択。
    CarPlay App Entitlementのリクエストを具体的に記載し、送信します。

ここでは、iOSシミュレータを使って実機は使わず「CarPlay App Entitlementの申請」の申請を行わない方法で試しています。

Flutterプロジェクト作成

適当なプロジェクト名で作成
```
flutter create carplay_sample
```
パッケージをインストール
```
flutter pub add flutter_carplay
```
flutter_carplay(https://pub.dev/packages/flutter_carplay/example)のサンプルコードをmain.dartにそのまま貼り付ける
そのまま貼り付けると、「images/logo_flutter_1080px_clr.png」がないと怒られるので、適当にアイコンを作って、入れておきます。その際、pubspec.yamlのassetsの設定を忘れずに...
プロジェクトの最上層に「assets」「images」ディレクトリを作成
以下のcarplay.pngを追加

  assets:
    - assets/images/

XCodeの設定

AppDelegateの修正

FlutterプロジェクトのiOS>「Open in XCode」からXCodeを開く
Runner>Runner内のAppDelegateを開く
10,11行目の以下のコードをコメントアウトもしくは削除して、「return true」のみにして保存

import Flutter
import UIKit

@main
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
//    GeneratedPluginRegistrant.register(with: self)
//    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
      return true
  }
}

SceneDelegate.swift作成

同じ階層のRunner内に、「SceneDelegate.swift」を作成して、以下のコードをそのままコピペ

@available(iOS 13.0, *)
class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    var window: UIWindow?

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let windowScene = scene as? UIWindowScene else { return }

        window = UIWindow(windowScene: windowScene)

        let flutterEngine = FlutterEngine(name: "SceneDelegateEngine")
        flutterEngine.run()
        GeneratedPluginRegistrant.register(with: flutterEngine)
        let controller = FlutterViewController.init(engine: flutterEngine, nibName: nil, bundle: nil)
        window?.rootViewController = controller
        window?.makeKeyAndVisible()
    }
}

info.plistに追加

同じRunnerの階層内のinfo.plistに以下を付け加える

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>

 <略>
 
	<key>UISupportedInterfaceOrientations~ipad</key>
	<array>
		<string>UIInterfaceOrientationPortrait</string>
		<string>UIInterfaceOrientationPortraitUpsideDown</string>
		<string>UIInterfaceOrientationLandscapeLeft</string>
		<string>UIInterfaceOrientationLandscapeRight</string>
	</array>
	<key>CADisableMinimumFrameDurationOnPhone</key>
	<true/>
	<key>UIApplicationSupportsIndirectInputEvents</key>
	<true/>
  //ここから  
    <key>UIApplicationSceneManifest</key>
    <dict>
      <key>UIApplicationSupportsMultipleScenes</key>
      <true />
      <key>UISceneConfigurations</key>
      <dict>
        <key>CPTemplateApplicationSceneSessionRoleApplication</key>
        <array>
          <dict>
            <key>UISceneConfigurationName</key>
            <string>CarPlay Configuration</string>
            <key>UISceneDelegateClassName</key>
            <string>flutter_carplay.FlutterCarPlaySceneDelegate</string>
          </dict>
        </array>
        <key>UIWindowSceneSessionRoleApplication</key>
        <array>
          <dict>
            <key>UISceneConfigurationName</key>
            <string>Default Configuration</string>
            <key>UISceneDelegateClassName</key>
            <string>$(PRODUCT_MODULE_NAME).SceneDelegate</string>
            <key>UISceneStoryboardFile</key>
            <string>Main</string>
          </dict>
        </array>
      </dict>
    </dict>
    <key>NSSupportsCarPlay</key>
    <true/>
    //ここまで
</dict>
</plist>

Runnerファイルの追加

プロジェクトの一番上の「Runner」をクリック
TARGETS>Runnerをクリック(最初から選択されている場合もあります)
「Signing&Capabilities」タブをクリックします。
「Signing&Capabilities」タブの下の「All」横の「＋Capability」をクリックするとポップアップが表示されます。
一覧の中の「Keychain Sharing」をダブルクリックします。すると、Runner内にさらにRunnerファイルが作成されます。
この「Runner」ファイルの「Entitlements File」の下にKeyが「Keychain Access Groups」となっているので、ここを「com.apple.developer.carplay-maps」に変更。typeも「Boolean」、Valueを「YES」に変更する

シミュレータで実行

「flutter run」で実行
iOSシミュレータにアプリの画面が表示されます。
Simulatorメニューの「I/O」>「External Display」>「CarPlay...」を選択する
Setup画面が表示されるので、一旦このままで「run」ボタンを押す
CarPlay画面が表示されるので、該当のアプリをクリックすればアプリが表示されます。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up