SharePoint Framework ファースト ステップ 2018/1/27 篠原敬志 (@karamem0)

自己紹介 • 篠原敬志 (Takashi Shinohara) • Microsoft MVP for Office Development (2018-) • Twitter: @karamem0 • Blog: からめもぶろぐ。(http://blog.karamem0.jp) 2

本日のゴール • TypeScript を採用した SharePoint の新しい開発モデルである SharePoint Framework のアーキテクチャを理解する 3

SharePoint とは • すべてのデバイスから情報を保存、整理、共有して、アクセスできる安全な場所 (公式サイトより) • エンタープライズ向け Office 製品のひとつ (旧称 MOSS) • Office 365 の共通プラットフォームになりつつある (OneDrive for Bussiness、 Delve、Groups など) 4

SharePoint Framework (SPFx) とは • SharePoint を拡張するための新しいクライアント サイド開発のプラットフォーム • SharePoint Online および SharePoint 2016 をサポート • これまでの SharePoint ソリューションや SharePoint アドインのような ASP.NET をベースとした開発を想定しておらず、オープン ソースのプロジェクトを採用している • 2016 年 8 月に開発者プレビュー、2017 年 2 月に一般提供 (GA) • 2018 年 1 月現在のバージョンは 1.4 5

SharePoint の構成要素 6 Infrastructures Windows Server Active Directory SQL Server IIS Workflow Manager MIM Object Models Farm Application Site Collection Site List Column View Content Type Role Workflow Event Receiver Developments ASP.NET C# XML JavaScript PowerShell CSOM JSOM REST API Access InfoPath PowerApps Power BI Flow SPFx TypeScript Node.js npm gulp Yeoman knockout React Angular Graph API

SharePoint Framework でできること • Client-side web part • Extensions • ApplicationCustomizers • FieldCustomizers • CommandSets 7

SharePoint アドインのアーキテクチャ 8 SharePoint Host Web SharePoint App Web External Services https://contoso.sharepoint.com https://contoso-b32e2ffd7782d0.sharepoint.com

SharePoint アドインのアーキテクチャ • アプリケーションの JavaScript がホスト Web の JavaScript を実行できないように するため、アプリケーションは分離ドメインで動作する • SP.AppContextSite によってホスト Web のデータを操作できる • アクセス許可はアプリケーションに対して設定される • マニフェスト (AppManifest.xml) およびリソースを含む Open XML ファイル (*.app) をアプリ カタログにアップロードする • SharePoint ストアに提供できる 9

SharePoint Framework のアーキテクチャ 10 SharePoint Host Web Azure CDN Office 365 CDN External Services https://contoso.sharepoint.com https://contoso.azureedge.net https://publiccdn.sharepointonline.com

SharePoint Framework のアーキテクチャ • アプリケーションはホスト Web と同じドメインで動作する • アクセス許可は実行するユーザーに依存する • マニフェスト (AppManifest.xml) を含む Open XML ファイル (*.sppkg) をアプリ カタログにアップロードし、JavaScript は CDN またはドキュメント ライブラリにアップ ロードする • SharePoint ストアには提供できない 11

Office 365 CDN とは • SharePoint Online のドキュメント ライブラリを CDN として使用できるようにする 機能 • SharePoint Online Management Shell で有効化する • SharePoint Online の外部からは参照できない 12

Office 365 API と連携する • SharePoint 以外の Office 365 API を呼び出す場合、OAuth により Access Token を取得する必要がある • OAuth の認可フロー (Implicit Flow) はリダイレクトを前提とする • SharePoint アドインは iframe 内部でリダイレクトできるため問題ないが、 SharePoint Framework の場合はリダイレクトできないため、別ページで処理す る必要がある 13

Office 365 API と連携する • 公式では Active Directory Authentication Library (ADAL) for JavaScript (adal-angular) を使用する方法が紹介されている • リダイレクトを回避するためにポップアップ ウィンドウを表示する • Internet Explorer および Edge はセキュリティ レベルによっては実行できない • ADAL JS は Web パーツを前提とした作りになっていないので実装を書き換え る必要がある • Azure Active Directory (AAD) にアプリケーションを登録する必要がある 14

Office 365 API と連携する • Microsoft Graph API (https://graph.microsoft.com) を呼び出す場合は GraphHttpClient によってフローを省略できる (プレビュー) • アクセス許可は以下の 2 つが含まれる • Group.ReadWrite.All • Reports.Read.All • 内部的には /_api/SP.OAuth.Token/Acquire を呼び出す 15

DEMO 16

まとめ • SharePoint Online (Modern UI) や SharePoint Framework はまだ成長途 中の段階 • 最新情報のキャッチアップが必要 • どんどんフィードバックを上げよう • 改善要望は SharePoint User Voice へ • 不具合報告は GitHub (SharePoint/sp-dev-docs) へ 17

参考リンク • SharePoint Framework Developer Preview Release https://dev.office.com/blogs/sharepoint-framework-developer- preview-release • SharePoint Framework reaches general availability—build and deploy engaging web parts today https://blogs.office.com/en-us/2017/02/23/sharepoint-framework- reaches-general-availability-build-and-deploy-engaging-web-parts- today/ 18

参考リンク • General availability of Office 365 CDN https://dev.office.com/blogs/general-availability-of-office-365-cdn • クロスドメイン ライブラリを使用してアドインから SharePoint のデータにアクセスす る https://docs.microsoft.com/ja-jp/sharepoint/dev/sp-add-ins/access- sharepoint-data-from-add-ins-using-the-cross-domain-library 19

参考リンク • Web パーツから OAuth を使用して Microsoft Graph API を呼び出す https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/web- parts/guidance/call-microsoft-graph-from-your-web-part • GraphHttpClient を使用して Microsoft Graph を呼び出す https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/call-microsoft- graph-using-graphhttpclient 20