カード

カードベースの Google Workspace アドオンは、サイドバーのペインとして表示されます(モバイルでは、メニューからアクセスできる別のアクティビティ ウィンドウとして表示されます)。アドオンには、アドオンを識別し、カード(アドオンの UI の「ページ」)を表示する上部ツールバーがあります。Google Apps Script では、Card オブジェクトを使用してプロジェクト コード内のカードを表します。

カードの構造

連絡先情報が表示されたアドオンカードの例

カードは、設計する UI 要素のグループです。カードは次のセクションで構成されています。

  • カードのヘッダー。これにより、カードが識別されます。タイトル テキストがあり、必要に応じてサブタイトルとアイコンを含めることができます。
  • 1 つ以上のカード セクション。これらは、カードの UI 領域のサブディビジョンです。セクションにはテキスト セクション ヘッダーを含めることができます。カードの各セクションは、カード上で水平線で区切られます。カード セクションが特に大きい場合は、必要に応じてユーザーが展開または折りたたむことができる折りたたみ可能なセクションとして自動的にレンダリングされます。カードには100 個以下のカード セクションを含めることができますが、パフォーマンスを高めるには、カード セクションの数を少なくする必要があります。

  • 各カード セクションには、1 つ以上の UI ウィジェットが含まれています。ウィジェットは、ユーザーに情報やインタラクティブなコントロールを提供します。カードとカード セクションは構造ウィジェットであるため、カード セクションに追加することはできません。カード セクションには100 個以下のウィジェットを含めることができます。パフォーマンスを最大限に高めるため、できるだけ簡潔にしてください。

カードは特定のユーザー アクティビティまたはデータセットを中心に設計する必要があります。たとえば、Google スプレッドシートから取得したデータを表示する Google Workspace アドオンでは、データを取得するシートごとに個別のカードが表示されることがあります。

複数のカードを使用する

シンプルな UI を表示するアドオンカードの例

アドオンは通常、複数のカードで構成されます。これらのカードを基本的なナビゲーション用のリストとして構成することも、より複雑なナビゲーション方法を構成して、ユーザーがカード間を移動する方法を制御することもできます。詳しくは、複数のカードを使用した基本的なナビゲーションをご覧ください。

アドオンが基本的なナビゲーションを使用している場合、アドオンが最初に開かれると、拡張する Google Workspace アプリケーションがカード ヘッダーのリストを作成し、ユーザーに表示します。カードのヘッダーをクリックすると、そのカードが開きます。カード ヘッダーのリストに戻るための戻る矢印も用意されています。ヘッダーと戻る矢印の機能をコーディングする必要はありません。アドオンでカードを定義すると、自動的に処理されます。

アドオンを設計する際は、一度に表示するカードの数を制限することをおすすめします。カードは限られた画面スペースを共有する必要があるためです。また、カードの複雑さを不必要に増やさないことも重要です。

パフォーマンス上の理由から、カードに追加できるウィジェットまたはカード セクションは 100 個までです。