SharePointページに外部サイトのコンテンツやファイルを埋め込みたいと思ったことはありませんか。
YouTube動画、Googleマップ、Excelファイルなど、さまざまなコンテンツをSharePointページに直接表示できます。
この記事では、SharePointの埋め込みコードの取得方法から、具体的な埋め込み手順、トラブルシューティングまでを詳しく解説します。
SharePointの埋め込み機能とは
SharePointの埋め込み機能を使うと、外部サイトのコンテンツやSharePoint内のファイルをページ上に直接表示できます。
埋め込みのメリット
- ユーザーがページを離れずにコンテンツを閲覧できる
- 複数の情報源を1つのページにまとめられる
- 情報の可視性が向上する
- リンクよりも視覚的で分かりやすい
埋め込みWebパーツとは
SharePointモダンページには「埋め込み」Webパーツ(Embed Web Part)が用意されています。
このWebパーツを使用することで、外部サイトのコンテンツを安全にSharePointページに表示できます。
埋め込み可能なコンテンツの種類
SharePointページには、以下のようなコンテンツを埋め込むことができます。
外部サービス
- YouTube動画: 動画の共有機能から埋め込みコードを取得
- Googleマップ: 地図の共有機能から埋め込みコードを取得
- Vimeo動画: 動画プラットフォームからの埋め込み
- Microsoft Forms: フォームやアンケート
- Power BI: レポートやダッシュボード
- Twitter投稿: ツイートの埋め込み
- その他のWebサイト: 埋め込みを許可しているサイト
SharePoint/Microsoft 365内のコンテンツ
- Excelファイル: ブックやシートの表示
- PowerPointプレゼンテーション: スライドの埋め込み
- SharePointページ: 他のSharePointページ
- ドキュメント: Word、PDFなど
埋め込みの基本的な仕組み
SharePointの埋め込みは、HTMLの<iframe>タグを使用します。
iframeとは
iframe(インラインフレーム)は、Webページ内に別のWebページを表示するためのHTML要素です。
SharePointは、埋め込みコードを受け取ると、自動的にiframeタグでラップして安全に表示します。
基本的なiframe構造:
<iframe src="https://example.com" width="853" height="480"></iframe>セキュリティ上の制限
SharePointは、セキュリティのため以下の制限を設けています。
- iframeベースのみ:
<iframe>タグで始まり終わるコードのみサポート - scriptタグは非対応:
<script>タグを使用する埋め込みコードは利用不可 - HTTPS必須: セキュアなサイト(https://)のみ埋め込み可能
- 埋め込み許可サイトのみ: 外部サイト側が埋め込みを許可している必要がある
外部サイトのコンテンツを埋め込む方法
外部サイトのコンテンツをSharePointページに埋め込む手順を解説します。
方法1: WebサイトアドレスをH使用する(簡易版)
一部のサービス(YouTube、Googleマップなど)は、URLを直接貼り付けるだけで埋め込めます。
手順
- SharePointページを編集モードで開く
- ページ上部の「編集」ボタンをクリック
- コンテンツを追加したい位置で「+」アイコンをクリック
- Webパーツ一覧から「埋め込み 」を選択
- 右側のプロパティパネルに埋め込みたいコンテンツのURLを貼り付け
- SharePointが自動的にコンテンツを表示
- ページ右上の「発行」または「再発行」をクリック
対応サービス例
- YouTube動画のURL
- Googleマップのリンク
- Bingマップ
- Microsoft Forms
方法2: 埋め込みコードを使用する(推奨)
より確実な方法は、埋め込みコードを使用することです。
手順
- 埋め込みたいコンテンツのサイトにアクセス
- 埋め込みコードを取得
- 「共有」ボタンまたはリンクを探す
- 「埋め込みコード」または「 」というラベルのボタンをクリック
- 表示されたコードをコピー
- SharePointページで埋め込む
- SharePointページを編集モードで開く
- 「+」アイコンから「埋め込み 」Webパーツを追加
- 「埋め込みコードを追加」をクリック
- コピーした埋め込みコードを貼り付け
- 「挿入」をクリック
- ページを発行
具体的な埋め込みコード取得例
主要なサービスごとに、埋め込みコードの取得方法を紹介します。
YouTube動画の埋め込み
埋め込みコード取得手順
- YouTubeで埋め込みたい動画を開く
- 動画プレーヤー下の「共有」ボタンをクリック
- 共有ダイアログで「埋め込む」を選択
- 表示されたiframeコードをコピー
- SharePointの埋め込みWebパーツに貼り付け
取得できるコードの例:
<iframe width="560" height="315" src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>Googleマップの埋め込み
埋め込みコード取得手順
- Googleマップで場所を検索
- 左側のパネルで「共有」ボタンをクリック
- 「地図を埋め込む」タブを選択
- 必要に応じてサイズを選択(小、中、大、カスタム)
- 表示されたHTMLコードをコピー
- SharePointの埋め込みWebパーツに貼り付け
取得できるコードの例:
<iframe src="https://www.google.com/maps/embed?pb=..."
width="600" height="450" style="border:0;" allowfullscreen=""
loading="lazy"></iframe>Vimeo動画の埋め込み
埋め込みコード取得手順
- Vimeoで埋め込みたい動画を開く
- 動画プレーヤーの「共有」ボタンをクリック
- 共有ダイアログに埋め込みコードが表示される
- コードをコピー
- SharePointの埋め込みWebパーツに貼り付け
Microsoft Formsの埋め込み
埋め込みコード取得手順
- Microsoft Formsでフォームを開く
- 「共有」ボタンをクリック
- 「埋め込み」タブを選択
- 表示されたiframeコードをコピー
- SharePointの埋め込みWebパーツに貼り付け
Power BIレポートの埋め込み
Power BIには専用のWebパーツがあるため、通常は「Power BI」Webパーツを使用することをお勧めします。
ただし、埋め込みWebパーツでも表示可能です。
手順
- Power BIでレポートを開く
- 「ファイル」→「埋め込み」→「Webサイトまたはポータル」を選択
- 埋め込みコードをコピー
- SharePointの埋め込みWebパーツに貼り付け
SharePoint内のファイルの埋め込みコード取得
SharePointやOneDriveに保存されているファイルも埋め込むことができます。
Excelファイルの埋め込み
埋め込みコード取得手順
- SharePointまたはOneDrive for BusinessでExcelファイルを開く
- Excel Onlineでファイルが表示される
- 「共有」メニューをクリック
- 「埋め込み」を選択
- 表示されたiframeタグを含む埋め込みコードをコピー
- 必要に応じて表示範囲やサイズをカスタマイズ
- SharePointページの埋め込みWebパーツに貼り付け
メリット:
- ファイルの最新版が常に表示される
- ユーザーがブラウザ上でExcelを操作できる
- ダウンロード不要で内容を確認できる
PowerPointプレゼンテーションの埋め込み
手順
- SharePointまたはOneDriveでPowerPointファイルを開く
- 「共有」→「埋め込み」を選択
- 埋め込みコードをコピー
- SharePointページに貼り付け
SharePointページの埋め込み
他のSharePointページを埋め込むこともできます。
手順
- 埋め込みたいSharePointページを開く
- ページのURLをコピー
- 埋め込みWebパーツにURLを貼り付け
または
- 埋め込みWebパーツに以下のようなiframeコードを入力
<iframe src="https://テナント名.sharepoint.com/sites/サイト名/SitePages/ページ名.aspx"
width="100%" height="600"></iframe>カスタムiframeコードの作成
特定のサイトが埋め込みコードを提供していない場合、手動でiframeコードを作成できます。
基本的なiframe構文
<iframe src="URL" width="幅" height="高さ"></iframe>パラメータの説明
- src: 埋め込むページのURL(必須、https://で始まる必要あり)
- width: フレームの幅(ピクセルまたは%)
- height: フレームの高さ(ピクセル)
- frameborder: 枠線の表示(0=非表示、1=表示)
- allowfullscreen: 全画面表示を許可
- scrolling: スクロールバーの表示制御
カスタマイズ例
<iframe src="https://example.com"
width="853"
height="480"
frameborder="0"
allowfullscreen>
</iframe>レスポンシブ対応
<iframe src="https://example.com"
width="100%"
height="600"
style="border:0;">
</iframe>埋め込みが許可されていないサイトへの対処法
「このWebサイトからのコンテンツの埋め込みは許可されていません」というエラーが表示される場合があります。
エラーの原因
- SharePoint管理者による制限: サイトコレクション管理者が外部サイトの埋め込みを制限している
- 外部サイト側の制限: 埋め込み元のサイトがiframe埋め込みを許可していない
解決方法1: SharePoint側でドメインを許可リストに追加(管理者向け)
サイトコレクション管理者権限がある場合、以下の手順で特定のドメインを許可できます。
手順
- SharePointサイトの「設定」(歯車アイコン)をクリック
- 「サイトの設定」を選択
- 「サイト コレクション管理」セクションの「HTML フィールド セキュリティ」をクリック
- 「外部ドメインからの埋め込みを許可する」で以下を選択
- 特定のドメインのみ許可: 信頼できるドメインのみを追加(推奨)
- すべてのドメインを許可: セキュリティリスクがあるため非推奨
- ドメインを追加する場合は、ドメイン名(例:
youtube.com)を入力 - 「追加」をクリック
- 「OK」をクリック
注意: この設定は各サイトごとに行う必要があります。
解決方法2: 外部サイトに確認する
外部サイト側が埋め込みをブロックしている場合は、サイト管理者に連絡して埋め込み許可を依頼する必要があります。
多くのサイトは、X-Frame-OptionsヘッダーやContent Security Policyで埋め込みを制限しています。
解決方法3: 代替手段を検討する
埋め込みができない場合の代替案:
- リンクWebパーツを使用: URLへのリンクを配置
- ボタンWebパーツを使用: クリックで外部サイトに遷移
- 画像とリンクの組み合わせ: サムネイル画像にリンクを設定
埋め込みサイズの調整
埋め込んだコンテンツのサイズを調整する方法です。
Webパーツの設定で調整
- 埋め込みWebパーツを選択
- 左側の編集アイコン(鉛筆マーク)をクリック
- Webパーツの設定で幅と高さを調整
iframeコード内で調整
<iframe src="https://example.com"
width="1200" <!-- 幅を1200ピクセルに -->
height="800"> <!-- 高さを800ピクセルに -->
</iframe>パーセント指定
<iframe src="https://example.com"
width="100%" <!-- 親要素の幅いっぱいに -->
height="600">
</iframe>トラブルシューティング
埋め込みがうまくいかない場合の対処法を紹介します。
問題1: 「埋め込みが許可されていません」エラー
原因:
- SharePoint側でドメインが許可されていない
- 外部サイトが埋め込みを許可していない
解決策:
- SharePoint管理者にドメインの許可リスト追加を依頼
- 外部サイト側の埋め込みポリシーを確認
- 代替のWebパーツ(リンクやボタン)を使用
問題2: コンテンツが表示されない
原因:
- HTTPSでないURL
- scriptタグを含む埋め込みコード
- iframeタグでない埋め込みコード
解決策:
- URLが
https://で始まることを確認 <iframe>タグを含むコードを使用- scriptタグを含むコードは使用不可
問題3: コンテンツのサイズがおかしい
原因:
- width、height属性が適切でない
- レスポンシブ対応されていない
解決策:
- widthとheightの値を調整
width="100%"で親要素に合わせる- デバイスごとにプレビューで確認
問題4: 埋め込んだページが真っ白またはグレーの画面
原因:
- SharePointページを別のSharePointページに埋め込んだ場合の表示問題
- セキュリティ設定による制限
解決策:
- ドメインを許可リストに追加
- 別のブラウザで試す
- InPrivate/シークレットモードで確認
問題5: モバイルで表示が崩れる
原因:
- レスポンシブデザインに対応していない
- 固定サイズで指定している
解決策:
- パーセント指定を使用
- モバイルプレビューで確認
- 必要に応じて複数のWebパーツを用意(PC用、モバイル用)
埋め込み時の注意点
SharePointでコンテンツを埋め込む際の注意事項です。
セキュリティ上の注意
- 信頼できるサイトのみ埋め込む: 悪意のあるコードを含むサイトは避ける
- 定期的な確認: 埋め込んだコンテンツが変更されていないか確認
- 最小権限の原則: 必要なドメインのみ許可リストに追加
パフォーマンスへの影響
- ページ読み込み速度: 複数の埋め込みはページを重くする
- 埋め込み数の制限: 1ページに多数の埋め込みを配置しない
- 遅延読み込み: 可能な場合は遅延読み込みを活用
ユーザー体験
- コンテンツサイズ: 適切なサイズで表示
- モバイル対応: スマートフォンでの表示を確認
- 代替テキスト: 読み込めない場合の説明を用意
メンテナンス
- 定期的なチェック: 埋め込みリンクが有効か確認
- 外部サービスの変更: サービス終了や仕様変更に注意
- ドキュメント化: どのページに何を埋め込んでいるか記録
専用Webパーツとの使い分け
SharePointには、特定のサービス向けの専用Webパーツがあります。
専用Webパーツが利用可能なサービス
- Power BI: Power BI Webパーツ
- YouTube: YouTubeビデオWebパーツ
- Microsoft Forms: Microsoft FormsWebパーツ
- ドキュメントライブラリ: ドキュメントライブラリWebパーツ
- ファイル: ファイルおよびメディアWebパーツ
専用Webパーツのメリット
- 認証が自動的に処理される
- SharePointテーマに対応
- モバイル最適化されている
- セキュリティがより強固
- 設定が簡単
埋め込みWebパーツを使うべき場合
- 専用Webパーツが存在しないサービス
- カスタムサイズやパラメータが必要
- 複数のサービスを統一的に扱いたい
推奨: 専用Webパーツが存在する場合は、そちらを優先して使用してください。
ベストプラクティス
効果的な埋め込みのためのベストプラクティスを紹介します。
1. 適切なWebパーツを選択する
- 専用Webパーツがある場合はそちらを優先
- 埋め込みWebパーツは汎用的な選択肢として使用
2. コンテンツの信頼性を確認する
- 埋め込み元が信頼できるサイトか確認
- HTTPSを使用しているか確認
- 定期的に内容をチェック
3. パフォーマンスを考慮する
- 1ページあたりの埋め込み数を制限(推奨: 3-5個程度)
- 重いコンテンツは別ページに分散
4. アクセシビリティに配慮する
- 埋め込みコンテンツの説明を追加
- キーボード操作を確認
- スクリーンリーダーでの動作を確認
5. ドキュメント化する
- どのページに何を埋め込んでいるか記録
- 埋め込み元のURL変更時の対応手順を準備
- 管理責任者を明確にする
6. 定期的なメンテナンス
- 四半期ごとにリンク切れを確認
- 外部サービスの仕様変更をチェック
- 不要になった埋め込みを削除
まとめ
SharePointの埋め込み機能を使うと、さまざまな外部コンテンツやファイルをページに直接表示できます。
重要なポイント:
- 埋め込みWebパーツを使用: SharePointモダンページの標準機能
- 埋め込みコードの取得: 外部サイトの「共有」や「埋め込み」ボタンから
- iframeベースが必須:
<iframe>タグで始まるコード、scriptタグは非対応 - HTTPSが必須: セキュアなサイトのみ埋め込み可能
- ドメイン許可が必要: SharePoint管理者が許可リストに追加
- 専用Webパーツを優先: 利用可能な場合は専用Webパーツを使用
主な埋め込みコード取得方法:
- YouTube: 共有→埋め込む
- Googleマップ: 共有→地図を埋め込む
- Excel: ファイルを開く→共有→埋め込み
- Vimeo: 共有ボタン→埋め込みコード
- その他: 「 」や「埋め込みコード」ボタンを探す
埋め込み機能を活用することで、情報を一箇所に集約し、ユーザーの利便性を大幅に向上させることができます。
セキュリティとパフォーマンスに注意しながら、効果的に活用してください。
コメント