SharePoint Framework Extension 基礎講座

SharePoint Framework
Extension
基礎講座
及川紘旭
Microsoft MVP for Office Development
2018年10月27日

目次
◼ はじめに
◼ ハンズオンの説明
◼ SharePoint Framework Extension とは
◼ ハンズオン
- ハンズオン１開発環境の構築
- ハンズオン２モダンページのカスタマイズ
- ハンズオン３列表示のカスタマイズ
- ハンズオン４ツールバーにボタンを追加
◼ まとめ
◼ 参考サイト
2
© SharePoint Developer
sharepoint.orivers.jp

はじめにセッションの本題に入る前に。
3

自己紹介
sharepoint.orivers.jp 4
◼ 及川紘旭 (おいかわひろあき)
◼ Microsoft MVP
for Office Servers and Services 2007年10月～2016年9月
for Office Development 2016年10月～
◼ アドバンスド・ソリューション株式会社
SharePoint 開発担当
◼ ブログ SharePoint Developer
(http://sharepoint.orivers.jp)
◼ Twitter @HiroakiOikawa
◼ Qiita https://qiita.com/HiroakiOikawa

このセッションのゴール
SharePoint Framework Extension
で何ができるようになるのかを理解する。

ハンズオンの説明今回実施するハンズオンをご紹介します。
6

ハンズオン一覧
# タイトル説明
1 開発環境の構築 Docker を使って簡単 SPFx 開発環境構築。
2 モダンページのカスタマイズ Application Customizer による開発。
3 リストビューの列表示のカスタマイズ Field Customizer による開発。
4 リストビューのツールバーにボタンを追加 ListView Command Set による開発。

SharePoint
Framework
Extension とは
SharePoint Framework Extension
について概要を説明します。
8

SharePoint Framework とは
◼ モダン UI のカスタマイズに対応した新しい SharePoint 開発方式。
(略して SPFx)
- 2016/8/17 にプレビュー版リリース、2018/9/5 に Version 1.6 リリース。
オープンソース
• オープンソースの各種ツールやライブラリを
使って開発。
• SPFx そのものもオープンソース。
TypeScript で開発
• 開発言語は TypeScript を使用。
• TypeScript は JavaScript ベースの言
語のため、jQuery や Angular など
JavaScript Framework も使用可能。
パッケージ化して横展開
• SharePoint のフィーチャー展開やアプリ
展開の方式で横展開可能。
O365 開発に欠かせない便利 API
• SharePoint REST、Microsoft
Graph、Azure AD のライブラリがビルト
イン。

SPFx で開発できるもの
Extension - Application Customizer
ページへのスクリプト追加や、あらかじめ定義されたプレースホル
ダーに任意のHTMLを埋め込むための拡張機能。
Extension - Field Customizer
リストビューの列の表示の仕方を変更するための拡張機能。
Extension - Command Set
ツールバーに新しいボタンとアクションを追加するための拡張機能。
Web パーツ
モダンページおよびクラシックページで使用可能な Web パーツ。

開発環境として必要なもの
◼ OS (必須)
- Windows、Mac、Linux など
◼ ブラウザ (必須)
- Google Chrome がおすすめ
◼ ツール (必須)
- NodeJS 8.12.0 ※9.x、10.x はサポート外
- Yeoman、Yeoman SharePoint generator
- gulp
◼ コードエディタ (任意)
- Visual Studio Code、Sublime、ATOM など
◼ デバッガ (任意)
- Visual Studio Code Debugger for Chrome

開発環境として必要なもの２
◼ SharePoint モダンサイト
- Extension は、モダンサイトを拡張するための機能なので、モダンサイトが必要になります。
- SharePoint モダンサイトが手元にない方は、Office 365 開発者プログラムに参加して、
ご自身の SharePoint 環境に、モダンサイトを作成してください。
https://developer.microsoft.com/ja-jp/office/dev-program

ハンズオン１
開発環境の構築
Docker を使って簡単 SPFx 開発環境
構築
13

Docker で開発環境構築 – 1
普段使いの
OS、ブラウザ
Docker
+
docker-spfx
普段使いの
エディタ、デバッガ
◼ OS (必須)
- Windows、Mac、Linux など。
◼ ブラウザ (必須)
- Google Chrome がおすすめ
◼ ツール (必須)
- NodeJS 8.12.0 ※9.x、10.x はサポート外
- Yeoman、Yeoman SharePoint generator
- gulp
◼ コードエディタ (任意)
- Visual Studio Code、Sublime、ATOM など
◼ デバッガ (任意)
- Visual Studio Code Debugger for Chrome

Docker で開発環境構築 – 2-1
◼ はじめて開発環境を作る際に行う手順
① Google Chrome のインストール
- https://www.google.co.jp/chrome/
② Docker のインストール
- https://www.docker.com/get-started
③ Docker の設定
- 開発中のソースファイルなどを格納するプロジェクトフォルダを作成するドライブを設定 -> Shared Drive
- Docker に割り当てるリソースの設定 -> Advanced
④ Visual Studio Code のインストール
- https://code.visualstudio.com/
⑤ Visual Studio Code Debugger for Chrome のインストール
- Visual Studio Code 拡張機能から「Debugger for Chrome」で検索して、インストール

◼ はじめて開発環境を作る際に行う手順
⑥ SharePointPnPPowerShell のインストール
- PowerShell を管理者モードで起動し、以下のコマンドを実行。
Install-module SharePointPnPPowerShellOnline

◼ プロジェクトごとに行う手順
① プロジェクトフォルダの作成
- Docker で Shared Drive として指定したドライブにプロジェクトフォルダを作成
② SPFx 開発環境イメージのダウンロード & 設定 & 起動
- PowerShell を起動して、以下のコマンドを実行（※SPFx バージョン番号を省略すると最新版をDL）
cd [プロジェクトフォルダ]
docker run -it --rm --name [プロジェクト名] -v [プロジェクトフォルダ]:/usr/app/spfx -p 5432:5432 -p
4321:4321 -p 35729:35729 waldekm/spfx:[SPFx バージョン番号]
- 例
cd D:¥SPFxWork¥SampleAppCustom
docker run -it --rm --name SampleAppCustom -v
D:¥SPFxWork¥SampleAppCustom:/usr/app/spfx -p 5432:5432 -p 4321:4321 -p
35729:35729 waldekm/spfx:1.5.1
- 上記コマンドにより、ローカルに Docker イメージが存在しない場合にのみ、GitHub からイメージがダウンロードされます。
- 注意！
2018/10/07 時点で、Docker イメージ「waldekm/spfx」の最新バージョン v1.6.0 に問題があり正常に動作し
ないため、ここでは v1.5.1 を使用します。

③ gulp のインストール
- npm install gulp
④ Office UI Fabric Core のインストール
- npm install @microsoft/sp-office-ui-fabric-core --save
⑤ プロジェクトの作成
- yo @microsoft/sharepoint (※詳細はハンズオン２以降で説明)
⑥ Local workbench のエラー対応 ※waldekm/spfx v1.5.1 使用の場合のみ実施
- /node_module/gulp-connect/index.js を開き、106 行目の「this.host,」を削除し保存。
return this.server.listen(this.port, this.host, (function(_this) {

⑦ 開発用証明書の作成、インストール
- 開発用証明書を作成
gulp trust-dev-cert
- 開発サーバーを起動
gulp serve
- 開発サーバーの起動後、ローカル PC の IE で以下の URL に接続し、証明書をインポートする (インポート先:信頼さ
れたルート証明機関)
https://localhost:4321

ハンズオン２
モダンページの
カスタマイズ
Application Customizer にて、モダン
ページをカスタマイズします
20

Application Customizer でできること
◼ Application Customizer は、モダンページにスクリプトを埋
め込み、ページをカスタマイズする拡張機能です。

モダンページのカスタマイズ – 1
◼ プロジェクトの作成
- Docker で開発環境構築 2-1, 2-2, 2-3 を実施。
- yo @microsoft/sharepoint の設定は以下の通り。
yo @microsoft/sharepoint
Let's create a new SharePoint solution.
? What is your solution name? (spfx) SampleAppCustom
? Which baseline packages do you want to target for your component(s)? (Use arrow keys)
❯ SharePoint Online only (latest)
SharePoint 2016 onwards, including SharePoint Online
? Where do you want to place the files? (Use arrow keys)
❯ Use the current folder
Create a subfolder with solution name
Found npm version 5.6.0
? Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites
immediately without running any feature deployment or adding apps in sites? (y/N) N
? Which type of client-side component to create?
WebPart
❯ Extension
? Which type of client-side extension to create? (Use arrow keys)
❯ Application Customizer
Field Customizer
ListView Command Set
Add new Application Customizer to solution sample-app-custom.
? What is your Application Customizer name? (HelloWorld) SampleAppCustom
? What is your Application Customizer description? (SampleAppCustom description)

モダンページのカスタマイズ – ファイル構成
◼ 主要なフォルダ、ファイル構成
パス/ファイル名用途
/src/extensions/sampleAppCustom 各種ソースファイル、CSS などを格納するフォルダ。
- SampleAppCustomApplicationCustomizer.ts Application Customizer の本体。
ここにメインのコードを追記します。
/.vscode Visual Studio Code の構成ファイルを格納す
るフォルダ。
- launch.json Chrome Debugger の構成ファイル。
/config 各種ツールの構成ファイルを格納するフォルダ。
- serve.json テストサイト起動用の構成ファイル。
/sharepoint/assets/elements.xml SharePoint サイトにアプリをフィーチャーとして
展開する際に使用する定義ファイル。

モダンページのカスタマイズ – 2-1
◼ 実行、デバッグ方法①
- サーバーの構成
• /config/serve.json を開き、”pageUrl” を開発で使用するモダンサイトのページ URL に変更。

◼ 実行、デバッグ方法②
- アプリケーションの実行
• PowerShell にて以下のコマンドを実行するとアプリケーションが実行されます。
gulp serve
- アプリケーションの表示
• gulp serve の実行結果として出力される URL (黄色下線部分) をブラウザで開きます。

◼ 実行、デバッグ方法③
- デバッグの許可
• 以下のダイアログが表示されるので、[デバッグスクリプトを読み込む]をクリックします。
- URL をコピー
• アプリケーションが表示されるので、ブラウザのアドレスバーから URL をコピーしてメモ帳などに貼り付けます。
- アプリケーションの停止
• PowerShell にて Ctrl + C を入力しアプリケーションを停止します。

◼ 実行、デバッグ方法④
- デバッグの構成
• /.vscode/launch.json を開き、27 行目の ”enter-your-SharePoint-site” をデバッグで使用するサイ
トの URL に変更します。
• 23 行目から 39 行目までをコピーし、40 行目に貼り付けます。
• “name” を “Hosted Site” に変更、”url” に前の手順でコピーした URL を貼り付けます。
• launch.json を保存します。

◼ 実行、デバッグ方法⑤
- デバッグの方法
• gulp serve を実行し、アプリケーションを起動します。
• VSCode の左メニューから、デバッグモードに切り替えます。
• デバッグの構成から [Hosted Site]を選択し、左の [▶] ボタンをクリックします。
• Chrome にて、F12 キーを押して開発者ツールを起動します。
• [Source] タブをクリックし、以下のファイルを開きます。
top/localhost:4321/dist/sample-app-custom-application-customizer.js
• 任意の行にブレイクポイントを設定します。
• F5 キーを押してブラウザをリフレッシュすると、ブレイクポイントで実行が停止し、VSCode でデバッグができます。

モダンページのカスタマイズ – 3-1-1
◼ ヘッダ、フッタの追加①
- /src/extensions/sampleAppCustom に、以下のファイルを追加。※ファイルの内容は 3-1-a 参照
SampleAppCustomApplicationCustomizer.module.scss
- /src/extensions/sampleAppCustom/SampleAppCustomApplicationCustomizer.ts を編集。
# 編集内容
1 3行目の import 内に、PlaceholderName、PlaceholderContent を追加
2 import の最後に以下を追加
import styles from './SampleAppCustomApplicationCustomizer.module.scss';
import {escape} from '@microsoft/sp-lodash-subset';
3 ISampleAppCustomApplicationCustomizerProperties に、以下のプロパティを追加
top: string;
bottom: string;
4 SampleAppCustomApplicationCustomizer に、以下のプライベート変数を追加
private topPlaceholder: PlaceholderContent | undefined;
private bottomPlaceholder: PlaceholderContent | undefined;
5 OnInite メソッドの Dialog.alert をコメントアウト
6 OnInite メソッドの Dialog.alert の後に、以下のコードを追加
this.context.placeholderProvider.changedEvent.add(this, this._renderPlaceHolders);
this._renderPlaceHolders();
7 _renderPlaceHolders メソッドを追加 ※追加内容は 3-1-b 参照

モダンページのカスタマイズ – 3-1-a
◼ SampleAppCustomApplicationCustomizer.module.scss
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
.app {
.top {
height: 50px;
padding: 5px 10px;
background-color: $ms-color-themePrimary;
color: $ms-color-themeLighterAlt;
}
.bottom {
height: 50px;
padding: 5px 10px;
background-color: $ms-color-themeDark;
}
}

モダンページのカスタマイズ – 3-1-b
◼ _renderPlaceHolders メソッド
private _renderPlaceHolders() : void {
console.log(
"すべてのプレースホルダーを列挙: ",
this.context.placeholderProvider.placeholderNames
.map(name => PlaceholderName[name])
.join(", ")
);
if (!this.topPlaceholder) {
this.topPlaceholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top);
this.topPlaceholder.domElement.innerHTML = `
<div class="${styles.app}"><div class="${styles.top}">${escape(this.properties.top)}</div></div>
`;
}
if (!this.bottomPlaceholder) {
this.bottomPlaceholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Bottom);
this.bottomPlaceholder.domElement.innerHTML = `
<div class="${styles.app}"><div class="${styles.bottom}">${escape(this.properties.bottom)}</div></div>
`;
}
}

モダンページのカスタマイズ – 3-1-2
◼ ヘッダ、フッタの追加②
- /config/serve.json を開き、properties に以下を追加。
“top”: “Top Placehoder”,
“bottom”: “Bottom Placeholder”
- /.vscode/launch.json を開き、Hosted Site の url を gulp serveで出力される URL に更新。
- VSCode でデバッグ実行。

◼ ナビゲーションの追加
- /src/extensions/sampleAppCustom/SampleAppCustomApplicationCustomizer.module.scss を編
集。
- /src/extensions/sampleAppCustom/SampleAppCustomApplicationCustomizer.ts を編集。
- VSCode でデバッグ実行。
# 編集内容
1 _renderPlaceHolders メソッド内に 3-2-b 赤字箇所のコードを追加
# 編集内容
1 3-2-a 赤字箇所のコードを追加

モダンページのカスタマイズ – 3-2-a
◼ SampleAppCustomApplicationCustomizer.module.scss 赤字箇所
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
.app {
.top {
height: 50px;
padding: 5px 10px;
background-color: $ms-color-themePrimary;
}
.bottom {
height: 50px;
padding: 5px 10px;
background-color: $ms-color-themeDark;
}
.nav {
height: 20px;
padding: 5px 10px;
background-color: $ms-color-themeLight;
color: $ms-color-black;
}
}

モダンページのカスタマイズ – 3-2-b
◼ _renderPlaceHolders メソッド内赤字箇所
private _renderPlaceHolders() : void {
console.log(
"すべてのプレースホルダーを列挙: ",
this.context.placeholderProvider.placeholderNames
.map(name => PlaceholderName[name])
.join(", ")
);
if (!this.topPlaceholder) {
this.topPlaceholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Top);
this.topPlaceholder.domElement.innerHTML = `
<div class="${styles.app}"><div class="${styles.top}">${escape(this.properties.top)}</div></div>
`;
if (document.getElementsByClassName("ms-compositeHeader").length > 0) {
let header: HTMLElement = document.getElementsByClassName("ms-compositeHeader")[0].parentElement;
let nav : HTMLElement = document.createElement("div");
nav.innerHTML = `
<div class="${styles.app}"><div class="${styles.nav}">Navigation1 | Navigation2</div></div>
`;
header.appendChild(nav);
}
}
if (!this.bottomPlaceholder) {
this.bottomPlaceholder = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Bottom);
this.bottomPlaceholder.domElement.innerHTML = `
<div class="${styles.app}"><div class="${styles.bottom}">${escape(this.properties.bottom)}</div></div>
`;
}
}

