2024年9月10日

森島

SharePointのモダンUIでカスタムCSS・カスタムJSを適用する方法

facebook0
twitter

旧来のクラシックUIを使用していた頃はWEBパーツにカスタムCSSを組み込むことができましたが、モダンUIではCSSやJSの使用が許可されていません。
SharePointのモダンUIで自由にカスタムCSS・JSを使いたい場合は、SharePoint Framework（以降SPFx）という技術を使用する必要があります。
SPFxとは、ざっくりいうとSharePointの独自アプリを作成し、適用するものです。

前提条件

SharePoint Online
モダンUI

※その他、説明にVisual Studio Code（以下VSCode）を使用します

作成したリストの書式設定をJSON形式で入力することにより、カスタムCSSを適用する方法もあります。ただし、CSSの適用範囲は限定的でそのリストの中のみです。

SPFxを使用したカスタムCSS・JS構築の手順

1.環境構築
　⇒SPFxでアプリを作成するために必要なNode.jsなどをPCにインストールします。
2.SPFxプロジェクトと証明書を作成
　⇒VSCodeのターミナルでコマンドを実行し、プロジェクトを作成します。
3.CSSとJSをアップロード
　⇒CSSとJSをSharePointにアップロードします。
4.ファイルを自分の環境用に書き換える
　⇒手順2で生成したプロジェクトから、CSSとJSを読み込むように書き換えます。
5.ローカル環境で作成したアプリの動作確認
　⇒仮想サーバーを起動して動作確認をします。コマンドひとつでできます。

6.パッケージ化
　⇒作成したアプリをパッケージ化します。
7.App Catalogからアプリをアップロード、動作を確認
　⇒オンラインでアクセスして、動作を確認します

大まかな流れはこんな感じです。今回は、手順1～5までを解説します。
Appを自分のPC以外からも確認できるようにするには、手順6～7も必要になりますが、そちらは以下の記事で取り扱っています。

自作のアプリケーションを自分のPC以外からも確認できるようにする方法

1.環境構築

SPFxでアプリを作成するには、まず必要なツールをインストールする必要があります。
環境構築については、別記事にしています。

SharePoint Framework(SPFx)開発環境を構築する

2.SPFxプロジェクトを作成

環境構築ができている方はここからです。
手順2の一連の流れを動画にしました。

動画プレーヤー

00:00

05:32

ボリューム調節には上下矢印キーを使ってください。

VSCodeでフォルダを開く

VSCodeを起動し、ファイルメニューから、[フォルダーを開く]を選択します。
プロジェクトを作成すると大量のファイルが自動で生成されます。プロジェクト用に新しいフォルダを新規で作成し、フォルダーを選択します。

ターミナルを開いてコマンドを入力

メニューから、[ターミナル]＞[新しいターミナル]を開いて、以下のコマンドを入力し、実行します。（右クリックでペースト、Enterで実行）
このコマンドは、新規プロジェクトを生成するコマンドです。

yo @microsoft/sharepoint

1	yo @microsoft/sharepoint

質問1：プロジェクトの名前を入力

実行すると、このような表示になります。

生成前にプロジェクトの名前や種別を質問形式で聞いてくるので、答えていきます。
まずはプロジェクトの名前を聞かれていますので、「customCSS」と入力し、Enterを押します。
※本来は任意の英数字ですが、ファイル名などに影響するためひとまずこの名前で入力をお勧めします。

質問2

キーボードの十字キーでExtensionに合わせて、Enter。

質問3

Application Customizerに合わせて、Enter。

質問4

再度「customCSS」と入力して、Enter。
※こちらも本来は任意です。

プロジェクト生成

プロジェクトファイルの生成が始まります。完了するまで数分かかります。
この表示になるまで待ちましょう。

開発者用自己署名証明書を発行

プロジェクトの作成が完了したら、以下のコマンドを入力し、Enterで実行します。
自己署名の証明書を解決するものです。

gulp trust-dev-cert

1	gulp trust-dev-cert

3.CSSとJSをアップロード

次に、アプリを適用したいあなたのSharePointサイトに、CSSとJSをアップロードします。
CSSとJSはサイト閲覧者から誰でもアクセスできる場所にアップロードする必要があります。
SharePointサイトには、サイトのリソースファイルをまとめておけるフォルダがあるので、ここを利用しましょう。

サイトのリソースファイルにアップする

画面右上の歯車アイコンから[サイトコンテンツ]＞[サイトのリソースファイル]と進み、CSSとJSをアップします。

アップロードボタンから、custom.cssとcustom.jsという名前のファイルをアップしました。

ファイルは後から更新できるので、中身は真っ白でも構いません。
更新する場合は、ファイルをクリックするとブラウザ内でエデイターが開くので書き込んで上書き保存すればOKです。

ファイルパス

それぞれ、ファイルのパスは以下のようになります。これらは手順4で使います。

/* CSS */
/sites/{yourSiteAddress}/SiteAssets/custom.css
/* JS */
/sites/{yourSiteAddress}/SiteAssets/custom.js

/* 例：8bitというサイトであれば以下のように */
/sites/8bit/SiteAssets/custom.css
/sites/8bit/SiteAssets/custom.js

