SharePoint Framework を学ぶ会でお話しをさせて頂いた資料です。

1. SharePoint Framework
をはじめよう
#spfx
SharePoint Framework を学ぶ会
2016/12/15
太田 浩史
Office Servers and Services – Microsoft MVP
株式会社 内田洋行
SharePoint Framework #spfx p. 1

2. 自己紹介
太田 浩史 (おおた ひろふみ)
• 2008 年ごろから、SharePoint を中心に活動しています。
• お客様の Office 365 活用のご支援もしています。
• ちょっとした工夫や役立ちそうな小ネタが好きです。
SharePoint Framework #spfx p. 2
Microsoft MVP
2013,2014 SharePoint Server
2015,2016 Office Servers and Services
www.slideshare.net/hirofumi_ota
idea.tostring.jp
ブログとか資料とか
twitter.com/hrfmjp

3. SharePoint Framewrok
SharePoint Framework #spfx p. 3

4. SharePoint Framework
従来の SharePoint 開発は、.NET で実装されてきた
テクノロジの進化や接続性の強化、JavaScript の飛躍的な進化
豊富な機能や、迅速な処理がクライアント側で構築されるようになった
SharePoint Framework #spfx p. 4

5. Script Editor Web Part + JavaScript
SharePoint 上で開発やカスタマイズを行う方であれば、
多くの方がこの仕組みで実装されたことがあるのでは？
SharePoint Framework #spfx p. 5
REST API and JavaScript
(☝ ՞ਊ ՞)☝ｱｹﾞｱｹﾞ

6. SharePoint Framework
SharePoint Framework #spfx p. 6
Sources:
1. 451 Research, Hosting and Cloud Study, 2014
Full Trust Code
Partial Trust Code
Microsoft
Managed Solutions
Microsoft
Online Services
App Model

7. SharePoint Framework
SharePoint Framework #spfx p. 7
Get an Introduction to SharePoint Framework
https://channel9.msdn.com/Events/Ignite/2016/BRK2114-TS

8. Modern SharePoint Page
SharePoint Framework を利用して
構築され、さまざまな種類のデバイスと
最新のブラウザをサポート
SharePoint Framework client-
side web part により実装された Web
パーツは、クラシックページでも利用できる
SharePoint Framework #spfx p. 8

9. Modern SharePoint Page
SharePoint Framework #spfx p. 9
The Future of SharePoint
https://blogs.office.com/2016/05/04/the-future-of-sharepoint/

10. ツール
SharePoint Framework #spfx p. 10
IIS Express
Project Templates

11. 開発環境のセットアップ
• NodeJS
• Yeoman
• gulp
• Yeoman SharePoint generator
SharePoint Framework #spfx p. 11
https://github.com/SharePoint/sp-dev-docs/wiki

12. コードエディタ
SharePoint Framework #spfx p. 12
• Visual Studio
• Visual Studio Code
• Atom
• Webstorm
• メモ帳
エディタや OS に縛られず、
自由な環境で開発を行うことができる
SharePoint Framework の開発は、
Mac でも Lunix でもできる！

13. 開発環境のセットアップ
SharePoint Framework #spfx p. 13

14. NodeJS のインストール
1. NodeJS Long Term Support version をダウンロード
https://nodejs.org/en/
2. インストーラーを実行
3. PowerShell を管理者権限で実行し、下記コマンドを実行
npm install -g npm@3
SharePoint Framework #spfx p. 14

15. Windows-build-tools のインストール
1. PowerShell を管理者権限で実行し、下記コマンドを実行
npm install -g --production windows-build-tools
SharePoint Framework #spfx p. 15

16. Yeoman と gulp のインストール
1. PowerShell を管理者権限で実行し、下記コマンドを実行
npm install -g yo gulp
SharePoint Framework #spfx p. 16

17. Yeoman SharePoint Generator のインストール
1. PowerShell を管理者権限で実行し、下記コマンドを実行
npm install -g @microsoft/generator-sharepoint
@microsoft/generator-sharepoint – Yeoman generator for SharePoint
Framework
https://www.npmjs.com/package/@microsoft/generator-sharepoint
SharePoint Framework #spfx p. 17

18. Hello World!!
SharePoint Framework #spfx p. 18

