このページでは、Google Workspace のユーザー インターフェース（UI）を拡張するためのオプションについて説明します。Google Workspace UI は、次のような多くの理由で拡張できます。
- アプリやサービスを Google Workspace に統合して、ユーザーが 1 つ以上の Google Workspace アプリから直接アプリを使用できるようにします。たとえば、Google ドキュメント内でサービスのスマートチップとリンク プレビューを作成する Google Workspace アドオンを作成します。
- Google Workspace ユーザーの生産性向上やワークフローの改善をサポートします。 たとえば、ユーザーが Google Chat から直接週次タイムシートを報告できる Google Chat アプリを作成します。
- Google Workspace ではネイティブに利用できない機能を追加します。 たとえば、Google ドキュメント、スプレッドシート、スライドにカスタム メニューを追加します。
Google Workspace UI を拡張するオプションのほとんどは、Google Workspace Marketplace に公開できます。Google Workspace Marketplace は、ユーザーが Google Workspace と統合するサードパーティ製アプリを見つけてインストールできるオンライン ストアです。
Google Workspace UI を拡張するためのオプションの概要
次の表に、Google Workspace UI を拡張するためのオプションを示し、これらの特性を比較します。
- 拡張されたアプリ: 指定されたオプションで拡張できる Google Workspace アプリを一覧表示します。
- コーディング オプション: 次のようなビルド方法をリストします。
- AppSheet: コード不要の開発プラットフォーム。
- Apps Script: JavaScript をベースにした、クラウドベースのローコード開発プラットフォーム。
- 完全な開発: 任意のコーディング言語をサポートする独自の技術スタック。
- UI フレームワーク: 各オプションの作成に使用できる UI フレームワークの種類を示します。これには、次の種類があります。
- カードベース: カード インターフェースは、Apps Script を使用してカードサービスを使用するか、適切な形式の JSON を返して任意の技術スタック（フル開発）でカードをレンダリングすることで作成される、事前定義されたウィジェットとカードです。カードベースのインターフェースは、HTML や CSS の知識を必要としないため、パソコンとモバイルの両方のクライアントで適切に機能します。
- HTML: Apps Script は、サーバー側の Apps Script 関数とやり取りできるウェブページを開発するための HTML サービスを提供します。HTML サービスで開発されたインターフェースはカスタマイズ性に優れていますが、優れたユーザー エクスペリエンスを実現するには、多くの手作業が必要です。
- iFrame: iFrame は外部コンテンツを Google Workspace に埋め込み、ユーザー インターフェースを最もカスタマイズできるようにします。
次の表で、各オプションについて説明します。
| 作成できるもの | プレビュー | アプリの拡張 | コーディング オプション | カードベースの UI | HTML UI | iframe UI |
|---|---|---|---|---|---|---|
| Google Workspace アドオン |
|
Gmail  ドライブ
カレンダー
ドキュメント
スプレッドシート
スライド |
Apps Script
完全な開発環境
|
|||
| リンク プレビューとスマートチップ | Google Workspace アドオン |
|
ドキュメント
|
AppSheet
Apps Script
完全な開発環境
|
|||
| メールの下書き | Google Workspace アドオン |
|
Gmail |
Apps Script
完全な開発環境
|
|||
| カレンダーの会議 | Google Workspace アドオン |
|
カレンダー
|
Apps Script
|
既存の UI を使用 |
||
| エディタ アドオン |
|
ドキュメント
スプレッドシート
スライド
フォーム |
Apps Script
|
|||
| Google Chat アプリ |
|
チャット
|
AppSheet
Apps Script
完全な開発環境
|
|||
| カスタム関数 |
|
スプレッドシート
|
Apps Script
|
既存の UI を使用 |
||
| マクロ |
|
スプレッドシート
|
Apps Script
|
既存の UI を使用 |
||
| カスタム メニュー、ダイアログ、サイドバー |
|
ドキュメント
スプレッドシート
スライド
フォーム |
Apps Script
|
|||
| Google ドライブ用アプリ |
|
ドライブ
|
完全な開発環境
|
既存の UI を使用 |
||
Google Workspace アドオン
Google Workspace アドオンは、Google Workspace アプリと統合されるアプリケーションです。Google Workspace アドオンは、複数の Google Workspace アプリを拡張できます。ほとんどの場合、アプリは拡張された Google Workspace アプリ内のサイドバーで開きます。
Google Workspace アドオンのドキュメントを見る
公開可能
コーディング オプション:
Apps Script
完全な開発環境
次のアプリを拡張します:
Gmail
ドライブ
カレンダー
ドキュメント
スプレッドシート
スライド
利用可能な UI フレームワーク:
カード フレームワーク
リンク プレビューとスマートチップ | Google Workspace アドオン
ドキュメントを拡張する Google Workspace アドオンでは、サードパーティ サービスからカスタムリンク プレビューを作成できます。Google Workspace アプリケーション内のユーザー、ファイル、カレンダーの予定、その他のエンティティの名前リンクに対してドキュメントが生成するスマートチップと同様に、アドオンではサードパーティ リンクのスマートチップを生成し、ユーザーがチップにカーソルを合わせるとプレビュー カードを表示できます。
リンク プレビューは、既存の Google Workspace アドオンに追加できます。また、リンク プレビュー専用の Google Workspace アドオンを別に作成することもできます。
リンク プレビューとスマートチップに関するドキュメントを表示する
公開可能
コーディング オプション:
AppSheet
Apps Script
完全な開発環境
次のアプリを拡張します:
ドキュメント
利用可能な UI フレームワーク:
カード フレームワーク
メールの下書き | Google Workspace アドオン
Gmail を拡張する Google Workspace アドオンは、ユーザーが新しいメッセージを作成するときや、既存のメッセージに返信するときに、カスタム インターフェースを提供できます。このインターフェースを使用するには、メールの下書き（下書きの下部または [その他のオプション] メニュー）からアドオンを開きます。
公開可能
コーディング オプション:
Apps Script
完全な開発環境
次のアプリを拡張します:
Gmail
利用可能な UI フレームワーク:
カード フレームワーク
カレンダーの会議 | Google Workspace アドオン
ウェブ会議プロバイダは、ご利用の会議ソリューションで Google カレンダーを拡張する Google Workspace アドオンを構築できます。このアドオンにより、カレンダーの予定に会議オプションが追加され、ユーザーはカレンダーから直接会議を作成して参加できるようになります。
公開可能
コーディング オプション:
Apps Script
次のアプリを拡張します:
カレンダー
利用可能な UI フレームワーク:
既存の UI を使用
エディタのアドオン
エディタ アドオンは、ドキュメント、スプレッドシート、スライド、フォームを拡張するアプリです。エディタ アドオンで拡張できるアプリはアドオンごとに 1 つだけですが、同じ Marketplace リスティングに複数のエディタ アドオンを公開できます。エディタ アドオンは、拡張するアプリの [拡張機能] メニューから開きます。
エディタ アドオンには、次のインターフェースを使用できます。
公開可能
コーディング オプション:
Apps Script
次のアプリを拡張します:
ドキュメント
スプレッドシート
スライド
フォーム
利用可能な UI フレームワーク:
HTML
iFrame
チャットアプリ
Chat 用アプリは、リソースとサービスを Chat に取り込みます。 Chat アプリは、次のようなさまざまな方法でユーザーとやり取りするように設計できます。
- スラッシュ コマンドに応答して、テキスト メッセージまたはカード メッセージを返します。
- ダイアログを開いて、フォームデータの入力などの複数のステップをユーザーが完了できるようにします。
- ユーザーが会話から直接アクションを起こせるように、役立つ情報を含むカードを添付して、リンクをプレビューします。
公開可能
コーディング オプション:
AppSheet
Apps Script
完全な開発環境
次のアプリを拡張します:
チャット
利用可能な UI フレームワーク:
カード フレームワーク
カスタム関数
カスタム関数を使用すると、スプレッドシートに関数を追加できます。ユーザーは、スプレッドシートに用意されている何百もの組み込み関数と同じように、それらの関数を見つけて使用できます。
公開可能
コーディング オプション:
Apps Script
次のアプリを拡張します:
スプレッドシート
利用可能な UI フレームワーク:
既存の UI を使用
マクロ
マクロはスプレッドシートの記録で、定義した一連の UI 操作を複製します。マクロは、キーボード ショートカットにリンクすることも、[拡張機能] > [マクロ] メニューから実行することもできます。
マクロを記録すると、UI 操作を複製する Apps Script 関数がスプレッドシートで自動的に作成されます。Apps Script エディタ内でマクロを直接編集できます。Apps Script では、マクロをゼロから作成することも、作成済みの関数を使用してマクロに変換することもできます。
コーディング オプション:
Apps Script
次のアプリを拡張します:
スプレッドシート
利用可能な UI フレームワーク:
既存の UI を使用
カスタム メニュー、ダイアログ、サイドバー
ドキュメント、スプレッドシート、スライド、フォームのファイルに、カスタム メニュー、プロンプト、アラート、HTML ベースのダイアログとサイドバーを追加できます。カスタム メニューは、拡張するアプリのデフォルト メニューの横に表示されます。ダイアログ、サイドバー、プロンプト、アラートは通常、メニュー項目のクリックなどのユーザー アクションや、イベント ドリブン トリガーなどのトリガーによってアクティブになります。
カスタム メニュー、ダイアログ、サイドバーに関するドキュメントを表示する
コーディング オプション:
Apps Script
次のアプリを拡張します:
ドキュメント
スプレッドシート
スライド
フォーム
利用可能な UI フレームワーク:
HTML
iFrame
ドライブ用アプリ
アプリがドライブのファイルをサポートしている場合は、ドライブのユーザー インターフェースと統合して、ファイルの作成や開くオプションとしてアプリを表示できます。ユーザーがドライブでファイルを右クリックしたときに、[新規] > [その他] メニューと [アプリで開く] メニューにアプリが表示されます。ユーザーがいずれかのメニューからアプリを選択すると、そのアプリは新しいウィンドウで開きます。
公開可能
コーディング オプション:
完全な開発環境
次のアプリを拡張します:
ドライブ
利用可能な UI フレームワーク:
既存の UI を使用