2025年12月15日

森島

SharePoint CSSとJSを入力できるWEBパーツを作る（モダンUI向け・SPFx）

facebook
twitter

SharePointのモダンUIで、SharePoint Framework（以降SPFx）という技術を使用し、CSSとJSを入力できる独自WEBパーツを作ります。
旧来のクラシックUIではスクリプトエディターと呼ばれていたWEBパーツを再現します。

前提条件

SharePoint Online
モダンUI
SPFxでWEBパーツを作成し、カスタムのスクリプト入力欄を構築する
カスタムスクリプト（CSS・JS）の適用範囲は、WEBパーツを設置したそのページのみ
アプリの登録にはサイトコレクション管理者の権限が必要です

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

全ページに一括で適用したい場合は、以下の方法が適しています。

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

WEBパーツの作成手順

1.環境構築

⇒SPFxでアプリを作成するために必要なNode.jsなどをPCにインストールします。

2.SPFxプロジェクトと証明書を作成

⇒VSCodeのターミナルでコマンドを実行し、プロジェクトを作成します。

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

⇒手順2で生成したプロジェクトから、CSSとJSを読み込むように書き換えます。

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

⇒仮想サーバーを起動して動作確認をします。コマンドひとつでできます。

5.パッケージ化

⇒作成したアプリをパッケージ化します。

6.App Catalogからアプリをアップロード、動作を確認

⇒オンラインでアクセスして、動作を確認します。

7.WEBパーツを配置して、カスタムスクリプトを記述

⇒ページにWEBパーツを配置して、カスタムのCSSとJSを記述しましょう。

大まかな流れはこんな感じです。手順が多いですね。。

1.環境構築

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

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

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

環境構築ができている方はここからです。

VSCodeでフォルダを開く

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

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

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

yo @microsoft/sharepoint

1	yo @microsoft/sharepoint

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

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

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

質問2

WebPartに合わせて、Enter。

質問3

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

質問4

Minimalに合わせて、Enter。

プロジェクト生成

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

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

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

gulp trust-dev-cert

1	gulp trust-dev-cert

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

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

/src/webparts/customParts/CustomPartsWebPart.ts
/src/webparts/customParts/CustomPartsWebPart.manifest.json
/config/serve.json
/tsconfig.json

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

CustomPartsWebPart.ts

tsファイルはかなり広範囲での書き換えが必要になります。（ハイライトが追加箇所を表します）
プロジェクト名を「customParts」にしているのあれば、このままコピー＆ペーストしても良いと思います。

export default class以降は特に大幅に追加となっています

[変更前]：

import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import styles from './CustomPartsWebPart.module.scss';

export interface ICustomPartsWebPartProps {
}

export default class CustomPartsWebPart extends BaseClientSideWebPart<ICustomPartsWebPartProps> {
  public render(): void {
    this.domElement.innerHTML = `<div class="${ styles.customParts }"></div>`;
  }

  protected onInit(): Promise<void> {
    return super.onInit();
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }
}

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

import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

import styles from './CustomPartsWebPart.module.scss';

export interface ICustomPartsWebPartProps {

}

export default class CustomPartsWebPart extends BaseClientSideWebPart<ICustomPartsWebPartProps> {

public render(): void {

this.domElement.innerHTML = `<div class="${ styles.customParts }"></div>`;

}

protected onInit(): Promise<void> {

return super.onInit();

}

protected get dataVersion(): Version {

return Version.parse('1.0');

}

↓
[変更後（例：テナントのドメインが8bitの場合）]：

import { Version } from '@microsoft/sp-core-library';
import { BaseClientSideWebPart, IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-webpart-base';

import styles from './CustomPartsWebPart.module.scss';

export interface ICustomPartsWebPartProps {
  customCss: string;
  customScript: string;
}

export default class CustomPartsWebPart extends BaseClientSideWebPart<ICustomPartsWebPartProps> {
  public render(): void {
    this.domElement.innerHTML = `<div class="${ styles.customParts }"></div>`;
    this.injectCss();
    this.injectScript();		
  }

  //値を編集で即時適用
  protected onAfterPropertyPaneChangesApplied(): void {
    this.injectCss();
    this.injectScript();
  }

  //WEBパーツが削除された時にremove
  protected onDispose(): void {
    document.getElementById(this.cssElementId)?.remove();
    document.getElementById(this.scriptElementId)?.remove();
  }

  //CSSの単一ID作成
  private get cssElementId(): string {
    return `custom-css-${this.instanceId}`;
  }

  //JSの単一ID作成
  private get scriptElementId(): string {
    return `custom-script-${this.instanceId}`;
  }

  //CSS操作
  private injectCss(): void {
    document.getElementById(this.cssElementId)?.remove();

    if (!this.properties.customCss) {
      return;
    }

    const style = document.createElement('style');
    style.id = this.cssElementId;
    style.textContent = this.properties.customCss;
    document.head.appendChild(style);
  }

  //JS操作
  private injectScript(): void {
    document.getElementById(this.scriptElementId)?.remove();

    if (!this.properties.customScript) {
      return;
    }

    const script = document.createElement('script');
    script.id = this.scriptElementId;
    script.textContent = this.properties.customScript;
    document.body.appendChild(script);
  }

  //プロパティペイン（WEBパーツ設定画面）
  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: { description: "カスタム CSS / Script" },
          groups: [
            {
              groupName: "CSS",
              groupFields: [
                PropertyPaneTextField('customCss', {
                  label: "ページに適用する CSS",
                  multiline: true,
                  resizable: true
                })
              ]
            },
            {
              groupName: "Script",
              groupFields: [
                PropertyPaneTextField('customScript', {
                  label: "ページに適用する JavaScript",
                  multiline: true,
                  resizable: true
                })
              ]
            }


          ]
        }
      ]
    };
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }
}

