カードベースのインターフェース

アドオン カードの例

Google Workspace アドオンは、ホスト アプリケーションの UI のサイドバーに情報とユーザー コントロールを表示します。アドオンは、メインの識別ツールバーと 1 つ以上のカードで構成されます。

各カードはアドオンの UI の特定の「ページ」を表します。通常、新しいカードに移動するには、そのカードを作成して内部カード スタックにプッシュするだけです。リッチなインタラクション エクスペリエンスを実現するために、カード間のナビゲーション フローを定義できます。

カードは、コンテキストなしまたはコンテキストありのいずれかになります。コンテキスト カードは、ホストアプリが特定のコンテキストにあるときにユーザーに表示されます。たとえば、Gmail のメッセージやカレンダーの予定を開くときなどです。コンテキストに依存しないカード（ホームページなど）は、ホストの特定のコンテキスト外でユーザーに表示されます。たとえば、ユーザーが Gmail の受信トレイ、ドライブのメイン フォルダ、カレンダーを表示している場合などです。

Apps Script で構築された Google Workspace アドオンは、カードサービスを使用して、カードからユーザー インターフェースを作成します。他の言語で構築されたアドオンは、インターフェースをカードとしてレンダリングするために、適切にフォーマットされた JSON を返す必要があります。

各カードは、ヘッダーと 1 つ以上のカード セクションで構成されます。各セクションは、一連のウィジェットで構成されています。ウィジェットは、ユーザーに情報を表示したり、ボタンなどの操作コントロールを提供したりします。

カードベースのインターフェースには次のようなメリットがあります。

  • カードベースのインターフェースを作成するのに、HTML や CSS の知識は必要ありません。
  • カードとウィジェットは、拡張する Google Workspace アプリケーションと適切に連携するように自動的にスタイル設定されます。

  • カードベースのインターフェースはパソコンとモバイル デバイスの両方で動作しますが、インターフェースを定義する必要があるのは 1 回だけです。

カードベースのインターフェースを作成する

カードベースのアドオンを構築する際は、特定のコンセプトと設計パターンを理解することが重要です。効果的なカードベースのアドオンを構築するために必要な情報は、次のガイドで確認できます。

カードを作成して UI の動作を実装する際は、これらのページを参照してください。アドオンの実装時に参照できる追加のサンプルも用意されています。

  • Google Workspace アドオン「Cats」のクイックスタート

    このアドオンのサンプルは、複数のページとホームページを含むシンプルな Google Workspace アドオンの UI を示しています。

  • Google Workspace アドオン: 「翻訳」

    このアドオン サンプルは、Google ドキュメント、スプレッドシート、スライド内でテキストを翻訳できる Google Workspace アドオンを示しています。

  • Google Workspace アドオン: 「Teams List」

    このアドオンのサンプルは、Gmail メッセージの受信者、ドライブ ファイルの編集者、カレンダーの予定の参加者に関するユーザー情報を表示する、より複雑な Google Workspace アドオンのサンプルを示しています。このアドオンは、Directory API を使用してユーザー情報を取得するため、ドメイン内でのみ使用できます。