アプリ開発の調査にかかる
時間を削減したい
内製化支援サービス
アプリを自分たちで
作成できるようになりたい
DX人材育成プログラム
プロに開発を依頼したい
アプリ開発導入支援サービス
機能拡張サービス
X-SP Feature
デザイン拡張サービス
X-SP Design
モダン化から運用管理までサポート
構築支援サービス
この記事の3行要約
SharePointの標準機能では、ページにHTML・CSS・JavaScriptを直接適用することができない
アーティサンのX-SP Featureを使えば、Script Loader・Design Loader・HTML Viewerの3機能でSharePoint上にHTML・CSS・JavaScriptを適用できる
本記事では、この3つの機能を使って「Hello World」をSharePoint上に表示させる方法を紹介します。
立岡 美沙季たちおか みさき
得意領域
特殊開発部に所属し、X-SPや他アプリケーションの開発に携わっています。ブログではXSPの各種機能を紹介しています！
もし記事を読んで「自社にとって最適なSharePointサイトを構築したい」「SharePointサイト構築をサポートしてほしい」と思った方は、アーティサン株式会社の各種サービスをご活用ください。
現場の課題やご要望に合わせて、SharePointの設計・導入・運用をサポートいたします。
MSクラウドに関するご相談・お問い合わせはこちら
お問い合わせフォームへアーティサンでは2026年4月よりX-SP Featureというサービスの提供を開始しました。
X-SP Featureは、SharePointの標準機能では対応できないアドオン機能を、SharePoint Framework（SPFx）というSharePointの拡張開発技術を用いて提供するSharePointアドオンサービスです。
X-SP Featureをご活用いただくことで、標準機能では限界を感じていた皆様の「本当に欲しかった機能」を簡単に導入できます。
本記事ではX-SP Featureの機能と、どんなことが実現できるかを例とともに紹介します。
第1回目となる今回はプログラミングの基本中の基本である「Hello World」をSharePoint上に表示させてみたいと思います！
SharePointにHTMLやCSS・JavaScriptを適用したい！
SharePointの標準機能ではHTMLやCSS・JavaScriptを適用できません。
しかし、アーティサンが開発しているX-SP Featureの機能を使えば可能になります。
今回と次回の2回に分けて、X-SP Featureの機能を使用し、HTML・CSS・JavaScriptでSharePoint上に「Hello World」を表示する方法を紹介します。
紹介する機能
今回紹介するX-SP Featureの機能は
Script Loader
Design Loader
HTML Viewer
の3つです。
本記事で実践する「Hello World」表示の実行可否は下記のとおりです。
機能名 | 実行可否 |
|---|---|
Script Loader | ○ |
Design Loader | ○ |
HTML Viewer | ○ |
Script Loaderの場合
Script Loaderとは作成したJavaScriptやCSSファイルを読み込み、適用する機能です。
サイト全体に適用するほか、任意のページのみに適用することも可能です。
特定のフォルダに命名規則に沿ったファイルを格納すると読み込まれます。
手順1：フォルダを作成する
SharePoint サイトの「サイトのリソース ファイル」ライブラリの中にScriptLoaderという名前のフォルダを作成します。
手順2：適用したいファイルを格納する
手順1で作成したフォルダ内に、適用したいJavaScriptやCSSのファイルを格納します。
今回はJavaScriptで2つのファイルを作成しました。
global.js
const h1 = document.createElement("h1");
h1.textContent = "Hello World";
h1.className = "title";
document.body.prepend(h1);SitePages__test.js
const h2 = document.createElement("h2");
h2.textContent = "Hello World testPage";
h2.className = "testPagetitle";
document.body.prepend(h2);globalから始まるファイル名のコードファイル(global.js と global.css)はサイト全体に適用されます。
特定のページのみに適用したい場合は、ページURLからファイル名を設定することによって可能となります。
例えば、適用したいページのURLが https://contoso.sharepoint.com/sites/site1/SitePages/test の場合は
ファイル名をSitePages__test.js や SitePages__test.cssに設定します（アンダースコアは2つ(__)必要）
また、コードファイルの名前を SitePages__test__.js や SitePages__test__.css に設定した場合、https://contoso.sharepoint.com/sites/site1/SitePages/test/ 配下の全てのページに適用されます。
この場合は、https://contoso.sharepoint.com/sites/site1/SitePages/test/page1.aspx や https://contoso.sharepoint.com/sites/site1/SitePages/test/subfolder/page2.aspxも適用範囲となります。
手順3：アップロードしたファイルの内容が適用されていることを確認する
アップロードしたファイルの内容がサイト全体や対象ページに適用されていることを確認します。
まずはglobal.jsのみ適用します
「Hello World」が表示されました！
SitePages__test.jsを適用します
testというページに「Hello World testPage」が表示されました！
Design Loaderの場合
Design LoaderはScript Loaderとほぼ同等の機能であるため、ここでは省略します。
手順の違いとしては、作成したJavaScriptやCSSファイルもパッケージ化するという点です。
機能面でも若干の違いがあるため、別の記事で解説する予定です。
HTML Viewerの場合
HTML ViewerはSharePoint上のドキュメント ライブラリに置いた HTML ファイルを、そのままページに埋め込み表示する機能です。
HTML 内の JavaScript も動作します。
手順1：HTMLファイルを作成する
SharePoint上で表示したいHTMLファイルを作成し、サイト内の任意のフォルダへ格納します。
下記のHTMLファイルを作成しました。
test.html
<h1>Hello World</h1>
手順2：HTML ViewerのWebパーツを追加する
HTML Viewerをインストールすると、Webパーツ一覧にHTML Viewerが追加されます。
手順3：プロパティ設定を行う
必要なプロパティの設定をします。
ファイルの選択ボタンから、手順1で保存したファイルを選択します。
手順4：ページを発行する
設定に問題なければ「再発行」ボタンを押して、ページを更新します。
「Hello World」が表示されました！
プロパティ設定で標準エリアの項目を非表示に設定することができます。
ヘッダー等が非表示となり、設定したHTMLファイルの内容のみが表示されています。
最後に
今回は、アーティサンが提供するX-SP Featureの機能を活用し、SharePoint上でHello Worldを表示させてみました。
今回紹介した機能を使えばより複雑なデザインもSharePoint上で表示することが可能となります！
詳しく知りたい方は、ぜひアーティサンまでお気軽にお問い合わせください！
今後も引き続き、X-SP Featureの各機能について紹介してまいります。
2025 Microsoft MVPである弊社の小刀稱が執筆した、X-SP Featureの機能紹介記事もぜひご覧ください。
X-SP Feature機能紹介記事一覧
-
SharePointリストで複数行テキストを全文表示する方法｜X-SP Feature（第1回）
-
SharePointの未読・既読を一目で管理できるアドオン紹介｜X-SP Feature（第2回）
-
SharePointのアクセスランキングでよく見られるコンテンツを可視化する方法｜X-SP Feature（第3回）
-
GA4・Clarity・GTMでSharePointのアクセス解析を行う方法｜X-SP Feature（第4回）
-
カスタムスクリプト不要！SharePointでHTMLファイルを表示する方法｜X-SP Feature（第5回）
-
SharePointのツリービューでフォルダ階層を直感的に表示する方法｜X-SP Feature（第6回）
-
SharePointのリストアイテム閲覧数をGA4で計測する方法｜X-SP Feature アクセス解析支援
もし記事を読んで「自社にとって最適なSharePointサイトを構築したい」「SharePointサイト構築をサポートしてほしい」と思った方は、アーティサン株式会社の各種サービスをご活用ください。
現場の課題やご要望に合わせて、SharePointの設計・導入・運用をサポートいたします。
MSクラウドに関するご相談・お問い合わせはこちら
お問い合わせフォームへ
