演習 - SharePoint Framework ソリューションを Microsoft Teams に展開する

13 分

この演習では、SharePoint Online と Microsoft Teams のタブの両方で機能するSharePoint Framework Web パーツソリューションを作成します。

前提条件

重要

ほとんどの場合、次のツールの最新バージョンをインストールすることをお勧めします。ここに記載されているバージョンのリストは、このモジュールが発行され、最後にテストしたときに使用されたものです。

新しい SharePoint Framework プロジェクトを作成する

コマンドプロンプトを開き、現在のディレクトリを、プロジェクトを作成するフォルダーに変更します。

その後、次のコマンドを実行して SharePoint Yeoman ジェネレーターを起動します。

yo @microsoft/sharepoint

プロンプトが表示されたら、次の情報を使用して応答します (他にもオプションが表示された場合は、既定の回答を使用します):

ソリューション名は何ですか?: spfxteams
どの種類のクライアント側コンポーネントを作成しますか?: Web パーツ
Web パーツ名は何ですか?: SPFx Teams Together
どのテンプレートを使用しますか? フレームワークなし

プロジェクトに必要なフォルダーをプロビジョニングすると、ジェネレーターが自動的に npm install を実行して、すべての依存関係パッケージをインストールします。 NPM がすべての依存関係のダウンロードを完了したら、Visual Studio Code でプロジェクトを開きます。

SharePoint Framework プロジェクトのスクリーンショット。

Microsoft Teams で使用する Web パーツを有効にする

./src/webparts/spFxTeamsTogether/SpFxTeamsTogetherWebPart.manifest.json ファイルを見つけて開きます。

この Web パーツマニフェストファイル内で supportedHosts プロパティを見つけます。プロパティの値に SharePointWebPart と TeamsTab の両方が含まれていることを確認します: プロパティの値に TeamsPersonalApp や SharePointFullPage も含まれていれば問題ありません:

"supportedHosts": ["SharePointWebPart", "TeamsTab"],

Microsoft Teams アプリパッケージを作成して展開する

プロジェクト内に、2 つの画像が格納された teams フォルダーが含まれていることがわかります。これらの画像は、Microsoft Teams でカスタムタブの表示に使用されます。

注:

manifest.jsonファイルが存在しない場合があります。マニフェストファイルは、SharePoint によってアプリカタログ サイトから自動的に生成されます。または、手動で作成することもできます。マニフェストファイルの手動作成の詳細については、ドキュメント「Microsoft Teams 用 SharePoint Framework ソリューションの展開オプション」を参照してください。

この演習では、Microsoft Teams マニフェストファイルを手動で作成して、その内容を理解できるようにします。

Microsoft Teams のマニフェストを手動で作成する

プロジェクト内の ./teams フォルダーを見つけます。

teams フォルダー内に新しい manifest.json ファイルを作成し、次のコードを追加します。

{
  "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.19/MicrosoftTeams.schema.json",
  "manifestVersion": "1.19",
  "id": "{{SPFX_COMPONENT_ID}}",
  "version": "1.0.0",
  "developer": {
    "name": "Parker Porcupine",
    "websiteUrl": "https://products.office.com/en-us/sharepoint/collaboration",
    "privacyUrl": "https://privacy.microsoft.com/en-us/privacystatement",
    "termsOfUseUrl": "https://www.microsoft.com/en-us/servicesagreement"
  },
  "name": {
    "short": "{{SPFX_COMPONENT_NAME}}"
  },
  "description": {
    "short": "{{SPFX_COMPONENT_SHORT_DESCRIPTION}}",
    "full": "{{SPFX_COMPONENT_LONG_DESCRIPTION}}"
  },
  "icons": {
    "outline": "{{SPFX_COMPONENT_ID}}_outline.png",
    "color": "{{SPFX_COMPONENT_ID}}_color.png"
  },
  "accentColor": "#004578",
  "configurableTabs": [
    {
      "configurationUrl": "https://{teamSiteDomain}{teamSitePath}/_layouts/15/TeamsLogon.aspx?SPFX=true&dest={teamSitePath}/_layouts/15/teamshostedapp.aspx%3FopenPropertyPane=true%26teams%26componentId={{SPFX_COMPONENT_ID}}%26forceLocale={locale}",
      "canUpdateConfiguration": true,
      "scopes": [
        "team"
      ]
    }
  ],
  "validDomains": [
    "*.login.microsoftonline.com",
    "*.sharepoint.com",
    "spoprod-a.akamaihd.net",
    "resourceseng.blob.core.windows.net"
  ],
  "webApplicationInfo": {
    "resource": "https://{teamSiteDomain}",
    "id": "00000003-0000-0ff1-ce00-000000000000"
  }
}

