カード

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

カードの構造

アドオンカードの例

カードは、デザインする UI 要素のグループです。カードは次のセクションで構成されます。

  • カードヘッダー。カードを識別します。タイトル テキストが含まれ、必要に応じてサブタイトルとアイコンを含めることができます。
  • 1 つ以上のカード セクション:カードの UI 領域の下位区分です。オプションで、セクションにテキスト セクション ヘッダーを含めることができます。カード セクションは、カード上で水平方向のルールによって分離されます。カード セクションが特に大きい場合は、必要に応じて展開や折りたたみが可能な折りたたみ可能なセクションとして自動的にレンダリングされます。カードは最大 100 枚まで入力でき、パフォーマンスを高めるために数個のみ使用できます。

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

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

複数のカードの使用

アドオンカードの例

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

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

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