/* CSS */

/sites/{yourSiteAddress}/SiteAssets/custom.css

/* JS */

/sites/{yourSiteAddress}/SiteAssets/custom.js

/* 例：8bitというサイトであれば以下のように */

/sites/8bit/SiteAssets/custom.css

/sites/8bit/SiteAssets/custom.js

{yourSiteAddress}の箇所には、あなたのサイトのアドレスを入れてください。

4.ファイルを自分の環境用に書き換える

手順2で作成したプロジェクトに戻ります。実際にファイルを開いて、CSSを読み込むようにソースコードを書き換えていきましょう。
今回編集するファイルは2つです。

/src/extensions/customCss/CustomCssApplicationCustomizer.ts
/config/serve.json

太字の箇所は、手順2で入力したアプリの名前になっています。

CustomCssApplicationCustomizer.ts

◆不要な記述を削除
以下のソースから、Dialogに関する記述を3箇所削除します。削除する行をハイライト表示にしています。
5行目、17-18行目、28-35行目です。

import { Log } from '@microsoft/sp-core-library';
import {
  BaseApplicationCustomizer
} from '@microsoft/sp-application-base';
import { Dialog } from '@microsoft/sp-dialog';

import * as strings from 'CustomCssApplicationCustomizerStrings';

const LOG_SOURCE: string = 'CustomCssApplicationCustomizer';

/**
 * If your command set uses the ClientSideComponentProperties JSON input,
 * it will be deserialized into the BaseExtension.properties object.
 * You can define an interface to describe it.
 */
export interface ICustomCssApplicationCustomizerProperties {
  // This is an example; replace with your own property
  testMessage: string;
}

/** A Custom Action which can be run during execution of a Client Side Application */
export default class CustomCssApplicationCustomizer
  extends BaseApplicationCustomizer<ICustomCssApplicationCustomizerProperties> {

  public onInit(): Promise<void> {
    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);

    let message: string = this.properties.testMessage;
    if (!message) {
      message = '(No properties were provided.)';
    }

    Dialog.alert(`Hello from ${strings.Title}:\n\n${message}`).catch(() => {
      /* handle error */
    });

    return Promise.resolve();
  }
}

import { Log } from '@microsoft/sp-core-library';

import {

BaseApplicationCustomizer

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

import { Dialog } from '@microsoft/sp-dialog';

import * as strings from 'CustomCssApplicationCustomizerStrings';

const LOG_SOURCE: string = 'CustomCssApplicationCustomizer';

/**

* If your command set uses the ClientSideComponentProperties JSON input,

* it will be deserialized into the BaseExtension.properties object.

* You can define an interface to describe it.

export interface ICustomCssApplicationCustomizerProperties {

// This is an example; replace with your own property

testMessage: string;

}

/** A Custom Action which can be run during execution of a Client Side Application */

export default class CustomCssApplicationCustomizer

extends BaseApplicationCustomizer<ICustomCssApplicationCustomizerProperties> {

public onInit(): Promise<void> {

Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);

let message: string = this.properties.testMessage;

if (!message) {

message = '(No properties were provided.)';

}

Dialog.alert(`Hello from ${strings.Title}:\n\n${message}`).catch(() => {

/* handle error */

});

return Promise.resolve();

}

◆ファイルをロードする記述を追加
ハイライトが入っている箇所は追加・編集されています。パスは、手順3のファイルパスに書き換えます。
1行目と26-32行目は追加、23行目はasyncを入れて非同期処理にしています。

import { SPComponentLoader } from '@microsoft/sp-loader'; //ファイルロードするためのimportを追加
import { Log } from '@microsoft/sp-core-library';
import {
  BaseApplicationCustomizer
} from '@microsoft/sp-application-base';

import * as strings from 'CustomCssApplicationCustomizerStrings';

const LOG_SOURCE: string = 'CustomCssApplicationCustomizer';

/**
 * If your command set uses the ClientSideComponentProperties JSON input,
 * it will be deserialized into the BaseExtension.properties object.
 * You can define an interface to describe it.
 */
export interface ICustomCssApplicationCustomizerProperties {
}

/** A Custom Action which can be run during execution of a Client Side Application */
export default class CustomCssApplicationCustomizer
  extends BaseApplicationCustomizer<ICustomCssApplicationCustomizerProperties> {

  public async onInit(): Promise<void> {
    Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);

		
		//CSS・JSを読み込み
		try {
			await SPComponentLoader.loadCss('/sites/8bit/SiteAssets/custom.css');
			await SPComponentLoader.loadScript('/sites/8bit/SiteAssets/custom.js');
		} catch (error) {
			console.error('CSS・JSの読み込みに失敗しました', error);
		}

    return Promise.resolve();
  }
}

import { SPComponentLoader } from '@microsoft/sp-loader'; //ファイルロードするためのimportを追加

import { Log } from '@microsoft/sp-core-library';

