@capgo/capacitor-autoを使用する

@capgo/capacitor-auto Capacitorアプリを承認済みのCarPlayとAndroid Autoテンプレート表面に接続します。アプリは車用ディスプレイに小さなリストテンプレートを送信し、車用ディスプレイはJavaScriptに選択されたアクションを送信します。

運転者安全なポリシー制御ワークフロー向けに設計されています。ウェブビューを車用ディスプレイにミラーリングしません。

インストールと同期

npm install @capgo/capacitor-auto
npx cap sync

車用ディスプレイにテンプレートを送信

import { Auto } from '@capgo/capacitor-auto';

await Auto.setRootTemplate({
  title: 'Garage',
  sections: [
    {
      header: 'Doors',
      items: [
        {
          id: 'open-main-door',
          title: 'Open main door',
          subtitle: 'Tap to send the action to the phone app',
          payload: { doorId: 'main' },
        },
      ],
    },
  ],
});

運転者アクションを待つ

await Auto.addListener('carAction', async (event) => {
  if (event.id === 'open-main-door') {
    await openGarageDoor(event.payload?.doorId);
  }
});

接続状態を監視

const status = await Auto.isAvailable();
console.log(status.available, status.connected, status.platform);

await Auto.addListener('connectionChanged', (event) => {
  console.log('Car connected:', event.connected, event.platform);
});

iOSの要件

CarPlayには、カテゴリごとにAppleが承認した特権が必要です。CarPlayシーンの構成について記載されているiOSセットアップドキュメントに記載されているように追加してください。 iOSセットアップドキュメント __CAPGO_KEEP_0__

__CAPGO_KEEP_1__

Android AutoはAndroidX Car App Libraryを使用します。プラグインには CarAppServiceが含まれます。 template capabilityを宣言し、デフォルトでは IOT カテゴリを使用します。カテゴリを確認するには Android設定ドキュメントを参照してください。

必要に応じて別のAndroid Autoカテゴリを使用する場合は

カテゴリを確認する必要があります。

車載用UIのデザインガイドライン
車載用UIでは、短い予測可能なアクションに車載用表面を使用してください。
ドライバー安全確認
電話アプリからシンプルな状態の移行

__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-autoを使用して複雑なフローを電話UIに保持し、イベントをネイティブの意図トリガーとして使用。 carAction __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-autoを使用して続行

capgo/capacitor-autoを使用している場合

__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-autoを使用して capgo/capacitor-autoを接続して ネイティブメディアとインターフェイスの動作を計画するために@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-autoを使用実装の詳細については@capgo/capacitor-autoを参照 for the implementation detail in @capgo/capacitor-auto, Getting Started Getting Started Using @capgo/capacitor-live-activities native機能のために使用する@capgo/capacitor-live-activities @capgo/capacitor-live-activities @capgo/capacitor-live-activitiesの実装詳細 Using @capgo/capacitor-video-player native機能のために使用する@capgo/capacitor-video-player

自動

Autoのチュートリアル