◼ CDNの有効化 (テナントへ展開するための準備)
- テナントの CDN の有効化状態を確認します。
SharePoint Online 管理シェルを起動し、以下のコマンドを実行します。
Connect-SPOService –Url https://[テナント名]-admin.sharepoint.com
Get-SPOTenantCdnEnabled –CdnType Public
- 上記コマンドの結果が False の場合、CDN が有効化されていないため、以下のコマンドで有効化します。
有効化には 20 分程度時間がかかる場合があるようです。
Set-SPOTenantCdnEnabled –CdnType Public –Enable $True
エラー「メソッド “GetTenantCdnAllowedFileTypes” は存在しません」が発生した場合、CDN は有効になっていま
すが、SPO 管理シェルのバージョンが古いため、SharePoint Online 管理シェルの最新版をインストールしてください。
https://www.microsoft.com/ja-jp/download/details.aspx?id=35588

◼ サイトへの展開①
- /sharepoint/assets/elements.xml を編集。
- PowerShell にて以下のコマンドを実行。
gulp bundle --ship
gulp package-solution --ship
- パッケージファイルをテナントのアプリカタログにアップロード。
アプリカタログが未作成の場合は、SharePoint 管理センターにアクセスし、アプリカタログを作成する。
- アップロード完了後、アプリを信頼しますか？のダイアログで [展開] ボタンをクリック。
# 編集内容
1 ClientSideComponentProperties 属性の値を以下の値に変更。
"{"testMessage":"Test message","top":"Top
Placeholder","bottom":"Bottom Placeholder"}"

