Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SharePoint Framework Teams タブ開発基礎講座

1,020 views

Published on

Global Microsoft 365 Developer Bootcamp 2019 Tokyo で使用した、Teams タブ開発のハンズオン資料です。

Published in: Software
  • Be the first to comment

SharePoint Framework Teams タブ開発基礎講座

  1. 1. SharePoint Framework Teams タブ 開発基礎講座 及川 紘旭 Microsoft MVP for Office Development 2019年11月23日
  2. 2. 目次 ◼ はじめに ◼ ハンズオンの説明 ◼ Teams タブの仕組み ◼ ハンズオン ◼ ハンズオン1 開発環境の構築 ◼ ハンズオン2 Teams タブの開発&デバッグ実行 ◼ ハンズオン3 Teams タブのデプロイ ◼ ハンズオン4 Teams の Graph API ◼ まとめ ◼ 参考サイト © SharePoint Developer sharepoint.orivers.jp 2
  3. 3. はじめに セッションの本題に入る前に。 3
  4. 4. 自己紹介 ◼及川 紘旭 (おいかわ ひろあき) ◼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 © SharePoint Developer sharepoint.orivers.jp 4
  5. 5. このセッションのゴール SharePoint Framework (SPFx) で Teams タブの開発ができるようになる。 © SharePoint Developer sharepoint.orivers.jp 5
  6. 6. ハンズオンの説明 今回実施するハンズオンをご紹介します 6
  7. 7. ハンズオン一覧 © SharePoint Developer sharepoint.orivers.jp 7 # タイトル 説明 1 開発環境の構築 Docker を使って素早く SPFx 開発環境を構築する。 2 Teams タブの開発&デバッグ実行 Teams タブを VSCode で開発しデバッグ実行する。 3 Teams タブのデプロイ Teams タブを任意の Teams 環境にデプロイして動作確認する。 4 Teams の Graph API Teams のデータを利用するため Teams Graph API を使用する。
  8. 8. Teams タブの仕組み Teams タブの仕組みを知ることが Teams タブ開発の近道 8
  9. 9. Teams タブの概要 ◼Teams タブの特徴 ⚫ Teams にタブとして追加可能なアプリ ⚫ Microsoft 製のものだけでなく、サード パーティ製も多数存在し、自分で開発& 追加することも可能 ⚫ タブは、SPFx の Web パーツとして開発 可能 (SPFx ver 1.8 以降) © SharePoint Developer sharepoint.orivers.jp 9
  10. 10. 開発環境として必要なもの ◼ 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 © SharePoint Developer sharepoint.orivers.jp 10
  11. 11. 開発環境として必要なもの2 ◼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 © SharePoint Developer sharepoint.orivers.jp 11
  12. 12. 開発環境として必要なもの3 ◼Microsoft Teams ⚫ Teams タブをデプロイする先となる Teams が必要です。 ⚫ テスト用にチームを一つ作成してください。 © SharePoint Developer sharepoint.orivers.jp 12
  13. 13. ハンズオン1 開発環境の構築 Docker を使って素早く SPFx 開発環境を構 築する 13
  14. 14. Docker について ◼ Docker とは ◼ コンテナ型の仮想化環境(アプリケーション実行環境)を構築するためのソフトウェア。 ◼ Docker を利用する理由 ① 開発プロジェクトごとに任意の SPFx バージョンの環境を使用することができる。 ② Docker のイメージを共有することで、複数の開発者で同じ環境を利用することができる。 ◼ Windows で Docker を利用するためのシステム要件 ⚫ Hyper-V が有効化されていること。 ⚫ ローカルアカウントで Windows にログインしていること。(参考) ⚫ Docker を利用するユーザーが、ローカルグループの「docker-users」に登録されていること。 © SharePoint Developer sharepoint.orivers.jp 14 POINT!! Docker を使用できない環境の場合は、開発 PC に直接開発環境を構築する。 参考(公式):SharePoint Framework 開発環境の設定
  15. 15. はじめて開発環境を作る際の手順 1 ① Google Chrome のインストール ⚫ https://www.google.co.jp/chrome/ ② Docker のインストール ⚫ https://www.docker.com/get-started ③ Docker の設定 ⚫ 開発中のソースファイルなどを格納するプロジェクトフォルダを作成するドライブを指定 -> Shared Drives ⚫ Docker に割り当てるリソースの設定 -> Advanced © SharePoint Developer sharepoint.orivers.jp 15
  16. 16. はじめて開発環境を作る際の手順 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 © SharePoint Developer sharepoint.orivers.jp 16 POINT!! 既に古いバージョンがインストールされているエラーが発生した場合は、以下のコマンドでモジュールを更新することができる。 Update-Module SharePointPnPPowerShellOnline
  17. 17. SPFx 開発環境用 Docker イメージの準備 SPFx 開発環境用の Docker イメージは3つの方法のいずれかで用意する。 © SharePoint Developer sharepoint.orivers.jp 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 イメージをダウン ロード。 おすすめ おすすめ
  18. 18. 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 © SharePoint Developer sharepoint.orivers.jp 18
  19. 19. ハンズオン2 Teams タブの開発& デバッグ実行 Teams タブを VSCode で開発しデバッグ実行 する 19
  20. 20. 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 © SharePoint Developer sharepoint.orivers.jp 20
  21. 21. Teams タブプロジェクトの作成 ◼ 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 © SharePoint Developer sharepoint.orivers.jp 21
  22. 22. Teams タブプロジェクトの作成 ④ デバッグ用 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"」を追加する。 © SharePoint Developer sharepoint.orivers.jp 22
  23. 23. 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/" © SharePoint Developer sharepoint.orivers.jp 23 POINT!! 使用する SPFx のバージョンにより修正内容が異なるため、waldekm/spfx を参照してバージョンに合わせた修正を行うこと。
  24. 24. 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 © SharePoint Developer sharepoint.orivers.jp 24 POINT!! 使用する SPFx のバージョンにより修正内容が異なるため、waldekm/spfx を参照してバージョンに合わせた修正を行うこと。
  25. 25. 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」キーを押す。 © SharePoint Developer sharepoint.orivers.jp 25
  26. 26. Teams タブのデバッグ実行 Hosted workbench ① 開発サーバーの起動 ⚫ 実行環境のコンソールにて以下のコマンドを実行する。 ⚫ gulp serve ② VSCode でのデバッグ実行 ⚫ VSCode の左メニューからデバッグモードに切り替える。 ⚫ VSCode の左上部の「Local workbench」のプルダウンから「Hosted workbench」を選択し▶をクリック する。 ⚫ Chrome ブラウザが起動し launch.json に指定した SPO サイトの workbench が自動的に開く。 ⚫ SPO サイトの workbench に TeamsTabSample Web パーツを配置できることを確認する。 ③ 開発サーバーの停止 ⚫ 実行環境のコンソールをクリックした状態で、キーボードにて「Ctrl + C」キーを押す。 © SharePoint Developer sharepoint.orivers.jp 26 POINT!! Local workbench では SPO コンテキスト外で動作するため、ログインユーザーの情報や Web パーツが設置されたサイトの情報を取得できない。 SPO コンテキストを使用する場合には、Hosted workbench でデバッグ実行する必要がある。
  27. 27. ハンズオン3 Teams タブのデプロイ Teams タブを任意の Teams 環境にデプロイ して動作確認する 27
  28. 28. パッケージファイルの作成・登録 ① パッケージの作成 ⚫ 実行環境のコンソールにて以下のコマンドを実行する。 ⚫ gulp bundle --ship ⚫ gulp package-solution --ship ② パッケージファイルをアプリカタログにアップロード ⚫ ブラウザでアプリカタログを開き、以下のファイルをアプリカタログの SharePoint 用アプリライブラリにアップロードする。 ${PWD}/sharepoint/solution/teams-tab-sample.sppkg ⚫ アップロードすると下図ダイアログが表示されるので、[このソリューションを組織内のすべてのサイトで使用できるようにする]に チェックを付けて[展開]ボタンをクリックする。 © SharePoint Developer sharepoint.orivers.jp 28
  29. 29. Teams への登録 ③ Teams への登録 ⚫ 一覧からアップロードしたパッケージファイルを選択し、[ファイル]メニューの[チームと同期]をクリックする。 ⚫ 同期が完了すると、画面右側に[チームのソリューションが正常に同期されました]が表示される。 ⚫ Teams を起動し、画面左下の[アプリ]アイコンをクリック、「[サイトコレクション名] 向けに構築」をクリックし、 右ペインに登録したアプリが追加されていることを確認する。 © SharePoint Developer sharepoint.orivers.jp 29
  30. 30. Teams タブの追加 ① タブの追加 ⚫ テストで使用するチームを開き、[タブの追加] で開発したアプリをクリックする。 ⚫ [追加]をクリックする。 © SharePoint Developer sharepoint.orivers.jp 30
  31. 31. Teams タブの追加 ② タブの追加 ⚫ ダイアログが開くので[保存]ボタンをクリックする。 ③ タブの確認 ⚫ Workbench で実行した時と同じように Teams タブが表示されることを確認する © SharePoint Developer sharepoint.orivers.jp 31
  32. 32. ハンズオン4 Teams の Graph API Teams のデータを利用するため Teams Graph API を使用する 32
  33. 33. 今回使用する Teams Graph API © SharePoint Developer sharepoint.orivers.jp 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
  34. 34. Graph エクスプローラーでの確認 ① Graph エクスプローラーを開く ⚫ ブラウザで以下の URL にアクセスしサインインする。 ⚫https://developer.microsoft.com/ja-jp/graph/graph-explorer ② サンプルカテゴリの追加 ⚫ サンプルカテゴリの「Microsoft Teams」と「Microsoft Teams (ベータ版)」を追加する。 ③ Graph API の実行 ⚫ 前ページを参考に、Graph API で Teams のサンプルを実行し、結果を確認する。 © SharePoint Developer sharepoint.orivers.jp 34 POINT!! Teams の Graph API はチーム内のチャット(メッセージ)を操作するための API が 2019年11月現在でベータ版となっているため、正式版がリ リースされたら URL を変更する必要がある。
  35. 35. Teams タブ サンプルの説明 © SharePoint Developer sharepoint.orivers.jp 35 ◼ サンプルの内容 ⚫ Teams Graph API を使用して、会話のデータを取得して一覧表示する。 ◼ サンプルのイメージ ⚫ アドインの画面 ◼ ソースファイルの場所 ⚫ 変更したファイルを格納した ZIP ファイル ⚫ https://1drv.ms/u/s!AhsmvUlTfRPNq4kQWklEDKFfisqfJw?e=JmcWAt アドイン本体 プロパティパネル
  36. 36. Teams タブ サンプル 事前準備 ◼TypeScript の型定義情報のインポート ⚫ 実行環境のコンソールにて以下のコマンドを実行する。 ⚫ yarn add @microsoft/microsoft-graph-types ⚫ yarn add microsoftgraph/msgraph-typescript-typings#beta © SharePoint Developer sharepoint.orivers.jp 36
  37. 37. Teams タブ サンプル 変更箇所の説明 © SharePoint Developer sharepoint.orivers.jp 37 ファイル 変更ラベル 説明 /config/package-solution.json add-1 Teams Graph API を使用する際に必要となるアクセス権限を指定。 管理者が Teams タブをインストールする際に、アクセス権の要求としてここで指定したアクセス権の承認が要求される。 /src/webparts/teamsTabSample/ loc/mystrings.d.ts add-1 Teams タブのプロパティパネルに表示するプロパティ名の変数宣言。 ここで指定した変数の値は、リソースファイルで指定する。 /src/webparts/teamsTabSample/ loc/en-us.js add-1 mystrings.d.ts で指定した変数に代入する値を指定。 /src/webparts/teamsTabSample/ TeamsTabSampleWebPart.manife st.json add-1 Teams タブのプロパティにセットする初期値を指定。 プロパティの実体は、Teams タブ Web パーツのソースで宣言している。 /src/webparts/teamsTabSample/ 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 タブのプロパティとして追加する内容を指定。
  38. 38. Teams タブのデバッグについて ◼ Teams タブのデバッグの問題点 ⚫ Teams タブの実装として、Teams タブのコンテキストが必要な場合、開発中のプログラムを Teams に追加しなければコンテキストを得られず、デバッグすることができない。 ⚫ Teams アプリの場合、F12 ツール等でデバッグすることができないため、デバッグを行うこと自体が 困難になる。 ◼ おすすめの Teams タブデバッグ方法 ◼ Teams タブの実体は、SPFx Web パーツのため、 SPFx Web パーツと同じデバッグ方法ができ るようにすると良い。 ① Teams タブにプロパティとして、Teams タブのコンテキストを生成するために必要な値を追加する。 ② この Teams タブの Web パーツを、SharePoint Online の Workbench に配置する。 ③ ①で指定したプロパティに、自身の環境の Teams ID、Channel ID を指定する。 © SharePoint Developer sharepoint.orivers.jp 38
  39. 39. まとめ 本日のセッションのまとめ。 39
  40. 40. まとめ ◼開発環境に Docker を使うことで SPFx の頻繁なバージョンアップに追 従。 ◼Teams タブの実体は、SPFx Web パーツ。 ◼Teams のデータを取得するためには、Teams Graph API を使用する。 ◼Teams タブのデバッグは SPO の Workbench で行う。 ◼Teams タブのデプロイは SPO のアプリカタログに対して行う。 © SharePoint Developer sharepoint.orivers.jp 40
  41. 41. 参考情報 ◼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 © SharePoint Developer sharepoint.orivers.jp 41

×