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

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 アドオン: 「チームリスト」

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