カード

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

カードの構造

アドオンカードの例

カードとは、デベロッパーがデザインする UI 要素のグループです。カードは次のセクションで構成されています。

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

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

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

複数のカードの使用

アドオンカードの例

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

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

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