Download - SharePoint Framework をはじめよう #spfx
SharePoint Frameworkをはじめよう
#spfx
SharePoint Framework を学ぶ会
2016/12/15
太田 浩史
Office Servers and Services – Microsoft MVP
株式会社 内田洋行
SharePoint Framework #spfx p. 1
自己紹介
太田 浩史 (おおた ひろふみ)
• 2008 年ごろから、SharePoint を中心に活動しています。
• お客様の Office 365 活用のご支援もしています。
• ちょっとした工夫や役立ちそうな小ネタが好きです。
SharePoint Framework #spfx p. 2
Microsoft MVP
2013,2014 SharePoint Server2015,2016 Office Servers and Services
www.slideshare.net/hirofumi_ota
idea.tostring.jp
ブログとか資料とか
twitter.com/hrfmjp
SharePoint Framewrok
SharePoint Framework #spfx p. 3
SharePoint Framework
従来の SharePoint 開発は、.NET で実装されてきた
テクノロジの進化や接続性の強化、JavaScript の飛躍的な進化
豊富な機能や、迅速な処理がクライアント側で構築されるようになった
SharePoint Framework #spfx p. 4
Script Editor Web Part + JavaScript
SharePoint 上で開発やカスタマイズを行う方であれば、
多くの方がこの仕組みで実装されたことがあるのでは?
SharePoint Framework #spfx p. 5
REST API and JavaScript
(☝ ՞ਊ ՞)☝アゲアゲ
SharePoint Framework
SharePoint Framework #spfx p. 6
Sources:1. 451 Research, Hosting and Cloud Study, 2014
Full Trust CodePartial Trust Code
Microsoft
Managed Solutions
Microsoft
Online Services
App Model
SharePoint Framework
SharePoint Framework #spfx p. 7
Get an Introduction to SharePoint Frameworkhttps://channel9.msdn.com/Events/Ignite/2016/BRK2114-TS
Modern SharePoint Page
SharePoint Framework を利用して
構築され、さまざまな種類のデバイスと
最新のブラウザをサポート
SharePoint Framework client-
side web part により実装された Web
パーツは、クラシックページでも利用できる
SharePoint Framework #spfx p. 8
Modern SharePoint Page
SharePoint Framework #spfx p. 9
The Future of SharePointhttps://blogs.office.com/2016/05/04/the-future-of-sharepoint/
ツール
SharePoint Framework #spfx p. 10
IIS Express
Project Templates
開発環境のセットアップ
• NodeJS
• Yeoman
• gulp
• Yeoman SharePoint generator
SharePoint Framework #spfx p. 11
https://github.com/SharePoint/sp-dev-docs/wiki
コードエディタ
SharePoint Framework #spfx p. 12
• Visual Studio
• Visual Studio Code
• Atom
• Webstorm
• メモ帳
エディタや OS に縛られず、
自由な環境で開発を行うことができる
SharePoint Framework の開発は、
Mac でも Lunix でもできる!
開発環境のセットアップ
SharePoint Framework #spfx p. 13
NodeJS のインストール
1. NodeJS Long Term Support version をダウンロード
https://nodejs.org/en/
2. インストーラーを実行
3. PowerShell を管理者権限で実行し、下記コマンドを実行
npm install -g npm@3
SharePoint Framework #spfx p. 14
Windows-build-tools のインストール
1. PowerShell を管理者権限で実行し、下記コマンドを実行
npm install -g --production windows-build-tools
SharePoint Framework #spfx p. 15
Yeoman と gulp のインストール
1. PowerShell を管理者権限で実行し、下記コマンドを実行
npm install -g yo gulp
SharePoint Framework #spfx p. 16
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
Hello World!!
SharePoint Framework #spfx p. 18
Hello world
1. PowerShell を管理者権限で実行し、プロジェクト フォルダーを作成したい任意のフォ
ルダーへ移動
2. 下記のコマンドを実行し、プロジェクト フォルダーを作成
md helloworld-webpart
3. 下記のコマンドを実行し、作成したフォルダーへ移動
cd helloworld-webpart
4. 下記のコマンドを実行し、SharePoint Framework プロジェクト テンプレートをダウン
ロード
yo @microsoft/sharepoint
SharePoint Framework #spfx p. 19
Hello world
SharePoint Framework #spfx p. 20
開発環境用ローカル証明書のインストール
1. 下記のコマンドを実行(開発環境で1回実行すれば良し)
gulp trust-dev-cert
※ アンインストール
gulp untrust-dev-cert
SharePoint Framework #spfx p. 21
実行
1. 下記のコマンドを実行
gulp serve
SharePoint Framework #spfx p. 22
テキストエディタを利用してコードを編集
1. gulp を実行したまま下記の操作を行う
2. src > webparts > helloWorld を開き、ソースコードを確認
– HelloWorldWebPart.ts
– IHelloWorldWebPartProps.ts
– HelloWorldWebPart.manifest.json
SharePoint Framework #spfx p. 23
HelloWorldWebPart.ts
1. HelloWorldWebPart クラス render メソッドを書き換え保存する
2. 自動的にリビルドされ、ブラウザ側の表示も更新される
SharePoint Framework #spfx p. 24
SharePoint Online の環境で動作確認する
1. gulp を実行したまま、SharePoint Online のサイトを開く
2. サイトの URL を下記のように変更する
/sites/sitepath/_layouts/15/workbench.aspx
SharePoint Framework #spfx p. 25
コンテキストを利用する
1. HelloWorldWebPart.ts の render メソッドの描画部分に下記を追加
${this.context.pageContext.web.title}
2. ページを再読み込みして、サイトのタイトルが表示されることが確認できる
SharePoint Framework #spfx p. 26
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
Web パーツにプロパティを追加する
import {
BaseClientSideWebPart,
IPropertyPaneSettings,
IWebPartContext,
PropertyPaneTextField,
PropertyPaneSlider
} from '@microsoft/sp-webpart-base';
SharePoint Framework #spfx p. 28
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
Web パーツにプロパティを追加する
groups: [
{
groupName: string.BasicGroupName,
(省略)
},
{groupName: "追加プロパティ",
groupFields: [
PropertyPaneSlider('addMySlider', {
label: "スライダー",
max: 100,
min: 0
})]}
]
SharePoint Framework #spfx p. 30
Web パーツにプロパティを追加する
3. IHelloWorldWebPartProps.ts を編集
export interface IHelloWorldWebPartProps {
description: string;
addMySlider: number;
}
SharePoint Framework #spfx p. 31
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
出た!!
SharePoint Framework #spfx p. 33
リストの一覧データを呼び出す
1. HelloWorldWebPart.ts を編集
export interface ISPLists {
value: ISPList[];
}
export interface ISPList {
Title: string;
Id: string;
}
SharePoint Framework #spfx p. 34
リストの一覧データを呼び出す
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
リストの一覧データを呼び出す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 メソッドへ対応する要素を追加
リストの一覧データを呼び出す
private _renderListAsync(): void {
this._getListData()
.then((response) => {
this._renderList(response.value);
});
}
SharePoint Framework #spfx p. 37
リストの一覧データを呼び出す
2. HelloWorldWebPart.ts を編集
public render() メソッドへ追記
this.domElement.innerHTML = `(略)`
<div id="spListContainer"></div>`;
this._renderListAsync();
SharePoint Framework #spfx p. 38
出た!!
SharePoint Framework #spfx p. 39
SharePoint Online の Workbench で動作を確認します。
環境へ展開する
SharePoint Framework #spfx p. 40
アプリ パッケージを作成し展開する準備
1. Config フォルダーの write-manifests.json を編集し、cdnBasePath
(Web パーツから呼び出す .js ファイルの保存先)を指定します。
※ ここに指定する URL は、Web サーバーや Office 365 CDN などの他、
SharePoint Online のドキュメント ライブラリも指定できます。
Azure Storage を CDN で使う場合は、専用の手順があります。
SharePoint Framework #spfx p. 41
アプリ パッケージを作成し展開する準備
2. 下記のコマンドを実行します。
gulp bundle --production
3. temp フォルダーが新しく作成されます。
temp > deploy の中に作成されるファイルを先ほど指定した cdnBasePath
の場所へ保存します。
SharePoint Framework #spfx p. 42
アプリ パッケージを作成し展開する
1. 下記のコマンドを実行します。
gulp package-solution --production
2. sharepoint フォルダーが新しく作成されます。
sharepoint > solution の中に作成される .spapp ファイルを SharePoint
Online のアプリ カタログへ保存しサイトへ展開します。
SharePoint Framework #spfx p. 43
サイトへインストール、ページに配置
1. サイト コンテンツからアプリを追加します。
SharePoint Framework #spfx p. 44
SharePoint Framework によって作成されたクライアント サイド Web パーツは、
新旧のサイトページへ配置することが可能なことを確認できます。
まとめ
SharePoint Framework #spfx p. 45
まとめ
• これからの SharePoint 開発、カスタマイズは SharePoint
Framework の利用が主流になりそう。
• これまでの .NET エンジニアは、新しいスキルを習得する必要がありそう。
• 学習するなら早めに取りかかろう!!
SharePoint Framework #spfx p. 46
サンプル
SharePoint Framework #spfx p. 47
GitHub: SharePoint/sp-dev-fx-webparts
https://github.com/SharePoint/sp-dev-fx-webparts
SharePoint Showcase
SharePoint Showcase
https://sharepointshowcase.office.com/
SharePoint Framework #spfx p. 48
SharePoint Framework #spfx p. 49
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
SharePoint Framework #spfx
終製作・著作
@hrfmjp
idea.tostring.jp
Fin.