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

アドオンカードの例

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

各カードはアドオンの UI の特定の「ページ」を表し、新しいカードへの移動は通常、そのカードを作成して内部のカードスタックにプッシュするだけで済みます。カード間のナビゲーション フローを定義すると、優れた操作性を実現できます。

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

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

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

カードベースのインターフェースには、次の利点があります。

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

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

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

カードベースのアドオンを作成する場合は、特定のコンセプトと設計パターンを理解することが重要です。次のガイドでは、効果的なカードベースのアドオンを作成するために必要な情報を提供します。

カードを作成し、UI の動作を実装する場合は、これらのページを参照してください。アドオンを実装する場合は、次のサンプルも参考にしてください。

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

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

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

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

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

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