SharePoint Framework Teams タブ開発基礎講座

SharePoint Framework
Teams タブ
開発基礎講座
及川紘旭
Microsoft MVP for Office Development
2019年11月23日

目次
◼ はじめに
◼ ハンズオンの説明
◼ Teams タブの仕組み
◼ ハンズオン
◼ ハンズオン１開発環境の構築
◼ ハンズオン２ Teams タブの開発＆デバッグ実行
◼ ハンズオン３ Teams タブのデプロイ
◼ ハンズオン４ Teams の Graph API
◼ まとめ
◼ 参考サイト
© SharePoint Developer
sharepoint.orivers.jp
2

はじめにセッションの本題に入る前に。
3

自己紹介
◼及川紘旭 (おいかわひろあき)
◼Microsoft MVP
for Office Servers and Services 2007年10月～2016年9月
for Office Development 2016年10月～
◼アドバンスド・ソリューション株式会社
SharePoint 開発担当
◼ブログ SharePoint Developer
(http://sharepoint.orivers.jp)
◼Twitter @HiroakiOikawa
◼Qiita https://qiita.com/HiroakiOikawa
4

このセッションのゴール
SharePoint Framework (SPFx) で
Teams タブの開発ができるようになる。
5

ハンズオンの説明今回実施するハンズオンをご紹介します
6

ハンズオン一覧
7
# タイトル説明
1 開発環境の構築 Docker を使って素早く SPFx 開発環境を構築する。
2 Teams タブの開発＆デバッグ実行 Teams タブを VSCode で開発しデバッグ実行する。
3 Teams タブのデプロイ Teams タブを任意の Teams 環境にデプロイして動作確認する。
4 Teams の Graph API Teams のデータを利用するため Teams Graph API を使用する。

Teams タブの仕組み
Teams タブの仕組みを知ることが
Teams タブ開発の近道
8

Teams タブの概要
◼Teams タブの特徴
⚫ Teams にタブとして追加可能なアプリ
⚫ Microsoft 製のものだけでなく、サード
パーティ製も多数存在し、自分で開発＆
追加することも可能
⚫ タブは、SPFx の Web パーツとして開発
可能（SPFx ver 1.8 以降)
9

開発環境として必要なもの
◼ OS (必須)
⚫ Windows、Mac、Linux など
◼ ブラウザ (必須)
⚫ Google Chrome がおすすめ
◼ ツール (必須)
⚫ NodeJS LTS 10.x または 8.x
※9.x はサポート外
⚫ Yeoman SharePoint generator
Version 1.8 以降
⚫ npm または yarn
⚫ gulp
◼ コードエディタ (任意)
⚫ Visual Studio Code、Sublime、ATOM
など
◼ デバッガ (任意)
⚫ Visual Studio Code Debugger for
Chrome
10

開発環境として必要なもの２
◼SharePoint モダンサイトとアプリカタログサイト
⚫ Teams タブの開発には、モダンサイトが必要です。
⚫ Teams タブのデプロイには、アプリカタログサイトが必要です。
⚫ 管理者権限を持つ上記サイトが手元にない方は、Office 365 開発者プログラ
ムに参加して、ご自身の SharePoint 環境に、サイトを作成してください。
⚫Office 365 開発者プログラム
https://developer.microsoft.com/ja-jp/office/dev-program
⚫アプリカタログサイトの作成手順
https://docs.microsoft.com/ja-jp/sharepoint/use-app-catalog
11

開発環境として必要なもの３
◼Microsoft Teams
⚫ Teams タブをデプロイする先となる Teams が必要です。
⚫ テスト用にチームを一つ作成してください。
12

ハンズオン１
開発環境の構築
Docker を使って素早く SPFx 開発環境を構
築する
13

Docker について
◼ Docker とは
◼ コンテナ型の仮想化環境（アプリケーション実行環境）を構築するためのソフトウェア。
◼ Docker を利用する理由
① 開発プロジェクトごとに任意の SPFx バージョンの環境を使用することができる。
② Docker のイメージを共有することで、複数の開発者で同じ環境を利用することができる。
◼ Windows で Docker を利用するためのシステム要件
⚫ Hyper-V が有効化されていること。
⚫ ローカルアカウントで Windows にログインしていること。（参考）
⚫ Docker を利用するユーザーが、ローカルグループの「docker-users」に登録されていること。
14
POINT!!
Docker を使用できない環境の場合は、開発 PC に直接開発環境を構築する。
参考（公式）：SharePoint Framework 開発環境の設定

