【SharePoint Framework】Microsoft Teams の Personal Apps を作成する

f:id:tecchan365:20200118173912p:plain

SharePoint Framework 1.10 から Microsoft Teams の Personal Apps の作成に対応いたしました。
本記事は、実際に試しに作ったときのメモ書きです。

developer.microsoft.com

Personal Apps って?

以下を参照ください。

docs.microsoft.com

Yeoman SharePoint generator のアップデート

以下のコマンドを実行し、Yeoman SharePoint generator をアップデートします。

npm update -g @microsoft/generator-sharepoint  

f:id:tecchan365:20200118164923p:plain

プロジェクトの作成

通常の Webパーツ開発のように、以下のコマンドからスキャフォールディングしていきます。

yo @microsoft/sharepoint   

今回は、以下のように回答して作成しました。

f:id:tecchan365:20200118165750p:plain

マニフェストファイルの編集

Webパーツのマニフェストファイルを開き、"supportedHosts" に "TeamsPersonalApp" を追加します。

f:id:tecchan365:20200118174012p:plain

パッケージ・展開

以下のコマンドを実行し、 バンドル・パッケージします。

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

完了すると、「sharepoint/src」フォルダーにパッケージファイル(.sppkg)が作成されます。

f:id:tecchan365:20200118170753p:plain

作成されたパッケージファイルを、アプリカタログにアップロードしします。

f:id:tecchan365:20200118171043p:plain

f:id:tecchan365:20200118171154p:plain

アップロード後、アップロードしたファイルをクリックし、リボンメニューの [ファイル] > [チームと同期] の順にクリックします。

f:id:tecchan365:20200118172033p:plain

同期が完了すると、画面右上にメッセージが表示されます。

f:id:tecchan365:20200118172256p:plain

Personal Apps に追加

Microsoft Teams を開き、 左下の [アプリ] > [XXXX 向けに構築] > [追加するアプリ] の順にクリックします。

f:id:tecchan365:20200118171810p:plain

[追加] をクリックします。

f:id:tecchan365:20200118172416p:plain

画面左のタブに、追加したアプリケーションが表示され、クリックすると作成したWebパーツが表示されます。

f:id:tecchan365:20200118172724p:plain

ピン留めをしておけば、常に画面左のバーに表示されるようになります。

f:id:tecchan365:20200118174217p:plain