SharePoint Framework を触ってみた
•
2 likes•10,895 views
Japan SharePoint Group 勉強会 ＃25 ＠東京 で発表させていただいた資料です。
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to SharePoint Framework を触ってみた
Similar to SharePoint Framework を触ってみた (20)
Recently uploaded
Recently uploaded (9)
SharePoint Framework を触ってみた
- 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. SharePoint Frameworkとは 3. 開発環境 4. Webパーツ開発サンプル （“Hello World”） 5. まとめ 3
- 8. SharePoint Framework とは SharePoint Online の新しい開発モデル 「新しいUI（Modern UI）」向けカスタマイズ向け Webパーツ開発、カスタムページ開発、リスト・ライブラリ？ クライアントサイド開発（JavaScript） 略称は “SPFx” のようです まだプレビューです（2017年2月11日現在） 8
- 9. 新しいUI（ページ）
- 10. 新しいUI（リスト）
- 11. 新しいUI（ライブラリ）
- 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
- 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 の〃
- 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
- 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. 24
- 25. 25
- 26. “Hello World” Webパーツを作る ローカルに開発環境証明書をインストール ⇒PowerShellで下記コマンドを実行する gulp trust-dev-cert 実行する ⇒PowerShellで下記コマンドを実行する gulp serve 26
- 29. TypeScript をアンインストール＆ 再インストールしてみる PowerShellで下記コマンドを実行する npm uninstall typescript npm install typescript ※「helloworld-webpart」以外のプロジェクトテンプレートだと 元からエラーなくうまくいくものもあるので必須というわけではないよう もう一度、”gulp serve” を実行する 29
- 30. 30 なんかうまくいったっぽい！
- 33. DEMO
- 34. まとめ 難しい （あくまで私個人からみて） サーバーサイド（オンプレ・C#）とかなり違う オープンソース系Web開発の経験者の方が入りやすいのでは？ 相変わらずの英語ドキュメント まだできる機能は少ない ＆ 不安定？ 今後 実際に開発で使われるようになるのはたぶんまだ少し先か？ ただ、早めに手をつけておかないと出遅れるかも（危機感） （ 「従来のUI」がいつまで維持されるかが気になる…） 34
- 35. [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
- 38. Ｘ 38
- 39. 39
- 40. 40