SharePoint Framework を使用した Microsoft Teams タブの作成: チュートリアルBuilding Microsoft Teams tab using SharePoint Framework - Tutorial

SharePoint Framework v2.0 以降では、SharePoint Framework を使用して Microsoft Teams のタブを実装することもできます。Starting with the SharePoint Framework v1.8, you can also implement your Microsoft Teams tabs using SharePoint Framework. これにより、SharePoint Framework の web パーツが外部サービスを必要とせずに SharePoint 内で自動的にホストされるので、Teams のタブ開発プロセスが大幅に簡素化されます。This significantly simplifies Teams tab development process as SharePoint Framework web parts are automatically hosted within SharePoint without any need for external services.

開始する前に、次の記事のに示す手順を完了し、カスタムのクライアント側 Web パーツを作成する基本的な流れを把握しておきます。Before you start, complete the procedures in the following articles to ensure that you understand the basic flow of creating a custom client-side web part:

重要

このラボでは、これらの機能は以前のバージョンでは使用できないため、少なくともバージョン1.8 の SharePoint Framework を使用している必要があります。This lab requires that you are using at least version 1.8 of the SharePoint Framework as these capabilities are not available in earlier versions. 現時点では、Teams モバイルクライアントはサードパーティのタブをサポートしていません。Currently, the Teams mobile clients do not support 3rd party tabs. このサポートが提供されると、作成したタブが自動的に表示されます。When this support is delivered, the tabs you create will appear automatically.

新しい Web パーツ プロジェクトの作成Create a new web part project

  1. 自分の好みの場所に新しいプロジェクト ディレクトリを作成します。Create a new project directory in your favorite location:

    md teams-tab-webpart
    
  2. プロジェクト ディレクトリへ移動します。Go to the project directory:

    cd teams-tab-webpart
    
  3. Yeoman の SharePoint ジェネレーターを実行して、新しいクライアント側の Web パーツ ソリューションを作成します。Create a new client-side web part solution by running the Yeoman SharePoint Generator:

    yo @microsoft/sharepoint
    
  4. ダイアログ ボックスが表示されたら、次の手順に従います。When prompted:

    • 既定の teams-tab-webpart をソリューション名として受け入れ、Enter キーを押します。Accept the default teams-tab-webpart as your solution name, and then select Enter.
    • [SharePoint Online のみ (最新)] を選択し、Enter キーを押します。Select SharePoint Online only (latest), and then select Enter.
    • ファイルの配置場所として [現在のフォルダーを使用する] を選択します。Select Use the current folder as the location for the files.
    • [Y] を選択すると、Web パーツがテナント アプリ カタログに追加されたときに自動的にテナント全体に展開されます。Select y to ensure that your web part is automatically deployed tenant wide when it's added to the tenant app catalog.
    • ソリューションに固有の権限が含まれている場合は、質問に対して [N] を選択してください。Select N on the question if solution contains unique permissions.
    • 作成するクライアント側コンポーネントの種類として、[Web パーツ] を選択します。Select WebPart as the client-side component type to be created.
  5. 次の一連のダイアログ ボックスでは、Web パーツの詳細情報について入力が求められます。The next set of prompts ask for specific information about your web part:

    • Web パーツ名に「MyFirstTeamsTab」と入力し、Enter キーを押します。Enter MyFirstTeamsTab for the web part name, and then select Enter.
    • Web パーツの説明に「My first Teams tab」と入力し、Enter キーを押します。Enter My first Teams tab as the description of the web part, and then select Enter.
    • フレームワークには、既定の [JavaScript Web フレームワークなし] オプションを受け入れ、Enter キーを押して続行します。Accept the default No JavaScipt web framework option for the framework, and then select Enter to continue.

    Yeoman のメッセージ表示

    この時点で、Yeoman は必須の依存関係をインストールし、ソリューション ファイルをスキャフォールディングします。At this point, Yeoman installs the required dependencies and scaffolds the solution files. これには数分かかる場合があります。This might take a few minutes. Yeoman はプロジェクトをスキャフォールディングし、MyFirstTeamsTab の Web パーツも含めます。Yeoman scaffolds the project to include your MyFirstTeamsTab web part as well.

  6. 次に、以下のように入力して、Visual Studio Code で Web パーツ プロジェクトを開きます。Next, enter the following to open the web part project in Visual Studio Code:

    code .
    

