リモートワークで導入して良かったツール詳しく見る

【Power Automate】初心者向けアダプティブカードの作り方【Teams】

目次

この記事でやること

じょじお

この記事では、アダプティブカードデザイナーの使い方について解説します!

この記事でやること
  1. アダプティブカードの概要をざっくり学ぶ。
  2. アダプティブカードデザイナーの使い方をざっくり学ぶ。
  3. 作成したアダプティブカードをPower Automateで送信してみる。
想定する読者さん
  1. Teamsに画像やボタンの付いた目を惹くデザインのメッセージを送りたい方
  2. アダプティブカードを使ったことがない方。
  3. アダプティブカードデザイナーをこれから使ってみようと思っている方

アダプティブカードとは? (Teams)

TeamsやOutlookで共通して使えるメッセージのデータフォーマットのひとつです。JSONによって表現します。アダプティブカードデザイナー(後述)を使えば、HTMLやCSSの知識がなくても直感的に作成できます。

アダプティブカード
アダプティブカード

▲こんな感じで画像付きでアクションボタンが付いたリッチなメッセージカードを作成できます。

じょじお

アダプティブカードを使えばこんなリッチな画像やアクションボタンが付いたメッセージを送信することができます。

{
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "type": "AdaptiveCard",
    "version": "1.2",
    "body": [
        {
            "speak": "Tom's Pie is a Pizza restaurant which is rated 9.3 by customers.",
            "type": "ColumnSet",
            "columns": [
                {
                    "type": "Column",
                    "width": 2,
// ~ 以下略 ~

▲カードの実体はJSONです。

アダプティブカードを使うメリット

じょじお

下記はアダプティブカードのメリットです。

  • 普通のテキストメッセージより、画像や装飾を使ってリッチなデザイン表現ができるので目を引くことができる!
  • アクションボタンでユーザーの応答を受け取れる!
  • アダプティブカードデザイナーを使えばドラッグ&ドロップ操作を中心にノーコードでデザインできる!

アダプティブカードデザイナーとは?

じょじお

アダプティブカードデザイナーとは、カードデザインだけすればJSONを自動生成してくれるMicrosoftのWebツールです。

ぽこがみさま

ドラッグ&ドロップ操作のノーコードでカードがつくれるから便利だにゃ!

アダプティブカードデザイナー(Microsoft Adaptive Cards Designer)

アダプティブカードデザイナーの画面の見方と説明

アダプティブカードデザイナー
アダプティブカードデザイナー
じょじお

上の図はアダプティブカードデザイナーを開いた画面です。残念ながら今のところ日本語設定はできません(2021/10/17現在)

ぽこがみさま

各ペインの役割を説明してくにゃ~

プレビュー画面

公式の呼び方が不明だったので当サイトではプレビュー画面と呼ぶことにします。現在のカードの見た目が表示される画面です。このプレビュー画面にカード要素ペインから部品をドラッグ&ドロップで部品を付けたしながらカードを作成します。

Card Elements(カード要素ペイン)

アダプティブカードデザイナー
Card Elements(カード要素ペイン)

カードの中で使用できる要素(部品)群が表示された画面です。

ここから使いたい部品を選んでプレビュー画面にドラッグ&ドロップするとカード要素を追加できます。

利用できるカード要素
  • Containers:コンテナとカラムなど。
  • Elements:TextBlock(テキストブロック)、Image(画像)、ActionSet(アクションボタン)など。
  • Inputs:ユーザの入力を待ち受けるテキストボックスなど。

Card Structure(カード構造ペイン)

アダプティブカードデザイナー
Card Structure

現在作成中のカードに使用しているカード要素が一覧される画面です。

要素のトップは必ずAdaptiveCardになります。その中にTextBlockなど現在作成中のカード要素が表示されていることが分かります。特定のカード要素を選択して何かする時はここをクリックして選択することができます。このペインから要素を削除したり並べ替えたりすることはできません。

Element Properties(要素のプロパティ画面)

アダプティブカードデザイナー
Eelement Properties

カード要素のプロパティ画面です。

この画面で現在選択中のカード要素のパラメータを調整します。カード要素によって調整できるパラメータは異なります。例えば、画像ブロックでしたら画像URLや画像サイズなどを調整できます。テキストブロックでしたらフォントサイズや水平配置やテキストなどを調整できます。

Sample Data Editor(サンプルデータエディタ)

サンプルデータを張り付ける画面です。

Power Automateから使用するアダプティブカードを作成する範囲では使わないかと思います。私も使ったことがないため説明は省略させていただきます。

Card Payload Editor(カードペイロードエディタ)

JSONが表示される画面です。プレビュー画面でドラッグ&ドロップでカードを作成していくと、ここにJSONがリアルタイムで自動出力されます。カードのデザインとプロパティがすべて完成したら、ここのJSONをコピーしてPower Automateに渡します。このペインのデータを直接手で編集することもできますが、知識がない中で触っているとデータが壊れてしまう可能性もありますので、慣れないうちはやめた方が良いかなと思います。

ツールバー

  • New Card:カードを新規作成します。
  • Select Host App:どのアプリケーション用のカードを作成するのかを選択します。Teams用のカードを作成する場合はTeamsを選択します。
  • Host App Docs:アプリケーションのドキュメントを確認します。
  • Templating Docs:テンプレート言語のドキュメントです。
  • Undo,Redo:アンドゥ、リドゥをします。
  • Copy card Payload:JSONをクリップボードにコピーします。
  • Preview Mode:現在のカードをプレビューします。実際のTeamsなどのアプリケーション投稿されたときの見た目に近い感じで表示されます。プレビューモードでは、カードの編集はできません。

▲ツールバー右側の説明です。

  • Target version:アダプティブカードのバージョンを選択できます。

アダプティブカードデザイナーで作業を保存するには?

アダプティブカードデザイナーは、作業を途中保存することができません。
一旦作業を中断し、時間経過後に再開したい場合はカードペイロードエディタのJSONを自分でどこかに保存しておき、作業再開時に カードペイロードエディタ にJSONを張り付けることで継続して作業ができます。

アダプティブカードデザイナーの使い方

じょじお

アダプティブカードデザイナーを使って簡単なアダプティブカードを作成しながら作成手順について解説します。

アダプティブカード
今回作成するアダプティブカード
ぽこがみさま

↑こんなのをつくるよ。

STEP
アダプティブカードデザイナーを開きます。
STEP
「Select host app」から「Microsoft Teams」を選択します。
アダプティブカードデザイナー

「 Select host app 」から「Microsoft Teams」を選択します。「Microsoft Teams Light」と「Microsoft Teams Dark」の2種類ありますがどちらを選択しても作成されるカードは変わりません。

ここでたとえば誤ってOutlookを選んだからといって、Teamsで使えないアダプティブカードが作成されるかというとそうではありません。ここの設定はユーザの環境によってどう見えるかをシミュレートしているだけです。どれを選んでも出力されるJSONに変わりはありません。

じょじお

異なるアプリで共通して使えるというところもアダプティブカードの良いところです。

STEP
カードバージョンを選択します。
Adaptive Cards

現在Flow botから送信できるのはver1.4以下、Userから送信できるのはver1.3 以下 です。1.2か1.3を選んでおけばよいかなと思います。この数字は今後変わっていくかと思います。

STEP
「New Card」をクリックして、カードを新規作成します。
アダプティブカードデザイナー
STEP
テンプレートの中からNew Cardを選択します。
アダプティブカードデザイナー

▲アダプティブカードデザイナーではいくつかのテンプレートをカスタマイズしながらカードを作成することができます。今回はNew Cardを選択して1からカードを作成します。

アダプティブカードデザイナー

▲からっぽのカードが作成されます。

STEP
テキストブロックを追加します。
アダプティブカードデザイナー

左側のカード要素ペインから、テキストブロックをプレビューペインにドラッグ&ドロップで追加します。

STEP
要素プロパティペインでパラメータを調整します。
アダプティブカードデザイナー
アダプティブカードデザイナー
  • Text:表示されるテキストです。
  • Size:文字サイズです。ここでは「ExtraLarge」を選択しました。
  • Color:文字色です。ここでは「Attention」(赤)を選択しました。
  • Subtitle:サブタイトルにするかどうかです。ここではチェックオンにしました。
STEP
もうひとつテキストブロックを追加します。
アダプティブカードデザイナー

▲テキストブロックを追加します。

アダプティブカードデザイナー

▲要素プロパティペインでパラメータを調整します。

STEP
画像ブロックを追加します。
アダプティブカードデザイナー
STEP
要素プロパティペインで画像のURLを設定します。
アダプティブカードデザイナー

▲画像のURLを指定します。今回はいらすとやさんからお借りします。

アダプティブカードデザイナー

▲パラメータを調整します。下記のように設定しました。

  • Horizontal arignment:Center
  • Size:Large
STEP
ActionSetを追加します。
アダプティブカードデザイナー
STEP
ActionSetを選択して要素プロパティペインでアクションを追加します。
アダプティブカードデザイナー

▲ActionSetはアクションボタン要素です。ボタンを押したときにどのように動作するかは、要素プロパティペインで4つのアクションから選択することができます。ここでは「Action.OpenUrl」アクションを選択します。

Action.OpenUrlは、名前のとおり指定したURLをブラウザで開くアクションです。

STEP
Action.OpenUrlのパラメータを設定します。
アダプティブカードデザイナー

▲カード構造ペインから「Action.OpenUrl」をクリックして選択します。要素プロパティペインでTitleとURLを設定します。

  • Title:ボタンに表示するテキストを設定します。
  • URL:ボタンを押したときに遷移するWebページのURLを設定します。
STEP
完成したカードを確認します。
アダプティブカードデザイナー

▲カードが完成しました。最後は必ずメニューバーにある「Preview Mode」を押して見た目を確認してください。画像の表示具合が若干編集モードと異なることがあるからです。

STEP
メニューバーの「Copy Card Payload」をクリックしてJSONをコピーします。
アダプティブカードデザイナー

▲デザインに問題がなければJSONを保存しましょう!この後のPower Automateフローの作成作業の中で使用するのでどこかに保存しておいてくださいね。

Power Automateでフローを作成します。

STEP
フローを新規作成します。

Power Automateホーム画面からフローを新規作成します。今回は「スケジュール済みクラウドフロー」で作成します。フローの種類は下記の記事で解説していますのでよろしければご覧ください。

STEP
Teamsコネクタの「チャットやチャネルにアダプティブカードを投稿する」アクションを追加します。
チャットやチャネルにアダプティブカードを投稿する
STEP
アクションのパラメータを設定します。
Power Automate Teamsコネクタ
  • 投稿者:メッセージをFlowBotから送信するか、自分から送信するかを指定します。
  • 投稿先:個人チャットかチャットグループかチャンネルか、投稿先を選択します。投稿者を自分(User)にした場合、個人チャットを選択することができません。
  • Team:投稿先をチャネルにした場合、チームを選択します。
  • Channel:投稿先をチャネルにした場合、チャネルを選択します。
  • Adaptive Card:アダプティブカードデザイナーで作成したJSONをここに張り付けます。
STEP
テスト実行します。

テスト実行してメッセージを受信できたかを確認します。

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

じょじお

一応今回作成したJSONを下に置いておきます。テストなどにご自由にお使いください。

{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2",
    "body": [
        {
            "type": "TextBlock",
            "text": "来週のスケジュール送信依頼",
            "wrap": true,
            "size": "ExtraLarge",
            "color": "Attention",
            "isSubtle": true
        },
        {
            "type": "TextBlock",
            "text": "お疲れさまです。来週のスケジュールを送信お願いします。",
            "wrap": true
        },
        {
            "type": "Image",
            "url": "http://1.bp.blogspot.com/-gqRVYh1GDtk/U-8HCTnbliI/AAAAAAAAk-I/MHQDeHu8Qso/s800/business_ojigi_woman.png",
            "size": "Large",
            "horizontalAlignment": "Center"
        },
        {
            "type": "ActionSet",
            "actions": [
                {
                    "type": "Action.OpenUrl",
                    "title": "画像ページを開く",
                    "url": "http://www.irasutoya.com/2014/09/blog-post_894.html"
                }
            ]
        }
    ]
}

(番外編)TeamsのIncoming Webhook宛てにアダプティブカードを投稿する方法

じょじお

こちらの記事で解説していますのでよろしければご覧ください。

アダプティブカードのその他の表現

アダプティブカードではマークダウンを使って、テキストの装飾をしたり、リンクテキストを作成したりすることができます。

参考:Microsoftドキュメント https://docs.microsoft.com/ja-jp/adaptive-cards/authoring-cards/text-features

アダプティブカードのエラー

Teamsに対応していないカード要素があります。

▲mediaタイプのカード要素などは、対応していないようでした。

「We’re sorry this card couldn’t be displayed.」

▲「We’re sorry this card couldn’t be displayed.」アダプティブカードのバージョンを確認してください。アダプティブカードデザイナーの現在のデフォルトのバージョンは1.5ですが、Teamsの現在のメジャーバージョンは1.2です。1.2で試してください。(2021/10/24現在)

Teamsで全幅(フルワイド)表示にするには?

テキストを折り返したくないときなど、カードを全幅表示にしたい時があるかもしれません。Teamsで全幅表示にするには、下記のように"msTeams": { "width": "full" }をJSONに含めます。現在アダプティブカードデザイナーでは対応していないようなので、手入力で挿入する必要があります。

全幅表示の例
{
    "type": "AdaptiveCard",
    "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
    "version": "1.2",
    "msTeams": {
        "width": "full"
    },
    "body": [
以下省略

アダプティブカードのドキュメント

Microsoft Teams のカードの書式設定

まとめ

じょじお

以上、この記事ではアダプティブカードデザイナーを使ってアダプティブカードを作成する方法について解説しました。

Power Automate学習教材

Power AutomateをKindleで学びたい方はコチラ

▲Kindleと紙媒体両方提供されています。デスクトップフロー、クラウドフロー両方の解説がある書籍です。解説の割合としてはデスクトップフロー7割・クラウドフロー3割程度の比率となっています。両者の概要をざっくり理解するのにオススメです。

▲Power Automate for Desktopの基本をしっかり学習するのにオススメです。RPA界隈では有名なRPAエンジニア集団である『ロボ研』さんが監修されている解説書です。テスト用の業務Webシステム/デスクトップ業務アプリを使いながら実践形式で学習できる点が一番のメリットかなぁと思います。

Power Automateを動画で学びたい方はコチラ

▲Udemyで数少ないPower Automateクラウドフローを主題にした講座です。セール時は1500円~2000円弱の価格になります頻繁にセールを実施しているので絶対にセール時に購入してください。満足がいかなければ返金保証制度がありますので安心してご購入いただけます。

ノンプログラマーでも自動化スキルを身につける。

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!
目次
閉じる