【Teams】Adaptive Cardを使って投稿にフォーム入力ボタンを埋め込む手順

Adaptive Cardの基本とフォーム作成の仕組み

Adaptive Cardは、Microsoftが開発したオープンソースのUIフレームワークです。これにより、開発者はプラットフォームに依存しない、リッチなUI要素をJSON形式で定義できます。Teamsをはじめ、Outlook、Power BIなど、様々なMicrosoft製品で利用可能です。

チャネル投稿にフォームを埋め込む場合、Adaptive CardのJSON定義の中に、テキスト入力フィールドやボタンといったフォーム要素を記述します。そして、ユーザーがボタンをクリックした際に、その入力内容を処理するバックエンドロジック(通常はボット)を用意します。これにより、Teams内で完結するインタラクティブな操作が実現します。

Adaptive Card Designerを使ったフォームJSONの作成手順

まず、Teams投稿に表示したいフォームの見た目と、送信時の動作を定義するAdaptive CardのJSONを作成します。この作業には、Microsoftが提供する「Adaptive Card Designer」が便利です。

1. Adaptive Card Designerにアクセスする
   Webブラウザで「Adaptive Card Designer」と検索するか、以下のURLにアクセスします。
   https://adaptivecards.io/designer/
2. カードの種類を選択する
   左側のペインで「Host App」として「Microsoft Teams」を選択します。これにより、Teamsでの表示に最適化されたプレビューが表示されます。
3. フォーム要素を追加する
   左側の「Elements」ペインから、必要なフォーム要素をドラッグ&ドロップで中央の編集エリアに配置します。例えば、以下のような要素が利用できます。
   • TextBlock: ラベルや説明文を表示します。
   • TextInput: テキスト入力フィールドを作成します。複数行入力やパスワード入力なども指定可能です。
   • NumberInput: 数値入力フィールドを作成します。
   • DateInput: 日付選択フィールドを作成します。
   • ChoiceSet: 選択肢(ラジオボタンやドロップダウン)を提供します。
   • Action.Submit: フォーム送信ボタンを作成します。
4. 各要素の設定を行う
   中央の編集エリアで追加した各要素を選択し、右側の「Properties」ペインで詳細設定を行います。特に、TextInput要素では「id」プロパティに一意のIDを設定することが重要です。このIDが、後で送信されるデータと紐づきます。
5. 送信ボタンの設定
   「Action.Submit」要素を選択し、「Title」にボタンの表示テキスト(例:「送信」「登録」)を設定します。「Data」プロパティに、送信時に付加したいキーと値のペアをJSON形式で記述できます。これは、ボット側でどのボタンが押されたかを識別するのに役立ちます。
6. JSONコードの生成とコピー
   フォームのレイアウトが完成したら、右上の「Show JSON」ボタンをクリックします。表示されたJSONコード全体をコピーします。これが、Adaptive Cardの定義となります。

Bot Framework Composerを使ったボットの作成

Adaptive Cardで定義したフォームを実際に機能させるには、ユーザーからの入力を受け取り、処理するボットが必要です。ここでは、ローコードでボットを開発できる「Bot Framework Composer」を使用します。

※管理者権限について: Bot Framework Composerのインストールや、Azure Bot Serviceの作成には、Azureサブスクリプションと管理者権限が必要になる場合があります。

Bot Framework Composerのインストールと初期設定

1. Bot Framework Composerのダウンロードとインストール
   Microsoft Bot Frameworkの公式サイトから、最新版のBot Framework Composerをダウンロードし、お使いのPCにインストールします。
2. 新規ボットプロジェクトの作成
   Bot Framework Composerを起動し、「Create new bot」を選択します。テンプレートとして「Empty Bot」または「Echo Bot」などを選択し、ボットの名前や保存場所を指定してプロジェクトを作成します。

Adaptive Cardを投稿するダイアログの作成

1. 「Dialogs」タブを開く
   Composerの左側ナビゲーションペインで「Dialogs」を選択します。
2. 新しいダイアログの追加
   「+」ボタンをクリックし、「Add new dialog」を選択します。テンプレートとして「Empty Dialog」を選択し、ダイアログに分かりやすい名前(例:「FormSubmissionDialog」)を付けます。
3. トリガーの設定
   作成したダイアログを選択し、「Triggers」セクションで「Create a new trigger」をクリックします。「Intent」トリガーを選択し、ユーザーがこのダイアログを起動する意図(例:「ask_for_feedback」)を入力します。
4. 「Send Adaptive Card」アクションの追加
   トリガーが作成されたら、「(+) Add action」ボタンをクリックし、「Send Adaptive Card」を選択します。
5. JSONコードの貼り付け
   「Send Adaptive Card」アクションの設定画面が開きます。「Adaptive Card JSON」フィールドに、先ほどAdaptive Card DesignerでコピーしたJSONコードを貼り付けます。
