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

Google Workspace アドオンはカードベースです。エディタ用アドオンは HTML ベースです。

Google Workspace アドオンのカード インターフェースの例。

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

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

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

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

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

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

  • カードベースのインターフェースを作成するのに、HTML や CSS の知識は必要ありません。
  • カードとウィジェットは、拡張する Google Workspace アプリケーションと適切に連携するように自動的にスタイル設定されます。
  • カードベースのインターフェースはパソコンとモバイル デバイスの両方で動作しますが、インターフェースの定義は 1 回で済みます。

モバイルで Google Workspace アドオンによって拡張できるホスト アプリケーションは Gmail のみです。

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

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

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

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

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

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

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

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

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