黒宮 浩介

2017/02/11

1

自己紹介

黒宮 浩介（くろみや こうすけ）https://www.facebook.com/kosuke.kuromiya

https://twitter.com/Kosuke9638

SPeed LAND 365（https://speedland365.wordpress.com/）

アーティサン株式会社

- SharePointについて色々やるエンジニア

好きなもの

- 映画、サブカル色々、AKB48グループ（特にSKE48！）

2

アジェンダ

1. はじめに

2. SharePoint Frameworkとは

3. 開発環境

4. Webパーツ開発サンプル （“Hello World”）

5. まとめ

3

SharePoint Framework とはどんなものなのか

の大まかなイメージを知っていただく

この後、自分でも触ってみようと思ってもら

えれば最高

4

はじめに：今回のゴール

本内容は、2017年2月時点で、私個人が調査および動作確認

をした結果に基づく情報であり、製品およびサービスについ

て技術的な保証をするものではありません。SharePoint

Online（Office365）の仕様は随時変更されます。

また、本内容の操作等を実施された場合に発生したいかなる

問題等に関しても、一切の責任を負いません。

はじめに：ご注意

「SharePoint Framework」とは

https://blogs.technet.microsoft.com/microsoft_office_/2016/05/17/the-sharepoint-framework-an-open-and-connected-platform/

SharePoint Framework とは

SharePoint Online の新しい開発モデル

「新しいUI（Modern UI）」向けカスタマイズ向け

Webパーツ開発、カスタムページ開発、リスト・ライブラリ？

クライアントサイド開発（JavaScript）

略称は “SPFx” のようです

まだプレビューです（2017年2月11日現在）

8

新しいUI（ページ）

新しいUI（リスト）

新しいUI（ライブラリ）

開発環境

開発環境

言語： 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

https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment

https://nodejs.org/

Node.js

Node.js のインストール

npm install -g npm@3

Windows-build-tools のインストール

npm install -g --production windows-build-tools

Yeoman , gulp のインストール

npm install -g yo gulp

Yeoman SharePoint generator の〃

エディター のインストール

https://code.visualstudio.com/download

ざっくりまとめると…

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

サンプルWebパーツ (Hello World)

“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

“Hello World” Webパーツを作る

SharePoint Framework プロジェクト テンプレー

トをダウンロード

⇒PowerShellで下記コマンドを実行する

cd C:¥ ※任意のPath

md helloworld-webpart

cd helloworld-webpart

yo @microsoft/sharepoint

23

24

25

“Hello World” Webパーツを作る

ローカルに開発環境証明書をインストール

⇒PowerShellで下記コマンドを実行する

gulp trust-dev-cert

実行する

⇒PowerShellで下記コマンドを実行する

gulp serve

26

27

“gulp serve”実行するとエラー発生…

https://github.com/DefinitelyTyped/DefinitelyTyped/issues/6639

Typescriptのバージョンに起因するバグ?のようなので…

TypeScript をアンインストール＆再インストールしてみる

PowerShellで下記コマンドを実行する

npm uninstall typescript

npm install typescript

※「helloworld-webpart」以外のプロジェクトテンプレートだと

元からエラーなくうまくいくものもあるので必須というわけではないよう

もう一度、”gulp serve” を実行する

29

30

なんかうまくいったっぽい！

31

ブラウザでSharePointの新しいページっぽいのが立ち上がった！（Onlineじゃなくてローカル）

32

「HelloWorld」パーツを追加してみた

DEMO

まとめ 難しい （あくまで私個人からみて）

サーバーサイド（オンプレ・C#）とかなり違う

オープンソース系Web開発の経験者の方が入りやすいのでは？

相変わらずの英語ドキュメント

まだできる機能は少ない ＆ 不安定？

今後

実際に開発で使われるようになるのはたぶんまだ少し先か？

ただ、早めに手をつけておかないと出遅れるかも（危機感）

（ 「従来のUI」がいつまで維持されるかが気になる…）

34

[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

Special Thanks !

http://www.slideshare.net/hirofumi_ota/sharepoint-framework-spfx

会社紹介

http://artisan.jp.net/37

Ｘ

38

39

40

ご清聴ありがとうございました

41