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 活用のご支援もしています。

• ちょっとした工夫や役立ちそうな小ネタが好きです。


Microsoft MVP

2013,2014 SharePoint Server2015,2016 Office Servers and Services

www.slideshare.net/hirofumi_ota

idea.tostring.jp

ブログとか資料とか

twitter.com/hrfmjp

http://www.slideshare.net/hirofumi_ota

http://idea.tostring.jp/

https://twitter.com/hrfmjp

SharePoint Framewrok


SharePoint Framework

従来の SharePoint 開発は、.NET で実装されてきた

テクノロジの進化や接続性の強化、JavaScript の飛躍的な進化

豊富な機能や、迅速な処理がクライアント側で構築されるようになった


Script Editor Web Part + JavaScript

SharePoint 上で開発やカスタマイズを行う方であれば、

多くの方がこの仕組みで実装されたことがあるのでは？


REST API and JavaScript

(☝ ՞ਊ ՞)☝ｱｹﾞｱｹﾞ



Sources:1. 451 Research, Hosting and Cloud Study, 2014

Full Trust CodePartial Trust Code

Microsoft

Managed Solutions

Microsoft

Online Services

App Model



Get an Introduction to SharePoint Frameworkhttps://channel9.msdn.com/Events/Ignite/2016/BRK2114-TS

https://channel9.msdn.com/Events/Ignite/2016/BRK2114-TS

Modern SharePoint Page

SharePoint Framework を利用して

構築され、さまざまな種類のデバイスと

最新のブラウザをサポート

SharePoint Framework client-

side web part により実装された Web

パーツは、クラシックページでも利用できる


Modern SharePoint Page


The Future of SharePointhttps://blogs.office.com/2016/05/04/the-future-of-sharepoint/

https://blogs.office.com/2016/05/04/the-future-of-sharepoint/

ツール


IIS Express

Project Templates

開発環境のセットアップ

• NodeJS

• Yeoman

• gulp

• Yeoman SharePoint generator


https://github.com/SharePoint/sp-dev-docs/wiki


コードエディタ


• Visual Studio

• Visual Studio Code

• Atom

• Webstorm

• メモ帳

エディタや OS に縛られず、

自由な環境で開発を行うことができる

SharePoint Framework の開発は、

Mac でも Lunix でもできる！

開発環境のセットアップ


NodeJS のインストール

1. NodeJS Long Term Support version をダウンロード

https://nodejs.org/en/

2. インストーラーを実行

3. PowerShell を管理者権限で実行し、下記コマンドを実行

npm install -g npm@3


https://nodejs.org/en/

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


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


Yeoman と gulp のインストール


npm install -g yo gulp


Yeoman SharePoint Generator のインストール


npm install -g @microsoft/generator-sharepoint

@microsoft/generator-sharepoint – Yeoman generator for SharePoint

Framework

https://www.npmjs.com/package/@microsoft/generator-sharepoint


https://www.npmjs.com/package/@microsoft/generator-sharepoint

Hello World!!


Hello world

1. PowerShell を管理者権限で実行し、プロジェクトフォルダーを作成したい任意のフォ

ルダーへ移動

2. 下記のコマンドを実行し、プロジェクトフォルダーを作成

md helloworld-webpart

3. 下記のコマンドを実行し、作成したフォルダーへ移動

cd helloworld-webpart

4. 下記のコマンドを実行し、SharePoint Framework プロジェクトテンプレートをダウン

ロード

yo @microsoft/sharepoint


Hello world


開発環境用ローカル証明書のインストール

1. 下記のコマンドを実行（開発環境で1回実行すれば良し）

gulp trust-dev-cert

※ アンインストール

gulp untrust-dev-cert


実行

1. 下記のコマンドを実行

gulp serve


テキストエディタを利用してコードを編集

1. gulp を実行したまま下記の操作を行う

2. src > webparts > helloWorld を開き、ソースコードを確認

– HelloWorldWebPart.ts

– IHelloWorldWebPartProps.ts

– HelloWorldWebPart.manifest.json


HelloWorldWebPart.ts

1. HelloWorldWebPart クラス render メソッドを書き換え保存する

2. 自動的にリビルドされ、ブラウザ側の表示も更新される


SharePoint Online の環境で動作確認する

1. gulp を実行したまま、SharePoint Online のサイトを開く

2. サイトの URL を下記のように変更する

