JA
English
Deutsch
Español
Français
Italiano
Português
Nederlands
Polski
Bahasa Indonesia
Русский
Українська
العربية
עברית
한국어Teams でアダプティブ カードを初めて作成するためのステップ バイ ステップ ガイド
By Mirko Peters · · Updated
ブログへようこそ、お帰りなさい！チャットの通知、チャネルのメッセージ、自動化された警告が絶え間なく届き、すっかり圧倒されてしまったことがあるなら、きっと…
Automatically translated with AI from the original post. Read the English original
ブログへようこそ。チャットの通知、チャネルのメッセージ、自動化された警告が絶え間なく届き、圧倒されたことがある方は、決して少数派ではありません。現在のデジタル ワーカーは膨大な量の情報を扱っており、1 時間に数十件もの通知を受け取ることも珍しくありません。こうした絶え間ない情報の流入によって集中力は途切れ、常に作業を切り替えることを強いられ、一日の終わりには精神的に消耗してしまいます。ポッドキャストのエピソードBuild Actionable Teams Notifications with Adaptive Cardsでは、役に立たない静的なアラートをやめ、スマートでインタラクティブなメッセージに置き換えることで、コミュニケーションの進め方を大きく変えられることを取り上げました。
今回は、その話を実践的な形で掘り下げます。このガイドでは、Microsoft Teams 向けの最初のアダプティブ カードを作成する手順を解説します。社内承認の効率化、重大なインシデント アラートの配信、チームの日常業務のスムーズ化など、目的は何であれ、アダプティブ カードを使いこなすことは Microsoft 365 エコシステムで身につけられる、最も効果の大きいスキルの一つです。さっそく、始めるために必要なことを見ていきましょう。
基本を理解する: 従来の通知が機能しない理由
実際に作り始める前に、解決しようとしている根本的な問題を理解しておくと役立ちます。Microsoft Teams の標準的な通知の多くは、何かが起きたことを知らせてくれますが、その場で応答する手段は提供しません。新しい購買発注書の承認が必要だという通知を受け取ったと想像してください。通常のテキスト通知では、通知を読んだうえで、Web ブラウザーを開き、別の業務アプリケーションにサインインし、該当のレコードまで移動して、最後に「承認」をクリックする必要があります。
この多段階の操作は集中を妨げ、貴重な時間を奪います。こうした中断が 1 時間に 60 回起きていると想像してみてください。生産性は失われてしまいます。アダプティブ カードは、アプリケーションのインターフェイスをチャット ウィンドウ内に直接組み込むことでこの問題を解決します。Teams のクライアントを離れることなく、データの確認、フォーム入力、アクション ボタンのクリックができます。ただし、これらのカードを確実に実装するには、カードを形にするための基盤となるツールと前提条件を理解しておく必要があります。
前提条件とツール
アダプティブ カードの作成には、大規模なソフトウェア開発の経験は必要ありません。ただし、Microsoft が提供する標準のオーサリング ツールセットには慣れておく必要があります。適切なユーティリティを手元にそろえておけば、構想から展開までの設計プロセスがスムーズに進みます。
カード デザイナー向けの主要なリソース
- Adaptive Card Designer: ブラウザーで動作するビジュアル ツールです。要素をドラッグ アンド ドロップで配置し、デバイスごとのライブ プレビューを確認でき、基盤となる JSON スキーマを即座に生成できます。
- Microsoft Teams UI Kit (Figma): デザイン ガイドライン、テーマ設定、アクセシビリティの基準、各クライアント アプリケーションにおけるレスポンシブなサイズ設定に欠かせないリソースです。
- 公式ドキュメント ハブ: サポートされているスキーマのバージョン、カード アクション、Teams 固有のレンダリング上の制約を確認するための決定版ガイドです。
- サンプル テンプレート: オープンソース コミュニティが提供する事前構築済みの JSON テンプレートです。承認、投票、リッチ メディア アラートなどのよくあるパターンを、ゼロから作るより早く始められます。
デザイン環境の準備ができたら、カードの視覚的なレイアウトとデータ構造の組み立てを始めることができます。
アダプティブ カードを作成する
アダプティブ カードの作成は、主にレイアウトの構成と JSON 構造の作業です。アダプティブ カードはプラットフォームに依存しないスキーマを使用するため、1 つのカード定義で Windows、macOS、iOS、Android、Web クライアントのいずれにもネイティブに表示できます。
Adaptive Card Designer を使用する
最初のカードを作る最も簡単な方法は、Web ベースのデザイナー ツールを使うことです。次の簡単な手順に従ってください。
- Web ブラウザーで公式の Adaptive Card Designer に移動します。
- 基盤となるように、基本的な通知や入力フォームなどのスターター テンプレートを 1 つ選択します。
- フォントサイズ、間隔、ボタンのタイトルなどのプロパティを設定し、組織のコミュニケーションスタイルに合わせます。
- プレビューのターゲットを「Microsoft Teams」に切り替えて、エンドユーザーにカードがどのように表示されるかを確認します。
- コードビューのパネルから、自動生成された JSON コードをコピーします。
JSON 構造の基本を理解する
すべての Adaptive Card は、最終的に構造化された JSON ペイロードによって動作します。以下は、基本的な挨拶とアクションボタンを定義する、初心者向けに簡単な Adaptive Card JSON スキーマの例です。
{
"type": "AdaptiveCard",
"version": "1.4",
"body": [
{
"type": "TextBlock",
"text": "Welcome to your first adaptive card!",
"size": "Medium",
"weight": "Bolder"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Acknowledge"
}
]
}この例では、ルートオブジェクトがカードの種類とスキーマのバージョンを指定しています。body 配列にはテキストブロックなどの視覚的な要素が含まれ、actions 配列には、ユーザーがバックグラウンドのワークフローをトリガーできるように、Action.Submit や Action.OpenUrl などの対話型ボタンを定義しています。
Bot または Graph API でカードを送信する
JSON ペイロードがデザイナーで確定し、テストが完了したら、次のステップは、そのカードを Microsoft Teams 内でユーザーに直接届けることです。技術アーキテクチャに応じて、展開方法はいくつか選択できます。
ローコードのワークフロー連携には Power Automate を利用できます。エンタープライズ向けの高度な配信には、カスタム ボットや Microsoft Graph API を利用することもできます。登録済みの Azure AD アプリケーションと Bot Framework REST API を組み合わせると、対話型カードを特定のユーザーや注目度の高いチャネルへ自動的に送信できます。
Adaptive Card を Bot Framework のメッセージ添付ファイルに含める場合のペイロード構造の例は、次のとおりです。
{
"type": "message",
"attachments": [
{
"contentType": "application/vnd.microsoft.card.adaptive",
"content": {
"type": "AdaptiveCard",
"version": "1.4",
"body": [
{
"type": "TextBlock",
"text": "New Service Request Pending Review"
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Approve"
},
{
"type": "Action.Submit",
"title": "Reject"
}
]
}
}
]
}このペイロードを、SharePoint リストへの新しい行の追加や、Power Automate でのシステム実行の失敗などの自動トリガーに接続すると、受動的なアラートを、意思決定を促す能動的なプロンプトに変えることができます。
カードのテストとデバッグ
展開の前には、必ず綿密なテストを行う必要があります。Teams デスクトップ、モバイルアプリ、Outlook のメールクライアントなど、クライアントごとに異なるホスト構成で Adaptive Card がレンダリングされるため、わずかなレイアウトの不具合が発生することがあります。
カードをデバッグする際は、次のベストプラクティスを念頭に置いてください。
- スキーマのバージョンを検証する: カードのバージョンが、現在の Microsoft Teams クライアントのアーキテクチャでサポートされている機能と一致していることを確認します。
- テキストのレンダリングを確認する: 変数のデータバインディングが正しく反映されていること、データフィールドが空の場合に余白が生じないことを確認します。
- 複数のデバイスでテストする: 幅の狭いモバイル端末でカードをプレビューし、列のレイアウトとボタンのセットが、不自然な折り返しなく縦に積み重なって表示されることを確認します。
- Submit アクションを処理する: ユーザーのボタン操作によってトリガーされる受信 JSON ペイロードを、バックエンドのサービスが適切に処理することを確認します。
まとめ
Microsoft Teams の日々の体験を変えるということは、摩擦を減らし、デジタルなノイズを断ち切ることに尽きます。静的で役に立たないアラートを、動的で対話的な Adaptive Card に置き換えることで、切り離されたアプリケーションの間を絶えず行き来することなく、自分とチームが迅速に行動できるようになります。本日は、これらのカードの設計、構造化、展開の基本的な仕組みを紹介しましたが、これは可能性のほんの入り口にすぎません。
生産性向上の戦略や、最新のツールがデジタルワークスペースをどのように変えるかについてさらに詳しく知りたい方は、関連するポッドキャストのエピソード Build Actionable Teams Notifications with Adaptive Cards もぜひお聴きください。今日から独自のカスタムカードの試作を始めて、ワークフローを効率化し、集中した作業時間を取り戻しましょう。