はじめて開発環境を作る際の手順 1
① Google Chrome のインストール
⚫ https://www.google.co.jp/chrome/
② Docker のインストール
⚫ https://www.docker.com/get-started
③ Docker の設定
⚫ 開発中のソースファイルなどを格納するプロジェクトフォルダを作成するドライブを指定 -> Shared Drives
⚫ Docker に割り当てるリソースの設定 -> Advanced
15

はじめて開発環境を作る際の手順 2
④ Visual Studio Code のインストール
⚫ https://code.visualstudio.com/
⑤ Visual Studio Code Debugger for Chrome のインストール
⚫ Visual Studio Code 拡張機能から「Debugger for Chrome」で検索して、インストール
⑥ SharePointPnPPowerShellOnline のインストール (Teams タブ開発では使わないため任意でインストール)
⚫ PowerShell を管理者モードで起動し、以下のコマンドを実行。
Install-Module SharePointPnPPowerShellOnline
16
POINT!!
既に古いバージョンがインストールされているエラーが発生した場合は、以下のコマンドでモジュールを更新することができる。
Update-Module SharePointPnPPowerShellOnline

SPFx 開発環境用 Docker イメージの準備
SPFx 開発環境用の Docker イメージは３つの方法のいずれかで用意する。
17
# 方法手順
1 Docker Hub からダウンロード PowerShell で以下のコマンドを実行する。
docker pull waldekm/spfx:[SPFxバージョン番号]
例：SPFX 1.8.2 をダウンロードする
docker pull waldekm/spfx:1.8.2
2 dockerfile から新規作成 PowerShell で以下のコマンドを実行する。
docker build -t [ラベル] [dockerfileのパス]
例：カレントフォルダの dockerfile から新規作成する
docker build -t myspfx:1.9.1 .
3 作成済みのイメージをロード PowerShell で以下のコマンドを実行する。
docker load -i [イメージファイルのパス]
例：カレントフォルダの myspfx.tar をロードする
docker load -i myspfx1.9.1.tar
POINT!!
2019年11月現在、waldekm/spfx は
SPFx 1.8.2 までしか提供されていない。
POINT!!
SPFx 1.9.1 用の dockerfile をダウンロード。
POINT!!
SPFx 1.9.1 用の Docker イメージをダウン
ロード。
おすすめ
おすすめ

Docker コンテナの起動・停止
① プロジェクトフォルダの作成
⚫ 開発環境上に、プロジェクトのファイルを格納する作業用フォルダを作成する。
※ハンズオンでは「TeamsTabSample」フォルダを作成
② プロジェクトフォルダを VSCode で開く
⚫ 上記で作成したフォルダを VSCode で開く。
③ Docker コンテナを起動しコンテナ内の実行環境に接続する
⚫ VSCode の PowerShell ターミナルで以下のコマンドを実行する。
⚫ docker run -it --rm --name TeamsTabSample -v ${PWD}:/usr/app/spfx -p 4321:4321 -p
5432:5432 -p 35729:35729 myspfx:1.9.1
⚫ 無事起動するとコンテナ内の実行環境のコンソールに接続され、以下のように出力される。
⚫ spfx@9add4e3e420f:/usr/app/spfx$
※下線部分は環境により異なる
④ Docker コンテナを停止する
⚫ 実行環境のコンソールにて以下のコマンドを実行する。
⚫ exit
18

ハンズオン２
Teams タブの開発＆
デバッグ実行
Teams タブを VSCode で開発しデバッグ実行
する
19

Teams タブプロジェクトの作成
① Docker コンテナの起動
⚫ VSCode の PowerShell ターミナルで以下のコマンドを実行する。
⚫ docker run -it --rm --name TeamsTabSample -v ${PWD}:/usr/app/spfx -p 4321:4321 -p
5432:5432 -p 35729:35729 myspfx:1.9.1
② gulp のインストール ※waldekm/spfx から Docker イメージを取得した場合のみ実施
⚫ npm install gulp
③ プロジェクトの作成 ※コマンドの詳細は次ページ参照
⚫ yo @microsoft/sharepoint --package-manager yarn
20

