Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SharePoint Framework ファースト ステップ / First step of SharePoint Framework

SharePoint Framework ファースト ステップ / First step of SharePoint Framework

第 12 回 Plus Programming .net 勉強会 (https://atnd.org/events/93615) に登壇したときのスライドです。

Takashi Shinohara

January 27, 2018
Tweet

More Decks by Takashi Shinohara

Other Decks in Programming

Transcript

  1. 自己紹介 • 篠原敬志 (Takashi Shinohara) • Microsoft MVP for Office

    Development (2018-) • Twitter: @karamem0 • Blog: からめもぶろぐ。(http://blog.karamem0.jp) 2
  2. SharePoint Framework (SPFx) とは • SharePoint を拡張するための新しいクライアント サイド開発のプラットフォーム • SharePoint

    Online および SharePoint 2016 をサポート • これまでの SharePoint ソリューションや SharePoint アドインのような ASP.NET をベースとした開発を想定しておらず、オープン ソースのプロジェクトを採用している • 2016 年 8 月に開発者プレビュー、2017 年 2 月に一般提供 (GA) • 2018 年 1 月現在のバージョンは 1.4 5
  3. 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
  4. SharePoint Framework でできること • Client-side web part • Extensions •

    ApplicationCustomizers • FieldCustomizers • CommandSets 7
  5. SharePoint アドインのアーキテクチャ 8 <html> <iframe> SharePoint Host Web SharePoint App

    Web External Services https://contoso.sharepoint.com https://contoso-b32e2ffd7782d0.sharepoint.com
  6. SharePoint アドインのアーキテクチャ • アプリケーションの JavaScript がホスト Web の JavaScript を実行できないように

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

    Office 365 CDN External Services https://contoso.sharepoint.com https://contoso.azureedge.net https://publiccdn.sharepointonline.com
  8. SharePoint Framework のアーキテクチャ • アプリケーションはホスト Web と同じドメインで動作する • アクセス許可は実行するユーザーに依存する •

    マニフェスト (AppManifest.xml) を含む Open XML ファイル (*.sppkg) をアプリ カタログにアップロードし、JavaScript は CDN またはドキュメント ライブラリにアップ ロードする • SharePoint ストアには提供できない 11
  9. Office 365 CDN とは • SharePoint Online のドキュメント ライブラリを CDN

    として使用できるようにする 機能 • SharePoint Online Management Shell で有効化する • SharePoint Online の外部からは参照できない 12
  10. Office 365 API と連携する • SharePoint 以外の Office 365 API

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

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

    GraphHttpClient によってフローを省略できる (プレビュー) • アクセス許可は以下の 2 つが含まれる • Group.ReadWrite.All • Reports.Read.All • 内部的には /_api/SP.OAuth.Token/Acquire を呼び出す 15
  13. まとめ • SharePoint Online (Modern UI) や SharePoint Framework はまだ成長途

    中の段階 • 最新情報のキャッチアップが必要 • どんどんフィードバックを上げよう • 改善要望は SharePoint User Voice へ • 不具合報告は GitHub (SharePoint/sp-dev-docs) へ 17
  14. 参考リンク • 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
  15. 参考リンク • 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
  16. 参考リンク • 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