6. 送信ボタン押下時の処理設定
   ユーザーがAdaptive Cardの送信ボタンを押した際に実行される処理を設定します。これは、通常、別のトリガー(例:`SubmitForm`)を作成し、そのトリガーに「Send a response」アクションなどを追加して実装します。
7. 入力値の取得と利用
   送信されたデータは、Composerの「Properties」ペインで確認・利用できます。例えば、「$actions.value」というプロパティに、送信されたフォームの入力値が格納されます。ここから、`id`で指定した各フィールドの値を取り出せます。

ボットをAzureにデプロイする

1. 「Publish」タブに移動する
   Composerの左側ナビゲーションペインで「Publish」を選択します。
2. 「Connect to Azure」
   Azureサブスクリプションに接続します。既存のAzure Bot Serviceリソースを選択するか、新規に作成します。
3. ボットのデプロイ
   「Publish this bot」ボタンをクリックして、ボットをAzureにデプロイします。デプロイが完了すると、ボットのID(App ID)とパスワード(App Secret)が発行されます。これらはTeamsとの連携に必要です。

Teamsチャネルにボットを追加し、カードを投稿する

作成したボットをTeamsチャネルに追加し、実際にAdaptive Cardを投稿できるように設定します。

Teamsアプリとしてのボットの登録

1. Azureポータルでボットの設定を行う
   Azureポータルにサインインし、作成したAzure Bot Serviceリソースに移動します。
2. 「Channels」設定
   左側のメニューから「Channels」を選択し、「Microsoft Teams」を選択して設定を有効にします。
3. 「Direct Line」または「Web Chat」の設定
   必要に応じて、「Direct Line」や「Web Chat」の設定も行います。これらは、Teams以外のチャネルでボットを利用する場合に必要です。
4. 「Configuration」タブでApp IDを確認
   「Configuration」タブで、ボットの「Microsoft App ID」と「Password」を確認しておきます。

Teamsチャネルへのボット追加とカード投稿

1. Teamsクライアントを開く
   Microsoft TeamsデスクトップアプリまたはWeb版を開きます。
2. アプリの追加
   左側のナビゲーションバーにある「アプリ」アイコンをクリックします。
3. ボットの検索と追加
   検索バーにボットの名前(Composerで設定したもの)を入力して検索し、ボットアプリを選択します。「追加」ボタンをクリックし、カードを投稿したいチャネルを選択して追加します。
4. ボットへのメッセージ送信
   チャネル内で、ボットに対してトリガーとなるメッセージを送信します。例えば、Composerで設定したインテント名(例:「ask_for_feedback」)をチャットで入力します。
5. Adaptive Cardの確認と操作
   ボットが応答としてAdaptive Cardを投稿します。表示されたフォームに必要な情報を入力し、「送信」ボタンをクリックします。
6. ボットからの応答確認
   ボットが入力内容を受け取り、処理した結果を返信します。この応答は、Adaptive Cardの送信ボタンが押された後に、Composerで設定した処理に基づきます。

新しいTeams(v2)と従来Teamsの違い

新しいTeams(v2)では、UIデザインが刷新され、パフォーマンスが向上しています。Adaptive Cardの表示や動作についても、基本的な機能は互換性がありますが、一部の高度なUI要素やアクションの挙動に若干の違いが生じる可能性があります。

特に、新しいTeamsではWeb技術の利用がより進んでおり、Adaptive Cardのレンダリングエンジンも更新されている場合があります。開発・テスト時には、新しいTeamsクライアントでの表示と動作を必ず確認してください。ほとんどの場合、既存のAdaptive Card JSONはそのまま利用できますが、特殊なケースでは微調整が必要になることがあります。

Mac版・モバイル版・Web版での違い

Adaptive Cardの表示と動作は、基本的に各プラットフォームで統一されています。しかし、以下の点に注意が必要です。

• モバイル版Teams: 画面サイズが小さいため、複雑なレイアウトのAdaptive Cardは表示が崩れる可能性があります。レスポンシブデザインを意識したJSON作成が重要です。
• Web版Teams: デスクトップ版と同様に表示されますが、ブラウザの互換性によっては微細な表示差異が生じることがあります。
• Mac版Teams: デスクトップ版と同様に表示されます。特別な差異は報告されていません。

いずれの環境でも、Adaptive Card Designerで「Host App」を「Microsoft Teams」に設定してプレビューを確認することが、互換性を保つ上で最も効果的です。

まとめ

この記事では、Microsoft Teamsのチャネル投稿にインタラクティブなフォーム入力ボタンを埋め込むための、Adaptive CardとBot Framework Composerを使った手順を解説しました。

Adaptive Card DesignerでJSONを作成し、Bot Framework Composerでボットを構築・デプロイすることで、Teams内で完結するフォーム連携が可能になります。これにより、情報収集や簡単な意思決定プロセスを大幅に効率化できます。

ぜひ、この技術を活用して、チーム内のコミュニケーションをさらに円滑にしてください。