◼ サイトへの展開②
- ブラウザでサイトを開き、「sample-app-custom-client-side-solution」アプリを追加。
- しばらくすると、以下の通りアプリがインストールされます。
インストール中…
インストール完了!!
- サイトを開いて動作確認。

◼ サイト展開した Application Customizer の削除
- サイトコンテンツを開き、「sample-app-custom-client-side-solution」アプリを削除。
- サイトのごみ箱から削除。第２段階のごみ箱からも忘れずに削除。
- アプリカタログから削除。
- アプリカタログのサイトのごみ箱から削除。第２段階のごみ箱からも忘れずに削除。

◼ テナントへの展開①
- デフォルトではサブサイトごとにアプリの追加が必要ですが、テナントレベルで展開することで、全サイトコレクションに自動的
に展開することができます。
- /config/package-solution.json を開き、”solution” 配下に赤字箇所を追加し、”features” 配下を削除。
- 再度パッケージ化。
- サイトへの展開①を実施。
アプリカタログにアップロードすると右図のダイアログが表示されるので、
[このソリューションを組織内のすべてのサイトで使用できるようにする]
にチェックを付ける。
{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "sample-app-custom-client-side-solution",
"id": "33d85e7d-167c-46f0-898c-d1548835e281",
"version": "1.0.0.0",
"includeClientSideAssets": true,
"skipFeatureDeployment": true
},
"paths": {
"zippedPackage": "solution/sample-app-custom.sppkg"
}
}

