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

  • このエントリーをはてなブックマークに追加

旧来のクラシック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の一連の流れを動画にしました。


VSCodeでフォルダを開く

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


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

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



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

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


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

質問2

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


質問3

Application Customizerに合わせて、Enter。


質問4

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


プロジェクト生成

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


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

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



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

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

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

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



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


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

ファイルパス

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

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

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

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

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

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

CustomCssApplicationCustomizer.ts

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


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


serve.json

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


◆7行目のpageUrl

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

◆18行目のpageUrl

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



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


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

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




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



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



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

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

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

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

まとめ

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


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


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

執筆者:森島[ WEBデザイナー ]

8bit デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

プログラミング

SharePoint リストに書式の変更からJSONで記述してCSSを適用する方法

SharePointのモダンUIで、リストの書式設定をJSON形式で入力することにより、カスタムCSSを適用してみましょう。 今回は、このようなリンクリストを作成します。 WEBパーツで似たような形を作れますが、細かいCSSが調整できません。リストのWEBパーツとして複数のページで使用すると、一度の修正で全てのページに修正が適用されます。サイト内で共通で使いたいパーツをこのように使用すると便利です。 目次1 前提条件1.1 使用できるHTMLタグやCSSが限られている2 リス […]

プログラミング

SharePointで作成したサイトを別環境にコピーする方法(サイトテンプレートの使い方)

SharePointのモダンUIで作成したサイトは、サイトテンプレートを生成すると簡単に複製できます。 テスト環境で作成したサイトを本番環境に移行する場合などに使えるかもしれません。 目次1 前提条件1.1 権限の確認2 手順3 1.カスタムスクリプトを許可する4 2.サイトをテンプレートとして保存5 3.新規サイトを作成6 4.テンプレートを適用 前提条件 SharePoint Online モダンUI チームサイト サイトテンプレートがサポートされているのはチームサイトの […]

プログラミング

SharePoint Framework(SPFx)で作ったカスタムアプリをサイトに追加・公開する方法

SharePointのモダンUI向けに作成したSharePoint Framework(以降SPFx)の独自アプリを、SharePoint Onlineに展開するには、パッケージ化してサイトに追加する必要があります。 今回はサイトに適用するまでの方法と手順をまとめました。 目次1 前提条件1.1 権限の確認2 1.パッケージ化3 2.App Catalogからアプリをアップロード、動作を確認3.1 App Catalogにアクセスし、.sppkgファイルをアップロード3.2 […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。