キャンセル
次の結果を表示 
次の代わりに検索 
もしかして: 
cancel
1206
閲覧回数
1
いいね!
0
コメント
Kenichi Ogami
Cisco Employee
Cisco Employee

 

はじめに

アダプティブカード (Adaptive Cards) は、カード型の小さな UI コンテンツを様々なプラットフォーム間でやりとりできるようにフォーマットを定義したものです。フォーマットは JSON で記載されます。 
 
このドキュメントでは、Webex Messaging API (Webex Teams API) で利用可能なアダプティブカードのサンプルを紹介します。
 

デザインツール

Webex では、アダプティブカードの作成のために デザインツール が用意されています。デザインツールを使うことによって視覚的に確認しながら JSON フォーマットの記述を作成することができます。

csc_adaptive.jpg

 

[Webex TeamsのBotが投稿するメッセージの視認性や操作性を上げる3つのポイント] にも記載がありますが、デザインツールで作成したアダプティブカードの JSON オブジェクトは、デザインツールの左上の [Copy card JSON] ボタンを押すと、クリップボードにコピーされます。そして、以下の「#### この部分にAdaptive Card のJSONを入れる ####」の部分に、コピーした JSON オブジェクト( "{" ではじまって "}" で終わる文字列)を入れて送信することで、アダプティブカードの UI が投稿されます。

{
  "roomId": "投稿先のスペースID",
  "markdown": "**カードを投稿しました**",
  "attachments": [
    {
      "contentType": "application/vnd.microsoft.card.adaptive",
      "content": 
        #### この部分にアダプティブカードの JSON を入れる ####
    }
  ]
}

 

アダプティブカードのサンプル

アダプティブカードのサンプルを紹介します。Card Sampler BOT を使っても確認できます。また、CardSchool BOT でも色々試せますのでお試しください。アダプティブカードの Postman のサンプルはこちらにあります。

 

画像の挿入について

画像は images の中で "url": "https://i.postimg.cc/DZCfGLXQ/pancakes.jpg" のようにインターネットからアクセスできる URL で指定する必要がありますが、画像を Base64 データに変換して、"https://〜" の代わりに "data:image/png〜" の形式で埋め込むことができます。ただし、最大メッセージ数を超える可能性があるため、なるべく画像サイズを小さくしてから変換するとよいでしょう。参考記事はこちら

 

Activity Update

Activity Update

update.jpg

 

Agenda

Agenda

agenda.jpg

 

Calendar Reminder

Calendar Reminder

calendar_reminder.jpg

 

Flight Details

Flight Detail

flight_details.jpg

 

Flight Itinerary

Flight Itinerary

flight_itenerary.jpg

 

Flight Update

Flight Update

flight_update.jpg

 

Food Order

Food Order

food_order.jpg

 

Input

Input

input.jpg

 

Image Gallery

Image Gallery

image.jpg

 

Input Form

Input Form

input_form.jpg

 

Restaurant

Restaurant

restaurant.jpg

 

Solitaire Cyber Ops

Solitaire Cyber Ops

solit.jpg

 

Sporting Event

Sporting Event

sporting_event.jpg

 

Stock Update

Stock Update

stock_update.jpg

 

Weather Compact

Wether Compact

weather_compact.jpg

 

Weather Large

Wether Large

weather_large.jpg

 

 

 

 

Getting Started

検索バーにキーワード、フレーズ、または質問を入力し、お探しのものを見つけましょう

シスコ コミュニティをいち早く使いこなしていただけるよう役立つリンクをまとめました。みなさんのジャーニーがより良いものとなるようお手伝いします

Quick Links