Adaptive Cards
Adaptive Cardsに画像を表示する方法はとてもたくさんあります。どの方法でもImage要素を利用するのは共通ですが、そのプロパティであるurlになにを指定するかによってやり方とメリットデメリットがあります。 まずこれまでの方法をおさらいしましょう。 画…
Adaptive cards are a way to provide an interactive UI for Teams channels or user chats, and Power Automate allows you to do this without coding. For example, when a list item or task is created, you can instantly notify Teams about it and …
裏技だけどそのうちきっと公式に対応すると思います。（たぶん） 【2021/07/06 加筆】 そうこう言っている間に1週間たらずで対応されました。 現在はプレビュー環境のみですが、ほどなくして通常の環境でも利用可能になると思われます。 はじめに Power Auto…
『LIFF を HTMLとLIFF SDKで作れるのはわかったけど、画面作るの大変だな・・。』と悩んでいたのですが、Adaptive Cards使えばデザイナーあるな！と思ったのでやってみました。 今回は以前書いた以下2つの投稿を組み合わせたものです。 mofumofupower.hatena…
前回: https://mofumofupower.hatenablog.com/entry/adaptivecard-rendering-html3 ここまでで、HTML上で Adaptive Card を表示するために必要な要素は大体カバーしました。 実際にどう使うかを見ていきます。 1. Azure Blob ストレージにおいて SharePoint …
【2021/6/1】 Information maskingの挙動について追記 現時点の対応状況 新機能 Flow bot Webhook 1. Building full-width Adaptive Cards 〇 〇 2. Type-ahead (auto–complete support) × 〇 3. Information masking × 〇 4. Expanded (Stage) view for ima…
前回: https://mofumofupower.hatenablog.com/entry/adaptivecard-rendering-html2 前回までで、単純なカードの表示とスタイルの設定を行いました。 <html> <head> <link rel="stylesheet" href="ここにCSSファイルのパス" /> <script type="text/javascript" src="https://unpkg.com/adaptivecards/dist/adaptivecards.js"></script> </link></head></html>
前回: HTML上で Adaptive Card を表示する - (1) 単純なカード表示 - MoreBeerMorePower 前回は非常に簡単な Adaptive Card を表示するための JavaScript SDK を利用した HTML を紹介しました。 カードを表示するだけであればそのままでも問題ないのですが、…
代表的なサンプルカードをここに挿入してみます。 // Set card json const card = { "type": "AdaptiveCard", "body": [ { "type": "TextBlock", "size": "Medium", "weight": "Bolder", "text": "Publish Adaptive Card Schema" }, { "type": "ColumnSet", …
Adaptive Cards は JavaScript SDK を提供しているので、これを読み込むことで非常に簡単に Adaptive Card をHTML上で表示することができます。 docs.microsoft.com 「Adaptive CardsはHTMLとかCSSとか知らなくてもカード型UIを表示できるのが強みじゃないん…
以前、ユーザー や Flow bot として Power Automate から Teams にメッセージを投稿するアクションが統一されます！という投稿をしました。 mofumofupower.hatenablog.com 今回は通常のメッセージに加えて、Teams に アダプティブカード を送信するアクショ…
Teamsのモバイルアプリは位置情報 (現在地だけでなく、地図上の座標) をチャットに投稿できるのですが、これを利用して指定された地点の周辺のレストランを検索してリストを提示してくれるBotを Power Automateで作ってみました。 動作した際のキャプチャは…
はじめに Power Automateで承認ワークフローを作成するときに利用するコネクター「承認」に関する発展的な内容です。 ※Power Automate で「承認」コネクター利用については 公式のDocs をご確認ください。 承認アクションは通知を有効にすると承認者のメール…
アジェンダ 2020年9月のAdaptive Cards Community Call のメモです。 2020 Q4のロードマップ Adaptive Component紹介 2020 Q4のロードマップ これまでと同様、ロードマップ（というか対応予定かどうか）は以下のサイトで公開されているという案内でした。 Pl…
はじめに Microsoft 365 管理センターの「メッセージセンター」に最近 Planner との同期設定が追加されました。メッセージセンターに届いたメッセージの中で、管理者側でアクションが必要なものをタスク化することが目的です。 この同期機能についてはすでに…
更新情報 [2021/06/07] タイムゾーン変換に関して仕様変更らしき箇所を補足しました はじめに 最近では予約XXがいろいろ提供されていますね。Twitterでの予約ツイート、Outlookでの予約送信などなど。でもTeamsにはない！！ ということで今回はTeamsのメッセ…
はじめに 自分用の簡単な備忘録です。 Microsoft Teamsの Incoming Webhook ではメッセージでMarkdown形式がサポートされていることがよく知られています。 このほかに、各種カードの送信にも対応していますが、方法があまり書かれていないので簡単に記載し…
[2020/08/12: 一部内容を修正しました。ShowCardは入れ子にできた] はじめに Adaptive Card を作成するうえで少し厄介なアクション、ToggleVisiblity と ShowCard について、前回は ToggleVisiblityの利用方法と簡単な活用方法を紹介しました。 Adaptive Car…
![はてなブックマーク - Adaptive Cards のアクション [ToggleVisibility] と [ShowCard] を使ってみよう - ShowCard 編](https://b.hatena.ne.jp/entry/image/https://mofumofupower.hatenablog.com/entry/2020/07/30/063608)
はじめに Adaptive Cardsのデザイナーを使っていて、最も縁遠い存在なのはおそらく Action.ToggleVisibility と Action.ShowCard ではないでしょうか！（私見） この2つはプロパティペインに設定が足りないので、CARD PAYLOAD EDITORを直接編集しなければい…
![はてなブックマーク - Adaptive Cards のアクション [ToggleVisibility] と [ShowCard] を使ってみよう - ToggleVisiblity 編](https://b.hatena.ne.jp/entry/image/https://mofumofupower.hatenablog.com/entry/2020/07/29/112442)
はじめに Adaptive Cards を利用して Teams にメッセージを投稿する場合、完全に固定のカードを利用するケースはそれほど多くないかなと思います。 多くは、何らか別のデータソースがあって、その情報を加工してカードにし投稿するというシナリオになります…
最近ずっとこれをやっていて、ブログ滞っていましたが、基礎編が完成しましたので、こちらでもお知らせです。 基礎編としては以下の内容をカバーしています。 基礎編 Adaptive Cardsの概要 Adaptive Cards デザイナーの利用 Microsoft Teams, Outlookへのカ…
はじめに Power AutomateでTeams向けアクションに「ユーザーの@メンショントークンを取得する」が追加されたことに伴い、以前の方法よりも大幅に手軽に@メンション付きのメッセージを送ることができるようになりました。 対象のアクションは以下の4種です。 …
はじめに 7/6に自分の環境では利用できるようになった、Microsoft Teamsの新しいトリガー『選択したメッセージ』ですが、これを使って比較的簡単な自動化を作ってみました。 前の投稿↓ Teamsのメッセージ選択時トリガーがPower Automateに追加されました！ -…
最近Power AutomateとTeamsの関連で、ずっとAdaptive Cardsを研究しているのですが、あまり交流がない。 そして作例を披露しあう場がない！ということで勢いあまってFacebookでグループを作成いたしました！ https://www.facebook.com/groups/98830380161283…
はじめに ※全テナント反映されているかはわかりません。 (投稿時点) Microsoft TeamsとのIntegrationが強化されているPower Platformですが、Power Automateで注目のトリガーが利用可能になりました！ 選択したメッセージ これまで、SharePointやOneDriveや…
はじめに 投稿時点ではまだ登壇前ですが、JPPUG Summer 20でお話する内容の補足記事です。 イベントへの参加登録・詳細は以下Connpassからどうぞ powerapps.connpass.com なかなか、デモや動画だと式を追いかけられないとか、映像が荒いとかあると思いますの…
Adaptive Cards Management System Adaptive Cards management system (以下、ACMS ) は、2つの構成要素からなりたっています。 フロントエンドのカード管理ポータル カードデザイナーやフロントエンドの開発者はAdaptive CardsのテンプレートをWeb画面で作…
以前、コロナ対策エンジニアのほうでウェビナーやったときの資料や動画を置いていなかったので、こちらでまとめておきます。 つくったもの Power AutomateのMicrosoft TeamsコネクターにあるAdaptive Cardsの送信＆ユーザーからのレスポンス待ち受けを利用し…
Adaptive Cards のTemplatingとは？ 端的に言えば、Adaptive Cardsのレイアウトとそこに表示するデータの分離です。 レイアウト側に ${title}のような文字を入れておいて、データ側で {"title":"This is title"}のように指定すると、生成されたカードには Th…
お友達のてっちゃんと太田さんが教えてくれたので、自分のブログをMicrosoft Searchを使って検索→Adaptive Cardsで結果をカスタマイズする方法を残しておきます。 てっちゃん、太田さんありがとうございました！ 検索結果のカスタマイズ Microsoft Searchで…