100

101

102

103

104

105

106

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

import { BaseClientSideWebPart, IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-webpart-base';

import styles from './CustomPartsWebPart.module.scss';

export interface ICustomPartsWebPartProps {

customCss: string;

customScript: string;

}

export default class CustomPartsWebPart extends BaseClientSideWebPart<ICustomPartsWebPartProps> {

public render(): void {

this.domElement.innerHTML = `<div class="${ styles.customParts }"></div>`;

this.injectCss();

this.injectScript();

}

//値を編集で即時適用

protected onAfterPropertyPaneChangesApplied(): void {

this.injectCss();

this.injectScript();

}

//WEBパーツが削除された時にremove

protected onDispose(): void {

document.getElementById(this.cssElementId)?.remove();

document.getElementById(this.scriptElementId)?.remove();

}

//CSSの単一ID作成

private get cssElementId(): string {

return `custom-css-${this.instanceId}`;

}

//JSの単一ID作成

private get scriptElementId(): string {

return `custom-script-${this.instanceId}`;

}

//CSS操作

private injectCss(): void {

document.getElementById(this.cssElementId)?.remove();

if (!this.properties.customCss) {

return;

}

const style = document.createElement('style');

style.id = this.cssElementId;

style.textContent = this.properties.customCss;

document.head.appendChild(style);

}

//JS操作

private injectScript(): void {

document.getElementById(this.scriptElementId)?.remove();

if (!this.properties.customScript) {

return;

}

const script = document.createElement('script');

script.id = this.scriptElementId;

script.textContent = this.properties.customScript;

document.body.appendChild(script);

}

//プロパティペイン（WEBパーツ設定画面）

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {

return {

pages: [

{

header: { description: "カスタム CSS / Script" },

groups: [

{

groupName: "CSS",

groupFields: [

PropertyPaneTextField('customCss', {

label: "ページに適用する CSS",

multiline: true,

resizable: true

})

]

{

groupName: "Script",

groupFields: [

PropertyPaneTextField('customScript', {

label: "ページに適用する JavaScript",

multiline: true,

resizable: true

})

]

}

]

}

]

};

}

protected get dataVersion(): Version {

return Version.parse('1.0');

}

ここを書き換えることで、WEBパーツの機能が追加されます。

CustomPartsWebPart.manifest.json

properties の、titleとdescriptionを書き換えます。titleの値はWEBパーツ一覧で表示される時に使用されます。任意の分かりやすい名前にしましょう。

[変更前]：

"title": { "default": "customParts" },
"properties": {
      "description": "customParts"
    }

"title": { "default": "customParts" },

"properties": {

"description": "customParts"

}

↓
[変更後（例：テナントのドメインが8bitの場合）]：

"title": { "default": "カスタムスクリプト" },
"properties": {
      "customCss": "",
      "customScript": ""
    }

"title": { "default": "カスタムスクリプト" },

"properties": {

"customCss": "",

"customScript": ""

}

ここを書き換えることで、WEBパーツの説明文が定義されます。（説明文がnullだとWebパーツの一覧に表示されない）

serve.json

initialPage のURLをアプリを適用するスペースのものに書き換えます。{tenantDomain}の部分を、自社のドメインに書き換えます。

[変更前]：

"initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"

1	"initialPage": "https://{tenantDomain}/_layouts/workbench.aspx"

↓
[変更後（例：テナントのドメインが8bitの場合）]：

"initialPage": "https://8bit.sharepoint.com/_layouts/workbench.aspx"

1	"initialPage": "https://8bit.sharepoint.com/_layouts/workbench.aspx"

ここを書き換えることで、Web APIが正しく呼び出されます。

tsconfig.json

ソース末尾の方にある include に、scss.ts の1行を追加します。
※tsx末尾の「,」が追加になるので注意

[変更前]：

  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ]

"include": [

"src/**/*.ts",

"src/**/*.tsx"

]

↓
[変更後]：

  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.scss.ts"
  ]

"include": [

"src/**/*.ts",

"src/**/*.tsx",

"src/**/*.scss.ts"

]

ここを書き換えることで、変数の型定義をしています。

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

gulp serve

1	gulp serve

ブラウザに新しいタブが開きます。（Webパーツマニフェストというページです。）
実際に「+」ボタンを押して、「customParts」が表示されているか確認してください。

パーツを配置すると、CSSとJSを入力する欄が追加されています。
正しく動いていれば、alertやbodyの色変えなど、何でも対応可能です。
※1文字編集するごとに更新されるので、ローカルで編集してコピペするのがおすすめです。

CSSやJSに実際に処理を追加してみて、正しく動作すれば動画確認は完了です。

コマンドが打てなくなって困る

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

5.パッケージ化

では、作成したアプリをパッケージ化し、オンライン領域に適用してみましょう。
パッケージ化をおこなうには、Ctrl+Cで下層サーバーを終了させ、以下の2つのコマンドを打ちます。

まずは1つめのコマンドを実行します。

gulp bundle --ship

1	gulp bundle --ship

完了したら、次はこちらを実行します。

gulp package-solution --ship

1	gulp package-solution --ship

この2つのコマンドが実行されると、sharepoint/solution フォルダに.sppkgファイルが生成されます。これがアプリのデータになります。
※生成後にアプリの修正を行う場合は、再度2つのコマンドを実行すると、.sppkgファイルが再生成され、上書き保存されます。

権限の確認

SPFxを操作するには、管理者権限が必要です。
SharePoint管理センター及び、App Catalogにアクセスできるか事前に確認を行ってください。
App Catalogは、SharePoint管理センターの[その他の機能]＞[アプリ]のページです。
権限が足りない場合は管理者に権限を付与してもらってください。
Microsoft Entraから権限を付与できます。

6.App Catalogからアプリをアップロード、動作を確認

App Catalogにアクセスし、.sppkgファイルをアップロード

SharePoint管理センターから、App Catalogにアクセスします。
App Catalogは、SharePoint管理センターの[その他の機能]＞[アプリ]と進みます。（App Catalogへのアクセスには、テナントの権限が必要です）
「Upload」ボタンから、手順1で作成した.sppkgファイルをアップロードします。

アップ直後、アプリを有効化するかどうか、選択肢が表示されます。
「このアプリのみを有効化する」にチェックし、アプリを有効化します。

有効化され、一覧にアプリが追加されます。

7.WEBパーツを配置して、カスタムスクリプトを記述

アプリを適用したいサイトのアプリを追加ページを開きます。
右上の歯車から、「アプリを追加」から進みます。

先程追加したアプリが表示されているので、「追加」ボタンを押すとCSS・JSが適用されます。

サイトに戻って、実際に適用されたか確認します。適用されていればOKです。

◆もしアプリを修正した時は…

アプリに修正が入った場合は、再度手順1からをやり直します。
同名のアプリを.sppkgファイルをアップロードすれば、サーバーにあるアプリを上書き保存可能です。サイトにも新しい状態で適用されます。

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

SharePoint CSSとJSを入力できるWEBパーツを作る（モダンUI向け・SPFx）

前提条件

WEBパーツの作成手順

1.環境構築

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

VSCodeでフォルダを開く

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

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

質問2

質問3

質問4

プロジェクト生成

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

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

CustomPartsWebPart.ts

CustomPartsWebPart.manifest.json

serve.json

tsconfig.json

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

5.パッケージ化

6.App Catalogからアプリをアップロード、動作を確認

App Catalogにアクセスし、.sppkgファイルをアップロード

7.WEBパーツを配置して、カスタムスクリプトを記述

関連記事

SharePointとは？社内DXを始めよう！

SharePointではできないこと 4選

WordPress納品後にクライアントが安心して運用できる仕組みづくりをしよう