◼ yo @microsoft/sharepoint の実行に関するコマンドの詳細。以下の赤字箇所をコンソールに入力する。
yo @microsoft/sharepoint --package-manager yarn
The yarn package manager will be used.
Let's create a new SharePoint solution.
? What is your solution name? TeamsTabSample
? Which baseline packages do you want to target for your component(s)? SharePoint Online only (latest)
? Where do you want to place the files? Use the current folder
Found yarn version 1.17.3
? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature
deployment or adding apps in sites? Yes
? Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? No
? Which type of client-side component to create? WebPart
Add new Web part to solution teams-tab-sample.
? What is your Web part name? TeamsTabSample
? What is your Web part description? TeamsTabSample description
? Which framework would you like to use? No JavaScript framework
21

④ デバッグ用 SPO サイトの指定
⚫ VSCode で ${PWD}/.vscode/launch.json を以下の通り修正する。
⚫ 11 行目の「https://localhost:4321/temp/workbench.html」を以下の URL に変更する。
https://localhost:5432/workbench
⚫ 28 行目の「enter-your-SharePoint-site」の個所にデバッグで使用する SPO サイトの URL を入力する。
例：サイト「orivers.sharepoint.com/sites/modern-ui」を指定する。
⑤ Teams タブへの対応
⚫ VSCode で ${PWD}/src/webparts/teamsTabSample/
TeamsTabSampleWebPart.manifest.json を以下の通り修正する。
⚫ 15 行目に「"TeamsTab"」を追加する。
22

Docker で SPFx を動かすための準備
① workbench のエラー対応 – serve.json の修正
⚫ VSCode で ${PWD}/config/serve.json を、以下の通り修正する。
⚫ 4 行目に以下の行を追加。
"hostname": "0.0.0.0",
② workbench のエラー対応 – write-manifests.json の修正
⚫ VSCode で ${PWD}/config/write-manifests.json を、以下の通り修正する。
⚫ 3 行目の最後に「,」を追加。
⚫ 4 行目に以下の行を追加。
"debugBasePath": "https://localhost:4321/"
23
POINT!!
使用する SPFx のバージョンにより修正内容が異なるため、waldekm/spfx を参照してバージョンに合わせた修正を行うこと。

Docker で SPFx を動かすための準備
③ workbench のエラー対応 – SPWebBuildReg.js の修正
⚫ VSCode で ${PWD}/node_modules/@microsoft/sp-build-web/lib/
SPWebBuildReg.js を、以下の通り修正する。
⚫ 92～94 行目を if で括る。
変更前
変更後
・92行目：if (!spBuildCoreTasks.writeManifests.taskConfig.debugBasePath) {
・96行目：}
④ 開発用証明書の作成
⚫ gulp trust-dev-cert
24
POINT!!
使用する SPFx のバージョンにより修正内容が異なるため、waldekm/spfx を参照してバージョンに合わせた修正を行うこと。

Teams タブのデバッグ実行 Local workbench
① 開発サーバーの起動
⚫ gulp serve
② VSCode でのデバッグ実行
⚫ VSCode の左メニューから以下のアイコンをクリックしてデバッグモードに切り替える。
⚫ VSCode の左上部の▶をクリックする。
⚫ Chrome ブラウザが起動し「https://localhost:5432/workbench」が自動的に開く。
⚫ 「この接続ではプライバシーが保護されません」と記載されたページが表示されるため、
画面下部の「localhost にアクセスする（安全ではありません）」をクリックする。
⚫ 「https://localhost:4321/temp/workbench.html」にリダイレクトされる。
⚫ Local workbench に TeamsTabSample Web パーツを配置できることを確認する。
③ 開発サーバーの停止
⚫ 実行環境のコンソールをクリックした状態で、キーボードにて「Ctrl + C」キーを押す。
25

