このページでは、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 アドオン |
|
 Meet
|
フルデベロッパー
|
|||
| カレンダー会議 | Google Workspace アドオン |
|
カレンダー
|
Apps Script
|
既存の UI を使用する |
||
| エディタ アドオン |
|
ドキュメント
スプレッドシート
スライド
フォーム |
Apps Script
|
|||
| Google Chat アプリ |
|
チャット
|
AppSheet
Apps Script
フルデベロッパー
|
|||
| カスタム関数 |
|
スプレッドシート
|
Apps Script
|
既存の UI を使用する |
||
| マクロ |
|
スプレッドシート
|
Apps Script
|
既存の UI を使用する |
||
| カスタムのメニュー、ダイアログ、サイドバー |
|
ドキュメント
スプレッドシート
スライド
フォーム |
Apps Script
|
|||
| Google ドライブ アプリ |
|
ドライブ |
フルデベロッパー
|
既存の UI を使用する |
||
| Google Classroom アドオン |
|
 Classroom
|
フルデベロッパー
|
|||
Google Workspace アドオン
Google Workspace アドオンは、Google Workspace アプリと統合されるアプリケーションです。Google Workspace アドオンは、複数の Google Workspace アプリを拡張できます。ほとんどの場合、アプリは、拡張する Google Workspace アプリ内のサイドバーで開きます。
Google Workspace アドオンのドキュメントを確認する
公開可能
コーディング オプション:
Apps Script
フルデベロッパー
次のアプリを拡張します。
Gmail
ドライブ
カレンダー
ドキュメント
スプレッドシート
スライド
使用可能な UI フレームワーク:
カード フレームワーク
リンク プレビューとスマートチップ | Google Workspace アドオン
Google Workspace アドオンで Docs を拡張すると、サードパーティ サービスからカスタム リンク プレビューを作成できます。ドキュメントが Google Workspace アプリ内のユーザー、ファイル、カレンダーの予定、その他のエンティティの名前リンクに対して生成するスマートチップと同様に、アドオンはサードパーティのリンクのスマートチップを生成し、ユーザーがチップにカーソルを合わせたときにプレビューカードを表示できます。
リンクのプレビューは、既存の Google Workspace アドオンに追加することも、リンクのプレビュー専用の Google Workspace アドオンを別途作成することもできます。
公開可能
コーディング オプション:
AppSheet
Apps Script
フルデベロッパー
次のアプリを拡張します。
ドキュメント
スプレッドシート
スライド
使用可能な UI フレームワーク:
カード フレームワーク
メールの下書き | Google Workspace アドオン
Gmail を拡張する Google Workspace アドオンは、ユーザーが新しいメールを作成するときや既存のメールへの返信時にカスタム インターフェースを提供できます。このインターフェースを使用するには、メールの下書き内（下書きの下部または [その他のオプション] メニュー）からアドオンを開きます。
公開可能
コーディング オプション:
Apps Script
フルデベロッパー
次のアプリを拡張します。
Gmail
使用可能な UI フレームワーク:
カード フレームワーク
会議のメイン画面とサイドパネル | Google Workspace アドオン
Meet を拡張する Google Workspace アドオンを使用すると、アプリを会議のメインステージまたはサイドパネル インターフェースに埋め込むことができます。これにより、ユーザーは Meet を離れることなく、アプリを検出して共有したり、アプリでコラボレーションしたりできます。
他の Google Workspace アドオンとは異なり、Meet アドオンはカード フレームワーク UI を使用しません。代わりに、iframe を使用してアプリを埋め込みます。
公開可能
コーディング オプション:
フルデベロッパー
次のアプリを拡張します。
Meet
使用可能な UI フレームワーク:
iframe
カレンダーでの会議 | Google Workspace アドオン
ウェブ会議プロバイダの場合は、Google カレンダーを会議ソリューションで拡張する Google Workspace アドオンを作成できます。このアドオンにより、カレンダーの予定に会議オプションが追加され、ユーザーはカレンダーから直接会議を作成して参加できるようになります。
公開可能
コーディング オプション:
Apps Script
次のアプリを拡張します。
カレンダー
使用可能な UI フレームワーク:
既存の UI を使用
エディタのアドオン
エディタ アドオンは、ドキュメント、スプレッドシート、スライド、フォームを拡張するアプリです。エディタ アドオンは、アドオンごとに 1 つのアプリのみを拡張できますが、同じ Marketplace リスティングで複数のエディタ アドオンを公開できます。ユーザーは、拡張するアプリの [拡張機能] メニューからエディタ アドオンを開きます。
エディタ アドオンには、次のインターフェースを使用できます。
公開可能
コーディング オプション:
Apps Script
次のアプリを拡張します。
ドキュメント
スプレッドシート
スライド
フォーム
使用可能な UI フレームワーク:
HTML
iframe
Chat 用アプリ
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 を使用
Google Classroom アドオン
Google Classroom アドオンを使用すると、教師は課題、お知らせ、課題の資料に添付ファイルを作成できます。これらの添付ファイルは、Classroom の iframe でサードパーティのコンテンツを開きます。iframe は、ユーザーの種類と Classroom のコンテキストに応じて、個別の URL を開きます。
公開可能
コーディング オプション:
フルデベロッパー
次のアプリを拡張します。
Classroom
使用可能な UI フレームワーク:
iframe