カード

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

カードの構造

アドオン カードの例

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

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

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

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

複数のカードを使用する

アドオン カードの例

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

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

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