◼ テナントへの展開②
- テナントに展開されたアプリは有効化を行う必要があります。
- PowerShell を起動し、以下のコマンドを実行。
$credentials = Get-Credential
Connect-PnPOnline “[展開先のサイト URL]” -Credentials $credentials
Add-PnPCustomAction -Name “[elements.xml の Title]” -Title “[elements.xml の Title]” -Location
“[elements.xml の Location]” -ClientSideComponentId “[elements.xml の ClientSideComponentId]” -
ClientSideComponentProperties ‘[elements.xml の ClientSideComponentProperties]’
※elements.xml は、/sharepoint/assets/elements.xml です。
- 例
Connect-PnPOnline “https://orivers.sharepoint.com/sites/modern-ui” -Credentials $credentials
Add-PnPCustomAction -Name "SampleAppCustom" -Title "SampleAppCustom" -Location
"ClientSideExtension.ApplicationCustomizer" -clientSideComponentId "914ffe1b-ad99-46e4-b0f6-
36140f10461f" -clientSideComponentProperties '{"testMessage":"Test message","top":"Top
Placeholder","bottom":"Bottom Placeholder"}’
- サイトを開いて動作確認。

◼ テナント展開した Application Customizer を削除
Remove-PnPCustomAction -Identity “[elements.xml の Title]”
- 例
Remove-PnPCustomAction -Identity "SampleAppCustom"

