SharePoint Framework の最新情報をキャッチアップしよう!

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

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

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

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

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

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

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

チームサイト機能強化

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

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

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

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

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

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

全幅列 (Full-width columns)

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

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

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

Microsoft Graph API
MSGraphClient
AadHttpClient

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

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

Demo
ダイナミックデータ

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

Microsoft Teams タブ
(SPFx development for Teams tabs)

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

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

SharePoint Framework の最新情報をキャッチアップしよう!

More Related Content

What's hot (20)

Similar to SharePoint Framework の最新情報をキャッチアップしよう! (20)

More from Ai Hirano (10)

Recently uploaded (10)

SharePoint Framework の最新情報をキャッチアップしよう!

Editor's Notes