演習 - SharePoint または Microsoft Teams の条件ロジックを追加する
- 12 分
この演習では、前の演習で作成した SharePoint Framework Web パーツを更新し、SharePoint コンテキストと Microsoft Teams コンテキストのどちらで実行されているかに応じて、異なる情報を表示します。
./src/webparts/spFxTeamsTogether/SpFxTeamsTogetherWebPart.ts ファイルを見つけて開きます。
SpFxTeamsTogetherWebPart クラスで _getEnvironmentMessage() メソッドを見つけます。 このコードは、Web パーツが SharePoint で実行されているか、Teams で実行されているかを示すメッセージを作成します。値 this.context.sdks.microsoftTeams を確認します。
microsoftTeams オブジェクトに値がある場合、Web パーツは Teams で実行されます。
microsoftTeams オブジェクトが undefined の場合、Web パーツは Teams で実行されていません。
private _getEnvironmentMessage(): Promise<string> {
if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
return this.context.sdks.microsoftTeams.teamsJs.app.getContext()
.then(context => {
let environmentMessage: string = '';
switch (context.app.host.name) {
case 'Office': // running in Office
environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOffice : strings.AppOfficeEnvironment;
break;
case 'Outlook': // running in Outlook
environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentOutlook : strings.AppOutlookEnvironment;
break;
case 'Teams': // running in Teams
environmentMessage = this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentTeams : strings.AppTeamsTabEnvironment;
break;
default:
throw new Error('Unknown host');
}
return environmentMessage;
});
}
return Promise.resolve(this.context.isServedFromLocalhost ? strings.AppLocalEnvironmentSharePoint : strings.AppSharePointEnvironment);
}
_getEnvironmentMessage() メソッドの実装を次のコードのメソッドと置き換えます。 Web パーツが SharePoint または Teams で実行されているかどうかを示すメッセージを作成するだけでなく、適切なコンテキスト オブジェクトを使用して、Web パーツが現在実行されているチームまたは SharePoin t サイトの名前を含めます。
private _getEnvironmentMessage(): Promise<string> {
let environmentMessage: string = '';
if (!!this.context.sdks.microsoftTeams) { // running in Teams, office.com or Outlook
return this.context.sdks.microsoftTeams.teamsJs.app.getContext()
.then(teamsContext => {
environmentMessage = this.context.isServedFromLocalhost
? strings.AppLocalEnvironmentTeams
: strings.AppTeamsTabEnvironment;
environmentMessage += `. Team name: ${teamsContext.team?.displayName}`;
return environmentMessage;
});
} else {
environmentMessage = this.context.isServedFromLocalhost
? strings.AppLocalEnvironmentTeams
: strings.AppTeamsTabEnvironment;
environmentMessage += `. Site name: ${this.context.pageContext.web.title}`;
return Promise.resolve(environmentMessage);
}
}
Web パーツをパッケージ化して展開する
プロジェクトを作成するため、コマンド プロンプトを開き、プロジェクトのルート フォルダーに移動します。 次のコマンドを実行します。
gulp build
次に、コマンド ラインでプロジェクトのルート フォルダーから次のコマンドを実行して、プロジェクトの実稼働バンドルを作成します。
gulp bundle --ship
最後に、プロジェクトのルート フォルダーからコマンド ラインで次のコマンドを実行して、プロジェクトの展開パッケージを作成します。
gulp package-solution --ship
モダン テナント アプリ カタログ ([アプリの管理] ページ) に移動します。
*.sppkg という名前の ./sharepoint/solution フォルダーにある gulp タスクによって作成されたファイルを見つけます。
このファイルをブラウザーの SharePoint 用アプリ ライブラリにドラッグします。 メッセージが表示されたら、[ 置換] を選択します。
[アプリを有効にする] パネルで、[このアプリを有効にしてすべてのサイトに追加する] ラジオ ボタンが選択されていることを確認し、[アプリを有効にする] を選択します。
[このアプリは有効になっています] パネルで、[閉じる] を選択します。
変更内容をテストする
前の演習で Web パーツを追加した SharePoint ページに戻ります。
ページに、現在のコンテキストが SharePoint であること、および現在の SharePoint サイト名が表示されることを確認します。
ここで、Microsoft Teams チームに戻り、前に追加したタブを選択します。 現在自分が Teams を使用していることとチームの名前が、メッセージでどのように示されるかを確認します。
概要
この演習では、前の演習で作成した SharePoint Framework Web パーツを更新し、SharePoint コンテキストと Microsoft Teams コンテキストのどちらで実行されているかに応じて、異なる情報を表示しました。
自分の知識をテストする
フィードバック
このページはお役に立ちましたか?
いいえ
このトピックについてサポートが必要ですか?
このトピックの意図を把握したり、理解を深めたりするために Ask Learn を使ってみませんか?