19. Hello world
1. PowerShell を管理者権限で実行し、プロジェクト フォルダーを作成したい任意のフォ
ルダーへ移動
2. 下記のコマンドを実行し、プロジェクト フォルダーを作成
md helloworld-webpart
3. 下記のコマンドを実行し、作成したフォルダーへ移動
cd helloworld-webpart
4. 下記のコマンドを実行し、SharePoint Framework プロジェクト テンプレートをダウン
ロード
yo @microsoft/sharepoint
SharePoint Framework #spfx p. 19

20. Hello world
SharePoint Framework #spfx p. 20

21. 開発環境用ローカル証明書のインストール
1. 下記のコマンドを実行（開発環境で1回実行すれば良し）
gulp trust-dev-cert
※ アンインストール
gulp untrust-dev-cert
SharePoint Framework #spfx p. 21

22. 実行
1. 下記のコマンドを実行
gulp serve
SharePoint Framework #spfx p. 22

23. テキストエディタを利用してコードを編集
1. gulp を実行したまま下記の操作を行う
2. src > webparts > helloWorld を開き、ソースコードを確認
– HelloWorldWebPart.ts
– IHelloWorldWebPartProps.ts
– HelloWorldWebPart.manifest.json
SharePoint Framework #spfx p. 23

24. HelloWorldWebPart.ts
1. HelloWorldWebPart クラス render メソッドを書き換え保存する
2. 自動的にリビルドされ、ブラウザ側の表示も更新される
SharePoint Framework #spfx p. 24

25. SharePoint Online の環境で動作確認する
1. gulp を実行したまま、SharePoint Online のサイトを開く
2. サイトの URL を下記のように変更する
/sites/sitepath/_layouts/15/workbench.aspx
SharePoint Framework #spfx p. 25

26. コンテキストを利用する
1. HelloWorldWebPart.ts の render メソッドの描画部分に下記を追加
${this.context.pageContext.web.title}
2. ページを再読み込みして、サイトのタイトルが表示されることが確認できる
SharePoint Framework #spfx p. 26

27. Web パーツにプロパティを追加する
1. HelloWorldPart.ts を編集
一番上にある import にプロパティ設定で利用したいものを追記する
このあたりの定義は、下記を参照
@microsoft/sp-webpart-base
https://www.npmjs.com/package/@microsoft/sp-webpart-base
External module “sp-client-preview”
https://sharepoint.github.io/modules/_sp_client_preview_.html
SharePoint Framework #spfx p. 27

28. Web パーツにプロパティを追加する
import {
BaseClientSideWebPart,
IPropertyPaneSettings,
IWebPartContext,
PropertyPaneTextField,
PropertyPaneSlider
} from '@microsoft/sp-webpart-base';
SharePoint Framework #spfx p. 28

29. Web パーツにプロパティを追加する
2. protected get propertyPaneSettings() を編集
例えば、スライダーで指定するプロパティの場合、max と min の指定が必須
このあたりは下記を参照すると書いてありました。
Interface IPropertyPaneSliderProps
https://sharepoint.github.io/interfaces/_sp_client_preview_.ipropertypan
esliderprops.html
SharePoint Framework #spfx p. 29

30. Web パーツにプロパティを追加する
groups: [
{
groupName: string.BasicGroupName,
（省略）
},
{groupName: "追加プロパティ",
groupFields: [
PropertyPaneSlider('addMySlider', {
label: "スライダー",
max: 100,
min: 0
})]}
]
SharePoint Framework #spfx p. 30

31. Web パーツにプロパティを追加する
3. IHelloWorldWebPartProps.ts を編集
export interface IHelloWorldWebPartProps {
description: string;
addMySlider: number;
}
SharePoint Framework #spfx p. 31

32. Web パーツにプロパティを追加する
3. HelloWorldWebPart.ts を編集
public render() メソッド内で表示したい場所に追加
<p class="ms-font-l ms-fontColor-white">${this.properties.description}</p>
<p class="ms-font-l ms-fontColor-white">スライダーの値 ${this.properties.addMySlider}</p>
<a href="https://github.com/SharePoint/sp-dev-docs/wiki" class="ms-Button ${styles.button}">
SharePoint Framework #spfx p. 32

33. 出た！！
SharePoint Framework #spfx p. 33

34. リストの一覧データを呼び出す
1. HelloWorldWebPart.ts を編集
export interface ISPLists {
value: ISPList[];
}
export interface ISPList {
Title: string;
Id: string;
}
SharePoint Framework #spfx p. 34

