前の演習では、Microsoft Graph と Microsoft Graph Toolkit の mgt-search-results コンポーネントを使用して、OneDrive for Business からファイルとチャットをMicrosoft Teamsから取得する方法について説明しました。 また、Microsoft Teams チャネルにメッセージを送信する方法についても学習しました。 この演習では、Microsoft Graph から電子メール メッセージと予定表イベントを取得し、それらをアプリケーションに統合する方法について説明します。
この演習では、以下のことを行います。
- Microsoft Graph Toolkit の mgt-search-results Web コンポーネントを使用して、メールや予定表イベントを検索する方法について説明します。
- mgt-search-results コンポーネントをカスタマイズして、検索結果をカスタムの方法でレンダリングする方法について説明します。
- Microsoft Graph を直接呼び出して、メールと予定表イベントを取得する方法について説明します。
電子メール メッセージ検索コードの探索
ヒント
Visual Studio Code を使用している場合は、次を選択してファイルを直接開くことができます。
- Windows/Linux: Ctrl + P
- Mac: Cmd + P
次に、開くファイルの名前を入力します。
前の 演習 では、Microsoft Entra ID でアプリ登録を作成し、アプリケーション サーバーと API サーバーを開始しました。 また、
.envファイル内の次の値も更新しました。ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE> TEAM_ID=<TEAMS_TEAM_ID> CHANNEL_ID=<TEAMS_CHANNEL_ID>続行する前に、 前の演習 を完了していることを確認します。
emails.component.html を開き、コードを少し見てみましょう。 ファイルの完全なパスは client/src/app/emails/emails.component.htmlです。
mgt-search-results コンポーネントを見つけます。
<mgt-search-results class="search-results" entity-types="message" [queryString]="searchText" (dataChange)="dataChange($any($event))"> <template data-type="result-message"></template> </mgt-search-results>この mgt-search-results コンポーネントの例は、前に見たのと同じ方法で構成されます。 唯一の違いは、
entity-types属性が電子メール メッセージの検索に使用されるmessageに設定され、空のテンプレートが指定されていることです。-
class属性は、search-resultsCSS クラスをコンポーネントに適用するように指定するために使用されます。 -
entity-types属性は、検索するデータの種類を指定するために使用されます。 この場合、値はmessageです。 -
queryString属性は、検索語句を指定するために使用されます。 -
dataChangeイベントは、検索結果が変更されたときに発生します。 電子メール コンポーネントのdataChange()関数が呼び出され、結果が渡され、コンポーネントでdataという名前のプロパティが更新されます。 - コンポーネントに対して空のテンプレートが定義されています。 この種類のテンプレートは、通常、検索結果のレンダリング方法を定義するために使用されます。 ただし、このシナリオでは、メッセージ データをレンダリングしないようにコンポーネントに指示しています。 代わりに、標準のデータ バインディングを使用してデータを自分でレンダリングします (この場合は Angular が使用されますが、任意のライブラリ/フレームワークを使用できます)。
-
emails.component.html の mgt-search-results コンポーネントの下を見て、電子メール メッセージのレンダリングに使用されるデータ バインディングを見つけます。 この例では、
dataプロパティを反復処理し、電子メールの件名、本文のプレビュー、および完全な電子メール メッセージを表示するリンクを書き出します。@if (this.data.length) { <div> @for (email of this.data;track $index) { <mat-card> <mat-card-header> <mat-card-title>{{email.resource.subject}}</mat-card-title> <mat-card-subtitle [innerHTML]="email.resource.bodyPreview"></mat-card-subtitle> </mat-card-header> <mat-card-actions> <a mat-stroked-button color="basic" [href]="email.resource.webLink" target="_blank">View Email Message</a> </mat-card-actions> </mat-card> } </div> }
mgt-search-results コンポーネントを使用してメッセージを取得するだけでなく、Microsoft Graph には、メールの検索にも使用できるいくつかの API が用意されています。 前に見た
/search/queryAPI は確かに使用できますが、より簡単なオプションはmessagesAPI です。この API を呼び出す方法を確認するには、 graph.service.ts に戻り、
searchEmailMessages()関数を見つけます。 Microsoft Graph のmessagesエンドポイントを呼び出すために使用できる URL が作成され、query値が$searchパラメーターに割り当てられます。 その後、コードは GET 要求を行い、結果を呼び出し元に返します。$search演算子は、件名、本文、および送信者フィールドのquery値を自動的に検索します。async searchEmailMessages(query:string) { if (!query) return []; // The $search operator will search the subject, body, and sender fields automatically const url = `https://graph.microsoft.com/v1.0/me/messages?$search="${query}"&$select=subject,bodyPreview,from,toRecipients,receivedDateTime,webLink`; const response = await Providers.globalProvider.graph.client.api(url).get(); return response.value; }emails.component.tsにある電子メール コンポーネントは
searchEmailMessages()を呼び出し、結果を UI に表示します。override async search(query: string) { this.data = await this.graphService.searchEmailMessages(query); }
予定表イベント検索コードの探索
予定表イベントの検索は、 mgt-search-results コンポーネントを使用して実行することもできます。 結果のレンダリングは処理できますが、この演習で後ほど説明する独自のテンプレートを定義することもできます。
calendar-events.component.html を開き、コードを少し見てみましょう。 ファイルの完全なパスは client/src/app/calendar-events/calendar-events.component.htmlです。 以前に見たファイルやメール のコンポーネントによく似ていることがわかります。
<mgt-search-results class="search-results" entity-types="event" [queryString]="searchText" (dataChange)="dataChange($any($event))"> <template data-type="result-event"></template> </mgt-search-results>この mgt-search-results コンポーネントの例は、前に見たのと同じ方法で構成されます。 唯一の違いは、
entity-types属性がカレンダー イベントの検索に使用されるeventに設定され、空のテンプレートが指定されていることです。-
class属性は、search-resultsCSS クラスをコンポーネントに適用するように指定するために使用されます。 -
entity-types属性は、検索するデータの種類を指定するために使用されます。 この場合、値はeventです。 -
queryString属性は、検索語句を指定するために使用されます。 -
dataChangeイベントは、検索結果が変更されたときに発生します。 カレンダー イベント コンポーネントのdataChange()関数が呼び出され、結果が渡され、コンポーネントでdataという名前のプロパティが更新されます。 - コンポーネントに対して空のテンプレートが定義されています。 このシナリオでは、データをレンダリングしないようにコンポーネントに指示しています。 代わりに、標準のデータ バインディングを使用してデータを自分でレンダリングします。
-
mgt-search-resultsの コンポーネントのすぐ下に、カレンダー イベントのレンダリングに使用されるデータ バインディングが表示されます。 この例では、dataプロパティを反復処理し、イベントの開始日、時刻、および件名を書き出します。dayFromDateTime()やtimeRangeFromEvent()などのコンポーネントに含まれるカスタム関数は、データを適切に書式設定するために呼び出されます。 HTML バインドには、Outlook の予定表イベントを表示するためのリンクと、イベントが指定されている場合のイベントの場所も含まれます。@if (this.data.length) { <div> @for (event of this.data;track $index) { <div class="root"> <div class="time-container"> <div class="date">{{ dayFromDateTime(event.resource.start.dateTime)}}</div> <div class="time">{{ timeRangeFromEvent(event.resource) }}</div> </div> <div class="separator"> <div class="vertical-line top"></div> <div class="circle"> @if (!this.event.resource.bodyPreview?.includes('Join Microsoft Teams Meeting')) { <div class="inner-circle"></div> } </div> <div class="vertical-line bottom"></div> </div> <div class="details"> <div class="subject">{{ event.resource.subject }}</div> @if (this.event.resource.location?.displayName) { <div class="location"> at <a href="https://bing.com/maps/default.aspx?where1={{event.resource.location.displayName}}" target="_blank" rel="noopener"><b>{{ event.resource.location.displayName }}</b></a> </div> } @if (this.event.resource.attendees?.length) { <div class="attendees"> @for (attendee of this.event.resource.attendees;track attendee.emailAddress.name) { <span class="attendee"> <mgt-person person-query="{{attendee.emailAddress.name}}"></mgt-person> </span> } </div> } @if (this.event.resource.bodyPreview?.includes('Join Microsoft Teams Meeting')) { <div class="online-meeting"> <img class="online-meeting-icon" src="https://img.icons8.com/color/48/000000/microsoft-teams.png" title="Online Meeting" /> <a class="online-meeting-link" href="{{ event.resource.onlineMeetingUrl }}"> Join Teams Meeting </a> </div> } </div> </div> } </div> }
Microsoft Graph には、
search/queryAPI を使用して予定表イベントを検索するだけでなく、予定表イベントの検索にも使用できるeventsAPI も用意されています。searchCalendarEvents()で関数を見つけます。searchCalendarEvents()関数は、検索する期間を定義するために使用される開始日時値と終了日時値を作成します。 次に、Microsoft Graph のeventsエンドポイントを呼び出すために使用できる URL を作成し、queryパラメーターと開始日時変数と終了日時変数を含めます。 その後、GET 要求が行われ、結果が呼び出し元に返されます。async searchCalendarEvents(query:string) { if (!query) return []; const startDateTime = new Date(); const endDateTime = new Date(startDateTime.getTime() + (7 * 24 * 60 * 60 * 1000)); const url = `/me/events?startdatetime=${startDateTime.toISOString()}&enddatetime=${endDateTime.toISOString()}&$filter=contains(subject,'${query}')&orderby=start/dateTime`; const response = await Providers.globalProvider.graph.client.api(url).get(); return response.value; }作成された URL の内訳を次に示します。
- URL の
/me/events部分は、サインインしているユーザーのイベントを取得する必要があることを指定するために使用されます。 -
startdatetimeパラメーターとenddatetimeパラメーターを使用して、検索する期間を定義します。 この場合、検索は今後 7 日以内に開始されるイベントを返します。 -
$filterクエリ パラメーターは、query値 (この場合はデータ グリッドから選択された会社名) で結果をフィルター処理するために使用されます。contains()関数は、カレンダー イベントのqueryプロパティでsubject値を検索するために使用されます。 -
$orderbyクエリ パラメーターは、start/dateTimeプロパティで結果を並べ替えるために使用されます。
- URL の
urlが作成されると、urlの値を使用して Microsoft Graph API に対して GET 要求が行われ、結果が呼び出し元に返されます。前のコンポーネントと同様に、 カレンダー イベント コンポーネント (calendar-events.component.ts ファイル) は
search()を呼び出し、結果を表示します。override async search(query: string) { this.data = await this.graphService.searchCalendarEvents(query); }注
カスタム API またはサーバー側アプリケーションから Microsoft Graph 呼び出しを行うことができます。 Azure 関数から Microsoft Graph API を呼び出す例については、 次のチュートリアル を参照してください。
Microsoft Graph を使用してファイル、チャット、電子メール メッセージ、予定表イベントを取得する例を見てきました。 同じ概念を他の Microsoft Graph API にも適用できます。 たとえば、Microsoft Graph ユーザー API を使用して、組織内のユーザーを検索できます。 Microsoft Graph グループ API を使用して、組織内のグループを検索することもできます。 Microsoft Graph API の完全な一覧については 、ドキュメントを参照してください。