import {

BaseApplicationCustomizer

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

import * as strings from 'CustomCssApplicationCustomizerStrings';

const LOG_SOURCE: string = 'CustomCssApplicationCustomizer';

/**

* If your command set uses the ClientSideComponentProperties JSON input,

* it will be deserialized into the BaseExtension.properties object.

* You can define an interface to describe it.

export interface ICustomCssApplicationCustomizerProperties {

}

/** A Custom Action which can be run during execution of a Client Side Application */

export default class CustomCssApplicationCustomizer

extends BaseApplicationCustomizer<ICustomCssApplicationCustomizerProperties> {

public async onInit(): Promise<void> {

Log.info(LOG_SOURCE, `Initialized ${strings.Title}`);

//CSS・JSを読み込み

try {

await SPComponentLoader.loadCss('/sites/8bit/SiteAssets/custom.css');

await SPComponentLoader.loadScript('/sites/8bit/SiteAssets/custom.js');

} catch (error) {

console.error('CSS・JSの読み込みに失敗しました', error);

}

return Promise.resolve();

}

serve.json

serve.jsonは設定ファイルです。2ヶ所あるpageUrlを、自分のサイトのURLに書き換えます。

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",
  "port": 4321,
  "https": true,
  "serveConfigurations": {
    "default": {
      "pageUrl": "https://{tenantDomain}/SitePages/myPage.aspx",
      "customActions": {
        "b22a6456-6b59-47e6-924b-984839269b86": {
          "location": "ClientSideExtension.ApplicationCustomizer",
          "properties": {
            "testMessage": "Test message"
          }
        }
      }
    },
    "customCss": {
      "pageUrl": "https://{tenantDomain}/SitePages/myPage.aspx",
      "customActions": {
        "b22a6456-6b59-47e6-924b-984839269b86": {
          "location": "ClientSideExtension.ApplicationCustomizer",
          "properties": {
            "testMessage": "Test message"
          }
        }
      }
    }
  }
}

{

"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/spfx-serve.schema.json",

"port": 4321,

"https": true,

"serveConfigurations": {

"default": {

"pageUrl": "https://{tenantDomain}/SitePages/myPage.aspx",

"customActions": {

"b22a6456-6b59-47e6-924b-984839269b86": {

"location": "ClientSideExtension.ApplicationCustomizer",

"properties": {

"testMessage": "Test message"

}

"customCss": {

"pageUrl": "https://{tenantDomain}/SitePages/myPage.aspx",

"customActions": {

"b22a6456-6b59-47e6-924b-984839269b86": {

"location": "ClientSideExtension.ApplicationCustomizer",

"properties": {

"testMessage": "Test message"

}

◆7行目のpageUrl

"pageUrl": "https://{tenantDomain}/sites/{yourSiteAddress}",

1	"pageUrl": "https://{tenantDomain}/sites/{yourSiteAddress}",

この形式でURLを変更します。
{tenantDomain}には、あなたのサイトのSharePointのドメインを、{yourSiteAddress}にはあなたのサイトのアドレスを入れてください。

◆18行目のpageUrl

"pageUrl": "https://{tenantDomain}/sites/{yourSiteAddress}/SitePages/{pageName}.aspx",

1	"pageUrl": "https://{tenantDomain}/sites/{yourSiteAddress}/SitePages/{pageName}.aspx",

{pageName}にはホームに設定しているページの名前を入れます。
サイトのホームをブラウザで開いて、そのままアドレスバーのURLを入れてもいいと思います。

ここまででアプリの編集は完了です。

5.ローカル環境で作成したアプリの動作確認

仮想サーバーを立て、ローカル環境で動作確認しましょう。
VSCodeのターミナルに、以下のコマンドを入力して実行します。

gulp serve

1	gulp serve

この時、ブラウザに新しいタブが開きますが、ターミナルに「reload」と2回表示されるまでを押さずにそのまま待ってください。

2回表示されたら「デバッグスクリプトを読み込む」ボタンを押すとCSS・JSが適用された状態で表示されます。

あとは、手順3でアップロードしたCSS・JSの中身を書き込んでいきます。
書き込んだ内容が反映されたら、以上でSharePointに、カスタムCSS・カスタムJSを適用できました。

コマンドが打てなくなって困る
ターミナルで「Ctrl+C」のショートカットキーを入力すると、仮想サーバーが終了し、次のコマンドを打てるようになります。
ソースを修正して再度gulp serveを実行する時や、動作確認が完了した場合に使用します。

エラーが出てしまったら…

エラーが出てしまったら、ソースコードの記述が間違っている可能性があります。
エラーメッセ―ジを読んで、ファイル名や行数、エラーの内容をよく確認してください。
修正が済んだら、Ctrl+Cで仮想サーバーを終了し、再度gulp serveを実行してみましょう。
もし分からなければ、ChatGPTにエラーメッセージをコピーペーストして聞いてみると、修正方法を教えてくれるのでおすすめです。

まとめ

独自で作成したアプリは、このままでは自分のPCでしか確認ができません。
これをサーバー上にアップするには、パッケージ化するなどの作業が追加で必要です。

▽▽手順6以降はこちらの記事に掲載しています▽▽

自作のアプリケーションを自分のPC以外からも確認できるようにする方法

Web制作、Webサービスに関する技術やノウハウを発信するコラムサイト