このファイルには、SharePoint Framework コンポーネントに合わせて更新する必要がある複数の文字列が含まれています。次の表を使用して、置き換える必要がある値を確認してください。 SharePoint Framework コンポーネントのプロパティは、Web パーツマニフェストファイルにあります: ./src/webparts/spFxTeamsTogether/SpFxTeamsTogetherWebPart.manifest.json

manifest.json 文字列	SharePoint Framework コンポーネントマニフェストのプロパティ
`{{SPFX_COMPONENT_NAME}}`	`preconfiguredEntries[0].title.default`
`{{SPFX_COMPONENT_SHORT_DESCRIPTION}}`	`preconfiguredEntries[0].description.default`
`{{SPFX_COMPONENT_LONG_DESCRIPTION}}`	`preconfiguredEntries[0].description.default`
`{{SPFX_COMPONENT_ID}}`	`id`

重要

configurableTabs[0].configurationUrl の {{SPFX_COMPONENT_ID}} は、必ず置き換えてください。場合によっては、このプロパティを表示するために右にスクロールする必要があります。

重要

1 つの中かっこで囲まれたトークン (たとえば、 {teamSiteDomain}) を置き換える必要はありません。

Microsoft Teams のアプリパッケージを手動で作成する

プロジェクト内の ./teams フォルダーを見つけます。

フォルダー内の 3 つのファイル (2 つのイメージと manifest.json) を含む ZIP アーカイブを作成します。

重要

フォルダー自体ではなく、フォルダーの内容を ZIP 圧縮します。

ZIP アーカイブTeamsSPFxApp.zipに名前を付け、teams フォルダーに保存します。 teams フォルダーに 4 つのファイルが含まれているはずです。

Teams フォルダーのスクリーンショット

SharePoint パッケージを作成して展開する

SharePoint と Microsoft Teams で Web パーツをテストするには、まず Web パーツをアプリカタログに展開する必要があります。

プロジェクトを作成するため、コマンドプロンプトを開き、プロジェクトのルートフォルダーに移動します。次のコマンドを実行します。

gulp build

次に、コマンドラインでプロジェクトのルートフォルダーから次のコマンドを実行して、プロジェクトの実稼働バンドルを作成します。

gulp bundle --ship

最後に、プロジェクトのルートフォルダーからコマンドラインで次のコマンドを実行して、プロジェクトの展開パッケージを作成します。

gulp package-solution --ship

モダンアプリカタログのスクリーンショット。

プロジェクトの ./sharepoint/solution/spfxteams.sppkg にある、前の手順で作成したパッケージを [SharePoint 用アプリ] ライブラリにドラッグします。

[ アプリを有効にする ] パネルで、[ このアプリを有効にしてすべてのサイトに追加する ] オプションボタンが選択されていることを確認し、[ アプリを有効にする] を選択します。これにより、テナント内のすべてのサイトコレクション (Microsoft Teams チームの背後にあるサイトコレクションを含む) で Web パーツを使用できるようになります。

[アプリを有効にする] パネルのスクリーンショット。

[このアプリは有効になっています] パネルで、[閉じる] を選択します。

最後に、Microsoft Teams アプリをテナントの Microsoft Teams ストアに公開します。アップロードした SharePoint パッケージを選択します。次に、コマンドバーの [Teamsに追加] ボタンを選択します。

インストールされているアップロードパッケージのスクリーンショット。

SharePoint で SharePoint Framework Web パーツをテストする

ブラウザーで、モダン SharePoint ページに移動します。