35. リストの一覧データを呼び出す
2. HelloWorldWebPart.ts を編集
HelloWorldWebPart クラス内に追記
private _getListData(): Promise<ISPLists> {
return this.context.httpClient.get(this.context.pageContext.web.absoluteUrl +
`/_api/web/lists?$filter=Hidden eq false`)
.then((response: Response) => {
return response.json();
});
}
SharePoint Framework #spfx p. 35

36. リストの一覧データを呼び出す
private _renderList(items: ISPList[]): void {
let html: string = '';
items.forEach((item: ISPList) => {
html += `
<ul>
<li>
<span class="ms-font-l">${item.Title}</span>
</li>
</ul>`;
});
const listContainer: Element = this.domElement.querySelector('#spListContainer');
listContainer.innerHTML = html;
}
SharePoint Framework #spfx p. 36
後で render メソッドへ対応する要素を追加

37. リストの一覧データを呼び出す
private _renderListAsync(): void {
this._getListData()
.then((response) => {
this._renderList(response.value);
});
}
SharePoint Framework #spfx p. 37

38. リストの一覧データを呼び出す
2. HelloWorldWebPart.ts を編集
public render() メソッドへ追記
this.domElement.innerHTML = `（略）`
<div id="spListContainer"></div>`;
this._renderListAsync();
SharePoint Framework #spfx p. 38

39. 出た！！
SharePoint Framework #spfx p. 39
SharePoint Online の Workbench で動作を確認します。

40. 環境へ展開する
SharePoint Framework #spfx p. 40

41. アプリ パッケージを作成し展開する準備
1. Config フォルダーの write-manifests.json を編集し、cdnBasePath
（Web パーツから呼び出す .js ファイルの保存先）を指定します。
※ ここに指定する URL は、Web サーバーや Office 365 CDN などの他、
SharePoint Online のドキュメント ライブラリも指定できます。
Azure Storage を CDN で使う場合は、専用の手順があります。
SharePoint Framework #spfx p. 41

42. アプリ パッケージを作成し展開する準備
2. 下記のコマンドを実行します。
gulp bundle --production
3. temp フォルダーが新しく作成されます。
temp > deploy の中に作成されるファイルを先ほど指定した cdnBasePath
の場所へ保存します。
SharePoint Framework #spfx p. 42

43. アプリ パッケージを作成し展開する
1. 下記のコマンドを実行します。
gulp package-solution --production
2. sharepoint フォルダーが新しく作成されます。
sharepoint > solution の中に作成される .spapp ファイルを SharePoint
Online のアプリ カタログへ保存しサイトへ展開します。
SharePoint Framework #spfx p. 43

44. サイトへインストール、ページに配置
1. サイト コンテンツからアプリを追加します。
SharePoint Framework #spfx p. 44
SharePoint Framework によって作成されたクライアント サイド Web パーツは、
新旧のサイトページへ配置することが可能なことを確認できます。

45. まとめ
SharePoint Framework #spfx p. 45

46. まとめ
• これからの SharePoint 開発、カスタマイズは SharePoint
Framework の利用が主流になりそう。
• これまでの .NET エンジニアは、新しいスキルを習得する必要がありそう。
• 学習するなら早めに取りかかろう！！
SharePoint Framework #spfx p. 46

47. サンプル
SharePoint Framework #spfx p. 47
GitHub: SharePoint/sp-dev-fx-webparts
https://github.com/SharePoint/sp-dev-fx-webparts

48. SharePoint Showcase
SharePoint Showcase
https://sharepointshowcase.office.com/
SharePoint Framework #spfx p. 48

49. SharePoint Framework #spfx p. 49

50. References
• Welcome to the SharePoint Framework Developer Preview!
https://github.com/SharePoint/sp-dev-docs/wiki
• Overview of the SharePoint Framework
https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview
• Set up your SharePoint Client-side web part development environment
https://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment
• Build your first SharePoint client-side web part
https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/build-a-hello-world-web-part
• SharePoint Framework API
https://sharepoint.github.io/
• Office Dev Patterns and Practices
https://dev.office.com/patterns-and-practices
• SharePoint Framework client-side web パーツ開発のファースト ステップ
https://crieilluminate.wordpress.com/2016/12/05/sharepointframework-client-side-webpart/
SharePoint Framework #spfx p. 50

51. SharePoint Framework #spfx
終
製作・著作
@hrfmjp
idea.tostring.jp
Fin.