ウィジェットは、次のうち 1 つ以上を提供する UI 要素です。
- カードやセクションなどの他のウィジェットの構造
- ユーザー向けの情報(テキストや画像など)
- ボタン、テキスト入力フィールド、チェックボックスなど、操作のアフォーダンス。
カード セクションに追加されたウィジェットのセットが、アドオンの全体的な UI を定義します。ウィジェットは、ウェブ デバイスとモバイル デバイスの両方で同じ外観と機能を持ちます。リファレンス ドキュメントでは、ウィジェットセットを作成するいくつかの方法について説明しています。
ウィジェットのタイプ
アドオン ウィジェットは通常、構造ウィジェット、情報ウィジェット、ユーザー操作ウィジェットの 3 つのグループに分類されます。
構造ウィジェット
構造ウィジェットは、UI で使用される他のウィジェットのコンテナと編成を提供します。
- ボタンセット - 1 つ以上のテキスト ボタンまたは画像ボタンを横方向にグループ化したコレクション。
- カード - 1 つ以上のカード セクションを含む単一のコンテキスト カード。ユーザーがカード間を移動する方法を定義するには、カード ナビゲーションを構成します。
- カード ヘッダー - 特定のカード用のヘッダー。カードのヘッダーには、タイトル、サブタイトル、画像を含めることができます。アドオンで使用されている場合、カード アクションとユニバーサル アクションがカード ヘッダーに表示されます。
- カード セクション - ウィジェットの集合。他のカード セクションと水平線で区切られ、必要に応じてセクション ヘッダーが付いています。各カードには、少なくとも 1 つのカード セクションが必要です。カード セクションにカードやカード ヘッダーを追加することはできません。
これらの基本的な構造ウィジェットに加えて、Google Workspace アドオンでは、カード サービスを使用して、現在のカードと重複する構造(固定フッターとプレビュー カード)を作成できます。
固定フッター
カードの下部に固定されたボタンの行を追加できます。この行は、カードの残りのコンテンツとともに移動またはスクロールされません。
次のコードの抜粋は、固定フッターの例を定義してカードに追加する方法を示しています。
var fixedFooter = CardService.newFixedFooter()
.setPrimaryButton(
CardService.newTextButton()
.setText("Primary")
.setOpenLink(CardService.newOpenLink()
.setUrl("https://www.google.com")))
.setSecondaryButton(
CardService.newTextButton()
.setText("Secondary")
.setOnClickAction(
CardService.newAction()
.setFunctionName(
"secondaryCallback")));
var card = CardService.newCardBuilder()
// (...)
.setFixedFooter(fixedFooter)
.build();
カードを見る
Gmail メールを開くなど、ユーザーの操作によって新しいコンテキスト コンテンツがトリガーされた場合は、新しいコンテキスト コンテンツをすぐに表示するか(デフォルトの動作)、サイドバーの下部にプレビュー カード通知を表示するかを選択できます。コンテキスト トリガーが有効な状態でユーザーが戻るアイコン をクリックしてホームページに戻ると、ユーザーがコンテキスト コンテンツを再度見つけられるように、プレビュー カードが表示されます。
新しいコンテキスト コンテンツが利用可能になったときに、新しいコンテキスト コンテンツをすぐに表示するのではなく、プレビュー カードを表示するには、CardBuilder
クラスに .setDisplayStyle(CardService.DisplayStyle.PEEK)
を追加します。プレビュー カードは、コンテキスト トリガーとともに 1 つのカード オブジェクトが返された場合にのみ表示されます。それ以外の場合は、返されたカードが現在のカードにすぐに置き換えられます。
ピークカードのヘッダーをカスタマイズするには、コンテキスト カードを作成するときに、標準の CardHeader
オブジェクトを使用して .setPeekCardHeader()
メソッドを追加します。デフォルトでは、Peek カードのヘッダーにはアドオンの名前のみが含まれます。
次のコードは、Cats Google Workspace アドオンのクイックスタートに基づいて、Peek カードで新しいコンテキスト コンテンツをユーザーに通知し、Peek カードのヘッダーをカスタマイズして、選択した Gmail メールスレッドの件名を表示します。
var peekHeader = CardService.newCardHeader()
.setTitle('Contextual Cat')
.setImageUrl('https://www.gstatic.com/images/
icons/material/system/1x/pets_black_48dp.png')
.setSubtitle(text);
. . .
var card = CardService.newCardBuilder()
.setDisplayStyle(CardService.DisplayStyle.PEEK)
.setPeekCardHeader(peekHeader);
情報ウィジェット
情報ウィジェットは、ユーザーに情報を表示します。
- 画像 - 指定したホストされた一般公開 URL で指定される画像。
- DecoratedText - 上部と下部のテキストラベル、画像やアイコンなどの他の要素と組み合わせることができるテキスト コンテンツ文字列。DecoratedText ウィジェットには、ボタン ウィジェットやスイッチ ウィジェットを含めることもできます。追加されたスイッチは、切り替えスイッチまたはチェックボックスにできます。DecoratedText ウィジェットのコンテンツ テキストには HTML の書式設定を使用できますが、上部と下部のラベルには書式なしテキストを使用する必要があります。
- テキスト パラグラフ - HTML 形式の要素を含めることができるテキスト パラグラフ。
ユーザー操作ウィジェット
ユーザー操作ウィジェットを使用すると、アドオンはユーザーが行ったアクションに応答できます。これらのウィジェットは、アクション レスポンスを使用して、さまざまなカードの表示、URL の開く、通知の表示、メールの下書きの作成、その他の Apps Script 関数の実行を構成できます。詳しくは、インタラクティブ カードの作成ガイドをご覧ください。
- カード アクション - アドオンのヘッダーバー メニューに配置されるメニュー項目。ヘッダーバー メニューには、ユニバーサル アクションとして定義されたアイテムを含めることもできます。これらのアイテムは、アドオンで定義されたすべてのカードに表示されます。
- DateTime 選択ツール - ユーザーが日付、時刻、またはその両方を選択できるウィジェット。詳しくは、下記の日付と時刻の選択ツールをご覧ください。
- 画像ボタン - テキストではなく画像を使用するボタン。事前定義されたアイコンのいずれか、または URL で指定された一般公開されている画像を使用できます。
- 選択入力 - オプションのコレクションを表す入力フィールド。選択入力ウィジェットは、チェックボックス、ラジオボタン、プルダウン選択ボックスとして表示されます。
- スイッチ - 切り替えウィジェット。スイッチは、DecoratedText ウィジェットと組み合わせてのみ使用できます。デフォルトでは切り替えスイッチとして表示されますが、代わりにチェックボックスとして表示することもできます。
- テキストボタン - テキストラベル付きのボタン。テキスト ボタンの背景色の塗りつぶしを指定できます(デフォルトは透明)。必要に応じてボタンを無効にすることもできます。
- テキスト入力 - テキスト入力フィールド。ウィジェットには、タイトル テキスト、ヒント テキスト、複数行テキストを設定できます。テキスト値が変更されたときに、ウィジェットでアクションをトリガーできます。
- グリッド - アイテムのコレクションを表す複数列のレイアウト。アイテムは、画像、タイトル、サブタイトル、枠線や切り抜きスタイルなどのさまざまなカスタマイズ オプションで表すことができます。
DecoratedText
チェックボックス
ボタンやバイナリ切り替えスイッチの代わりに、チェックボックスが付いた DecoratedText
ウィジェットを定義できます。スイッチの場合と同様に、チェックボックスの値は、setOnClickAction(action)
メソッドによってこの DecoratedText
に接続された Action
に渡されるアクション イベント オブジェクトに含まれます。
次のコードの抜粋は、チェックボックス DecoratedText
ウィジェットを定義してカードに追加する方法を示しています。
var decoratedText = CardService.newDecoratedText()
// (...)
.setSwitch(CardService.newSwitch()
.setFieldName('form_input_switch_key')
.setValue('switch_is_on')
.setControlType(
CardService.SwitchControlType.CHECK_BOX));
日時選択ツール
ユーザーが時刻、日付、またはその両方を選択できるウィジェットを定義できます。setOnChangeAction()
を使用して、選択ツールの値が変更されたときに実行するウィジェット ハンドラ関数を割り当てることができます。
次のコードの抜粋は、日付のみの選択ツール、時刻のみの選択ツール、日時選択ツールを定義してカードに追加する方法を示しています。
var dateOnlyPicker = CardService.newDatePicker()
.setTitle("Enter a date")
.setFieldName("date_field")
// Set default value as May 24 2019. Either a
// number or string is acceptable.
.setValueInMsSinceEpoch(1558668600000)
.setOnChangeAction(CardService.newAction()
.setFunctionName("handleDateChange"));
var timeOnlyPicker = CardService.newTimePicker()
.setTitle("Enter a time")
.setFieldName("time_field")
// Set default value as 23:30.
.setHours(23)
.setMinutes(30)
.setOnChangeAction(CardService.newAction()
.setFunctionName("handleTimeChange"));
var dateTimePicker = CardService.newDateTimePicker()
.setTitle("Enter a date and time")
.setFieldName("date_time_field")
// Set default value as May 24 2019 03:30 AM UTC.
// Either a number or string is acceptable.
.setValueInMsSinceEpoch(1558668600000)
// EDT time is 4 hours behind UTC.
.setTimeZoneOffsetInMins(-4 * 60)
.setOnChangeAction(CardService.newAction()
.setFunctionName("handleDateTimeChange"));
日時選択ウィジェットのハンドラ関数の例を次に示します。このハンドラは、ID が「myDateTimePickerWidgetID」の日時選択ツール ウィジェットでユーザーが選択した日時を表す文字列をフォーマットしてログに記録します。
function handleDateTimeChange(event) {
var dateTimeInput =
event.commonEventObject.formInputs["myDateTimePickerWidgetID"];
var msSinceEpoch = dateTimeInput.msSinceEpoch;
var hasDate = dateTimeInput.hasDate;
var hasTime = dateTimeInput.hadTime;
// The following requires you to configure the add-on to read user locale
// and timezone.
// See https://developers.google.com/workspace/add-ons/how-tos/access-user-locale
var userTimezoneId = event.userTimezone.id;
// Format and log the date-time selected using the user's timezone.
var formattedDateTime;
if (hasDate && hasTime) {
formattedDateTime = Utilities.formatDate(
new Date(msSinceEpoch), userTimezoneId, "yyy/MM/dd hh:mm:ss");
} else if (hasDate) {
formattedDateTime = Utilities.formatDate(
new Date(msSinceEpoch), userTimezoneId, "yyy/MM/dd")
+ ", Time unspecified";
} else if (hasTime) {
formattedDateTime = "Date unspecified, "
+ Utilities.formatDate(
new Date(msSinceEpoch), userTimezoneId, "hh:mm a");
}
if (formattedDateTime) {
console.log(formattedDateTime);
}
}
次の表に、パソコンとモバイル デバイスの選択ツールの UI の例を示します。選択すると、日付選択ツールで月単位のカレンダー UI が開き、ユーザーは新しい日付をすばやく選択できます。
ユーザーがパソコンで時間選択ツールを選択すると、プルダウン メニューが開き、30 分刻みの時間のリストが表示されます。ユーザーはこのリストから選択できます。特定の時刻を入力することもできます。モバイル デバイスで時刻選択ツールを選択すると、モバイル向けの組み込みの「時計」時刻選択ツールが開きます。
パソコン | モバイル |
---|---|
グリッド
グリッド ウィジェットを使用して、アイテムを複数列レイアウトで表示します。各アイテムには、画像、タイトル、サブタイトルを表示できます。追加の設定オプションを使用して、グリッドアイテム内の画像に対するテキストの位置を設定します。
グリッドに定義されたアクションにパラメータとして返される ID を使用して、グリッドアイテムを構成できます。
var gridItem = CardService.newGridItem()
.setIdentifier("item_001")
.setTitle("Lucian R.")
.setSubtitle("Chief Information Officer")
.setImage(imageComponent);
var cropStyle = CardService.newImageCropStyle()
.setImageCropType(CardService.ImageCropType.RECTANGLE_4_3);
var imageComponent = CardService.newImageComponent()
.setImageUrl("https://developers.google.com/workspace/
images/cymbal/people/person1.jpeg")
.setCropStyle(cropStyle)
var grid = CardService.newGrid()
.setTitle("Recently viewed")
.addItem(gridItem)
.setNumColumns(2)
.setOnClickAction(CardService.newAction()
.setFunctionName("handleGridItemClick"));
テキスト書式
一部のテキストベースのウィジェットは、シンプルなテキストの HTML 形式をサポートしています。これらのウィジェットのテキスト コンテンツを設定する際は、対応する HTML タグを追加するだけです。
サポートされているタグとその目的を次の表に示します。
形式 | 例 | レンダリングされた結果 |
---|---|---|
太字 | "This is <b>bold</b>." |
これは太字です。 |
イタリック体 | "This is <i>italics</i>." |
これは斜体です。 |
下線 | "This is <u>underline</u>." |
これは下線です。 |
取り消し線 | "This is <s>strikethrough</s>." |
これは |
フォントの色 | "This is <font color=\"#FF0000\">red font</font>." |
これは赤いフォントです。 |
Hyperlink | "This is a <a href=\"https://www.google.com\">hyperlink</a>." |
これはハイパーリンクです。 |
時間 | "This is a time format: <time>2023-02-16 15:00</time>." |
時刻の形式は です。 |
改行 | "This is the first line. <br> This is a new line. 」 |
これが最初の行です。 これは新しい行です。 |