このページでは、カードまたはダイアログ メッセージにテキストと画像を追加する方法と、メッセージ内のテキストと画像の表示方法を変更する方法について説明します。
カードビルダーを使用して、Chat アプリ用の JSON カード メッセージを設計し、プレビューします。
カードビルダーを開く前提条件
画像を追加する
Image
ウィジェットには、HTTPS URL でホストされている PNG または JPG 画像が表示されます。表示された画像の幅は表示されたカードの幅いっぱいになり、高さは画像のアスペクト比を維持するよう調整されます。Image
ウィジェットは、ユーザーが画像をクリックしたときに実行される onclick
アクションをサポートしています。onclick
アクションの例を次に示します。
OpenLink
のハイパーリンク(Google Chat デベロッパー向けドキュメントhttps://developers.google.com/chat
へのハイパーリンクなど)を開きます。- 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 の長方形の切り抜きを適用できます。
次の例では、5 つの画像がグリッド内に表示され、各画像に異なる cropStyle
が適用されています。
追加
Icon
ウィジェットは、組み込みアイコンまたはカスタム アイコンのいずれかを表します。カード メッセージとダイアログでは、次の方法で Icon
を使用できます。
- スタンドアロンのアイコンを表示する。
DecoratedText
ウィジェットの一部として、関連するテキストの前にアイコンを表示します。- アイコンを、
ButtonList
ウィジェットの一部としてインタラクティブなボタンとして表示します。
アイコンが組み込まれた Icon
コンポーネントで構成されるカードを次に示します。
次の表に、カード メッセージに使用できる組み込みアイコンを示します。
飛行機 | BOOKMARK | ||
BUS | 車 | ||
時計 | CONFIRMATION_NUMBER_ICON | ||
DESCRIPTION | ドル | ||
メールアドレス | EVENT_SEAT | ||
FLIGHT_ARRIVAL | FLIGHT_DEPARTURE | ||
ホテル | HOTEL_ROOM_TYPE | ||
招待 | MAP_PIN | ||
メンバーシップ | MULTIPLE_PEOPLE | ||
人物 | 電話 | ||
RESTAURANT_ICON | SHOPPING_CART | ||
スターを付ける | 店舗 | ||
チケット | TRAIN | ||
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
ウィジェットで構成され、シンプルな HTML 形式で 2 つの段落を表示するために使用されます。
装飾要素を含むテキストを表示する
DecoratedText
ウィジェットは、オプションのレイアウトと機能とともにテキストを表示します。次に例を示します。
startIcon
を使用してテキストの前にicon
を表示します。topLabel
を使用してテキストの前にタイトルを表示する。button
でクリック可能なボタンを追加するか、switchControl
で切り替え可能な切り替えを追加します。
DecoratedText
ウィジェットは、わかりやすくインタラクティブな方法で情報を表示する必要がある場合に使用します。このウィジェットは、連絡先カード、注文ステータスの更新、ワークチケット通知などのユースケースに最適です。
DecoratedText
ウィジェットは、単純なテキストの HTML 形式をサポートしています。これらのウィジェットのテキスト コンテンツを設定するときは、対応する HTML タグを含めます。サポートされている HTML タグの詳細については、カード形式のテキスト形式をご覧ください。
以下は、メールアドレス、オンライン ステータス、電話番号、ウェブサイトなどの連絡先情報を表示するために使用される DecoratedText
ウィジェットで構成されるカードです。
トラブルシューティング
Google Chat アプリまたはカードからエラーが返されると、Chat インターフェースに「エラーが発生しました」というメッセージが表示されます。または「リクエストを処理できません」と表示されます。Chat UI にエラー メッセージが表示されていなくても、Chat アプリまたはカードから予期しない結果(カード メッセージが表示されないなど)が生成される場合があります。
エラー メッセージは Chat UI に表示されない場合がありますが、Chat アプリのエラーロギングがオンになっている場合は、エラー メッセージとログデータを使用してエラーを修正できます。エラーの表示、デバッグ、修正については、Google Chat のエラーのトラブルシューティングと修正をご覧ください。