SharePoint Framework v2.0 から、スキャフォールディングには、ソリューション構造に追加のteamsフォルダーが含まれており、web パーツの既定の構成があるので、teams タブの開発をできるだけ簡単に開始できるようになります。Starting with the SharePoint Framework v1.8, scaffolding will also include additional ./teams folder in the solution structure, with default configuration for your web parts, so that you can get started with Teams tab development as easily as possible.

ソリューション構造

Teams フォルダーには、次の2つのファイルが含まれています。Teams folder contains the following two files:

  • [data-sp-componentid] _ 色のタブの既定の小さなピクチャ[componentId]_color.png - Default small picture for a tab
  • [data-sp-componentid] _ .png -タブの既定の大きな画像[componentId]_outline.png - Default large picture for a tab

これらの画像は、Microsoft Teams のアイコンとして使用されます。These images will be used as icons in Microsoft Teams.

Web パーツのマニフェストを更新して Microsoft Teams で利用できるようにするUpdating the web part manifest to make it available for Microsoft Teams

Teams で利用できるようにする web パーツのマニフェスト json ファイルを見つけ、次の例supportedHostsのように"TeamsTab"含めるプロパティを変更します。Locate the manifest json file for the web part you want to make available to Teams and modify the supportedHosts properties to include "TeamsTab" as in the following example.

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
  "id": "8eb36405-e408-4578-8340-faf16d647d83",
  "alias": "MyFirstTeamsTab",
  "componentType": "WebPart",

  // The "*" signifies that the version should be taken from the package.json
  "version": "*",
  "manifestVersion": 2,

  // If true, the component can only be installed on sites where Custom Script is allowed.
  // Components that allow authors to embed arbitrary script code should set this to true.
  // https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
  "requiresCustomScript": false,
  "supportedHosts": ["SharePointWebPart", "TeamsTab"],

  "preconfiguredEntries": [{
    "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
    "group": { "default": "Other" },
    "title": { "default": "MyFirstTeamsTab" },
    "description": { "default": "MyFirstTeamsTab description" },
    "officeFabricIconFontName": "Page",
    "properties": {
      "description": "MyFirstTeamsTab"
    }
  }]
}

