日本マイクロソフト社が開催した de:code 2019 で使用したセッション資料です。 SharePoint モダン サイトを取り巻くカスタマイズ・開発について整理しつつ、SharePoint Framework に関する最新情報をまとめています。 https://www.microsoft.com/ja-jp/events/decode/2019session/detail.aspx?sid=PR09&tk=PR

1. de:code 2019 PR09
SharePoint Framework の最新情報を
キャッチ アップしよう!
オフィスアイ株式会社
代表取締役 | Microsoft MVP for Office Apps & Services
平野 愛

2. 持ち帰っていただきたいこと
SharePoint Framework に対して、
基礎的な開発手法は省略

3. SharePoint Framework 概要

4. SharePoint Framework のバージョン
と SharePoint Online の進化
Extensions
SharePoint Online を取り巻く環境もめまぐるしく変

5. SharePoint Online の動向
モダンサイトの本格的な展開が開始
なしあり

6. 開発者が意識すべきモダンサイトの主なポ
イント
NoScript でもSharePoint Framework
を使った JavaScript ベースの開発は可
能
レスポンシブ Web デザイン
新しい発行機能
モダンサイトの検索機能

7. [ユーザー視点] モダンサイトのもうひとつ
の側面
「SharePoint Look book」
https://sharepointlookbook.azurewebsites.net/
• Webパーツが豊
富
• メンテナンスも
楽
HTMLやCSS, JavaScript
を習得する必要はない

8. コミュニケーションサイトの新機能
メガメニュー カスタム フッター
※ 例ではSharePoint ハブも利用している

9. チームサイト機能強化

10. Microsoft Teams と SharePoint
※1つのサイトコレク
ションに
1つのトップレベルサイ
トのみ

11. Office 365 内での SharePoint の位置づけ
SharePoint
/ Stream
Yammer
TeamsOutlook

12. SharePoint ハブ

13. Microsoft Graph API
開発技術の変遷 (概要)
CSOM (JSOM)
SharePoint 2007 SharePoint 2010 SharePoint 2013 SharePoint Online
サーバーサイド / Server
Side
クライアントサイド / Client Site
Server Side OM
CSOM (Managed Code)ASP.NET Web
Service (XML)
REST Service API
フィーチャーフレームワークベースのソリューション開発 | Feature
Framework
サンドボックス ソリュー
ション
アドイン開発 | SharePoint Add-ins
クラシック サイト
(Classic Site)
モダン サイト
(Modern Site)
SPFx
アドイン開発 | SharePoint Add-ins
オンプレミス
Cloud

14. オンプレミス環境の対応状況

15. 基本的な開発の流れ
コーディング ビルド パッケージング

16. 基本的な開発の流れ
展開準備
gulp build
gulp bundle (--ship)
gulp solution-package (--ship)
パッケージファイル(*.spkkg)
を
SharePoint アプリカタログに
展開
テナント全体、サイトコレク
ションごと

17. SPFx 更新情報
(厳選)

18. 全幅列 (Full-width columns)

19. 全幅列 (Full-width columns)
※ SharePoint Workbench ではサポートされない

20. Demo
全幅列

21. アセットのパッケージング
SPFx v1.4 以降
SPFx 1.4 以降は アセットごとパッケージング
自動的に Office 365 CDN でホストされるライブラリに展開

22. プレビュー機能の切り分け
yo @Microsoft/sharepoint --plusbeta
https://github.com/SharePoin
t/sp-dev-docs/wiki

23. Microsoft Graph API
MSGraphClient
AadHttpClient

24. SPFx Extensions のテナントワイド展開
※初回は機能が使えるようになるまでに最大で20分ほど
かかる
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/basics/tenant-wide-deployment-extensions

25. 動的データとのコンポーネント接続
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/dynamic-data

26. Demo
ダイナミックデータ

27. Single Part App Page
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/single-part-app-pages

28. Demo
Single Part App Page

29. Microsoft Teams タブ
(SPFx development for Teams tabs)

30. Microsoft Teams タブ

31. Microsoft Teams タブ

32. Demo
Microsoft Teams タブ

33. 学習教材
https://developer.microsoft.com/en-
us/sharepoint/blogs/updated-sharepoint-framework-
developer-training-package-april-2019/

34. まとめ

35. © 2018 Microsoft Corporation. All rights reserved.
本情報の内容（添付文書、リンク先などを含む）は、作成日時点でのものであり、予告なく変更される場合があります。
© 2019 オフィスアイ株式会社. All rights reserved.
本情報の内容 (添付文書、リンク先などを含む) は、de:code 2019 開催日 (2019年5月29~30日) 時点のものであり、予告なく変更される場合が
あります。
本コンテンツの著作権、および本コンテンツ中に出てくる商標権、団体名、ロゴ、製品、サービスなどはそれぞれ、各権利保有者に帰属しま
す。