【SharePoint Online】作成したWebパーツをTeamsタブとして利用する ーSPFx開発 その8ー

こんにちは。
今回は前回までに作成したWebパーツをTeamsのタブとして利用できるように設定を行っていきたいと思います。
参考にさせていただいたサイトはこちらです。

参考サイトと異なる点として、SharePoint Framework ソリューションのテナント全体での展開オプションを利用していません。
Microsoft Teams の背後にある SharePoint サイトにソリューションを展開してからTeamsタブに展開しています。

それでは行きましょう。

SharePoint Frameworkの記事一覧

Teamsで利用できるようにコードを修正する

src\webparts\[Project Name]\[Project Name]WebPart.manifest.jsonを展開します。
その中の”supportedHosts”というセクションには、
サポートされるホストが記載されています。
この行を以下のように変更します。

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

次に、src\webparts\[Project Name]\[Project Name]WebPart.tsを展開してください。
先頭にあるインポートブロックに以下コードを追加してください。

import * as microsoftTeams from '@microsoft/teams-js';

クラス内の先頭に以下コードを追加してください。

  private _teamsContext: microsoftTeams.Context;
  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;
  }

コードの修正は以上です。
これだけでTeamsに対応できるのはさすがですよね。

Teamsに公開してみる

PowerShellで作業ディレクトリに移行して、以下コマンドを実行しましょう。
これでソリューションをビルドして、パッケージ化が完了します。

gulp build
gulp bundle --ship
gulp package-solution --ship

※「The build failed because a task wrote output to stderr.
 Exiting with exit code: 1」
 と表示された場合、以下コマンドを利用してください。
 バグのようです。

gulp build
gulp bundle --debug
gulp package-solution --ship

ではアプリカタログサイトにアップロードしましょう。
sharepoint\solution配下にあるsppkgファイルをSharePoint用アプリライブラリにアップロードしましょう。

アップロードが完了したらアイテムを選択し、ファイルリボンから[チームと同期]をクリックします。

※”ソリューションをチームに同期できませんでした”と表示された場合は、アイテムを削除し、再度アップロードしてみてください。

追加したいTeamsの背後にあるSPサイトにアクセスします。
サイトコンテンツから、自身のアプリを追加します。

ではTeamsにアクセスしましょう。
対象チームのチャネルを選択して、+ボタンを押下します。

その他のタブに存在していました。

追加して、正常に表示できることを確認しましょう。

正しく表示されましたね。

終わりに

今回は以上となります。
SharePoint Framework ソリューションのテナント全体での展開オプションを使用している場合は、Teams全体に展開する方法もあるようですので、
こちらも今後試していくかもしれません。

それではまた。

次:
 未定

SharePoint Frameworkの記事一覧