Teams タブのデバッグ実行 Hosted workbench
① 開発サーバーの起動
⚫ gulp serve
② VSCode でのデバッグ実行
⚫ VSCode の左メニューからデバッグモードに切り替える。
⚫ VSCode の左上部の「Local workbench」のプルダウンから「Hosted workbench」を選択し▶をクリック
する。
⚫ Chrome ブラウザが起動し launch.json に指定した SPO サイトの workbench が自動的に開く。
⚫ SPO サイトの workbench に TeamsTabSample Web パーツを配置できることを確認する。
③ 開発サーバーの停止
⚫ 実行環境のコンソールをクリックした状態で、キーボードにて「Ctrl + C」キーを押す。
26
POINT!!
Local workbench では SPO コンテキスト外で動作するため、ログインユーザーの情報や Web パーツが設置されたサイトの情報を取得できない。
SPO コンテキストを使用する場合には、Hosted workbench でデバッグ実行する必要がある。

ハンズオン３
Teams タブのデプロイ
Teams タブを任意の Teams 環境にデプロイ
して動作確認する
27

パッケージファイルの作成・登録
① パッケージの作成
⚫ gulp bundle --ship
⚫ gulp package-solution --ship
② パッケージファイルをアプリカタログにアップロード
⚫ ブラウザでアプリカタログを開き、以下のファイルをアプリカタログの SharePoint 用アプリライブラリにアップロードする。
${PWD}/sharepoint/solution/teams-tab-sample.sppkg
⚫ アップロードすると下図ダイアログが表示されるので、[このソリューションを組織内のすべてのサイトで使用できるようにする]に
チェックを付けて[展開]ボタンをクリックする。
28

Teams への登録
③ Teams への登録
⚫ 一覧からアップロードしたパッケージファイルを選択し、[ファイル]メニューの[チームと同期]をクリックする。
⚫ 同期が完了すると、画面右側に[チームのソリューションが正常に同期されました]が表示される。
⚫ Teams を起動し、画面左下の[アプリ]アイコンをクリック、「[サイトコレクション名] 向けに構築」をクリックし、
右ペインに登録したアプリが追加されていることを確認する。
29

Teams タブの追加
① タブの追加
⚫ テストで使用するチームを開き、[タブの追加] で開発したアプリをクリックする。
⚫ [追加]をクリックする。
30

Teams タブの追加
② タブの追加
⚫ ダイアログが開くので[保存]ボタンをクリックする。
③ タブの確認
⚫ Workbench で実行した時と同じように Teams タブが表示されることを確認する
31

ハンズオン４
Teams の Graph API
Teams のデータを利用するため Teams
Graph API を使用する
32

今回使用する Teams Graph API
33
# 機能 URL 権限
1 自分が所属するチームの一覧を
取得する
https://graph.microsoft.com/v1.0/me/joinedTeams User.Read.All
User.ReadWrite.All
2 指定のチームのすべてのチャネル
を取得する
https://graph.microsoft.com/v1.0/teams/{TeamId}/channels
※TeamId は、#1 の API で取得
Group.Read.All
Group.ReadWrite.All
3 指定のチーム、チャネルのすべて
のルートメッセージを取得する
https://graph.microsoft.com/beta/teams/{TeamId}/channels/{ChannelId}
/messages
※ChannelId は、#2 の API で取得
Group.Read.All
Group.ReadWrite.All
4 指定のチーム、チャネル、メッセー
ジのすべての返信を取得する
https://graph.microsoft.com/beta/teams/{TeamId}/channels/{ChannelId}
/messages/{MessageId}/replies
※MessageId は、#3 の API で取得
Group.Read.All
Group.ReadWrite.All
公式：Microsoft Graph API を使用して Microsoft Teams で作業する。
https://docs.microsoft.com/ja-jp/graph/api/resources/teams-api-overview

Graph エクスプローラーでの確認
① Graph エクスプローラーを開く
⚫ ブラウザで以下の URL にアクセスしサインインする。
⚫https://developer.microsoft.com/ja-jp/graph/graph-explorer
② サンプルカテゴリの追加
⚫ サンプルカテゴリの「Microsoft Teams」と「Microsoft Teams (ベータ版)」を追加する。
③ Graph API の実行
⚫ 前ページを参考に、Graph API で Teams のサンプルを実行し、結果を確認する。
34
POINT!!
Teams の Graph API はチーム内のチャット（メッセージ）を操作するための API が 2019年11月現在でベータ版となっているため、正式版がリ
リースされたら URL を変更する必要がある。