/sites/sitepath/_layouts/15/workbench.aspx


コンテキストを利用する

1. HelloWorldWebPart.ts の render メソッドの描画部分に下記を追加

${this.context.pageContext.web.title}

2. ページを再読み込みして、サイトのタイトルが表示されることが確認できる


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


https://www.npmjs.com/package/@microsoft/sp-webpart-base

https://sharepoint.github.io/modules/_sp_client_preview_.html


import {

BaseClientSideWebPart,

IPropertyPaneSettings,

IWebPartContext,

PropertyPaneTextField,

PropertyPaneSlider

} from '@microsoft/sp-webpart-base';



2. protected get propertyPaneSettings() を編集

例えば、スライダーで指定するプロパティの場合、max と min の指定が必須

このあたりは下記を参照すると書いてありました。

Interface IPropertyPaneSliderProps

https://sharepoint.github.io/interfaces/_sp_client_preview_.ipropertypan

esliderprops.html


https://sharepoint.github.io/interfaces/_sp_client_preview_.ipropertypanesliderprops.html


groups: [

{

groupName: string.BasicGroupName,

（省略）

},

{groupName: "追加プロパティ",

groupFields: [

PropertyPaneSlider('addMySlider', {

label: "スライダー",

max: 100,

min: 0

})]}

]



3. IHelloWorldWebPartProps.ts を編集

export interface IHelloWorldWebPartProps {

description: string;

addMySlider: number;

}



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}">


出た！！


リストの一覧データを呼び出す


export interface ISPLists {

value: ISPList[];

}

export interface ISPList {

Title: string;

Id: string;

}




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();

});

}


リストの一覧データを呼び出す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;

}


後で render メソッドへ対応する要素を追加


private _renderListAsync(): void {

this._getListData()

.then((response) => {

this._renderList(response.value);

});

}




public render() メソッドへ追記

this.domElement.innerHTML = `（略）`

<div id="spListContainer"></div>`;

this._renderListAsync();


出た！！


SharePoint Online の Workbench で動作を確認します。

環境へ展開する


アプリパッケージを作成し展開する準備

1. Config フォルダーの write-manifests.json を編集し、cdnBasePath

（Web パーツから呼び出す .js ファイルの保存先）を指定します。

※ ここに指定する URL は、Web サーバーや Office 365 CDN などの他、

SharePoint Online のドキュメントライブラリも指定できます。

Azure Storage を CDN で使う場合は、専用の手順があります。


アプリパッケージを作成し展開する準備

2. 下記のコマンドを実行します。

gulp bundle --production

3. temp フォルダーが新しく作成されます。

temp > deploy の中に作成されるファイルを先ほど指定した cdnBasePath

の場所へ保存します。


アプリパッケージを作成し展開する

1. 下記のコマンドを実行します。

gulp package-solution --production

2. sharepoint フォルダーが新しく作成されます。

sharepoint > solution の中に作成される .spapp ファイルを SharePoint

Online のアプリカタログへ保存しサイトへ展開します。


サイトへインストール、ページに配置

1. サイトコンテンツからアプリを追加します。


SharePoint Framework によって作成されたクライアントサイド Web パーツは、

新旧のサイトページへ配置することが可能なことを確認できます。

まとめ


まとめ

• これからの SharePoint 開発、カスタマイズは SharePoint

Framework の利用が主流になりそう。

• これまでの .NET エンジニアは、新しいスキルを習得する必要がありそう。

• 学習するなら早めに取りかかろう！！


サンプル


GitHub: SharePoint/sp-dev-fx-webparts

https://github.com/SharePoint/sp-dev-fx-webparts

https://github.com/SharePoint/sp-dev-fx-webparts

SharePoint Showcase

SharePoint Showcase

https://sharepointshowcase.office.com/


https://sharepointshowcase.office.com/

References

• Welcome to the SharePoint Framework Developer Preview!


• 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/



https://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview

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

https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/build-a-hello-world-web-part

https://sharepoint.github.io/

https://dev.office.com/patterns-and-practices

https://crieilluminate.wordpress.com/2016/12/05/sharepointframework-client-side-webpart/

SharePoint Framework #spfx

終製作・著作

@hrfmjp

idea.tostring.jp

Fin.

SharePoint Framework をはじめよう #spfx

Technology

Transcript of SharePoint Framework をはじめよう #spfx