Microsoft Teams メッセージ拡張機能のデザイン
メッセージ拡張機能は、会話から離れることなく、アプリのコンテンツを挿入したり、メッセージに対して操作したりするためのショートカットです。 アプリのデザインに役立てるために、次の情報では、Teams でユーザーがどのようにメッセージ拡張機能を追加、使用、管理できるかを説明、図解しています。
Microsoft Teams UI Kit
Microsoft Teams UI Kit には、必要に応じて把握、変更できる要素を含む、より包括的なメッセージ拡張機能のデザインのガイドラインが掲載されています。
メッセージ拡張機能を追加する
メッセージ拡張機能は、次の Teams コンテキストで追加できます。
- Microsoft Teams ストアから。
- 作成ボックスの近くにあるチャネル、チャット、または会議中 (または前後)。 これらの場所のいずれかにメッセージ拡張機能を追加すると、そのコンテキストで使用できるのは自分だけであるという点に注意してください。
次の例は、チャネルにメッセージ拡張機能を追加する方法を示しています。
Mobile
Desktop
メッセージ拡張機能を設定する
認証は必須ではありませんが、アプリがチケット追跡ツールのようなものの場合は、メッセージ拡張機能を使用するためにユーザーにサインインしてもらう必要がある場合もあります。
Teams アプリ間で一貫性を保つために、サインイン画面をカスタマイズすることはできません。 シングル サインオン (SSO) 認証を使用すると、ユーザーは自動的にサインインします。
Mobile
Desktop
メッセージ拡張機能の種類
メッセージ拡張機能には、検索コマンド、アクション コマンド、またはその両方を含めることができます。 コマンドは、アプリの機能と、それらの機能が Teams のユース ケースにどのように適合するかによって異なります。
検索コマンド
検索コマンドを使用すると、ユーザーはメッセージ拡張機能を使用して外部コンテンツをすばやく検索し、メッセージに挿入できます。 検索コマンドは、通常、作成ボックスで使用できます。 たとえば、Teams から離れることなくコンテンツを共有することで、ディスカッションを開始またはディスカッションに追加できます。
Mobile
Desktop
作成ボックスのレイアウト オプション
メッセージ拡張機能の検索結果を表示するには、リスト ビューやグリッド ビューなど、いくつかのオプションがあります。
操作コマンド
アクション コマンドを使用すると、ユーザーは Teams 内の外部サービスでアクションをトリガーし、要求を処理できます。 たとえば、アプリが注文を追跡する場合、ユーザーはチャット内から同僚のメッセージの内容を使用して新しい注文を作成できます。
アクション ベースのメッセージ拡張機能では、多くの場合、ユーザーはフォーム、またはモーダル内でその他の種類の構成を完了する必要があります。 これらのエクスペリエンスは 、ダイアログ (TeamsJS v1.x ではタスク モジュールと呼ばれます) で作成できます。
メッセージ拡張機能を開く
ユーザーがメッセージ拡張機能を使用する主要なコンテキストは、作成ボックスと、メッセージまたは投稿です。
作成ボックスから
追加すると、ユーザーは作成ボックスの下にあるアプリ アイコンを選択して、メッセージ拡張機能を開くことができます。 これらの例では、拡張機能に検索コマンドとアクション コマンドがあります。
Mobile
Desktop
チャット メッセージまたはチャネルの投稿から
追加すると、ユーザーはチャット メッセージまたはチャネル投稿の [その他
] アイコンを選択して、拡張機能のアクション コマンドを見つけることができます。 拡張機能は、使用状況に基づいて その他のアクション に一覧表示される場合があります。
チャット メッセージ
チャネルの投稿
メッセージ拡張機能の使用
次のシナリオでは、ユーザーがメッセージ拡張機能を使用する主な方法を示します。
メッセージにコンテンツを挿入する
1. メッセージ拡張機能の選択。 ユーザーは、作成ボックスから共有するコンテンツを検索できます。
Mobile
Desktop
2. コンテンツの挿入。 投稿されると、他のユーザーが返信したり、コンテンツを選択してアプリの詳細情報を表示したりできます。
Mobile
Desktop
メッセージに対してアクションを取る
1. メッセージ拡張機能の選択。 アプリには、1 つ以上のアクション コマンドを含めることができます。
2. アクションの完了。 アプリは、メッセージ アクションによって送信されたコンテンツやデータを受信して処理できます。 ユーザーは会話を続けながら、アプリでアクションを完了します。
リンクのプレビュー
メッセージ拡張機能を使用すると、認識された URL からメッセージにリッチなリンクを挿入することもできます (この機能は、リンク展開の解除 と呼ばれます)。
1. 認識されたリンクを作成ボックスに貼り付けます。
Mobile
Desktop
2. コンテンツの挿入。 アプリが作成ボックス内の URL を認識すると、Web コンテンツのコンテンツリッチなプレビューを提供するカードとしてリンクがレンダリングされます。 (詳細についてはアダプティブ カード デザイン ガイドラインを参照してください)。
Mobile
Desktop
メッセージ拡張機能の管理
アイコンを右クリックすると、ユーザーはメッセージ拡張機能のピン留め、削除、または構成を行うことができます。
構造
作成ボックスのメッセージ拡張機能
次の例は、作成ボックスから開かれたメッセージ拡張機能です。
Mobile
| カウンター | 説明 |
|---|---|
| 1 | アプリ名: アプリのフル ネーム |
| 2 | [アクション コマンド] メニュー アイコン (省略可能): メッセージ拡張機能のアクション コマンドのリストを開きます (指定した場合)。 |
| 3 | 検索ボックス: ユーザーが挿入するアプリ コンテンツを検索できるようにします。 |
| 4 | タブ メニュー (省略可能): 複数のコンテンツ カテゴリを提供します。 |
| 5 | [アクション コマンド] メニュー (省略可能): アクション コマンドのリストを表示します (指定した場合)。 |
| 6 | アプリ コンテンツ: 主に検索結果を表示します。 |
Desktop
| カウンター | 説明 |
|---|---|
| 1 | アプリのロゴ: アプリのロゴの色アイコン。 |
| 2 | アプリ名: アプリのフル ネーム |
| 3 | [アクション コマンド] メニュー アイコン (省略可能): メッセージ拡張機能のアクション コマンドのリストを開きます (指定した場合)。 |
| 4 | 検索ボックス: ユーザーが挿入するアプリ コンテンツを検索できるようにします。 |
| 5 | タブ メニュー (省略可能): 複数のコンテンツ カテゴリを提供します。 |
| 6 | [アクション コマンド] メニュー (省略可能): アクション コマンドのリストを表示します (指定した場合)。 |
| 7 | アプリ コンテンツ: 主に検索結果を表示します。 この例では、リスト レイアウトを使用しています (グリッド レイアウトは別のオプションです)。 |
| 8 | アプリのロゴ: アプリのロゴの枠線アイコン。 |
メッセージ拡張機能の管理メニュー
| カウンター | 説明 |
|---|---|
| 1 | ピン留めを外す: ユーザーがアプリをピン留めしている場合に使用できます。 |
| 2 | 削除: チャネル、チャット、または会議からメッセージ拡張機能を削除します。 |
ベスト プラクティス
これらの推奨事項を使用して、高品質のアプリ エクスペリエンスを作成します。
セットアップと一般的な使用方法
Do: シングル サインオンとの統合
SSO を使用すると、サインイン プロセスが簡単、高速になり、セキュリティで保護されます。 また、ユーザーが個人用アプリに既にサインインしている場合は、メッセージ拡張機能にアクセスするためにもう一度サインインする必要はありません。
Don't: ユーザーを会話から除外しないでください
メッセージ拡張機能は、コンテキストの切り替えを減らすはずのショートカットです。 拡張機能は、たとえば、Teams の外部の Web ページにユーザーを誘導するものであってはいけません。
Do: メッセージ拡張機能のハイライト
メッセージ拡張機能は、必ずしも簡単に見つかるとは限りません。 アプリの詳細ページにその使用方法のスクリーンショットを含めます。 アプリにボットも含まれている場合は、ボットウェルカム ツアーにメッセージ拡張機能のヘルプ ドキュメントを含めることができます。
テンプレート作成
Do: 可能であれば、Teams が設計作業の一部を処理できるようにします
ユース ケースに適している場合は、検索ベースのメッセージ拡張機能を作成することを検討してください。 Teams は、これらの種類の拡張機能を、組み込みのテーマ設定とアクセシビリティでレンダリングします。
しない: アプリ全体をダイアログに埋め込む
メッセージ拡張機能でアクション コマンドが必要な場合は、ダイアログをシンプルにし、アクションを完了するために必要なコンポーネントのみを表示します。
テーマ
実行: Teams のカラー トークンを活用する
各 Teams テーマには独自の配色があります。 テーマの変更を自動的に処理するには、デザインでカラー トークン (Fluent UI) を使用します。
Don't: 色の値をハードコード化しないでください
Teams のカラー トークンを使用しない場合、デザインのスケーラビリティが低下し、管理に時間がかかります。
アクション
Do: コンテキストで意味のあるアクション コマンドを含めます
メッセージ アクションは、ユーザーが見ている内容に関連している必要があります。 たとえば、他のユーザーの投稿のテキストを使用して、問題や作業項目を作成するためのショートカットをユーザーに提供します。
Don't: コンテキストに依存しないアクション コマンドを含めないでください
ダッシュボードを表示するメッセージ アクションは、ほとんどの会話から切断されているように見える可能性があります。
検索
Do: 入力中に検索結果を表示します
ユーザーの入力中に、おすすめの検索結果を提供します。 最小限の文字数を入力するだけですばやくコンテンツを見つけることができます。
Don't: ユーザーにクエリの送信を要求しないでください。
ユーザーがキーを押すか、またはボタンを選択してアプリにクエリを送信するようにすることができます。 App Services サービスの方が簡単な場合もありますが、ユーザーは入力時にリアルタイムの検索結果が表示されないと混乱する可能性があります。
Do: ゼロ用語クエリを検討してください
たとえば、ユーザーが検索ボックスに何かを書き込む前に、アプリで最後に表示した内容を表示します。 そのコンテンツを会話に挿入したい可能性があります。
Platform Docs
フィードバック
以下は間もなく提供いたします。2024 年を通じて、コンテンツのフィードバック メカニズムとして GitHub の issue を段階的に廃止し、新しいフィードバック システムに置き換えます。 詳細については、「https://aka.ms/ContentUserFeedback」を参照してください。
フィードバックの送信と表示