たまには、バリッと開発寄りの記事を書きます。

SharePoint Framework を使うとモダンサイトはもちろん、クラシックな SharePoint サイトでもクライアント サイド実行の Webパーツを独自に作成できます。

この Framework は現在はSharePoint Framework 1.7 (2018年11月リリース)が最新で、もうすぐ v 1.8 がリリースされるところまで来ています。v 1.7で追加された目玉機能の一つがプレビュー機能ではあるものの、"SharePoint Framework for Teams Tabs" のサポートです。

SharePoint Webパーツを Teams のタブとしても利用できるようにするというもの。

作り方の大まかな流れは次の通りです。

1. Yeomanジェネレータ実行時に --plusbeta オプションを指定してスキャッフォルディングする
2. Teams フォルダーが生成される
3. 通常通り Webパーツコードを記述していく
4. Gulp bundle --ship および Gulp package-solution --ship を実行する
5. Teams フォルダー内のファイルを Zip 化し、Teams 側へアップロード
6. アプリをタブとして追加

では、分かりにくいであろうところを少し補足していきましょう。

まず Yeoman ジェネレータですが、v1.5 から --plusbeta オプションが追加されました。このオプションを追加することでプレビュー段階の機能を試せるようになっています。Teams タブとして利用するにはこの --plusbeta オプションが必要です。

>yo @microsoft/sharepoing --plusbeta

ソリューションパッケージを Ship モードで作成すると下図の通り Teams フォルダー内に manifest.json と Teams内で使用する既定のアイコンが2つ用意されます。

このフォルダー内のファイルを手動で単純に ZIP化します。

これをTeamsのチーム所有者が下記の場所からアップロードするだけです。

アップロードが終わると、アプリ一覧に SPFx アプリが表示されます。

あとは、SharePoint サイト上で Webパーツが動作し、同じものがTeams内でも動作することを確認してみましょう。ちなみに、デモのアプリはカレント SharePoint サイト内のライブラリ一覧を取得するようにしています。Teams 内で動作させているように見えるこのアプリですが、実体となるコードは SharePoint側でホストされることになるため、同一サイトを利用しているTeamsのチーム上でも同じ結果が得られます。