Teams タブサンプルの説明
35
◼ サンプルの内容
⚫ Teams Graph API を使用して、会話のデータを取得して一覧表示する。
◼ サンプルのイメージ
⚫ アドインの画面
◼ ソースファイルの場所
⚫ 変更したファイルを格納した ZIP ファイル
⚫ https://1drv.ms/u/s!AhsmvUlTfRPNq4kQWklEDKFfisqfJw?e=JmcWAt
アドイン本体プロパティパネル

Teams タブサンプル事前準備
◼TypeScript の型定義情報のインポート
⚫ yarn add @microsoft/microsoft-graph-types
⚫ yarn add microsoftgraph/msgraph-typescript-typings#beta
36

Teams タブサンプル変更箇所の説明
37
ファイル変更ラベル説明
/config/package-solution.json add-1 Teams Graph API を使用する際に必要となるアクセス権限を指定。
管理者が Teams タブをインストールする際に、アクセス権の要求としてここで指定したアクセス権の承認が要求される。
/src/webparts/teamsTabSample/
loc/mystrings.d.ts
add-1 Teams タブのプロパティパネルに表示するプロパティ名の変数宣言。
ここで指定した変数の値は、リソースファイルで指定する。
loc/en-us.js
add-1 mystrings.d.ts で指定した変数に代入する値を指定。
TeamsTabSampleWebPart.manife
st.json
add-1 Teams タブのプロパティにセットする初期値を指定。
プロパティの実体は、Teams タブ Web パーツのソースで宣言している。
TeamsTabSampleWebPart.ts
add-1 以下のライブラリのインポート処理。
• Teams タブを開発するための基本となるライブラリ (@microsoft/teams-js)
• SPFx に含まれる Graph API 呼出用のライブラリ (@microsoft/sp-http)
• Teams Graph API のベータ版の TypeScript 型指定用のライブラリ (@microsoft/microsoft-graph-types-beta)
add-2 Teams タブに追加するプロパティの値を保持するための変数宣言。
add-3 Teams 上に Web パーツを設置した際に、Teams タブとしてのコンテキスト情報を保持するための変数宣言。
add-4 Web パーツが Teams タブに設置されたかどうかをチェックして Teams コンテキストを取得する処理。
add-5 Teams タブのプロパティを設定するための処理。
add-6 MSGraphClient を使用して、プロパティで指定された会話情報を取得し HTML レンダリングする処理。
add-7 Teams タブのプロパティとして追加する内容を指定。

Teams タブのデバッグについて
◼ Teams タブのデバッグの問題点
⚫ Teams タブの実装として、Teams タブのコンテキストが必要な場合、開発中のプログラムを
Teams に追加しなければコンテキストを得られず、デバッグすることができない。
⚫ Teams アプリの場合、F12 ツール等でデバッグすることができないため、デバッグを行うこと自体が
困難になる。
◼ おすすめの Teams タブデバッグ方法
◼ Teams タブの実体は、SPFx Web パーツのため、 SPFx Web パーツと同じデバッグ方法ができ
るようにすると良い。
① Teams タブにプロパティとして、Teams タブのコンテキストを生成するために必要な値を追加する。
② この Teams タブの Web パーツを、SharePoint Online の Workbench に配置する。
③ ①で指定したプロパティに、自身の環境の Teams ID、Channel ID を指定する。
38

まとめ本日のセッションのまとめ。
39

まとめ
◼開発環境に Docker を使うことで SPFx の頻繁なバージョンアップに追
従。
◼Teams タブの実体は、SPFx Web パーツ。
◼Teams のデータを取得するためには、Teams Graph API を使用する。
◼Teams タブのデバッグは SPO の Workbench で行う。
◼Teams タブのデプロイは SPO のアプリカタログに対して行う。
40

参考情報
◼Teams タブ開発のチュートリアル
◼ https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/web-
parts/get-started/using-web-part-as-ms-teams-tab
◼Teams API の説明
◼ https://docs.microsoft.com/ja-jp/graph/api/resources/teams-
api-overview?view=graph-rest-beta
41

SharePoint Framework Teams タブ開発基礎講座

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to SharePoint Framework Teams タブ開発基礎講座

Similar to SharePoint Framework Teams タブ開発基礎講座 (20)

More from Hiroaki Oikawa

More from Hiroaki Oikawa (16)

SharePoint Framework Teams タブ開発基礎講座