SharePoint Framework Extension 基礎講座

SharePoint Framework Extension を初めて開発する方向けの基礎講座です。
Office 365 Developer Bootcamp 2018 Japan の資料です。

Transcript

1. SharePoint Framework Extension 基礎講座 及川 紘旭 Microsoft MVP for Office Development 2018年10月27日
2. 目次 ◼ はじめに ◼ ハンズオンの説明 ◼ SharePoint Framework Extension とは ◼ ハンズオン - ハンズオン１ 開発環境の構築 - ハンズオン２ モダンページのカスタマイズ - ハンズオン３ 列表示のカスタマイズ - ハンズオン４ ツールバーにボタンを追加 ◼ まとめ ◼ 参考サイト 2 © SharePoint Developer sharepoint.orivers.jp
3. はじめに セッションの本題に入る前に。 3
4. 自己紹介 © SharePoint Developer 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
5. このセッションのゴール SharePoint Framework Extension で何ができるようになるのかを理解する。 © SharePoint Developer sharepoint.orivers.jp 5
6. ハンズオンの説明 今回実施するハンズオンをご紹介します。 6
7. ハンズオン一覧 © SharePoint Developer sharepoint.orivers.jp 7 # タイトル 説明 1 開発環境の構築 Docker を使って簡単 SPFx 開発環境構築。 2 モダンページのカスタマイズ Application Customizer による開発。 3 リストビューの列表示のカスタマイズ Field Customizer による開発。 4 リストビューのツールバーにボタンを追加 ListView Command Set による開発。
8. SharePoint Framework Extension とは SharePoint Framework Extension について概要を説明します。 8
9. SharePoint Framework とは ◼ モダン UI のカスタマイズに対応した新しい SharePoint 開発方式。 (略して SPFx) - 2016/8/17 にプレビュー版リリース、2018/9/5 に Version 1.6 リリース。 © SharePoint Developer sharepoint.orivers.jp 9 オープンソース • オープンソースの各種ツールやライブラリを 使って開発。 • SPFx そのものもオープンソース。 TypeScript で開発 • 開発言語は TypeScript を使用。 • TypeScript は JavaScript ベースの言 語のため、jQuery や Angular など JavaScript Framework も使用可能。 パッケージ化して横展開 • SharePoint のフィーチャー展開やアプリ 展開の方式で横展開可能。 O365 開発に欠かせない便利 API • SharePoint REST、Microsoft Graph、Azure AD のライブラリがビルト イン。
10. SPFx で開発できるもの © SharePoint Developer sharepoint.orivers.jp 10 Extension - Application Customizer ページへのスクリプト追加や、あらかじめ定義されたプレースホル ダーに任意のHTMLを埋め込むための拡張機能。 Extension - Field Customizer リストビューの列の表示の仕方を変更するための拡張機能。 Extension - Command Set ツールバーに新しいボタンとアクションを追加するための拡張機能。 Web パーツ モダンページおよびクラシックページで使用可能な Web パーツ。
11. 開発環境として必要なもの ◼ 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 Developer sharepoint.orivers.jp 11
12. 開発環境として必要なもの２ ◼ SharePoint モダンサイト - Extension は、モダンサイトを拡張するための機能なので、モダンサイトが必要になります。 - SharePoint モダンサイトが手元にない方は、Office 365 開発者プログラムに参加して、 ご自身の SharePoint 環境に、モダンサイトを作成してください。 © SharePoint Developer sharepoint.orivers.jp 12 https://developer.microsoft.com/ja-jp/office/dev-program
13. ハンズオン１ 開発環境の構築 Docker を使って簡単 SPFx 開発環境 構築 13
14. Docker で開発環境構築 – 1 © SharePoint Developer sharepoint.orivers.jp 14 普段使いの 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
15. Docker で開発環境構築 – 2-1 © SharePoint Developer sharepoint.orivers.jp 15 ◼ はじめて開発環境を作る際に行う手順 ① 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」で検索して、インストール
16. Docker で開発環境構築 – 2-2 © SharePoint Developer sharepoint.orivers.jp 16 ◼ はじめて開発環境を作る際に行う手順 ⑥ SharePointPnPPowerShell のインストール - PowerShell を管理者モードで起動し、以下のコマンドを実行。 Install-module SharePointPnPPowerShellOnline
17. Docker で開発環境構築 – 3-1 © SharePoint Developer sharepoint.orivers.jp 17 ◼ プロジェクトごとに行う手順 ① プロジェクトフォルダの作成 - 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 を使用します。
18. Docker で開発環境構築 – 3-2 © SharePoint Developer sharepoint.orivers.jp 18 ◼ プロジェクトごとに行う手順 ③ 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) {
19. Docker で開発環境構築 – 3-3 © SharePoint Developer sharepoint.orivers.jp 19 ◼ プロジェクトごとに行う手順 ⑦ 開発用証明書の作成、インストール - 開発用証明書を作成 gulp trust-dev-cert - 開発サーバーを起動 gulp serve - 開発サーバーの起動後、ローカル PC の IE で以下の URL に接続し、証明書をインポートする (インポート先:信頼さ れたルート証明機関) https://localhost:4321
20. ハンズオン２ モダンページの カスタマイズ Application Customizer にて、モダン ページをカスタマイズします 20
21. Application Customizer でできること ◼ Application Customizer は、モダンページにスクリプトを埋 め込み、ページをカスタマイズする拡張機能です。 © SharePoint Developer sharepoint.orivers.jp 21
22. モダンページのカスタマイズ – 1 © SharePoint Developer sharepoint.orivers.jp 22 ◼ プロジェクトの作成 - 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)
23. モダンページのカスタマイズ – ファイル構成 © SharePoint Developer sharepoint.orivers.jp 23 ◼ 主要なフォルダ、ファイル構成 パス/ファイル名 用途 /src/extensions/sampleAppCustom 各種ソースファイル、CSS などを格納するフォルダ。 - SampleAppCustomApplicationCustomizer.ts Application Customizer の本体。 ここにメインのコードを追記します。 /.vscode Visual Studio Code の構成ファイルを格納す るフォルダ。 - launch.json Chrome Debugger の構成ファイル。 /config 各種ツールの構成ファイルを格納するフォルダ。 - serve.json テストサイト起動用の構成ファイル。 /sharepoint/assets/elements.xml SharePoint サイトに アプリをフィーチャーとして 展開する際に使用する定義ファイル。
24. モダンページのカスタマイズ – 2-1 ◼ 実行、デバッグ方法① - サーバーの構成 • /config/serve.json を開き、”pageUrl” を開発で使用するモダンサイトのページ URL に変更。 © SharePoint Developer sharepoint.orivers.jp 24
25. モダンページのカスタマイズ – 2-2 ◼ 実行、デバッグ方法② - アプリケーションの実行 • PowerShell にて以下のコマンドを実行するとアプリケーションが実行されます。 gulp serve - アプリケーションの表示 • gulp serve の実行結果として出力される URL (黄色下線部分) をブラウザで開きます。 © SharePoint Developer sharepoint.orivers.jp 25
26. モダンページのカスタマイズ – 2-3 ◼ 実行、デバッグ方法③ - デバッグの許可 • 以下のダイアログが表示されるので、[デバッグ スクリプトを読み込む]をクリックします。 - URL をコピー • アプリケーションが表示されるので、ブラウザのアドレスバーから URL をコピーしてメモ帳などに貼り付けます。 - アプリケーションの停止 • PowerShell にて Ctrl + C を入力しアプリケーションを停止します。 © SharePoint Developer sharepoint.orivers.jp 26
27. モダンページのカスタマイズ – 2-4 ◼ 実行、デバッグ方法④ - デバッグの構成 • /.vscode/launch.json を開き、27 行目の ”enter-your-SharePoint-site” をデバッグで使用するサイ トの URL に変更します。 • 23 行目から 39 行目までをコピーし、40 行目に貼り付けます。 • “name” を “Hosted Site” に変更、”url” に前の手順でコピーした URL を貼り付けます。 • launch.json を保存します。 © SharePoint Developer sharepoint.orivers.jp 27
28. モダンページのカスタマイズ – 2-5 ◼ 実行、デバッグ方法⑤ - デバッグの方法 • gulp serve を実行し、アプリケーションを起動します。 • VSCode の左メニューから、デバッグモードに切り替えます。 • デバッグの構成から [Hosted Site]を選択し、左の [▶] ボタンをクリックします。 • Chrome にて、F12 キーを押して開発者ツールを起動します。 • [Source] タブをクリックし、以下のファイルを開きます。 top/localhost:4321/dist/sample-app-custom-application-customizer.js • 任意の行にブレイクポイントを設定します。 • F5 キーを押してブラウザをリフレッシュすると、ブレイクポイントで実行が停止し、VSCode でデバッグができます。 © SharePoint Developer sharepoint.orivers.jp 28
29. モダンページのカスタマイズ – 3-1-1 ◼ ヘッダ、フッタの追加① - /src/extensions/sampleAppCustom に、以下のファイルを追加。※ファイルの内容は 3-1-a 参照 SampleAppCustomApplicationCustomizer.module.scss - /src/extensions/sampleAppCustom/SampleAppCustomApplicationCustomizer.ts を編集。 © SharePoint Developer sharepoint.orivers.jp 29 # 編集内容 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 参照
30. モダンページのカスタマイズ – 3-1-a ◼ SampleAppCustomApplicationCustomizer.module.scss © SharePoint Developer sharepoint.orivers.jp 30 @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; color: $ms-color-themeLighterAlt; } }
31. モダンページのカスタマイズ – 3-1-b ◼ _renderPlaceHolders メソッド © SharePoint Developer sharepoint.orivers.jp 31 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> `; } }
32. モダンページのカスタマイズ – 3-1-2 ◼ ヘッダ、フッタの追加② - /config/serve.json を開き、properties に以下を追加。 “top”: “Top Placehoder”, “bottom”: “Bottom Placeholder” - /.vscode/launch.json を開き、Hosted Site の url を gulp serveで出力される URL に更新。 - VSCode でデバッグ実行。 © SharePoint Developer sharepoint.orivers.jp 32
33. モダンページのカスタマイズ – 3-2 ◼ ナビゲーションの追加 - /src/extensions/sampleAppCustom/SampleAppCustomApplicationCustomizer.module.scss を編 集。 - /src/extensions/sampleAppCustom/SampleAppCustomApplicationCustomizer.ts を編集。 - VSCode でデバッグ実行。 © SharePoint Developer sharepoint.orivers.jp 33 # 編集内容 1 _renderPlaceHolders メソッド内に 3-2-b 赤字箇所のコードを追加 # 編集内容 1 3-2-a 赤字箇所のコードを追加
34. モダンページのカスタマイズ – 3-2-a ◼ SampleAppCustomApplicationCustomizer.module.scss 赤字箇所 © SharePoint Developer sharepoint.orivers.jp 34 @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; color: $ms-color-themeLighterAlt; } .nav { height: 20px; padding: 5px 10px; background-color: $ms-color-themeLight; color: $ms-color-black; } }
35. モダンページのカスタマイズ – 3-2-b ◼ _renderPlaceHolders メソッド 内 赤字箇所 © SharePoint Developer sharepoint.orivers.jp 35 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> `; } }
36. モダンページのカスタマイズ – 4-1 ◼ 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 Developer sharepoint.orivers.jp 36
37. モダンページのカスタマイズ – 4-2 ◼ サイトへの展開① - /sharepoint/assets/elements.xml を編集。 - PowerShell にて以下のコマンドを実行。 gulp bundle --ship gulp package-solution --ship - パッケージファイルをテナントのアプリカタログにアップロード。 アプリカタログが未作成の場合は、SharePoint 管理センターにアクセスし、アプリカタログを作成する。 - アップロード完了後、アプリを信頼しますか？のダイアログで [展開] ボタンをクリック。 © SharePoint Developer sharepoint.orivers.jp 37 # 編集内容 1 ClientSideComponentProperties 属性の値を以下の値に変更。 "{&quot;testMessage&quot;:&quot;Test message&quot;,&quot;top&quot;:&quot;Top Placeholder&quot;,&quot;bottom&quot;:&quot;Bottom Placeholder&quot;}"
38. モダンページのカスタマイズ – 4-3 ◼ サイトへの展開② - ブラウザでサイトを開き、「sample-app-custom-client-side-solution」アプリを追加。 - しばらくすると、以下の通りアプリがインストールされます。 インストール中… インストール完了!! - サイトを開いて動作確認。 © SharePoint Developer sharepoint.orivers.jp 38
39. モダンページのカスタマイズ – 4-4 ◼ サイト展開した Application Customizer の削除 - サイトコンテンツを開き、「sample-app-custom-client-side-solution」アプリを削除。 - サイトのごみ箱から削除。第２段階のごみ箱からも忘れずに削除。 - アプリカタログから削除。 - アプリカタログのサイトのごみ箱から削除。第２段階のごみ箱からも忘れずに削除。 © SharePoint Developer sharepoint.orivers.jp 39
40. モダンページのカスタマイズ – 5-1 ◼ テナントへの展開① - デフォルトではサブサイトごとにアプリの追加が必要ですが、テナントレベルで展開することで、全サイトコレクションに自動的 に展開することができます。 - /config/package-solution.json を開き、”solution” 配下に赤字箇所を追加し、”features” 配下を削除。 - 再度パッケージ化。 - サイトへの展開①を実施。 アプリカタログにアップロードすると右図のダイアログが表示されるので、 [このソリューションを組織内のすべてのサイトで使用できるようにする] にチェックを付ける。 © SharePoint Developer sharepoint.orivers.jp 40 { "$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" } }
41. モダンページのカスタマイズ – 5-2 ◼ テナントへの展開② - テナントに展開されたアプリは有効化を行う必要があります。 - 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 です。 - 例 $credentials = Get-Credential 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"}’ - サイトを開いて動作確認。 © SharePoint Developer sharepoint.orivers.jp 41
42. モダンページのカスタマイズ – 5-3 ◼ テナント展開した Application Customizer を削除 - PowerShell を起動し、以下のコマンドを実行。 $credentials = Get-Credential Connect-PnPOnline “[展開先のサイト URL]” -Credentials $credentials Remove-PnPCustomAction -Identity “[elements.xml の Title]” ※elements.xml は、/sharepoint/assets/elements.xml です。 - 例 $credentials = Get-Credential Connect-PnPOnline “https://orivers.sharepoint.com/sites/modern-ui” -Credentials $credentials Remove-PnPCustomAction -Identity "SampleAppCustom" - アプリカタログから削除。 - アプリカタログのサイトのごみ箱から削除。第２段階のごみ箱からも忘れずに削除。 © SharePoint Developer sharepoint.orivers.jp 42
43. ハンズオン３ 列表示の カスタマイズ Field Customizer にて、モダンリストの ビューの列表示をカスタマイズします 43
44. Field Customizer でできること ◼ Field Customizer は、モダンリストのビューに表示する列の 表示方法をカスタマイズする拡張機能です。 © SharePoint Developer sharepoint.orivers.jp 44
45. 列表示のカスタマイズ – 1 © SharePoint Developer sharepoint.orivers.jp 45 ◼ プロジェクトの作成 - 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) SampleFieldCustom ? 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 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
46. 列表示のカスタマイズ – ファイル構成 © SharePoint Developer sharepoint.orivers.jp 46 ◼ 主要なフォルダ、ファイル構成 パス/ファイル名 用途 /src/extensions/sampleFieldCustom 各種ソースファイル、CSS などを格納するフォルダ。 - SampleFieldCustomFieldCustomizer.ts Field Customizer の本体。 ここにメインのコードを追記します。 - SampleFieldCustomFieldCustomizer .module.scss Field Customizer のスタイルシート。 /.vscode Visual Studio Code の構成ファイルを格納す るフォルダ。 - launch.json Chrome Debugger の構成ファイル。 /config 各種ツールの構成ファイルを格納するフォルダ。 - serve.json テストサイト起動用の構成ファイル。 /sharepoint/assets/elements.xml SharePoint サイトに アプリをフィーチャーとして 展開する際に使用する定義ファイル。
47. 列表示のカスタマイズ – 2 © SharePoint Developer sharepoint.orivers.jp 47 ◼ デバッグ用リスト及び列の追加 - ブラウザでテスト用サイトを開き、リストを作成し、リストにテストで使用する列を追加します。 - このサンプルでは、以下のリスト、列を作成します。 • リスト名： サンプル • 列内部名： SPFxSample • 列名： サンプル • 列の種類： 1行テキスト
48. 列表示のカスタマイズ – 3 © SharePoint Developer sharepoint.orivers.jp 48 ◼ デバッグの準備 - /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 を貼り付けます。
49. 列表示のカスタマイズ – 4 © SharePoint Developer sharepoint.orivers.jp 49 ◼ 列のスタイル変更① - /src/extensions/sampleFieldCustom/SampleFieldCustomFieldCustomizer.ts を編集。 - vscode でデバッグ実行 ◼ 行のスタイル変更② - /src/extensions/sampleFieldCustom/SampleFieldCustomFieldCustomizer.ts を編集。 - vscode でデバッグ実行 # 編集内容 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;
50. 列表示のカスタマイズ – 5-1 ◼ サイトへの展開① - /sharepoint/assets/elements.xml を編集。 - PowerShell にて以下のコマンドを実行。 gulp bundle --ship gulp package-solution --ship - パッケージファイルをテナントのアプリカタログにアップロード。 アプリカタログが未作成の場合は、SharePoint 管理センターにアクセスし、アプリカタログを作成する。 - アップロード完了後、アプリを信頼しますか？のダイアログで [展開] ボタンをクリック。 - サイト列を追加するサイトを開き、「sample-field-custom-client-side-solution」アプリを追加。 © SharePoint Developer sharepoint.orivers.jp 50 # 編集内容 1 Field タグ内を以下の通り変更。 Name 属性： “SPFxSample” DisplayName 属性： “サンプル” Type 属性： “Text” Min 属性： 削除 Group 属性： “Custom Columns” ClientSideComponentProperties 属性： “{&quot;sampleText&quot;:&quot;Value&quot;}”
51. 列表示のカスタマイズ – 5-2 ◼ サイトへの展開② - 新しいリストを作成。 - [リストの設定] > [サイト内の既存の列から追加] から、追加した ”サンプル” 列を追加。 - リストにアイテムを追加して動作確認。 © SharePoint Developer sharepoint.orivers.jp 51
52. 列表示のカスタマイズ – 5-3 ◼ サイト展開した Field Customizer の削除 - サイト列から、追加した列「サンプル」を削除。 - サイトコンテンツを開き、「sample-field-custom-client-side-solution」アプリを削除。 - サイトのごみ箱から削除。第２段階のごみ箱からも忘れずに削除。 - アプリカタログから削除。 - アプリカタログのサイトのごみ箱から削除。第２段階のごみ箱からも忘れずに削除。 © SharePoint Developer sharepoint.orivers.jp 52
53. 列表示のカスタマイズ – 6-1 ◼ テナントへの展開① - デフォルトではサブサイトごとにアプリの追加が必要ですが、テナントレベルで展開することで、全サイトコレクションに自動的 に展開することができます。 - /config/package-solution.json を開き、”solution” 配下に赤字箇所を追加し、”features” 配下を削除。 - 再度パッケージ化。 - アプリカタログにアップロード。 アプリカタログにアップロードするとダイアログが表示されるので、[このソリューションを組織内のすべてのサイトで使用できる ようにする]にチェックを付け、展開します。 © SharePoint Developer sharepoint.orivers.jp 53 { "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json", "solution": { "name": "sample-field-custom-client-side-solution”, “id”: “4ef177ab-f6f0-4b88-a5cf-c5ea54421444", "version": "1.0.0.0", "includeClientSideAssets": true, "skipFeatureDeployment": true }, "paths": { "zippedPackage": "solution/sample-field-custom.sppkg" } }
54. 列表示のカスタマイズ – 6-2 ◼ テナントへの展開② - テナントに展開されたアプリは有効化を行う必要があります。 - PowerShell を起動し、以下のコマンドを実行。 $credentials = Get-Credential Connect-PnPOnline “[展開先のサイト URL]” -Credentials $credentials 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]” ※elements.xml は、/sharepoint/assets/elements.xml です。 - 例 $credentials = Get-Credential Connect-PnPOnline “https://orivers.sharepoint.com/sites/modern-ui” -Credentials $credentials Add-PnPField -DisplayName "サンプル" -InternalName "SPFxSample" -Type "Text" -Group "Custom Columns" -ClientSideComponentId "e7f04c86-1fc0-4e04-bd52-0e035ea26a48" - ClientSideComponentProperties "{&quot;sampleText&quot;:&quot;Value&quot;}" © SharePoint Developer sharepoint.orivers.jp 54
55. 列表示のカスタマイズ – 6-3 ◼ テナント展開した Field Customizer を削除 - PowerShell を起動し、以下のコマンドを実行。 $credentials = Get-Credential Connect-PnPOnline “[展開先のサイト URL]” -Credentials $credentials Remove-PnPField -Identity “[elements.xml の Name]” ※elements.xml は、/sharepoint/assets/elements.xml です。 - 例 $credentials = Get-Credential Connect-PnPOnline “https://orivers.sharepoint.com/sites/modern-ui” -Credentials $credentials Remove-PnPField -Identity “SPFxSample" - アプリカタログから削除。 - アプリカタログのサイトのごみ箱から削除。第２段階のごみ箱からも忘れずに削除。 © SharePoint Developer sharepoint.orivers.jp 55
56. ハンズオン４ ツールバーに ボタンを追加 Command Set にて、モダンリストの ビューのツールバーにボタンを追加します 56
57. Command Set でできること ◼ Command Set は、モダンリストのビューのツールバーにボタン を追加する拡張機能です。 © SharePoint Developer sharepoint.orivers.jp 57
58. ツールバーにボタンを追加 – 1 © SharePoint Developer sharepoint.orivers.jp 58 ◼ プロジェクトの作成 - 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) SampleCommandSet ? 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 Command Set to solution sample-command-set. ? What is your Command Set name? (HelloWorld) SampleCommandSet ? What is your Command Set description? (SampleCommandSet description)
59. ツールバーにボタンを追加 – ファイル構成 © SharePoint Developer sharepoint.orivers.jp 59 ◼ 主要なフォルダ、ファイル構成 パス/ファイル名 用途 /src/extensions/sampleCommandSet 各種ソースファイル、CSS などを格納するフォルダ。 - SampleCommandSetCommandSet.ts Command Set の本体。 ここにメインのコードを追記します。 - SampleCommandSetCommandSet .manifest.json ツールバーに登録するボタンの定義ファイル。 /.vscode Visual Studio Code の構成ファイルを格納す るフォルダ。 - launch.json Chrome Debugger の構成ファイル。 /config 各種ツールの構成ファイルを格納するフォルダ。 - serve.json テストサイト起動用の構成ファイル。 /sharepoint/assets/elements.xml SharePoint サイトに アプリをフィーチャーとして 展開する際に使用する定義ファイル。
60. ツールバーにボタンを追加 – 2 © SharePoint Developer sharepoint.orivers.jp 60 ◼ デバッグ用リストの追加 - ブラウザでテスト用サイトを開き、カスタムリストを作成します。
61. ツールバーにボタンを追加 – 3 © SharePoint Developer sharepoint.orivers.jp 61 ◼ デバッグの準備 - /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 を貼り付けます。
62. ツールバーにボタンを追加 – 4-1 © SharePoint Developer sharepoint.orivers.jp 62 ◼ ボタン追加① - /src/extensions/sampleCommandSet/SampleCommandSetCommandSet.manifest.json を編集。 - /src/extensions/sampleCommandSet/SampleCommandSetCommandSet.ts を編集。 - vscode でデバッグ実行 # 編集内容 1 24 行目から 28 行目をコピーして、29 行目に貼り付け、「COMMAND_3」とする。 4-1-a 赤字箇所参照 # 編集内容 1 onListViewUpdated メソッドに、追加したボタンの表示条件を追加。 4-1-b 赤字箇所参照 2 onExecute メソッドに、追加したボタンの処理を追加。 4-1-c 赤字箇所参照
63. ツールバーにボタンを追加 – 4-1-a © SharePoint Developer sharepoint.orivers.jp 63 ◼ 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" } }
64. ツールバーにボタンを追加 – 4-1-b © SharePoint Developer sharepoint.orivers.jp 64 ◼ 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; } }
65. ツールバーにボタンを追加 – 4-1-c © SharePoint Developer sharepoint.orivers.jp 65 ◼ 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'); } }
66. ツールバーにボタンを追加 – 5-1 ◼ サイトへ展開 - PowerShell にて以下のコマンドを実行。 gulp bundle --ship gulp package-solution --ship - パッケージファイルをテナントのアプリカタログにアップロード。 アプリカタログが未作成の場合は、SharePoint 管理センターにアクセスし、アプリカタログを作成する。 - アップロード完了後、アプリを信頼しますか？のダイアログで [展開] ボタンをクリック。 - ボタンを追加するサイトを開き、「sample-command-set-client-side-solution」アプリを追加。 - テスト対象のリストのビューを開き、動作確認。 © SharePoint Developer sharepoint.orivers.jp 66
67. ツールバーにボタンを追加 – 5-2 ◼ サイト展開した Command Set の削除 - サイトコンテンツを開き、「sample-command-set-client-side-solution」アプリを削除。 - サイトのごみ箱から削除。第２段階のごみ箱からも忘れずに削除。 - アプリカタログから削除。 - アプリカタログのサイトのごみ箱から削除。第２段階のごみ箱からも忘れずに削除。 © SharePoint Developer sharepoint.orivers.jp 67
68. ツールバーにボタンを追加 – 6-1 ◼ テナントへの展開① - デフォルトではサブサイトごとにアプリの追加が必要ですが、テナントレベルで展開することで、全サイトコレクションに自動的 に展開することができます。 - /config/package-solution.json を開き、”solution” 配下に赤字箇所を追加し、”features” 配下を削除。 - 再度パッケージ化。 - アプリカタログにアップロード。 アプリカタログにアップロードするとダイアログが表示されるので、[このソリューションを組織内のすべてのサイトで使用できる ようにする]にチェックを付け、展開します。 © SharePoint Developer sharepoint.orivers.jp 68 { "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json", "solution": { "name": "sample-command-set-client-side-solution”, “id”: “18fafd5c-37e3-4a7a-9c28-82b4c43787d7", "version": "1.0.0.0", "includeClientSideAssets": true, "skipFeatureDeployment": true }, "paths": { "zippedPackage": "solution/sample-field-custom.sppkg" } }
69. ツールバーにボタンを追加 – 6-2 ◼ テナントへの展開② - テナントに展開されたアプリは有効化を行う必要があります。 - PowerShell を起動し、以下のコマンドを実行。 $credentials = Get-Credential Connect-PnPOnline “[展開先のサイト URL]” -Credentials $credentials 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]’ ※elements.xml は、/sharepoint/assets/elements.xml です。 - 例 $credentials = Get-Credential Connect-PnPOnline “https://orivers.sharepoint.com/sites/modern-ui” -Credentials $credentials 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."}' © SharePoint Developer sharepoint.orivers.jp 69
70. ツールバーにボタンを追加 – 6-3 ◼ テナント展開した Command Set を削除 - PowerShell を起動し、以下のコマンドを実行。 $credentials = Get-Credential Connect-PnPOnline “[展開先のサイト URL]” -Credentials $credentials Remove-PnPCustomAction -Identity “[elements.xml の Title]” ※elements.xml は、/sharepoint/assets/elements.xml です。 - 例 $credentials = Get-Credential Connect-PnPOnline “https://orivers.sharepoint.com/sites/modern-ui” -Credentials $credentials Remove-PnPCustomAction -Identity "SampleCommandSet" - アプリカタログから削除。 - アプリカタログのサイトのごみ箱から削除。第２段階のごみ箱からも忘れずに削除。 © SharePoint Developer sharepoint.orivers.jp 70
71. まとめ 本日のセッションのまとめ。 71
72. まとめ ◼ SPFx Extension の種類は 3 種類。 - Application Customizer - Field Customizer - Command Set ◼ Docker を使うことで SPFx の頻繁なバージョンアップに追従。 - 今回は、SPFx v1.5.1 ですが、最新は SPFx v1.6 ◼ 開発には TypeScript、オープンソースの各種ツール、 Chrome が必須。 ◼ 開発手法はファームソリューションや CSOM などクライアントサ イドと異なるが、これまでの SharePoint 開発の知識は必須。 © SharePoint Developer sharepoint.orivers.jp 72
73. 参考サイト 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 © SharePoint Developer sharepoint.orivers.jp 73
74. 参考サイト 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 Developer sharepoint.orivers.jp 74