Download as PDF, PPTX
![[Appendix] 参考サイト
【Overview of the SharePoint Framework】
https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview
【SharePoint Framework development tools and libraries】
https://dev.office.com/sharepoint/docs/spfx/tools-and-libraries
【 GitHub - Microsoft SharePoint - sp-dev-fx-webparts 】
https://github.com/SharePoint/sp-dev-fx-webparts
【Simplify adding web parts with preconfigured entries】
https://github.com/SharePoint/sp-dev-docs/blob/master/docs/spfx/web-
parts/guidance/simplify-adding-web-parts-with-preconfigured-entries.md
【Building SharePoint Framework Client-Side Web Parts with
React】
https://blog.mastykarz.nl/building-sharepoint-framework-client-side-web-parts-
react/ 35](https://image.slidesharecdn.com/20170211jpspskuromiyashare-170211052447/85/SharePoint-Framework-35-320.jpg)
Uploaded byKosuke Kuromiya
SharePoint Framework を触ってみた
Japan SharePoint Group 勉強会 ＃25 ＠東京 で発表させていただいた資料です。
SharePoint Framework を触ってみた
- 1.
- 2. 自己紹介 黒宮 浩介（くろみやこうすけ） https://www.facebook.com/kosuke.kuromiya https://twitter.com/Kosuke9638 SPeed LAND 365（https://speedland365.wordpress.com/） アーティサン株式会社 - SharePointについて色々やるエンジニア 好きなもの - 映画、サブカル色々、AKB48グループ（特にSKE48！） 2
- 3. アジェンダ 1. はじめに 2. SharePointFrameworkとは 3. 開発環境 4. Webパーツ開発サンプル （“Hello World”） 5. まとめ 3
- 4.
- 5.
- 6.
- 7.
- 8. SharePoint Framework とは SharePoint Online の新しい開発モデル 「新しいUI（Modern UI）」向けカスタマイズ向け Webパーツ開発、カスタムページ開発、リスト・ライブラリ？ クライアントサイド開発（JavaScript） 略称は “SPFx” のようです まだプレビューです（2017年2月11日現在） 8
- 9.
- 10.
- 11.
- 12.
- 13. 開発環境 言語： TypeScript（Microsoft製JavaScript拡張） プラットフォーム： Node.js パッケージ管理ツール：Node Package Manager (npm) Web開発支援ツール：Yeoman SharePoint Yeoman generator ビルドシステム：gulp, windows-build-tools エディター：Visual Studio Code, Atom, Webstorm, etc ※関連技術：Oauth, REST, Webhook 13
- 14.
- 15.
- 16. Node.js のインストール npm install-g npm@3
- 17. Windows-build-tools のインストール npm install-g --production windows-build-tools
- 18. Yeoman , gulpのインストール npm install -g yo gulp Yeoman SharePoint generator の〃
- 19.
- 20. ざっくりまとめると… 1. Node.js のダウンロード、インストーラー実行 2.下記4つのコマンドをPowerShellで実行 npm install -g npm@3 npm install -g --production windows-build-tools npm install -g yo gulp npm install -g @microsoft/generator-sharepoint 3. エディターを何かインストール（既にあれば不要） 20
- 21.
- 22. “Hello World” Webパーツ Build your first SharePoint client-side web part (Hello World part 1) https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/build-a-hello-world-web-part 22
- 23. “Hello World” Webパーツを作る SharePoint Framework プロジェクト テンプレー トをダウンロード ⇒PowerShellで下記コマンドを実行する cd C:¥ ※任意のPath md helloworld-webpart cd helloworld-webpart yo @microsoft/sharepoint 23
- 24.
- 25.
- 26. “Hello World” Webパーツを作る ローカルに開発環境証明書をインストール ⇒PowerShellで下記コマンドを実行する gulp trust-dev-cert 実行する ⇒PowerShellで下記コマンドを実行する gulp serve 26
- 27.
- 28.
- 29. TypeScript をアンインストール＆ 再インストールしてみる PowerShellで下記コマンドを実行する npmuninstall typescript npm install typescript ※「helloworld-webpart」以外のプロジェクトテンプレートだと 元からエラーなくうまくいくものもあるので必須というわけではないよう もう一度、”gulp serve” を実行する 29
- 30.
- 31.
- 32.
- 33.
- 34. まとめ 難しい （あくまで私個人からみて） サーバーサイド（オンプレ・C#）とかなり違う オープンソース系Web開発の経験者の方が入りやすいのでは？ 相変わらずの英語ドキュメント まだできる機能は少ない ＆ 不安定？ 今後 実際に開発で使われるようになるのはたぶんまだ少し先か？ ただ、早めに手をつけておかないと出遅れるかも（危機感） （ 「従来のUI」がいつまで維持されるかが気になる…） 34
- 35. [Appendix] 参考サイト 【Overview ofthe SharePoint Framework】 https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview 【SharePoint Framework development tools and libraries】 https://dev.office.com/sharepoint/docs/spfx/tools-and-libraries 【 GitHub - Microsoft SharePoint - sp-dev-fx-webparts 】 https://github.com/SharePoint/sp-dev-fx-webparts 【Simplify adding web parts with preconfigured entries】 https://github.com/SharePoint/sp-dev-docs/blob/master/docs/spfx/web- parts/guidance/simplify-adding-web-parts-with-preconfigured-entries.md 【Building SharePoint Framework Client-Side Web Parts with React】 https://blog.mastykarz.nl/building-sharepoint-framework-client-side-web-parts- react/ 35
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.