今日のデジタル環境では、ユーザーはメール、チャット、ファイル、予定表イベントなど、さまざまな組織データを操作します。 これにより、頻繁なコンテキストシフト (タスクまたはアプリケーションの切り替え) が発生し、フォーカスが中断され、生産性が低下する可能性があります。 たとえば、プロジェクトで作業しているユーザーは、現在のアプリケーションから Outlook に切り替えて、メールで重要な詳細を見つけたり、OneDrive for Business に切り替えて関連ファイルを見つけたりする必要がある場合があります。 この前後のアクションにより、フォーカスが中断され、目の前のタスクに費やされる可能性のある時間が無駄になります。
効率を高めるために、ユーザーが日常的に使用するアプリケーションに組織データを直接統合できます。 組織のデータをアプリケーションに取り込むことで、ユーザーはよりシームレスに情報にアクセスして管理でき、コンテキストの変化を最小限に抑え、生産性を向上させることができます。 さらに、この統合により、貴重な分析情報とコンテキストが提供され、ユーザーは情報に基づいた意思決定を行い、より効果的に作業できるようになります。
この演習では、以下のことを行います。
- Microsoft Graph Toolkit の mgt-search-results Web コンポーネントを使用してファイルを検索する方法について説明します。
- Microsoft Graph を直接呼び出して OneDrive for Business からファイルを取得し、Microsoft Teamsからメッセージをチャットする方法について説明します。
- Microsoft Graph を使用してMicrosoft Teams チャネルにチャット メッセージを送信する方法について説明します。
組織データ機能の使用
前の 演習 では、Microsoft Entra ID でアプリ登録を作成し、アプリケーション サーバーと API サーバーを開始しました。 また、
.envファイル内の次の値も更新しました。ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE> TEAM_ID=<TEAMS_TEAM_ID> CHANNEL_ID=<TEAMS_CHANNEL_ID>続行する前に、 前の演習 を完了していることを確認します。
ブラウザーに戻ります (http://localhost:4200)。 まだサインインしていない場合は、ヘッダーで [サインイン ] を選択し、Microsoft 365 Developer テナントのユーザーとサインインします。
注
mgt ログイン Web コンポーネントは、ユーザーの認証に加えて、Microsoft Graph がファイル、チャット、電子メール、予定表イベント、およびその他の組織データにアクセスするために使用できるアクセス トークンも取得します。 アクセス トークンには、
Chat.ReadWrite、Files.Read.Allなどのスコープ (アクセス許可) が含まれています。Providers.globalProvider = new Msal2Provider({ clientId: ENTRAID_CLIENT_ID, // retrieved from .env file scopes: ['User.Read', 'Presence.Read', 'Chat.ReadWrite', 'Calendars.Read', 'ChannelMessage.Read.All', 'ChannelMessage.Send', 'Files.Read.All', 'Mail.Read'] });データグリッドの Adatum Corporation 行の [関連コンテンツの表示] を選択します。 これにより、ファイル、チャット、メール、予定表イベントなどの組織データが Microsoft Graph を使用して取得されます。 データが読み込まれると、タブ付きインターフェイスのデータ グリッドの下に表示されます。 Microsoft 365 開発者テナントにユーザーのファイル、チャット、電子メール、予定表イベントをまだ追加していないため、この時点ではデータが表示されない可能性があることを言及することが重要です。 次の手順で修正してみましょう。
この段階では、Microsoft 365 テナントに Adatum Corporation の関連する組織データがない可能性があります。 サンプル データを追加するには、次のいずれかの操作を実行します。
https://onedrive.comにアクセスし、Microsoft 365 Developer テナントの資格情報を使用してサインインすることで、ファイルを追加します。
- 左側のナビゲーションで [ マイ ファイル ] を選択します。
- メニューから [ + 新規追加] を選択し、[ フォルダーのアップロード] を選択します。
- 複製したプロジェクトから openai-acs-msgraph/customer documents フォルダーを選択します。
https://teams.microsoft.comにアクセスし、Microsoft 365 Developer テナントの資格情報を使用してサインインすることで、チャット メッセージと予定表イベントを追加します。
左側のナビゲーションで [Teams ] を選択します。
チームとチャネルを選択します。
[ 投稿の開始] を選択します。
件名と、メッセージ本文に追加する追加のテキストについて 、Adatum Corporation の新しい注文 を入力します。 [ 投稿 ] ボタンを選択します。
Adventure Works Cycles、Contoso Pharmaceuticals、Tailwind Traders など、アプリケーションで使用されている他の企業に言及するチャット メッセージを追加することもできます。
左側のナビゲーションで [予定表] を選択します。
[新しい会議選択します。
タイトルと本文に「Meet with Adatum Corporation about project schedule」と入力します。
保存 を選択します。
https://outlook.comにアクセスし、Microsoft 365 Developer テナントの資格情報を使用してサインインして、電子メールを追加します。
[新しいメールを選択します。
[ 宛先 ] フィールドに個人のメール アドレスを入力します。
件名と本文に必要なものについては、 Adatum Corporation に対して行われた新しい注文 を入力します。
[Send] を選択します。
ブラウザーでアプリケーションに戻り、ページを更新します。 Adatum Corporation 行に対してもう一度 [関連コンテンツの表示] を選択します。 前の手順で実行したタスクに応じて、タブにデータが表示されます。
アプリケーションで組織のデータ機能を有効にするコードを調べてみましょう。 データを取得するために、アプリケーションのクライアント側の部分では、前に確認した mgt ログイン コンポーネントによって取得されたアクセス トークンを使用して、Microsoft Graph API を呼び出します。
ファイル検索コードの探索
ヒント
Visual Studio Code を使用している場合は、次を選択してファイルを直接開くことができます。
- Windows/Linux: Ctrl + P
- Mac: Cmd + P
次に、開くファイルの名前を入力します。
まず、OneDrive for Business からファイル データを取得する方法を見てみましょう。 files.component.html を開き、コードを少し見てみましょう。 ファイルの完全なパスは client/src/app/files/files.component.htmlです。
mgt-search-results コンポーネントを見つけ、次の属性に注意してください。
<mgt-search-results class="search-results" entity-types="driveItem" [queryString]="searchText" (dataChange)="dataChange($any($event))" />mgt-search-results コンポーネントは Microsoft Graph Toolkit の一部であり、名前が示すように、Microsoft Graph からの検索結果を表示するために使用されます。 コンポーネントは、この例では次の機能を使用します。
class属性は、search-resultsCSS クラスをコンポーネントに適用するように指定するために使用されます。entity-types属性は、検索するデータの種類を指定するために使用されます。 この場合、値はdriveItemされ、OneDrive for Business でファイルを検索するために使用されます。queryString属性は、検索語句を指定するために使用されます。 この場合、値はsearchTextプロパティにバインドされます。このプロパティは、ユーザーがデータ グリッド内の行に対して [関連コンテンツの表示] を選択したときにファイル コンポーネントに渡されます。queryStringの周りの角かっこは、プロパティがsearchText値にバインドされていることを示します。dataChangeイベントは、検索結果が変更されたときに発生します。 この場合、dataChange()という名前の顧客関数が ファイル コンポーネントで呼び出され、イベント データが関数に渡されます。dataChangeのかっこは、イベントがdataChange()関数にバインドされていることを示します。カスタム テンプレートは指定されていないため、
mgt-search-resultsに組み込まれている既定のテンプレートを使用して検索結果が表示されます。
mgt-search-results などのコンポーネントを使用する代わりに、コードを使用して Microsoft Graph API を直接呼び出します。 そのしくみを確認するには、 graph.service.ts ファイルを開き、
searchFiles()関数を見つけます。 ファイルの完全なパスは 、client/src/app/core/graph.service.ts です。queryパラメーターが関数に渡されていることがわかります。 これは、ユーザーがデータ グリッド内の行に 対して [関連コンテンツの表示 ] を選択すると渡される検索用語です。 検索語句が渡されない場合は、空の配列が返されます。async searchFiles(query: string) { const files: DriveItem[] = []; if (!query) return files; ... }次に、実行する検索の種類を定義するフィルターが作成されます。 この場合、コードは OneDrive for Business でファイルを検索しているため、
driveItemコンポーネントで前に見たのと同じようにmgt-search-resultsが使用されます。 これは、前に確認したdriveItemコンポーネントのentity-typesにを渡すのと同じです。queryパラメーターは、queryStringと共にContentType:Documentフィルターに追加されます。const filter = { "requests": [ { "entityTypes": [ "driveItem" ], "query": { "queryString": `${query} AND ContentType:Document` } } ] };その後、
/search/query関数を使用して、Providers.globalProvider.graph.client.api()Microsoft Graph API に対して呼び出しが行われます。filterオブジェクトは、API にデータを送信するpost()関数に渡されます。const searchResults = await Providers.globalProvider.graph.client.api('/search/query').post(filter);その後、検索結果が反復処理され、
hitsが検索されます。 各hitには、検出されたドキュメントに関する情報が含まれています。resourceという名前のプロパティにはドキュメント メタデータが含まれており、files配列に追加されます。if (searchResults.value.length !== 0) { for (const hitContainer of searchResults.value[0].hitsContainers) { if (hitContainer.hits) { for (const hit of hitContainer.hits) { files.push(hit.resource); } } } }その後、
files配列が呼び出し元に返されます。return files;
このコードを見ると、前に調べてきた mgt-search-results Web コンポーネントが多くの作業を行い、記述する必要があるコードの量を大幅に削減していることがわかります。 ただし、API に送信されるデータや結果の処理方法をより詳細に制御するために、Microsoft Graph を直接呼び出すシナリオが存在する場合があります。
files.component.ts ファイルを開き、
search()関数を見つけます。 ファイルの完全なパスは 、client/src/app/files/files.component.ts です。mgt-search-results コンポーネントが使用されているため、この関数の本文はコメント アウトされますが、ユーザーがデータ グリッド内の行の [関連コンテンツの表示] を選択したときに、この関数を使用して Microsoft Graph を呼び出すことができます。
search()関数は、searchFiles()でを呼び出し、queryパラメーター (この例の会社名) を渡します。 検索の結果は、コンポーネントのdataプロパティに割り当てられます。override async search(query: string) { this.data = await this.graphService.searchFiles(query); }ファイル コンポーネントでは、
dataプロパティを使用して検索結果を表示できます。 これは、カスタム HTML バインドを使用するか、mgt-file-listという名前の別の Microsoft Graph Toolkit コントロールを使用して処理できます。dataプロパティをfilesという名前のコンポーネントのプロパティのいずれかにバインドし、ユーザーがファイルを操作する際にitemClickイベントを処理する例を次に示します。<mgt-file-list (itemClick)="itemClick($any($event))" [files]="data"></mgt-file-list>前に示した mgt-search-results コンポーネントを使用するか、カスタム コードを記述して Microsoft Graph を呼び出すかは、特定のシナリオによって異なります。 この例では、 mgt-search-results コンポーネントを使用してコードを簡略化し、必要な作業量を減らします。
Teams チャット メッセージ検索コードの探索
graph.service.tsに戻り、関数を見つけます。 これは、前に見た
searchFiles()関数に似ていることがわかります。- フィルター データを Microsoft Graph の
/search/queryAPI に投稿し、検索語句に一致するteamId、channelId、messageIdに関する情報を持つオブジェクトの配列に結果を変換します。 - Teams チャネル メッセージを取得するために、
/teams/${chat.teamId}/channels/${chat.channelId}/messages/${chat.messageId}API に対して 2 回目の呼び出しが行われ、teamId、channelId、およびmessageIdが渡されます。 これにより、メッセージの完全な詳細が返されます。 - 追加のフィルター 処理タスクが実行され、結果のメッセージが
searchChatMessages()から呼び出し元に返されます。
- フィルター データを Microsoft Graph の
chats.component.ts ファイルを開き、
search()関数を見つけます。 ファイルの完全なパスは client/src/app/chats/chats.component.ts です。search()関数は、searchChatMessages()でを呼び出し、queryパラメーターを渡します。override async search(query: string) { this.data = await this.graphService.searchChatMessages(query); }検索の結果はコンポーネントの
dataプロパティに割り当てられ、データ バインディングを使用して結果配列を反復処理し、データをレンダリングします。 次の使用例は、 Angular Material カード コンポーネントを使用して検索結果を表示します。@if (this.data.length) { <div> @for (chatMessage of this.data;track chatMessage.id) { <mat-card> <mat-card-header> <mat-card-title [innerHTML]="chatMessage.summary"></mat-card-title> <!-- <mat-card-subtitle [innerHTML]="chatMessage.body"></mat-card-subtitle> --> </mat-card-header> <mat-card-actions> <a mat-stroked-button color="basic" [href]="chatMessage.webUrl" target="_blank">View Message</a> </mat-card-actions> </mat-card> } </div> }
Microsoft Teams チャネルへのメッセージの送信
アプリケーションでは、Microsoft Teamsチャット メッセージを検索するだけでなく、ユーザーがMicrosoft Teams チャネルにメッセージを送信することもできます。 これを行うには、Microsoft Graph の
/teams/${teamId}/channels/${channelId}/messagesエンドポイントを呼び出します。
次のコードでは、
teamIdとchannelIdの値を含む URL が作成されていることがわかります。 この例では、環境変数の値はチーム ID とチャネル ID に使用されますが、これらの値は Microsoft Graph を使用して動的に取得することもできます。body定数には、送信するメッセージが含まれます。 POST 要求が行われ、結果が呼び出し元に返されます。async sendTeamsChat(message: string): Promise<TeamsDialogData> { if (!message) new Error('No message to send.'); if (!TEAM_ID || !CHANNEL_ID) new Error('Team ID or Channel ID not set in environment variables. Please set TEAM_ID and CHANNEL_ID in the .env file.'); const url = `https://graph.microsoft.com/v1.0/teams/${TEAM_ID}/channels/${CHANNEL_ID}/messages`; const body = { "body": { "contentType": "html", "content": message } }; const response = await Providers.globalProvider.graph.client.api(url).post(body); return { id: response.id, teamId: response.channelIdentity.teamId, channelId: response.channelIdentity.channelId, message: response.body.content, webUrl: response.webUrl, title: 'Send Teams Chat' }; }Microsoft Graph でこの種の機能を利用すると、ユーザーが既に使用しているアプリケーションから直接Microsoft Teamsを操作できるようにすることで、ユーザーの製品性を高める優れた方法が提供されます。