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

アドオン カードの例

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

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

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

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

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

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

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

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

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

カードベースのアドオンを作成する際は、特定のコンセプトと設計パターンを理解することが重要です。効果的なカードベースのアドオンを構築するために必要な情報については、次のガイドをご覧ください。

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

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

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

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

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

  • Google Workspace アドオン: 「チームリスト」

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