演習 - Teams タブ アプリにチャットを追加する

• 10 分

この演習では、タブを含む新しい Teams アプリ プロジェクトを作成します。Teams Toolkit for Visual Studio Code を使用し、Teams JavaScript クライアント ライブラリを使用してチャットをタブに統合する方法について説明します。

まず、プロジェクトを作成します。

1. Visual Studio Code を開きます。
2. アクティビティ バーで、 Microsoft Teams アイコンを選択して[Teams ツールキット] ウィンドウを開きます。
3. [Teams ツールキット] ウィンドウで、[新しいアプリの作成] を選択します。
4. オプションから[タブ]を選択 します。

1. 次に、 Fluent UI で React を選択します。

   

2. [ プログラミング言語] メニューの [ JavaScript] を選択します。

3. [ ワークスペース フォルダー ] メニューの [ 既定のフォルダー] を選択します。

4. [ アプリケーション名] に「 Teams Tab with Chat」と 入力し、Enter キーを選択します。

Teams Toolkit では、プロジェクト ファイルとソース コード ファイルが作成されます。 プロジェクト ファイルとソース コード ファイルは、Visual Studio Code のエクスプローラーで表示できます。

次に、タブを初めて実行します。

1. アクティビティ バーで、[ デバッグ ] アイコンを選択します。

2. [ 実行とデバッグ] で、アプリのデバッグに使用するブラウザーとして Chrome または Edge を選択します。 次に、[ 実行 ] ボタンを選択するか、F5 キーを選択してデバッグ セッションを開始します。

Teams Toolkit は、必要なすべてのコンポーネントをデプロイ、構成、開始します。 ツールキットはブラウザー ウィンドウも開き、Microsoft Teams Web サイトに移動します。

[Teams アプリのインストール] ダイアログで、[ 追加 ] ボタンを選択して、個人用アプリとしてアプリをインストールします。

手順は以上です。 アプリがインストールされ、Microsoft Teams で実行されており、アプリのユーザー エクスペリエンスを強化する準備が整いました。

次に、チャットをタブに統合します。

Visual Studio Code で 、src/components/Tab.jsx ファイルを開きます。 ファイルの内容を次のコード スニペットに置き換えます。

import { useContext } from "react"; 
import { TeamsFxContext } from "./Context"; 
import { Button } from "@fluentui/react-northstar";
import "./sample/Welcome.css";   

export default function Tab() { 
  const { themeString } = useContext(TeamsFxContext);  
  return ( 
    <div className={themeString === "default" ? "" : "dark"}> 
      <div className="welcome page"> 
        <div className="narrow page-padding">
          <h1 className="center">Chat</h1> 
          <div className="sections"> 
            <div className="center"> 
              <Button primary>Start Chat</Button> 
            </div> 
          </div> 
        </div> 
      </div> 
    </div> 
  ); 
} 

ファイルを保存し、開いているブラウザー ウィンドウで変更を表示します。

コードに加えた変更を表示するためにブラウザーを更新する必要はありません。 Teams Toolkit には、アプリの実行中に変更を適用するホット リロード機能があります。

次に、[ チャットの開始] ボタンの背後にある機能を実装しましょう。

Visual Studio Code に戻ります。 src/components/Tab.jsx ファイルで、ファイルの上部にある Teams JavaScript クライアント ライブラリからアプリ、ユーザー、チャット機能をインポートします。

import { app, people, chat } from "@microsoft/teams-js"; 

関数で Tab 、定数宣言の後に themeString 、 という startChat非同期関数を作成します。

const { themeString } = useContext(TeamsFxContext); 
const startChat = async () => { 
    await app.initialize(); 
    const context = await app.getContext(); 
    if (people.isSupported() && chat.isSupported()) { 
        const peoplePickerResults = await people.selectPeople();
        const users = peoplePickerResults.map(p => p.email); 
        await chat.openGroupChat({ 
            users, 
            topic: "The Dream Team", 
            message: `Teamwork makes the dream work! Let's use this chat to collaborate on our project. Chat created using TeamsJS in the ${context.app.host.name} ${context.app.host.clientType} client.`, 
        }); 
      } 
  } 
return ();

最後に、 ボタンにイベント ハンドラーを onClick 追加して、ユーザーがボタンを startChat() 選択したときに関数を実行します。

<Button primary onClick={() => startChat()}>Start Chat</Button> 

ファイルを保存し、開いているブラウザー ウィンドウを表示します。

[ チャットの開始 ] ボタンを選択して、ユーザー選択ダイアログを開きます。 検索ボックスに名前を入力して、1 人以上のユーザーを検索して選択します。 [ 完了 ] ボタンを選択して、選択内容を確認します。

Microsoft Teams チャットの新しいドラフトが作成され、 "ドリーム チーム" という名前が付けられます。 JavaScript で設定したテキストがメッセージ作成ボックスに表示されます。 チームワークによって夢が機能します。このチャットを使用して、プロジェクトで共同作業を行ってみましょう。Teams Web クライアントで TeamsJS を使用して作成されたチャット。

メッセージを送信してチャットを初期化します。

チャットが作成されます。 ユーザー選択ダイアログで選択した参加者がチャットに追加され、チャット タイトルが更新されます。