Microsoft Teams コンテキストを認識するためのコードの更新Updating code to be aware of the Microsoft Teams context

  1. タブとして使用されている場合、Microsoft Teams コンテキストを認識するために必要な編集を行うには、 src\webparts\helloWorld\HelloWorldWebPart.tsを開きます。Open src\webparts\helloWorld\HelloWorldWebPart.ts for the needed edits on making our solution aware of the Microsoft Teams context, if it's used as a tab.

  2. ファイルの先頭に次の import ステートメントを追加します。Add the following import statement at the top of your file:

    import * as microsoftTeams from '@microsoft/teams-js';
    
  3. 次の非公開の変数を MyFirstTeamsTabWebPart クラス内に追加します。Add the following private variable inside the MyFirstTeamsTabWebPart class. この変数に Microsoft Teams コンテキストに関する情報が格納されます。We will be storing information around the Microsoft Teams context in this variable.

    export default class MyFirstTeamsTabWebPart extends BaseClientSideWebPart<IMyFirstTeamsTabWebPartProps> {
    
    // This variable has been added
    private _teamsContext: microsoftTeams.Context;
    
  4. MyFirstTeamsTabWebPart クラス内で、追加した非公開の変数の直下に、次の内容で新しい onInit メソッドを追加します。Add new onInit method inside of the MyFirstTeamsTabWebPart class, just below the private variable, which we just added with following content.

    protected onInit(): Promise<any> {
      let retVal: Promise<any> = Promise.resolve();
      if (this.context.microsoftTeams) {
        retVal = new Promise((resolve, reject) => {
          this.context.microsoftTeams.getContext(context => {
            this._teamsContext = context;
            resolve();
          });
        });
      }
      return retVal;
    }
    
  5. 以下のようにして render メソッドを更新します。Update the render method as follows. コードが Microsoft teams のタブとして、または SharePoint の web パーツとしてレンダリングされる場合、どのように異なるコンテンツを表示するかを確認します。Notice how we are rendering different content dependent if the code is rendered as a tab in Microsoft Team or as a web part in SharePoint.

    public render(): void {
    
      let title: string = '';
      let subTitle: string = '';
      let siteTabTitle: string = '';
    
      if (this._teamsContext) {
        // We have teams context for the web part
        title = "Welcome to Teams!";
        subTitle = "Building custom enterprise tabs for your business.";
        siteTabTitle = "We are in the context of following Team: " + this._teamsContext.teamName;
      }
      else
      {
        // We are rendered in normal SharePoint context
        title = "Welcome to SharePoint!";
        subTitle = "Customize SharePoint experiences using Web Parts.";
        siteTabTitle = "We are in the context of following site: " + this.context.pageContext.web.title;
      }
    
      this.domElement.innerHTML = `
        <div class="${ styles.myFirstTeamsTab }">
          <div class="${ styles.container }">
            <div class="${ styles.row }">
              <div class="${ styles.column }">
                <span class="${ styles.title }">${title}</span>
                <p class="${ styles.subTitle }">${subTitle}</p>
                <p class="${ styles.description }">${siteTabTitle}</p>
                <p class="${ styles.description }">Description property value - ${escape(this.properties.description)}</p>
                <a href="https://aka.ms/spfx" class="${ styles.button }">
                  <span class="${ styles.label }">Learn more</span>
                </a>
              </div>
            </div>
          </div>
        </div>`;
    }
    

    注意

    この情報の詳細な説明については、Microsoft Teams 開発者向けドキュメントで、Microsoft Teams タブの Microsoft Teams コンテキストを参照してください。You can find full description of the information available through Microsoft Teams context for Microsoft Teams tabs from the Microsoft Teams developer documentation.

Web パーツのパッケージ化と SharePoint への展開Packaging and deploying your web part to SharePoint

コンソールが、作成したソリューションのルート フォルダーでアクティブになっていることを確認します。Ensure that your console is activated in the root folder of the solution, which was just created.

  1. 次のコマンドを実行して、ソリューションを作成します。Execute the following commands to build bundle your solution. これにより、アセットのホスト URL として動的ラベルを使用して、プロジェクトのリリース ビルドが実行されます。This executes a release build of your project by using a dynamic label as the host URL for your assets. この URL は、使用しているテナントの CDN 設定に基づいて自動的に更新されます。This URL is automatically updated based on your tenant CDN settings.

    gulp build
    gulp bundle --ship
    
  2. ソリューションをパッケージ化するための次のタスクを実行します。Execute the following task to package your solution. これにより、更新された teams-tab-webpart.sppkg パッケージが sharepoint/solution フォルダーに作成されます。This creates an updated teams-tab-webpart.sppkg package on the sharepoint/solution folder.

    gulp package-solution --ship
    

次に、生成されたパッケージをテナント アプリ カタログに展開する必要があります。Next, you need to deploy the package that was generated to the tenant app catalog.

注意

アプリ カタログがない場合は、SharePoint Online 管理で次のガイドの指示に従って作成することができます: 「アプリ カタログを使ってカスタム ビジネス アプリを SharePoint Online 環境で利用できるようにする」。If you do not have an app catalog, a SharePoint Online Admin can create one by following the instructions in this guide: Use the App Catalog to make custom business apps available for your SharePoint Online environment.

  1. サイトのアプリ カタログに移動します。Go to your site's app catalog.

  2. teams-tab-webpart.sppkg をアプリ カタログにアップロードするかドラッグ アンド ドロップします。Upload or drag and drop the teams-tab-webpart.sppkg to the app catalog.

    アプリ カタログにソリューションをアップロードする

    これにより、クライアント側のソリューション パッケージが展開されます。This deploys the client-side solution package. これは完全信頼クライアント側ソリューションであるため、SharePoint はダイアログを表示し、展開するクライアント側のソリューションを信頼するよう求めます。Because this is a full trust client-side solution, SharePoint displays a dialog and asks you to trust the client-side solution to deploy.

    プロンプトのドメイン リストで SharePoint Online がどのように表示されるかを確認します。Notice how the domain list in the prompt says SharePoint Online. これは、テナント設定によっては、コンテンツが Office 365 CDN やアプリ カタログから提供されるためです。This is because the content is either served from the Office 365 CDN or from the app catalog, depending on the tenant settings.

    [組織内のすべてのサイトでこのソリューションを使用できるようにする] オプションが選択されていることを確認して、Microsoft Teams 側から web パーツを使用できるようにします。Ensure that the Make this solution available to all sites in the organization option is selected, so that the web part can be used from the Microsoft Teams side.

    信頼クライアント側ソリューションの展開

  3. [展開] を選択します。Select Deploy.

    パッケージに例外や問題があるかどうかは、アプリ カタログのアプリ パッケージのエラー メッセージ列で確認することができます。Notice that you can see if there's any exceptions or issues in the package by looking the App Package Error Message column in the app catalog.

これで Web パーツが展開され、SharePoint Online サイト間で自動的に利用可能になります。Now the web part is deployed and is automatically available cross the SharePoint Online sites.

注意

このチュートリアルの場合、SharePoint Framework ソリューションのテナント全体での展開オプションを使用します。In this tutorial case, we are using tenant wide deployment option of the SharePoint Framework solution. これにより、開発と利用のエクスペリエンスが非常に簡単になります。This will ensure that the development and usage experience is as easy as possible. サイト スコープとしてソリューションを展開することもできますが、その場合、使用する前に、Microsoft Teams の背後にある SharePoint サイトにソリューションを展開しておく必要があります。You could also deploy the solution as site scope, but in that case you'd need to ensure that the solution is deployed on the SharePoint site behind of the Microsoft Teams, before you can use it.

Microsoft Teams で web パーツを使用できるようにするMaking the web part available in Microsoft Teams

Web パーツを Microsoft Teams で利用できるようにするために、ソリューションを teams と同期させます。In order to make your web part available in Microsoft Teams you will have synchronize your solution with teams.

注意

このチュートリアルでは、SharePoint アプリカタログからソリューションの自動展開オプションを使用しています。In this tutorial case, we are using the automatic deployment option for the solution from the SharePoint app catalog. ソリューションの代替設定を提供する場合は、これらの手順を手動で実行することもできます。You can also perform these steps manually, if you want to provide alternative settings for your solutions. 詳細については、「 web パーツ用の Microsoft teams マニフェストを手動で作成して Microsoft teams に展開する」を参照してください。See more from Create Microsoft Teams manifest manually for a web part and deploy it to Microsoft Teams.

  1. SharePoint テナントのアプリカタログで [ teams-tab-webpart-クライアント側ソリューションパッケージ] を選択し、リボンの [ファイル] タブにある [ teams に同期] ボタンをクリックします。Select the teams-tab-webpart-client-side-solution package in the SharePoint tenant app catalog and click the Sync to Teams button at in the ribbon at the Files tab.

    リボンの [Teams に同期] ボタン

  2. チーム内のチャネルに移動します。Move to a channel in a team. 次の図では、teams で一般的なチャネルをアクティブ化しています。 ****In the below picture we have activated General channel in Team

    チャネルのアクティブ化

  3. チャネル+に新しいタブを追加する場合に選択します。Select + to add a new tab on the channel

  4. [タブの追加] ダイアログボックスで、リストの一番下までスクロールして、[その他のアプリ] を選択します。In the Add a tab dialog, scroll to the bottom of the list and select More Apps

  5. アプリのカテゴリの一覧から、[カスタムアプリ > のアップロードをアップロードする] を選択します。Select the Upload a custom app > Upload for ... from the list of app categories:

  6. 以前に作成した Microsoft Teams アプリケーション ZIP ファイルを選択します。Select the Microsoft Teams application ZIP file previously created. これは、 manifestおよび2つのイメージファイルを含むファイルです。This is the file that contains the manifest.json and two image files.

    しばらくすると、テナント名の横にアプリケーションが表示されます。After a moment, the application will appear next to your tenant name.

    ブラウザーの Microsoft Teams クライアントを使用している場合は、アプリのページを更新しなければならない場合があります。You may need to refresh the page for the app to appear if you are using the browser Microsoft Teams client.

  7. リスト内でMyFirstTeamTabというユーザー設定のタブを選択します。Select your custom tab called MyFirstTeamTab in the list

    タブを追加します

カスタム タブが Microsoft Teams チャネルに追加され、Microsoft Teams コンテキストでコードがどのように動作するかを確認することができるようになりました。Your custom tab has been added on the Microsoft Teams channel and you can see how the code is reacting that it's in Microsoft Teams context. Web パーツのテーマは、基になる SharePoint サイトから既定で提供されます。Theme of the web part is by default coming from the underlying SharePoint site.

カスタム タブが追加されました

関連項目See also