このページでは、カードやダイアログ メッセージにテキストや画像を追加する方法について説明します。 メッセージ内でのテキストや画像の表示方法を変更できます。
カードビルダーを使用して、Chat 用アプリ用の JSON カード メッセージを設計し、プレビューします。
カードビルダーを開く前提条件
インタラクティブ機能を有効にする Google Chat アプリ。新しい 次のいずれかのクイックスタートを完了してください。 使用するアプリ アーキテクチャ:
- Google Cloud Functions を使用した HTTP サービス
- Google Apps Script
- Google Cloud Dialogflow CX
- Google Cloud Pub/Sub
画像を追加する
「
Image
ウィジェット
は、HTTPS URL でホストされる PNG または JPG 画像を表示します。
表示画像の幅が、表示されたカードの幅全体に表示される。
画像のアスペクト比が維持されるように高さが調整されます。Image
ウィジェット
サポート
onclick
件のアクション
ユーザーが画像をクリックしたときに発生するイベントです。onclick
アクションの例:
- ハイパーリンクを開く
OpenLink
Google Chat デベロッパー向けドキュメントへのハイパーリンクやhttps://developers.google.com/chat
。 - アプリを実行する アクション API の呼び出しなど、カスタム関数を実行する API です。
Image
ウィジェットには次の制限があります。
- PNG と JPG の画像のみがサポートされます。
- ホスト URL は
HTTPS
にする必要があります。 - カードのパフォーマンスを向上させるには、画像サイズを 2 MB 以下にすることをおすすめします。
以下は、Image
ウィジェットで構成されるカードです。表示される
Google Chat デベロッパー向けドキュメントのランディング ページの画像。ユーザーが
Google Chat デベロッパー向けドキュメントが新しいタブで開きます。
画像コンポーネントを追加する
Image
ウィジェットは、スタイル設定が制限された画像です。「
imageCompent
ウィジェット
を使用すると、画像に cropStyle
と borderStyle
を適用できます。
次の例は、グリッド内に 2 つの画像を示しています。画像の 1 つは 切り抜き:
画像を切り抜く
画像の形状を調整するには、
cropStyle
。
画像に適用する図形は次のとおりです。
- 正方形の切り抜きを適用するには、
SQUARE
を使用します。 - 円形切り抜きを適用するには、
CIRCLE
を使用します。 RECTANGLE_CUSTOM
を使用して、カスタム アスペクトを持つ長方形の切り抜きを適用する できます。たとえば、RECTANGLE_4_3
を使用すると、長方形の切り抜きを適用できます。 アスペクト比 4:3 の動画を
次の例は、異なる cropStyle
を持つグリッド内の 5 つの画像を示しています。
適用しています。
追加
「
Icon
ウィジェット
または
組み込み
アイコンまたは
カスタム
アイコンをクリックします。Icon
は次の場所で使用できます。
カード メッセージ
および
ダイアログ
次のように変更します。
- スタンドアロンのアイコンを表示します。
- 関連するテキストの前にアイコンを表示する
DecoratedText
ウィジェット。 - アイコンをインタラクティブ ボタンとして表示し、
ButtonList
ウィジェット。
以下は、アイコンが組み込まれた Icon
コンポーネントで構成されるカードです。
次の表に、カード メッセージで使用できる組み込みアイコンを示します。
航空機 | ブックマーク | ||
バス | 車 | ||
時計 | CONFIRMATION_NUMBER_ICON | ||
DESCRIPTION | ドル | ||
メールアドレス | EVENT_SEAT | ||
FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
ホテル | HOTEL_ROOM_TYPE | ||
INVITE | MAP_PIN | ||
メンバーシップ | MULTIPLE_PEOPLE | ||
人物 | 電話 | ||
RESTAURANT_ICON | SHOPPING_CART | ||
スターを付ける | 店舗 | ||
チケット | 電車 | ||
VIDEO_CAMERA | VIDEO_PLAY |
書式付きテキストの段落を追加する
「
TextParagraph
ウィジェット
任意の HTML 形式でテキストの段落を表示します。設定時に
対応する HTML タグのみを含めます。
サポートされている HTML タグの詳細については、
カードのテキストの書式設定。
たとえば、段落テキストでは次の書式を使用できます。
- HTML
<b>
、<u>
、<i>
を使用して太字、下線、斜体のテキストを表示する できます。 - HTML
<a href="https://www.google.com">hyperlinks</a>
を使用しているウェブサイトへのリンク。 - HTML の
<font color="#ea9999">font tags</font>
で色を追加します。
各 TextParagraph
ウィジェットは新しい段落としてレンダリングされます。
HTML の <p>
タグと同様です。
以下は、2 つの TextParagraph
ウィジェットで構成されるカードです。これを使用して以下を行います。
2 つの段落をシンプルな HTML 形式で表示します。
折りたたみ可能な段落テキストを追加する
段落テキストは折りたたみ可能で、ユーザーは必要に応じて詳細情報を確認できます。 このウィジェットは、長いコンテンツを提示したり、 選択すると詳細に確認できるため、動的かつインタラクティブな 体験できます
装飾的な要素を含むテキストを表示する
「
DecoratedText
ウィジェット
は、オプションのレイアウトとケーパビリティとともにテキストを表示します。例:
startIcon
を使用してテキストの前にicon
を表示します。topLabel
を使用すると、テキストの前にタイトルを表示できます。button
でクリック可能なボタン、またはswitchControl
で切り替え可能な切り替えボタンを追加します。
DecoratedText
ウィジェットは、
インタラクティブに操作できます。このウィジェットは、
連絡先カード、注文ステータスの更新情報、作業チケット通知などがあります。
DecoratedText
ウィジェットでは、単純な HTML 形式のテキストがサポートされています。設定時に
対応する HTML タグのみを含めます。対象
サポートされる HTML タグの詳細については、
カードのテキストの書式設定。
以下は、表示に使用する DecoratedText
ウィジェットで構成されるカードです。
連絡先情報(メールアドレス、オンライン ステータス、電話番号、
ウェブサイト:
トラブルシューティング
Google Chat アプリまたは card がエラーを返した場合、 Chat のインターフェースに「エラーが発生しました」というメッセージが表示されている。 または「リクエストを処理できません」が表示されます。場合によっては、Chat の UI が エラー メッセージは表示されませんが、Chat 用アプリまたは 予期しない結果が生じた場合たとえば、カード メッセージに 表示されます。
Chat UI にエラー メッセージが表示されない場合がありますが、 エラーの修正に役立つ、わかりやすいエラー メッセージとログデータ Chat 用アプリのエラーロギングが有効になっている場合。表示のヘルプについては、 エラーの修正について詳しくは、このモジュールの Google Chat のエラーのトラブルシューティングと修正
関連トピック
- カードとダイアログを使用する Chat アプリのサンプルを見る。
Image
imageCompent
cropStyle
Icon
TextParagraph
DecoratedText