Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SharePoint Framework を触ってみた

4,057 views

Published on

Japan SharePoint Group 勉強会 #25 @東京 で発表させていただいた資料です。

Published in: Technology
  • Be the first to comment

SharePoint Framework を触ってみた

  1. 1. 黒宮 浩介 2017/02/11 1
  2. 2. 自己紹介  黒宮 浩介(くろみや こうすけ) https://www.facebook.com/kosuke.kuromiya https://twitter.com/Kosuke9638 SPeed LAND 365(https://speedland365.wordpress.com/)  アーティサン株式会社 - SharePointについて色々やるエンジニア  好きなもの - 映画、サブカル色々、AKB48グループ(特にSKE48!) 2
  3. 3. アジェンダ 1. はじめに 2. SharePoint Frameworkとは 3. 開発環境 4. Webパーツ開発サンプル (“Hello World”) 5. まとめ 3
  4. 4. SharePoint Framework とはどんなものなのか の大まかなイメージを知っていただく この後、自分でも触ってみようと思ってもら えれば最高 4 はじめに:今回のゴール
  5. 5. 本内容は、2017年2月時点で、私個人が調査および動作確認 をした結果に基づく情報であり、製品およびサービスについ て技術的な保証をするものではありません。SharePoint Online(Office365)の仕様は随時変更されます。 また、本内容の操作等を実施された場合に発生したいかなる 問題等に関しても、一切の責任を負いません。 はじめに:ご注意
  6. 6. 「SharePoint Framework」とは
  7. 7. https://blogs.technet.microsoft.com/microsoft_office_/2016/05/17/the- sharepoint-framework-an-open-and-connected-platform/
  8. 8. SharePoint Framework とは  SharePoint Online の新しい開発モデル  「新しいUI(Modern UI)」向けカスタマイズ向け  Webパーツ開発、カスタムページ開発、リスト・ライブラリ?  クライアントサイド開発(JavaScript)  略称は “SPFx” のようです  まだプレビューです(2017年2月11日現在) 8
  9. 9. 新しいUI(ページ)
  10. 10. 新しいUI(リスト)
  11. 11. 新しいUI(ライブラリ)
  12. 12. 開発環境
  13. 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. 14. https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment
  15. 15. https://nodejs.org/ Node.js
  16. 16. Node.js のインストール npm install -g npm@3
  17. 17. Windows-build-tools のインストール npm install -g --production windows-build-tools
  18. 18. Yeoman , gulp のインストール npm install -g yo gulp Yeoman SharePoint generator の〃
  19. 19. エディター のインストール https://code.visualstudio.com/download
  20. 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. 21. サンプルWebパーツ (Hello World)
  22. 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. 23. “Hello World” Webパーツを作る  SharePoint Framework プロジェクト テンプレー トをダウンロード ⇒PowerShellで下記コマンドを実行する cd C:¥ ※任意のPath md helloworld-webpart cd helloworld-webpart yo @microsoft/sharepoint 23
  24. 24. 24
  25. 25. 25
  26. 26. “Hello World” Webパーツを作る  ローカルに開発環境証明書をインストール ⇒PowerShellで下記コマンドを実行する gulp trust-dev-cert  実行する ⇒PowerShellで下記コマンドを実行する gulp serve 26
  27. 27. 27 “gulp serve”実行するとエラー発生…
  28. 28. https://github.com/DefinitelyTyped/DefinitelyTyped/issues/6639 Typescriptのバージョンに起因する バグ?のようなので…
  29. 29. TypeScript をアンインストール& 再インストールしてみる  PowerShellで下記コマンドを実行する npm uninstall typescript npm install typescript ※「helloworld-webpart」以外のプロジェクトテンプレートだと 元からエラーなくうまくいくものもあるので必須というわけではないよう  もう一度、”gulp serve” を実行する 29
  30. 30. 30 なんかうまくいったっぽい!
  31. 31. 31 ブラウザでSharePointの新しい ページっぽいのが立ち上がった! (Onlineじゃなくてローカル)
  32. 32. 32 「HelloWorld」パーツを追加してみた
  33. 33. DEMO
  34. 34. まとめ  難しい (あくまで私個人からみて)  サーバーサイド(オンプレ・C#)とかなり違う  オープンソース系Web開発の経験者の方が入りやすいのでは?  相変わらずの英語ドキュメント  まだできる機能は少ない & 不安定?  今後  実際に開発で使われるようになるのはたぶんまだ少し先か?  ただ、早めに手をつけておかないと出遅れるかも(危機感) ( 「従来のUI」がいつまで維持されるかが気になる…) 34
  35. 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
  36. 36. 36 Special Thanks ! http://www.slideshare.net/hirofumi_ota/sharepoint-framework-spfx
  37. 37. 会社紹介 http://artisan.jp.net/ 37
  38. 38. X 38
  39. 39. 39
  40. 40. 40
  41. 41. ご清聴ありがとうございました 41

×