ハンズオン３
列表示の
カスタマイズ
Field Customizer にて、モダンリストの
ビューの列表示をカスタマイズします
43

Field Customizer でできること
◼ Field Customizer は、モダンリストのビューに表示する列の
表示方法をカスタマイズする拡張機能です。
safari未対応？

列表示のカスタマイズ – 1
Let‘s create a new SharePoint solution.
? What is your solution name? (spfx) SampleFieldCustom
WebPart
❯ Extension
Application Customizer
❯ Field Customizer
ListView Command Set
Add new Field Customizer to solution sample-field-custom.
? What is your Field Customizer name? (HelloWorld) SampleFieldCustom
? What is your Field Customizer description? (SampleFieldCustom description)
? Which framework would you like to use? (Use arrow keys)
❯ No JavaScript framework
React

列表示のカスタマイズ – ファイル構成
/src/extensions/sampleFieldCustom 各種ソースファイル、CSS などを格納するフォルダ。
- SampleFieldCustomFieldCustomizer.ts Field Customizer の本体。
- SampleFieldCustomFieldCustomizer
.module.scss
Field Customizer のスタイルシート。
るフォルダ。

◼ デバッグ用リスト及び列の追加
- ブラウザでテスト用サイトを開き、リストを作成し、リストにテストで使用する列を追加します。
- このサンプルでは、以下のリスト、列を作成します。
• リスト名：サンプル
• 列内部名： SPFxSample
• 列名：サンプル
• 列の種類： 1行テキスト

