Google Workspace アドオンは、ホスト アプリケーション UI のサイドバーに情報とユーザー コントロールを表示します。アドオンは、メインの識別ツールバーと 1 つ以上のカードで構成されます。
各カードはアドオンの UI の特定の「ページ」を表し、新しいカードへの移動は通常、そのカードを作成して内部のカードスタックにプッシュするだけで済みます。カード間のナビゲーション フローを定義すると、優れた操作性を実現できます。
カードには、非コンテキストとコンテキストの両方を使用できます。ホストアプリが特定のコンテキストにある場合、コンテキスト カードがユーザーに表示されます。たとえば Gmail のメールやカレンダーの予定を開く場合などです。コンテキストに基づかないカード(ホームページなど)は、ホストの特定のコンテキスト外でユーザーに表示されます。たとえば、ユーザーが Gmail の受信トレイ、メインのドライブ フォルダ、カレンダーを表示しているときなどです。
Apps Script に組み込まれている Google Workspace アドオンは、カードサービスを使用して、カードからユーザー インターフェースを作成します。他の言語で構築されたアドオンは、インターフェースがカードとしてレンダリングされるように、適切な形式の JSON を返す必要があります。
各カードは、ヘッダーと 1 つ以上のカード セクションで構成されています。各セクションは、一連のウィジェットで構成されています。ウィジェットは、ユーザーに情報を表示したり、ボタンなどの操作コントロールを提供したりします。
カードベースのインターフェースには、次の利点があります。
- カードベースのインターフェースの作成に、HTML や CSS の知識は必要ありません。
- カードとウィジェットは、拡張する Google Workspace アプリケーションが適切に機能するように自動的にスタイルが設定されます。
カードベースのインターフェースは、パソコンとモバイル デバイスの両方で機能しますが、インターフェースを定義する必要があるのは 1 回だけです。
カードベースのインターフェースの作成
カードベースのアドオンを作成する場合は、特定のコンセプトと設計パターンを理解することが重要です。次のガイドでは、効果的なカードベースのアドオンを作成するために必要な情報を提供します。
- カード
- ホームページ
- ウィジェット
- 操作
- イベント オブジェクト
- カードの作成
- インタラクティブなカードの作成
- カード間の移動
- ユニバーサル アクションを使用する
- テキスト入力にオートコンプリートを追加する
- ユーザーの言語 / 地域とタイムゾーンへのアクセス
- Google 以外のサービスに接続する
- スタイルガイド
- ベスト プラクティス
カードを作成し、UI の動作を実装する場合は、これらのページを参照してください。アドオンを実装する場合は、次のサンプルも参考にしてください。
Google Workspace アドオンの「猫」クイックスタート
このアドオン サンプルは、複数のページとホームページを含むシンプルな Google Workspace アドオン UI を示しています。
-
このアドオンのサンプルは、ユーザーがドキュメント、スプレッドシート、スライド内のテキストを翻訳できる Google Workspace アドオンを示しています。
Google Workspace アドオン: 「チームリスト」
このアドオンのサンプルは、より複雑な Google Workspace アドオンのサンプルであり、Gmail メールの受信者、ドライブのファイル編集者、カレンダーの予定の参加者に関するユーザー情報を表示します。このアドオンは、Directory API を使用してユーザー情報を取得するため、ドメイン内でのみ使用できます。