ページの右上にある [編集] ボタンを選択します。

ブラウザーで、Web パーツのアイコンボタンを選択して使用可能な Web パーツのリストを開きます。

SharePoint モダンページに Web パーツを追加する操作を示すスクリーンショット。

SPFx Teams Together Web パーツを検索して選択します。

ギャラリーの SharePoint Web パーツのスクリーンショット。

次の図に示すように、SharePoint Framework Web パーツがページに表示されます。

SharePoint Web パーツのスクリーンショット。

Microsoft Teams で SharePoint Framework Web パーツをテストする

まず、新しい Microsoft Teams チームを作成します。

SharePoint Online にログインしているのと同じブラウザーを使用して、https://teams.microsoft.com に移動します。メッセージが表示されたら、Web クライアントを読み込みます。

Teams クライアントの左側にあるチームリストの上部にある [+] アイコンを選択し、[ チームの作成] を選択します。

[作成と結合] メニューのスクリーンショット。

[ チームの作成 ] ダイアログで、[ チーム名] [My First Team ] を設定し、[ 作成] を選択します。

[チームの作成] ダイアログのスクリーンショット。

[最初のチームにメンバーを追加する] ダイアログボックスで、[スキップ] を選択します。

Microsoft Teams アプリケーションを新しいタブとしてインストールする

以前に作成した「My First Team」チームを選択します。

[全般] チャネルを選択します。

マイファーストチームチームで [全般] チャネルを選択しているスクリーンショット。

SharePoint Framework Web パーツを使用して、チームにカスタムタブを追加します。

ページ上部の水平方向ナビゲーションで、[+] アイコンを選択します。

Microsoft Teams teams ナビゲーションのスクリーンショット。

[タブの追加] ダイアログで、[その他のアプリの取得] を選択します

[タブの追加] ダイアログのスクリーンショット。

[組織用にビルド]を選択します。

SPFx Teams Together アプリを選択します。

SPFx Teams Together アプリのスクリーンショット。

[SPFx Teams Together] ダイアログで、[チームに追加] ボタンを選択します。

SPFx Teams Together アプリをインストールするスクリーンショット。

次のダイアログで、「My First Team」チームの [全般] チャネルを選択し、[タブを設定] を選択します。

SPFx Teams Together アプリを設定するスクリーンショット。

次のダイアログで、アプリのインストールを確認します。 [保存] を選択します。

SPFx Teams Together アプリのインストールを確認するスクリーンショット。

次に、[SPFx Teams Together] タブの [全般] チャネルで、アプリケーションを Microsoft Teams に読み込みます。

[SPFx Teams Together ] アプリのスクリーンショット。

プロパティウィンドウの右上隅にある [X] を選択して初期構成を終了します。

概要

この演習では、SharePoint Online で動作し、Microsoft Teams のタブとしても動作する SharePoint Framework Web パーツソリューションを作成しました。

SharePoint Framework クライアント側 Web パーツを Microsoft Teams でタブとして機能するように構成するにはどうすればよいですか?

Web パーツの manifest.json ファイルの supportedHosts プロパティ配列に MSTeamsTab を追加します。

Web パーツの manifest.json ファイルの isTeamsTab プロパティを true に設定します。

Web パーツの manifest.json ファイルの supportedHosts プロパティ配列に TeamsTab を追加します。

Microsoft Teams タブとして使用するクライアント側 Web パーツの SharePoint Framework パッケージをどこに展開しますか?

SharePoint Online テナントのアプリカタログと Microsoft Teams テナントのアプリカタログサイトの両方にパッケージを展開します。

SharePoint Online テナントのアプリカタログサイトにあるパッケージを展開します。

SharePoint Framework パッケージを SharePoint Online アプリカタログに展開したら、チーム内で [カスタムアプリをアップロード] メニューアイテムを使用して Microsoft Teams にパッケージをアップロードします。

作業を確認する前にすべての問題に回答する必要があります。

フィードバック

このページはお役に立ちましたか?

演習 - SharePoint Framework ソリューションを Microsoft Teams に展開する

自分の知識をテストする

フィードバック