メインコンテンツにスキップ
プラグインに戻る
@capgo/capacitor-auto
チュートリアル
@capgo/capacitor-auto

オート

CarPlayとAndroid Autoのテンプレート表面を用いて、両方向の自動車通信を実現するCapacitorアプリ間のブリッジ

ガイド

Autoチュートリアル

デバイスでテスト

Download the Capgo app, then scan the QR code.

自動プラグインプレビューQR code

@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から承認されたエンタイトルメントを追加する必要があります。Appleが承認したテンプレート内に車用UIを保持するために、CarPlayシーン構成をiOS設定ドキュメントに記載されているように追加してください。 iOS設定ドキュメント and keep your car UI inside Apple-approved templates.

Android の要件

Android Auto は AndroidX Car App Library を使用します。 プラグインには、 CarAppService、を宣言し、 template カテゴリをデフォルトとして使用します。 アプリが別の Android Auto カテゴリが必要な場合には、 IOT の設定ドキュメントを確認してください。 デザインガイドライン 車載用の表面で、短い予測可能なアクションを使用してください:

ステータス行

1 つのタップ コマンド

  • 運転者に安全な確認を求める
  • Android Auto は AndroidX Car App Library を使用します。 プラグインには、
  • capability、を宣言し、
  • スマートフォンアプリからシンプルな状態のハンドオフ

スマートフォンUI内で複雑なフローを維持し、イベントをネイティブのインテントトリガーとして使用 carAction スマートフォンUI内で複雑なフローを維持し、イベントをネイティブのインテントトリガーとして使用

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

@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-autoを使用している場合 @capgo/capacitor-autoを使用して、ネイティブメディアとインターフェイスの動作を計画する場合、@capgo/capacitor-autoと接続する @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-autoの実装詳細については、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-autoを参照してください @capgo/capacitor-autoの実装詳細については、@capgo/capacitor-autoを参照してください @capgo/capacitor-live-activitiesを使用する @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activitiesを使用する @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activitiesを使用する @capgo/capacitor-live-activitiesを使用する native capability in Using @capgo/capacitor-live-activities について @capgo/capacitor-live-activities native capability in @capgo/capacitor-live-activities の実装詳細について Using @capgo/capacitor-video-player native capability in Using @capgo/capacitor-video-player について