SharePoint OnlineでHTMLを埋め込む方法：外部コンテンツやカスタムデザインを表示する！
「SharePointのページに、Webサイトの動画を埋め込みたい」「社内ツールの利用状況を表示するダッシュボードのコードを貼りたい」「ちょっとしたHTMLでデザインをカスタマイズしたいんだけど…」
もしあなたがSharePoint OnlineのモダンUIでHTMLコードを埋め込みたいと考えているなら、その方法について疑問を感じるかもしれません。SharePoint Onlineはセキュリティを非常に重視しているため、以前のバージョン（クラシックUI）のように、どんなHTMLでも自由に埋め込めるわけではありません。これは、悪意のあるコードによる攻撃を防ぐための大切な仕組みです。
しかし、ご安心ください。特定の安全な方法を用いることで、外部のWebコンテンツや、限定されたHTML要素をSharePointページに表示させることが可能です。
「埋め込み」Webパーツを使う（最も一般的で推奨）
最も一般的な方法は、「埋め込み」Webパーツ（Embed Web Part）を使用することです。このWebパーツは、iframeタグを生成し、外部のWebコンテンツをSharePointページ内に表示することを可能にします。
特徴
- iframeベース: 指定したURLのWebサイトコンテンツを、SharePointページ内にiframe要素として埋め込みます。
- ホワイトリスト方式: セキュリティ上の理由から、埋め込み可能なWebサイトのドメインは事前に許可されたもの（YouTube、Vimeo、Google Maps、Microsoft Streamなど）に限定されている場合があります。管理者が許可リストを管理できます。
- 動画や地図の埋め込みに最適: YouTube動画、Googleマップ、Microsoft Stream動画などを埋め込むのに非常に便利です。
- JavaScriptの実行制限: 埋め込まれたiframe内のJavaScriptは、SharePointのページとは独立したサンドボックス環境で動作するため、SharePointページに直接影響を与えることは基本的にできません。
やり方
ページを編集モードにする:
HTMLコードを埋め込みたいSharePointサイトのページを開きます。
ページ上部の「編集」ボタンをクリックして、編集モードにします。
Webパーツを追加する
コンテンツを追加したい場所の「+」アイコンをクリックします。
Webパーツの一覧が表示されるので、「埋め込み」（または「Embed」）という名前のWebパーツを探して選択します。
埋め込みコード/URLを入力する
追加した「埋め込み」Webパーツをクリックし、表示される設定ペインに、埋め込みたいコンテンツのiframeコードまたはURLを貼り付けます。
例：YouTube動画を埋め込む場合
YouTube動画ページで「共有」→「埋め込み」をクリックし、表示される<iframe>タグのコードをコピーして貼り付けます。
<iframe width="560" height="315" src="https://www.youtube.com/embed/XXXXX" frameborder="0" allowfullscreen></iframe>
例：Googleマップを埋め込む場合
Googleマップで場所を検索し、「共有」→「地図を埋め込む」をクリックし、表示される<iframe>タグのコードをコピーして貼り付けます。
例：外部サイトの特定のページを埋め込む場合
外部サイトのURLを直接貼り付けます（例: https://www.example.com/）。ただし、これは外部サイトが埋め込みを許可している必要があり、かつSharePoint管理者がそのドメインを許可リストに追加している場合に限られます。
Webパーツのサイズを調整する（オプション）:
埋め込んだコンテンツの表示サイズを調整したい場合は、Webパーツの設定ペインで「幅」と「高さ」のピクセル値を調整します。
ページを保存/発行する
設定が完了したら、ページ右上の「発行」または「再発行」をクリックして変更を保存し、公開します。
注意点
- JavaScriptの制限: 埋め込んだiframe内で実行されるJavaScriptは、SharePointページに対してセキュリティ上の制約を受けます。SharePointのDOM（ページの構造）を直接操作したり、SharePointの認証情報を取得したりすることはできません。
- 許可リスト (Allowed List): 埋め込み可能なドメインは、SharePoint管理センターの「HTML フィールドのセキュリティ」設定で管理されます。デフォルトで許可されているドメイン以外（例: 自社でホストしているWebアプリケーション）のコンテンツを埋め込みたい場合は、管理者にそのドメインを許可リストに追加してもらう必要があります。
- 設定場所: SharePoint管理センター → 設定 → 「HTML フィールドのセキュリティ」
- 「X-Frame-Options」ヘッダー: 埋め込もうとしている外部サイトが、HTTPレスポンスヘッダーに
X-Frame-Options: SAMEORIGINやDENYを設定している場合、そのサイトはiframeでの埋め込みを許可していません。この場合は埋め込みできません。
「テキスト」Webパーツで限定的なHTMLを使う
「テキスト」Webパーツは、主にリッチテキスト（文字の装飾、太字、リストなど）を記述するためのものですが、非常に限定的なHTMLタグを直接記述できる場合があります。これは、主にコンテンツの表示を整形するために利用されます。
特徴
- 安全なHTMLタグのみ:
<b>,<i>,<u>,<a>,<span>,<div>,<img>,<p>,<h1>〜<h6>,<ul>,<ol>,<li>,<table>など、コンテンツの表示や整形に関わる基本的なHTMLタグのみが許可されます。 - JavaScriptは不可:
<script>タグやインラインJavaScript（例:<div onclick="alert('Hello')">）は、セキュリティ上の理由から完全に削除されるか、無効化されます。 - スタイルシートの制限: 外部CSSファイルをリンクしたり、複雑なCSSを直接記述したりすることはできません。インラインスタイル（
style="..."）も限定的にしか機能しません。
やり方
ページを編集モードにする
HTMLコードを埋め込みたいSharePointサイトのページを開きます。
ページ上部の「編集」ボタンをクリックして、編集モードにします。
Webパーツを追加する
コンテンツを追加したい場所の「+」アイコンをクリックします。
Webパーツの一覧から「テキスト」Webパーツを探して選択します。
HTMLコードを直接記述する:
テキストWebパーツの編集エリアで、直接HTMLタグを入力します。
例
HTML
<h1>新しいお知らせ</h1>
<p><b>重要な連絡です。</b><br>詳細はこちらをご覧ください。</p>
<a href="https://yourcompany.sharepoint.com/sites/news/Pages/detail.aspx">詳細を見る</a>
入力後、他の場所をクリックすると、HTMLがレンダリングされて表示されます。
もし許可されていないHTMLタグやJavaScriptが含まれている場合、それらは自動的に削除されるか、プレーンテキストとして表示されます。
ページを保存/発行する
設定が完了したら、ページ右上の「発行」または「再発行」をクリックして変更を保存し、公開します。
注意点
厳格なサニタイズ: SharePointは、セキュリティのためにユーザーが入力したHTMLコードを厳格にチェック（サニタイズ）します。許可されていないタグや属性は自動的に削除されるため、意図した通りに表示されないことがあります。
あくまでテキストの整形: この方法は、複雑な機能の実装や外部との高度な連携には向きません。あくまでテキストコンテンツの見た目を整えるための補助的な手段として利用しましょう。
SharePoint Framework (SPFx) を使ってカスタムWebパーツを開発する（高度な方法）
上記の方法では実現できない複雑な機能や、JavaScriptを使った高度なカスタマイズを安全に埋め込みたい場合は、SharePoint Framework (SPFx) を使ってカスタムWebパーツを開発する必要があります。これは、開発者向けの高度な方法です。
特徴
- 最新の開発モデル: Microsoftが推奨するSharePoint Onlineの最新の開発モデルです。
- JavaScript/TypeScript: JavaScriptまたはTypeScriptを使ってWebパーツを開発します。
- セキュリティとパフォーマンス: SharePointのページ上でJavaScriptを安全に実行できるサンドボックス環境を提供し、パフォーマンスにも配慮されています。
- Microsoft Graph APIとの連携: Microsoft Graph APIを通じて、Microsoft 365の様々なデータ（ユーザー情報、Teamsデータなど）に安全にアクセスできます。
- Microsoft Teamsとの統合: 作成したWebパーツをTeamsのタブアプリとして再利用することも可能です。
やり方（概要、開発者向け）
- 開発環境のセットアップ: Node.js, Gulp, Yeoman, Visual Studio Codeなどの開発ツールを準備します。
- SPFxプロジェクトの作成: Yeomanジェネレーターを使って新しいSPFx Webパーツプロジェクトを作成します。
- コードの実装: Webパーツのロジック、UI（React, Angularなどを使用可能）、必要なJavaScriptコードを記述します。
- テストとデバッグ: ローカルワークベンチやSharePoint開発環境でWebパーツをテストします。
- パッケージングとデプロイ: 開発したWebパーツをパッケージ化し、SharePointのアプリカタログにアップロードしてデプロイします。
- ページへの追加: SharePointのモダンページで、通常のWebパーツと同じように、開発したカスタムWebパーツを追加します。
注意点
- 専門的な開発スキル: HTML、CSS、JavaScript/TypeScript、ReactなどのWeb開発スキル、そしてSharePoint Frameworkに関する知識が必要です。
- 開発とメンテナンスのコスト: カスタム開発のため、初期開発コストと継続的なメンテナンスコストが発生します。
まとめ
SharePoint OnlineでHTMLを埋め込む方法はいくつかありますが、セキュリティ上の制約があることを常に意識することが重要です。
外部サイトのコンテンツ（動画、地図など）の埋め込み
「埋め込み」Webパーツを使用するのが最も一般的で推奨されます。埋め込みたいサイトのドメインが許可リストにあるか確認しましょう。
シンプルなテキスト整形や構造化された表示
「テキスト」Webパーツで基本的なHTMLタグを使用できますが、JavaScriptは機能しません。
高度な機能やJavaScriptを使ったカスタマイズ
SharePoint Framework (SPFx) を使ってカスタムWebパーツを開発するのが唯一の安全で推奨される方法です。これは専門の開発スキルが必要です。
あなたの目的に合わせて、適切な方法を選択してください。これにより、SharePointページをよりリッチで機能的なものにしつつ、セキュリティも確保できるでしょう