◼ デバッグの準備
- /config/serve.json の編集
/config/serve.json を開き、”pageUrl” を開発で使用するリストのビューページ URL に変更。
9 行目、20 行目の “InternalFieldName” を、Field Customizer を適用する列の内部名に変更。
- gulp serve を実行し、URL を取得。
- /.vscode/launch.json の編集
/.vscode/launch.json を開き、27 行目の ”enter-your-SharePoint-site” をデバッグで使用するサイトの
URL に変更します。
23 行目から 39 行目までをコピーし、40 行目に貼り付けます。
“name” を “Hosted Site” に変更、”url” に前の手順でコピーした URL を貼り付けます。

◼ 列のスタイル変更①
- /src/extensions/sampleFieldCustom/SampleFieldCustomFieldCustomizer.ts を編集。
- vscode でデバッグ実行
◼ 行のスタイル変更②
- /src/extensions/sampleFieldCustom/SampleFieldCustomFieldCustomizer.ts を編集。
# 編集内容
1 37 行目の onRenderCell メソッド内に、以下を追加
event.domElement.style.fontSize = "12pt";
event.domElement.style.fontWeight = "bold";
# 編集内容
1 37 行目の onRenderCell メソッド内に、以下を追加
event.domElement.parentElement.parentElement.parentElement.style.backgroundColor =
event.fieldValue;

列表示のカスタマイズ – 5-1
◼ サイトへの展開①
- /sharepoint/assets/elements.xml を編集。
gulp bundle --ship
- サイト列を追加するサイトを開き、「sample-field-custom-client-side-solution」アプリを追加。
# 編集内容
1 Field タグ内を以下の通り変更。
Name 属性： “SPFxSample”
DisplayName 属性： “サンプル”
Type 属性： “Text”
Min 属性：削除
Group 属性： “Custom Columns”
ClientSideComponentProperties 属性： “{"sampleText":"Value"}”

◼ サイトへの展開②
- 新しいリストを作成。
- [リストの設定] > [サイト内の既存の列から追加] から、追加した ”サンプル” 列を追加。
- リストにアイテムを追加して動作確認。

◼ サイト展開した Field Customizer の削除
- サイト列から、追加した列「サンプル」を削除。
- サイトコンテンツを開き、「sample-field-custom-client-side-solution」アプリを削除。

- アプリカタログにアップロード。
アプリカタログにアップロードするとダイアログが表示されるので、[このソリューションを組織内のすべてのサイトで使用できる
ようにする]にチェックを付け、展開します。
{
"solution": {
"name": "sample-field-custom-client-side-solution”,
“id”: “4ef177ab-f6f0-4b88-a5cf-c5ea54421444",
"version": "1.0.0.0",
},
"paths": {
"zippedPackage": "solution/sample-field-custom.sppkg"
}
}

Add-PnPField -DisplayName “[elements.xml の DisplayName]” -InternalName “[elements.xml の
Name]” -Type “[elements.xml の Type]” -Group “Custom Columns” -ClientSideComponentId
“[elements.xml の ClientSideComponentId]” -ClientSideComponentProperties “[elements.xml の
ClientSideComponentProperties]”
- 例
Add-PnPField -DisplayName "サンプル" -InternalName "SPFxSample" -Type "Text" -Group "Custom
Columns" -ClientSideComponentId "e7f04c86-1fc0-4e04-bd52-0e035ea26a48" -
ClientSideComponentProperties "{"sampleText":"Value"}"

