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

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

Takashi Shinohara
January 27, 2018
Programming
0
6k

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

See All by Takashi Shinohara
Microsoft Search の Graph コネクタ ハンズオン / Handson for Graph Connector of Microsoft Search
karamem0
0
53
いまだから「検索」を語ろう！ SharePoint FAST Search から Microsoft Search セマンティックインデックスまで / Let's talk about search now
karamem0
3
1.1k
徹底解説！Power Platform 導入の成功事例から見る DX 推進のコツ / Tips for DX promotion from Power Platform case studies
karamem0
0
4.9k
どうする Power Pages？Web 開発者からみる Power Pages / How to deal with Power Pages
karamem0
0
1.1k
Fluent UI を理解する / Understanding Fluent UI
karamem0
0
610
Microsoft Teams の 会議アプリ開発のはじめかた / How to start Microsoft Teams app development
karamem0
0
3.6k
Web API 開発を加速しよう - Avanade Beef のご紹介 / Accelerate your web API - development introducing Avanade Beef
karamem0
0
2.6k
Japan Microsot 365 Developer Community Day 2021: Microsoft Teams ハンズオン / Japan Microsot 365 Developer Community Day 2021: Microsoft Teams Hands-on
karamem0
0
26
Microsoft 365 開発をはじめる人のための React 超入門 / Super introduction to react for those starting Microsoft 365 development
karamem0
0
1k

Other Decks in Programming

See All in Programming
AI時代におけるSRE、
あるいはエンジニアの生存戦略
pyama86
6
1.2k
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
130
OSSで起業してもうすぐ10年 / Open Source Conference 2024 Shimane
furukawayasuto
0
110
みんなでプロポーザルを書いてみた
yuriko1211
0
260
Enabling DevOps and Team Topologies Through Architecture: Architecting for Fast Flow
cer
PRO
0
330
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
1.9k
3rd party scriptでもReactを使いたい！ Preact + Reactのハイブリッド開発
righttouch
PRO
1
600
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
flutterkaigi_2024.pdf
kyoheig3
0
130
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
430
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120

Featured

See All Featured
The Art of Programming - Codeland 2020
erikaheidi
52
13k
4 Signs Your Business is Dying
shpigford
180
21k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Git: the NoSQL Database
bkeepers
PRO
427
64k
Designing the Hi-DPI Web
ddemaree
280
34k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
Visualization
eitanlees
145
15k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k

Transcript

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

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

    Development (2018-) • Twitter: @karamem0 • Blog: からめもぶろぐ。(http://blog.karamem0.jp) 2

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

  4. SharePoint とは • すべてのデバイスから情報を保存、整理、共有して、アクセスできる安全な場所 (公式サイトより) • エンタープライズ向け Office 製品のひとつ (旧称

    MOSS) • Office 365 の共通プラットフォームになりつつある (OneDrive for Bussiness、 Delve、Groups など) 4

  5. SharePoint Framework (SPFx) とは • SharePoint を拡張するための新しいクライアント サイド開発のプラットフォーム • SharePoint

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

  6. 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

  7. SharePoint Framework でできること • Client-side web part • Extensions •

    ApplicationCustomizers • FieldCustomizers • CommandSets 7

  8. SharePoint アドインのアーキテクチャ 8 <html> <iframe> SharePoint Host Web SharePoint App

    Web External Services https://contoso.sharepoint.com https://contoso-b32e2ffd7782d0.sharepoint.com

  9. SharePoint アドインのアーキテクチャ • アプリケーションの JavaScript がホスト Web の JavaScript を実行できないように

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

  10. 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

  11. SharePoint Framework のアーキテクチャ • アプリケーションはホスト Web と同じドメインで動作する • アクセス許可は実行するユーザーに依存する •

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

  12. Office 365 CDN とは • SharePoint Online のドキュメント ライブラリを CDN

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

  13. Office 365 API と連携する • SharePoint 以外の Office 365 API

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

  14. Office 365 API と連携する • 公式では Active Directory Authentication Library

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

  15. Office 365 API と連携する • Microsoft Graph API (https://graph.microsoft.com) を呼び出す場合は

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

  16. DEMO 16

  17. まとめ • SharePoint Online (Modern UI) や SharePoint Framework はまだ成長途

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

  18. 参考リンク • 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

  19. 参考リンク • 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

  20. 参考リンク • 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