Enviar búsqueda
Cargar
SharePoint Framework Teams タブ開発基礎講座
•
4 recomendaciones
•
4,348 vistas
Hiroaki Oikawa
Seguir
Global Microsoft 365 Developer Bootcamp 2019 Tokyo で使用した、Teams タブ開発のハンズオン資料です。
Leer menos
Leer más
Software
Denunciar
Compartir
Denunciar
Compartir
1 de 41
Descargar ahora
Descargar para leer sin conexión
Recomendados
技術ブログを書こう
技術ブログを書こう
akira6592
RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話
Takuto Wada
SharePoint 開発でできること 2019年9月版
SharePoint 開発でできること 2019年9月版
Hiroaki Oikawa
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
増田 亨
世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計
増田 亨
Docker Compose 徹底解説
Docker Compose 徹底解説
Masahito Zembutsu
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
NTTデータ流Infrastructure as Code~ 大規模プロジェクトを通して考え抜いた基盤自動化の新たな姿~(NTTデータ テクノロジーカンフ...
NTTデータ流Infrastructure as Code~ 大規模プロジェクトを通して考え抜いた基盤自動化の新たな姿~(NTTデータ テクノロジーカンフ...
NTT DATA Technology & Innovation
Recomendados
技術ブログを書こう
技術ブログを書こう
akira6592
RESTful Web アプリの設計レビューの話
RESTful Web アプリの設計レビューの話
Takuto Wada
SharePoint 開発でできること 2019年9月版
SharePoint 開発でできること 2019年9月版
Hiroaki Oikawa
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
増田 亨
世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計
増田 亨
Docker Compose 徹底解説
Docker Compose 徹底解説
Masahito Zembutsu
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
NTTデータ流Infrastructure as Code~ 大規模プロジェクトを通して考え抜いた基盤自動化の新たな姿~(NTTデータ テクノロジーカンフ...
NTTデータ流Infrastructure as Code~ 大規模プロジェクトを通して考え抜いた基盤自動化の新たな姿~(NTTデータ テクノロジーカンフ...
NTT DATA Technology & Innovation
DevOps Overview
DevOps Overview
IIJ
Viva Connections 拡張機能入門
Viva Connections 拡張機能入門
Hiroaki Oikawa
「黒騎士と白の魔王」gRPCによるHTTP/2 - API, Streamingの実践
「黒騎士と白の魔王」gRPCによるHTTP/2 - API, Streamingの実践
Yoshifumi Kawai
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Takuto Wada
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
Kohei Tokunaga
Iocコンテナについて
Iocコンテナについて
Akio Terayama
REST API のコツ
REST API のコツ
pospome
JIRA Agileを活用したアジャイル開発実践事例 #AUGJ
JIRA Agileを活用したアジャイル開発実践事例 #AUGJ
満徳 関
インフラエンジニアってなんでしたっけ(仮)
インフラエンジニアってなんでしたっけ(仮)
Akihiro Kuwano
GitLab から GitLab に移行したときの思い出
GitLab から GitLab に移行したときの思い出
富士通クラウドテクノロジーズ株式会社
え!?データがオンプレにあるけどPower BI で BI したいの?
え!?データがオンプレにあるけどPower BI で BI したいの?
Yugo Shimizu
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
Akihiro Kuwano
『コンテナ疲れ』と戦う、k8s・PaaS・Serverlessの活用法
『コンテナ疲れ』と戦う、k8s・PaaS・Serverlessの活用法
Kazuto Kusama
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
増田 亨
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
Dockerfile を書くためのベストプラクティス解説編
Dockerfile を書くためのベストプラクティス解説編
Masahito Zembutsu
Azure AD とアプリケーションを SAML 連携する際に陥る事例と対処方法について
Azure AD とアプリケーションを SAML 連携する際に陥る事例と対処方法について
Shinya Yamaguchi
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
Tokoroten Nakayama
Microsoft Graph APIを活用した社内アプリケーション開発
Microsoft Graph APIを活用した社内アプリケーション開発
Yuki Hattori
人は一ヶ月でエンジニアになれるのか - 詳細解説
人は一ヶ月でエンジニアになれるのか - 詳細解説
Livesense Inc.
SharePoint Framework Extension 基礎講座
SharePoint Framework Extension 基礎講座
Hiroaki Oikawa
はじめてのコンテナーDocker & Windows & Linux
はじめてのコンテナーDocker & Windows & Linux
Kazushi Kamegawa
Más contenido relacionado
La actualidad más candente
DevOps Overview
DevOps Overview
IIJ
Viva Connections 拡張機能入門
Viva Connections 拡張機能入門
Hiroaki Oikawa
「黒騎士と白の魔王」gRPCによるHTTP/2 - API, Streamingの実践
「黒騎士と白の魔王」gRPCによるHTTP/2 - API, Streamingの実践
Yoshifumi Kawai
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Takuto Wada
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
Kohei Tokunaga
Iocコンテナについて
Iocコンテナについて
Akio Terayama
REST API のコツ
REST API のコツ
pospome
JIRA Agileを活用したアジャイル開発実践事例 #AUGJ
JIRA Agileを活用したアジャイル開発実践事例 #AUGJ
満徳 関
インフラエンジニアってなんでしたっけ(仮)
インフラエンジニアってなんでしたっけ(仮)
Akihiro Kuwano
GitLab から GitLab に移行したときの思い出
GitLab から GitLab に移行したときの思い出
富士通クラウドテクノロジーズ株式会社
え!?データがオンプレにあるけどPower BI で BI したいの?
え!?データがオンプレにあるけどPower BI で BI したいの?
Yugo Shimizu
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
Akihiro Kuwano
『コンテナ疲れ』と戦う、k8s・PaaS・Serverlessの活用法
『コンテナ疲れ』と戦う、k8s・PaaS・Serverlessの活用法
Kazuto Kusama
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
増田 亨
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Atsushi Nakamura
Dockerfile を書くためのベストプラクティス解説編
Dockerfile を書くためのベストプラクティス解説編
Masahito Zembutsu
Azure AD とアプリケーションを SAML 連携する際に陥る事例と対処方法について
Azure AD とアプリケーションを SAML 連携する際に陥る事例と対処方法について
Shinya Yamaguchi
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
Tokoroten Nakayama
Microsoft Graph APIを活用した社内アプリケーション開発
Microsoft Graph APIを活用した社内アプリケーション開発
Yuki Hattori
人は一ヶ月でエンジニアになれるのか - 詳細解説
人は一ヶ月でエンジニアになれるのか - 詳細解説
Livesense Inc.
La actualidad más candente
(20)
DevOps Overview
DevOps Overview
Viva Connections 拡張機能入門
Viva Connections 拡張機能入門
「黒騎士と白の魔王」gRPCによるHTTP/2 - API, Streamingの実践
「黒騎士と白の魔王」gRPCによるHTTP/2 - API, Streamingの実践
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
SQLアンチパターン 幻の第26章「とりあえず削除フラグ」
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
Iocコンテナについて
Iocコンテナについて
REST API のコツ
REST API のコツ
JIRA Agileを活用したアジャイル開発実践事例 #AUGJ
JIRA Agileを活用したアジャイル開発実践事例 #AUGJ
インフラエンジニアってなんでしたっけ(仮)
インフラエンジニアってなんでしたっけ(仮)
GitLab から GitLab に移行したときの思い出
GitLab から GitLab に移行したときの思い出
え!?データがオンプレにあるけどPower BI で BI したいの?
え!?データがオンプレにあるけどPower BI で BI したいの?
AWSのログ管理ベストプラクティス
AWSのログ管理ベストプラクティス
『コンテナ疲れ』と戦う、k8s・PaaS・Serverlessの活用法
『コンテナ疲れ』と戦う、k8s・PaaS・Serverlessの活用法
ドメイン駆動設計のためのオブジェクト指向入門
ドメイン駆動設計のためのオブジェクト指向入門
世界一わかりやすいClean Architecture
世界一わかりやすいClean Architecture
Dockerfile を書くためのベストプラクティス解説編
Dockerfile を書くためのベストプラクティス解説編
Azure AD とアプリケーションを SAML 連携する際に陥る事例と対処方法について
Azure AD とアプリケーションを SAML 連携する際に陥る事例と対処方法について
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
DXとかDevOpsとかのなんかいい感じのやつ 富士通TechLive
Microsoft Graph APIを活用した社内アプリケーション開発
Microsoft Graph APIを活用した社内アプリケーション開発
人は一ヶ月でエンジニアになれるのか - 詳細解説
人は一ヶ月でエンジニアになれるのか - 詳細解説
Similar a SharePoint Framework Teams タブ開発基礎講座
SharePoint Framework Extension 基礎講座
SharePoint Framework Extension 基礎講座
Hiroaki Oikawa
はじめてのコンテナーDocker & Windows & Linux
はじめてのコンテナーDocker & Windows & Linux
Kazushi Kamegawa
[TL04] .NET 15 周年の今こそ考えるクラウドネイティブ アプリケーションと .NET の活用
[TL04] .NET 15 周年の今こそ考えるクラウドネイティブ アプリケーションと .NET の活用
de:code 2017
.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み
Kouji Matsui
SharePoint Framework をはじめよう #spfx
SharePoint Framework をはじめよう #spfx
Hirofumi Ota
Windows Azure PHP Tips
Windows Azure PHP Tips
Microsoft Openness Japan
はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入
Yu Nobuoka
.NET Core と Container, そして Azure Web Apps on Linux による Web アプリ開発最前線
.NET Core と Container, そして Azure Web Apps on Linux による Web アプリ開発最前線
Akira Inoue
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
david9142
.NET Coreとツール類の今
.NET Coreとツール類の今
Yuki Igarashi
Windows Server 2016 Essentials TP4の強化ポイントとPowerShellの使いどころ
Windows Server 2016 Essentials TP4の強化ポイントとPowerShellの使いどころ
Satoru Nasu
俺とHashiCorp
俺とHashiCorp
Toru Makabe
Chefで始めるWindows Server構築
Chefで始めるWindows Server構築
Takashi Kanai
Wasm blazor and wasi 2
Wasm blazor and wasi 2
Takao Tetsuro
INF-015_そこのコンテナ、うまく積めてるね! ~Windows アプリケーション コンテナの展開と運用~
INF-015_そこのコンテナ、うまく積めてるね! ~Windows アプリケーション コンテナの展開と運用~
decode2016
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
Visual Studio App Centerを公式サンプルアプリから学ぼうiOS(swift),Android(java)
Visual Studio App Centerを公式サンプルアプリから学ぼうiOS(swift),Android(java)
Shinya Nakajima
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
Akira Inoue
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
Yuta Matsumura
Open Shift v3 主要機能と内部構造のご紹介
Open Shift v3 主要機能と内部構造のご紹介
Etsuji Nakai
Similar a SharePoint Framework Teams タブ開発基礎講座
(20)
SharePoint Framework Extension 基礎講座
SharePoint Framework Extension 基礎講座
はじめてのコンテナーDocker & Windows & Linux
はじめてのコンテナーDocker & Windows & Linux
[TL04] .NET 15 周年の今こそ考えるクラウドネイティブ アプリケーションと .NET の活用
[TL04] .NET 15 周年の今こそ考えるクラウドネイティブ アプリケーションと .NET の活用
.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み
SharePoint Framework をはじめよう #spfx
SharePoint Framework をはじめよう #spfx
Windows Azure PHP Tips
Windows Azure PHP Tips
はてなにおける継続的デプロイメントの現状と Docker の導入
はてなにおける継続的デプロイメントの現状と Docker の導入
.NET Core と Container, そして Azure Web Apps on Linux による Web アプリ開発最前線
.NET Core と Container, そして Azure Web Apps on Linux による Web アプリ開発最前線
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
.NET Coreとツール類の今
.NET Coreとツール類の今
Windows Server 2016 Essentials TP4の強化ポイントとPowerShellの使いどころ
Windows Server 2016 Essentials TP4の強化ポイントとPowerShellの使いどころ
俺とHashiCorp
俺とHashiCorp
Chefで始めるWindows Server構築
Chefで始めるWindows Server構築
Wasm blazor and wasi 2
Wasm blazor and wasi 2
INF-015_そこのコンテナ、うまく積めてるね! ~Windows アプリケーション コンテナの展開と運用~
INF-015_そこのコンテナ、うまく積めてるね! ~Windows アプリケーション コンテナの展開と運用~
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Visual Studio App Centerを公式サンプルアプリから学ぼうiOS(swift),Android(java)
Visual Studio App Centerを公式サンプルアプリから学ぼうiOS(swift),Android(java)
jQuery と MVC で実践する標準志向 Web 開発
jQuery と MVC で実践する標準志向 Web 開発
VSCodeで始めるAzure Static Web Apps開発
VSCodeで始めるAzure Static Web Apps開発
Open Shift v3 主要機能と内部構造のご紹介
Open Shift v3 主要機能と内部構造のご紹介
Más de Hiroaki Oikawa
SharePoint Framework による Viva Connections アプリの開発
SharePoint Framework による Viva Connections アプリの開発
Hiroaki Oikawa
SharePoint Framework アップデート SPFx v1.12.1
SharePoint Framework アップデート SPFx v1.12.1
Hiroaki Oikawa
Microsoft 365 Virtual Marathon 2021 - SharePoint サイトの自動作成あれこれ
Microsoft 365 Virtual Marathon 2021 - SharePoint サイトの自動作成あれこれ
Hiroaki Oikawa
SharePoint Framework によるモダンサイトのカスタマイズ
SharePoint Framework によるモダンサイトのカスタマイズ
Hiroaki Oikawa
Outlook アドイン開発入門
Outlook アドイン開発入門
Hiroaki Oikawa
SharePoint 開発入門
SharePoint 開発入門
Hiroaki Oikawa
Microsoft Flow は SharePoint Designer ワークフローの代わりになり得るか!?
Microsoft Flow は SharePoint Designer ワークフローの代わりになり得るか!?
Hiroaki Oikawa
クラウド時代の SharePoint 開発に備えよう
クラウド時代の SharePoint 開発に備えよう
Hiroaki Oikawa
PowerApps による初めてのアプリ開発
PowerApps による初めてのアプリ開発
Hiroaki Oikawa
PowerApps をざっくりさわってみた
PowerApps をざっくりさわってみた
Hiroaki Oikawa
CSOMでサイト運用を楽にしよう!
CSOMでサイト運用を楽にしよう!
Hiroaki Oikawa
カスタマイズされた SharePoint のアップグレードを考える
カスタマイズされた SharePoint のアップグレードを考える
Hiroaki Oikawa
SharePoint 2013 の検索結果をチューニングする
SharePoint 2013 の検索結果をチューニングする
Hiroaki Oikawa
第13回 jpsps in 大阪 share pointerのためのクラウドビジネスアプリのすすめ
第13回 jpsps in 大阪 share pointerのためのクラウドビジネスアプリのすすめ
Hiroaki Oikawa
SharePoint 2013 ワークフロー開発入門
SharePoint 2013 ワークフロー開発入門
Hiroaki Oikawa
Más de Hiroaki Oikawa
(15)
SharePoint Framework による Viva Connections アプリの開発
SharePoint Framework による Viva Connections アプリの開発
SharePoint Framework アップデート SPFx v1.12.1
SharePoint Framework アップデート SPFx v1.12.1
Microsoft 365 Virtual Marathon 2021 - SharePoint サイトの自動作成あれこれ
Microsoft 365 Virtual Marathon 2021 - SharePoint サイトの自動作成あれこれ
SharePoint Framework によるモダンサイトのカスタマイズ
SharePoint Framework によるモダンサイトのカスタマイズ
Outlook アドイン開発入門
Outlook アドイン開発入門
SharePoint 開発入門
SharePoint 開発入門
Microsoft Flow は SharePoint Designer ワークフローの代わりになり得るか!?
Microsoft Flow は SharePoint Designer ワークフローの代わりになり得るか!?
クラウド時代の SharePoint 開発に備えよう
クラウド時代の SharePoint 開発に備えよう
PowerApps による初めてのアプリ開発
PowerApps による初めてのアプリ開発
PowerApps をざっくりさわってみた
PowerApps をざっくりさわってみた
CSOMでサイト運用を楽にしよう!
CSOMでサイト運用を楽にしよう!
カスタマイズされた SharePoint のアップグレードを考える
カスタマイズされた SharePoint のアップグレードを考える
SharePoint 2013 の検索結果をチューニングする
SharePoint 2013 の検索結果をチューニングする
第13回 jpsps in 大阪 share pointerのためのクラウドビジネスアプリのすすめ
第13回 jpsps in 大阪 share pointerのためのクラウドビジネスアプリのすすめ
SharePoint 2013 ワークフロー開発入門
SharePoint 2013 ワークフロー開発入門
SharePoint Framework Teams タブ開発基礎講座
1.
SharePoint Framework Teams タブ 開発基礎講座 及川
紘旭 Microsoft MVP for Office Development 2019年11月23日
2.
目次 ◼ はじめに ◼ ハンズオンの説明 ◼
Teams タブの仕組み ◼ ハンズオン ◼ ハンズオン1 開発環境の構築 ◼ ハンズオン2 Teams タブの開発&デバッグ実行 ◼ ハンズオン3 Teams タブのデプロイ ◼ ハンズオン4 Teams の Graph API ◼ まとめ ◼ 参考サイト © SharePoint Developer sharepoint.orivers.jp 2
3.
はじめに セッションの本題に入る前に。 3
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.
このセッションのゴール SharePoint Framework (SPFx)
で Teams タブの開発ができるようになる。 © SharePoint Developer sharepoint.orivers.jp 5
6.
ハンズオンの説明 今回実施するハンズオンをご紹介します 6
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.
Teams タブの仕組み Teams タブの仕組みを知ることが Teams
タブ開発の近道 8
9.
Teams タブの概要 ◼Teams タブの特徴 ⚫
Teams にタブとして追加可能なアプリ ⚫ Microsoft 製のものだけでなく、サード パーティ製も多数存在し、自分で開発& 追加することも可能 ⚫ タブは、SPFx の Web パーツとして開発 可能 (SPFx ver 1.8 以降) © SharePoint Developer sharepoint.orivers.jp 9
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.
開発環境として必要なもの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.
開発環境として必要なもの3 ◼Microsoft Teams ⚫ Teams
タブをデプロイする先となる Teams が必要です。 ⚫ テスト用にチームを一つ作成してください。 © SharePoint Developer sharepoint.orivers.jp 12
13.
ハンズオン1 開発環境の構築 Docker を使って素早く SPFx
開発環境を構 築する 13
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.
はじめて開発環境を作る際の手順 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.
はじめて開発環境を作る際の手順 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.
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.
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.
ハンズオン2 Teams タブの開発& デバッグ実行 Teams タブを
VSCode で開発しデバッグ実行 する 19
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.
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.
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.
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.
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.
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.
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.
ハンズオン3 Teams タブのデプロイ Teams タブを任意の
Teams 環境にデプロイ して動作確認する 27
28.
パッケージファイルの作成・登録 ① パッケージの作成 ⚫ 実行環境のコンソールにて以下のコマンドを実行する。 ⚫
gulp bundle --ship ⚫ gulp package-solution --ship ② パッケージファイルをアプリカタログにアップロード ⚫ ブラウザでアプリカタログを開き、以下のファイルをアプリカタログの SharePoint 用アプリライブラリにアップロードする。 ${PWD}/sharepoint/solution/teams-tab-sample.sppkg ⚫ アップロードすると下図ダイアログが表示されるので、[このソリューションを組織内のすべてのサイトで使用できるようにする]に チェックを付けて[展開]ボタンをクリックする。 © SharePoint Developer sharepoint.orivers.jp 28
29.
Teams への登録 ③ Teams
への登録 ⚫ 一覧からアップロードしたパッケージファイルを選択し、[ファイル]メニューの[チームと同期]をクリックする。 ⚫ 同期が完了すると、画面右側に[チームのソリューションが正常に同期されました]が表示される。 ⚫ Teams を起動し、画面左下の[アプリ]アイコンをクリック、「[サイトコレクション名] 向けに構築」をクリックし、 右ペインに登録したアプリが追加されていることを確認する。 © SharePoint Developer sharepoint.orivers.jp 29
30.
Teams タブの追加 ① タブの追加 ⚫
テストで使用するチームを開き、[タブの追加] で開発したアプリをクリックする。 ⚫ [追加]をクリックする。 © SharePoint Developer sharepoint.orivers.jp 30
31.
Teams タブの追加 ② タブの追加 ⚫
ダイアログが開くので[保存]ボタンをクリックする。 ③ タブの確認 ⚫ Workbench で実行した時と同じように Teams タブが表示されることを確認する © SharePoint Developer sharepoint.orivers.jp 31
32.
ハンズオン4 Teams の Graph
API Teams のデータを利用するため Teams Graph API を使用する 32
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.
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.
Teams タブ サンプルの説明 ©
SharePoint Developer sharepoint.orivers.jp 35 ◼ サンプルの内容 ⚫ Teams Graph API を使用して、会話のデータを取得して一覧表示する。 ◼ サンプルのイメージ ⚫ アドインの画面 ◼ ソースファイルの場所 ⚫ 変更したファイルを格納した ZIP ファイル ⚫ https://1drv.ms/u/s!AhsmvUlTfRPNq4kQWklEDKFfisqfJw?e=JmcWAt アドイン本体 プロパティパネル
36.
Teams タブ サンプル
事前準備 ◼TypeScript の型定義情報のインポート ⚫ 実行環境のコンソールにて以下のコマンドを実行する。 ⚫ yarn add @microsoft/microsoft-graph-types ⚫ yarn add microsoftgraph/msgraph-typescript-typings#beta © SharePoint Developer sharepoint.orivers.jp 36
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.
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
40.
まとめ ◼開発環境に Docker を使うことで
SPFx の頻繁なバージョンアップに追 従。 ◼Teams タブの実体は、SPFx Web パーツ。 ◼Teams のデータを取得するためには、Teams Graph API を使用する。 ◼Teams タブのデバッグは SPO の Workbench で行う。 ◼Teams タブのデプロイは SPO のアプリカタログに対して行う。 © SharePoint Developer sharepoint.orivers.jp 40
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
Descargar ahora