◼ テナント展開した Field Customizer を削除
Remove-PnPField -Identity “[elements.xml の Name]”
- 例
Remove-PnPField -Identity “SPFxSample"

ハンズオン４
ツールバーに
ボタンを追加
Command Set にて、モダンリストの
ビューのツールバーにボタンを追加します
56

Command Set でできること
◼ Command Set は、モダンリストのビューのツールバーにボタン
を追加する拡張機能です。

ツールバーにボタンを追加 – 1
Let‘s create a new SharePoint solution.
? What is your solution name? (spfx) SampleCommandSet
WebPart
❯ Extension
Application Customizer
Field Customizer
❯ ListView Command Set
Add new Command Set to solution sample-command-set.
? What is your Command Set name? (HelloWorld) SampleCommandSet
? What is your Command Set description? (SampleCommandSet description)

ツールバーにボタンを追加 – ファイル構成
/src/extensions/sampleCommandSet 各種ソースファイル、CSS などを格納するフォルダ。
- SampleCommandSetCommandSet.ts Command Set の本体。
- SampleCommandSetCommandSet
.manifest.json
ツールバーに登録するボタンの定義ファイル。
るフォルダ。

◼ デバッグ用リストの追加
- ブラウザでテスト用サイトを開き、カスタムリストを作成します。

◼ デバッグの準備
- /config/serve.json の編集
/config/serve.json を開き、”pageUrl” を開発で使用するリストのビューページ URL に変更。
- gulp serve を実行し、URL を取得。
- /.vscode/launch.json の編集
/.vscode/launch.json を開き、27 行目の ”enter-your-SharePoint-site” をデバッグで使用するサイトの
URL に変更します。
23 行目から 39 行目までをコピーし、40 行目に貼り付けます。
“name” を “Hosted Site” に変更、”url” に前の手順でコピーした URL を貼り付けます。

ツールバーにボタンを追加 – 4-1
◼ ボタン追加①
- /src/extensions/sampleCommandSet/SampleCommandSetCommandSet.manifest.json を編集。
- /src/extensions/sampleCommandSet/SampleCommandSetCommandSet.ts を編集。
# 編集内容
1 24 行目から 28 行目をコピーして、29 行目に貼り付け、「COMMAND_3」とする。 4-1-a 赤字箇所参照
# 編集内容
1 onListViewUpdated メソッドに、追加したボタンの表示条件を追加。 4-1-b 赤字箇所参照
2 onExecute メソッドに、追加したボタンの処理を追加。 4-1-c 赤字箇所参照

ツールバーにボタンを追加 – 4-1-a
◼ SampleCommandSetCommandSet.manifest.json
"items": {
"COMMAND_1": {
"title": { "default": "Command One" },
"iconImageUrl": "icons/request.png",
"type": "command"
},
"COMMAND_2": {
"title": { "default": "Command Two" },
"iconImageUrl": "icons/cancel.png",
"type": "command"
},
"COMMAND_3": {
"title": { "default": "アイテムを別ウィンドウで開く" },
"iconImageUrl": "icons/open.png",
"type": "command"
}
}

ツールバーにボタンを追加 – 4-1-b
◼ SampleCommandSetCommandSet.ts onListVIewUpdated メソッド
public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {
const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');
if (compareOneCommand) {
// This command should be hidden unless exactly one row is selected.
compareOneCommand.visible = event.selectedRows.length === 1;
}
const compareOpenItemCommand: Command = this.tryGetCommand('COMMAND_3');
if (compareOpenItemCommand) {
compareOpenItemCommand.visible = event.selectedRows.length >= 1;
}
}

ツールバーにボタンを追加 – 4-1-c
◼ SampleCommandSetCommandSet.ts onExecute メソッド
public onExecute(event: IListViewCommandSetExecuteEventParameters): void {
switch (event.itemId) {
case 'COMMAND_1':
Dialog.alert(`${this.properties.sampleTextOne}`);
break;
case 'COMMAND_2':
Dialog.alert(`${this.properties.sampleTextTwo}`);
break;
case 'COMMAND_3':
let _this = this;
event.selectedRows.forEach((row) => {
let url: string = `${_this.context.pageContext.list.serverRelativeUrl}/DispForm.aspx?ID=${row.getValueByName("ID")}`;
window.open(url, `${row.getValueByName("Title")}`);
});
break;
default:
throw new Error('Unknown command');
}
}

