Loading
BLOG 開発者ブログ

2021年12月9日

【SharePoint】モダンUIでスクリプトエディタを利用する

クラシックUIスクリプトエディタ
SharePointOnlineがクラシックUIからモダンUIが主流になってくるにあたり、どうしてもクラシックUIで実施していた機能が再現したいというご要望をいただくことが多くなってきました。そこで、クラシック時代に活躍したWebパーツであるスクリプトエディタをモダンUIで利用してみようと思います。

目次

 

 

はじめに

こんにちは。
エンタープライズビジネスグループのtsuchidaです。

この記事は アイソルート Advent Calendar 2021 8日目の記事です。

この記事に関連するSharePointOnlineの記事は以下の記事になります。
【SharePointOnline】かゆいところに手が届く!SharePoint開発でできること

今回は以前紹介しているWebパーツのサンプルにある「スクリプトエディタ」を
実際にSharePointOnline環境に反映するまでの手順をご紹介いたします。

スクリプトエディタの概要

●クラシックUIではスクリプトエディタというWebパーツが標準機能として利用できました。
クラシックUIスクリプトエディタ
●このスクリプトエディタはJavaScriptを記入でき、SharePointOnlineの画面をスクリプトベースでカスタイマイズ可能でした。
●モダンUIになり、このスクリプトエディタ機能は廃止されてしまっています。
●代替機能としてはSharePoint Frameworkという開発手法で、TypeScriptでカスタマイズとなります。
●残念ながら従来のスクリプトエディタでのJavaScriptによるカスタマイズよりも、SharePoint Frameworkによる開発はかなり難易度が上がっています。

事前に必要な環境

●SharePointOnlineのサイト・・・今回スクリプトエディタを利用するサイト
●SharePointOnlineのアプリカタログサイト・・・スクリプトエディタアプリを登録するサイト
※こちらはSharePointの管理者でないとサイト作成ができないので、
自由に利用できない環境の場合は、管理者へ相談してくださいね。
●SharePointFrameworkの開発環境・・・SharePoint Fremeworkをビルドできる環境
※こちらを参考にSharePoint Framework 開発環境の設定してください。

 

スクリプトエディタのビルドから反映まで

1.スクリプトエディタのサンプルコード入手

GitHubのSP-Fremeworkのサンプルページより
サンプルコードをダウンロードします。
すべてのサンプルが含まれているので、12/7時点で圧縮状態でも1.37GBとかなりサイズが大きいです。
Webパーツダウンロード

2.スクリプトエディタのサンプルを取り出す

samplesフォルダから「react-script-editor」を取り出して作業フォルダに持っていきます。
作業フォルダは任意の場所を用意してください。今回は「C:\work\sample」を利用します。
スクリプトエディタのサンプル

3.コードの読み取り専用を解除する

任意のフォルダに配置した「react-script-editor」サンプルコードの読み取り専用を解除します。
※この後の作業でエラーとならないようにするため。

4.パッケージファイルの依存関係の反映コマンド実行

PowerShellにて「react-script-editor」フォルダを開き、
「react-script-editor」に必要な依存関係のファイルを取得する以下のコマンドを実行します。
※結構時間がかかります。警告は出ますが、エラーが出なければこの後の作業が続行可能です。

PS C:\work\sample\react-script-editor > npm i

5.ビルドコマンドの実行

「react-script-editor」をビルドする下記コマンドを実行します。

PS C:\work\sample\react-script-editor > gulp bundle --ship

 

6.ソリューションのパッケージ化コマンドの実行

「react-script-editor」をパッケージする下記コマンドを実行します。

PS C:\work\sample\react-script-editor > gulp package-solution --ship

 

7.出来上がったパッケージファイルを確認する

「react-script-editor」のフォルダに「sharepoint\solution」というフォルダが出来上がるので、
そのフォルダに入っている「pnp-script-editor.sppkg」を取得します。
スクリプトエディタモジュール

8.アプリカタログサイトへ登録する

アプリカタログサイトにて、SharePointアプリに「pnp-script-editor.sppkg」をアップロードします。
アプリカタログサイト

9.アプリカタログサイトへ展開する

アップロード後に展開画面が表示されるので、展開ボタンを押します。
アプリカタログサイト

10.サイトへの追加

スクリプトエディタを利用したいサイトにアプリを追加する。
SharePointサイト

作成した「Modern Script Editer」アプリを選択します。
SharePointサイト

追加しました。と表示されると追加成功です。
SharePointサイト

11.サイトへのスクリプト有効化コマンドを実行する

スクリプトエディタを利用したいサイトに対してスクリプトを有効化する必要があるため、
有効化するスクリプトを実行する。

Connect-SPOService -Url https://contoso-admin.sharepoint.com -Credential admin@contoso.com
Set-SPOSite  -DenyAddAndCustomizePages 0

※管理シェルが無い場合はを下記をダウンロードしてインストールしてください。
SharePoint Online Management Shell
https://www.microsoft.com/ja-jp/download/details.aspx?id=35588
※注意
SharePoint管理者権限が必要です。
SharePoint Online ManagementShellモジュールとSharePointClient Components SDKの間には、
両方が同じコンピューターにインストールされている場合にモジュールの読み込みに失敗するという既知の問題があります。
この問題が発生した場合は、SharePointクライアントコンポーネントSDKをアンインストールしてください。

12.サイトにWebパーツを追加する

サイトにて、webパーツが追加可能となりますので、追加します。
Webパーツ

追加すると下記のようにスクリプトエディタWebパーツが表示されます。

以下のようにスクリプトを追加してみます。
スクリプト追加

追加したスクリプトによって、ボタンが描画されます。
スクリプトエディタ

ページを発行すると、ボタンのみ表示されます。
スクリプトエディタ

おわりに

今回追加したスクリプトエディタですが、モダンUIにて廃止になっているスクリプトエディタをどうしても利用したいというご要件をいただいた際に選択肢の一つとして対応できる可能性がありますので、ご参考になれば幸いです。

 

tsuchidaのブログ