◼ サイトへ展開
gulp bundle --ship
- ボタンを追加するサイトを開き、「sample-command-set-client-side-solution」アプリを追加。
- テスト対象のリストのビューを開き、動作確認。

◼ サイト展開した Command Set の削除
- サイトコンテンツを開き、「sample-command-set-client-side-solution」アプリを削除。

- アプリカタログにアップロード。
アプリカタログにアップロードするとダイアログが表示されるので、[このソリューションを組織内のすべてのサイトで使用できる
ようにする]にチェックを付け、展開します。
{
"solution": {
"name": "sample-command-set-client-side-solution”,
“id”: “18fafd5c-37e3-4a7a-9c28-82b4c43787d7",
"version": "1.0.0.0",
},
"paths": {
"zippedPackage": "solution/sample-field-custom.sppkg"
}
}

Add-PnPCustomAction -Name “[elements.xml の Title]” -Title “[elements.xml の Title]” –RegistrationId
“[elements.xml の RegistrationId]” –RegistrationType “[elements.xml の RegistrationType]” -Location
“[elements.xml の Location]” -ClientSideComponentId “[elements.xml の ClientSideComponentId]” -
ClientSideComponentProperties ‘[elements.xml の ClientSideComponentProperties]’
- 例
Add-PnPCustomAction -Name "SampleCommandSet" -Title "SampleCommandSet" -RegistrationId
"100" -RegistrationType "List" -Location "ClientSideExtension.ListViewCommandSet.CommandBar" -
clientSideComponentId "ec942e95-3479-41d7-8929-789871092350" -clientSideComponentProperties
'{"sampleTextOne":"One item is selected in the list.", "sampleTextTwo":"This command is always
visible."}'

◼ テナント展開した Command Set を削除
Remove-PnPCustomAction -Identity “[elements.xml の Title]”
- 例
Remove-PnPCustomAction -Identity "SampleCommandSet"

まとめ本日のセッションのまとめ。
71

まとめ
◼ SPFx Extension の種類は 3 種類。
- Application Customizer
- Field Customizer
- Command Set
◼ Docker を使うことで SPFx の頻繁なバージョンアップに追従。
- 今回は、SPFx v1.5.1 ですが、最新は SPFx v1.6
◼ 開発には TypeScript、オープンソースの各種ツール、
Chrome が必須。
◼ 開発手法はファームソリューションや CSOM などクライアントサ
イドと異なるが、これまでの SharePoint 開発の知識は必須。

参考サイト 1
◼ 開発
- Application Customizer
• 最初の拡張機能の構築
https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/extensions/get-started/build-a-
hello-world-extension
• ページのプレースホルダーの使用
https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/extensions/get-started/using-
page-placeholder-with-extensions
- Field Customizer
• フィールドカスタマイザーの構築
https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/extensions/get-started/building-
simple-field-customizer
- Command Set
• ListView コマンドセットの構築
https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/extensions/get-started/building-
simple-cmdset-with-dialog-api

参考サイト 2
◼ 環境
- Docker イメージ
• waldekm/spfx
https://hub.docker.com/r/waldekm/spfx/
- デバッグ
• Visual Studio Code でデバッグする
https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/debug-in-vscode
◼ 展開
- テナント展開
• テナントスコープのソリューションの展開
https://docs.microsoft.com/ja-jp/sharepoint/dev/spfx/tenant-scoped-deployment
◼ その他
- PnP PowerShell
https://docs.microsoft.com/en-us/powershell/module/sharepoint-pnp/?view=sharepoint-ps
- SharePoint Framework API リファレンス
https://docs.microsoft.com/ja-jp/javascript/api/overview/sharepoint?view=sp-typescript-
latest

SharePoint Framework Extension 基礎講座

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to SharePoint Framework Extension 基礎講座

Similar to SharePoint Framework Extension 基礎講座 (20)

More from Hiroaki Oikawa

More from Hiroaki Oikawa (11)

SharePoint Framework Extension 基礎講座