SharePointにHTML等を埋め込む方法をお探しですね。

広告

SharePointにYouTubeや地図を埋め込む方法を分かりやすく解説！

SharePointで社内ポータルやチームサイトを作っていると、「YouTubeの動画や地図、他のシステムの画面をそのままページに表示できたらいいのに…」と思ったことはありませんか？実は、SharePointには「埋め込み」という標準機能があって、これを使えば外部コンテンツを簡単にページに組み込むことができるんです。

この記事では、SharePointにHTMLやiframeコードを埋め込む具体的な手順から、URLだけでサクッと表示させる方法、さらにはエラーが出てうまくいかない時の対処法まで、初めての方にも分かりやすく説明していきます。

1. SharePointの「埋め込みWebパーツ」って何？どんな時に使えるの？

SharePointの「埋め込み」Webパーツは、YouTubeの動画やGoogleマップ、Microsoft Formsで作ったアンケートなど、外部サービスのコンテンツをSharePointのページ上に直接表示できる便利な機能です。

わざわざ別のタブを開いて外部サイトにアクセスしなくても、社内ポータルを見るだけで必要な情報が確認できるようになります。

例えば、こんな使い方ができます：

– 社内研修用の動画をページに埋め込んで、新入社員がすぐに視聴できるようにする
– 全社アンケートのフォームをトップページに配置して、回答率をアップさせる
– 会社の所在地を示すGoogleマップを「アクセス」ページに表示する

文字や画像だけでは伝わりにくい情報も、動画や地図といった動的なコンテンツを埋め込むことで、もっと分かりやすく魅力的なページが作れるんです。

埋め込む方法は2種類ある

埋め込みWebパーツでコンテンツを表示させる方法には、大きく分けて2つあります：

**①URLを直接入力する方法**
対応しているサービスなら、リンクをコピペするだけでOK。

とっても簡単ですが、すべてのウェブサイトで使えるわけではありません。

**②iframe形式の埋め込みコード（HTML）を使う方法**
外部サイトが提供している専用のHTMLコードを貼り付ける方法。

表示サイズなど細かい設定ができて、対応できるサービスの幅も広がります。

どちらの方法を使う場合でも、**セキュリティ上の理由から「HTTPS」で始まる安全なサイトしか埋め込めない**という点は覚えておきましょう。

2. URLを使って簡単にコンテンツを埋め込む方法

まずは一番シンプルな方法から見ていきましょう。

YouTubeやVimeoなどの動画サービス、Microsoftの関連サービスなど、リンク埋め込みに対応しているサイトなら、URLをコピペするだけで表示できます。

準備：URLをコピーする

1. 埋め込みたいコンテンツのページをブラウザで開く
2. アドレスバーからURLをコピーするか、「共有」ボタンから専用リンクを取得する

※この方法でうまく表示されない場合は、そのサイトがURL埋め込みに対応していない可能性があります。

その時は次に説明するiframeコードを使った方法を試してみてください。

SharePointでの設定手順

**ステップ1：編集モードに入る**
SharePointページの右上にある「編集」ボタンをクリックします。

**ステップ2：埋め込みWebパーツを追加**
コンテンツを表示したい場所で「＋」マーク（ツールボックス）をクリックし、一覧から「埋め込み（）」を選びます。

**ステップ3：URLを貼り付ける**
配置したWebパーツの横にある鉛筆マーク（編集アイコン）をクリックすると、右側に設定パネルが表示されます。

「Webサイトアドレスまたは埋め込みコード」の入力欄に、先ほどコピーしたURLを貼り付けてください。

**ステップ4：確認して保存**
URLが正しく認識されれば、数秒でコンテンツがプレビュー表示されます。

問題なければ「発行」または「下書きとして保存」をクリックして完了です。

3. iframe（埋め込みコード）を使って埋め込む方法

URLだけでは表示できないサイトや、表示サイズなどを細かく調整したい時は、HTMLの「iframe（アイフレーム）」コードを使います。

iframeって何？

iframeは、今見ているページの中に別のページを「窓」のように表示させるHTML技術です。

多くの外部サービスがこの形式の埋め込みコードを提供しています。

埋め込みコードの取得方法

1. 表示したいコンテンツのページで「共有」や「埋め込みコード（）」といったボタンを探す
2. 「<iframe src=…」から始まるコードが表示されるので、全部コピーする
3. （オプション）コード内のheight（高さ）やwidth（幅）の数値を、自分のページに合わせて調整する

SharePointでの設定手順

基本的な流れはURLの時と同じですが、貼り付ける内容がHTMLコードになります。

**ステップ1〜2：**URLの時と同様に、編集モードで「埋め込み」Webパーツを追加します。

**ステップ3：iframeコードを貼り付ける**
右側のプロパティパネルが開いたら、入力ボックスにiframeコードをそのまま貼り付けます。

**ステップ4：表示を確認・調整**
SharePointが自動的にコードを解析して、安全なコードだと判断されればすぐに表示されます。

もし黒い枠線が出たり、画面が見切れたりする場合は、プロパティパネルにある「ページに合わせてサイズを変更する」のオン・オフを切り替えてみてください。

最適なレイアウトに調整できます。

4. 埋め込みがうまくいかない？よくある原因と解決策

手順通りにやったのにエラーが出る…そんな時は、以下の原因が考えられます。

よくある3つの原因

**①サイトが「HTTP」で「HTTPS」じゃない**
SharePointでは、暗号化されていないHTTPサイトの埋め込みは許可されていません。

必ずHTTPSで始まるURLを使いましょう。

**②埋め込みコードに「<script>」タグが含まれている**
セキュリティ上の理由で、scriptタグを含むコードは使えません。

コードは必ず「<iframe>」で始まり「</iframe>」で終わる必要があります。

scriptタグが入っている場合は、その部分を削除してiframe部分だけを使ってみてください。

**③埋め込みが許可されていない**
外部サイト側、またはSharePoint管理者側の設定で埋め込みがブロックされているケースです。

埋め込みが許可されていない場合の対処法

すべてのウェブサイトが他人のページへの埋め込みを許可しているわけではありません。

著作権保護やセキュリティの観点から、サイト運営者が意図的にiframe埋め込みをブロックしていることもよくあります。

この場合は残念ながらSharePoint側では解決できないので、次のような代替案を検討しましょう：

– 別の提供元を探す
– 埋め込みの代わりにリンクボタンを配置する
– スクリーンショット画像とリンクを組み合わせる

また、「このウェブサイトからのコンテンツの埋め込みは許可されていません」というエラーメッセージが出る場合は、**社内のSharePoint管理者が埋め込み機能自体を制限している**可能性があります。

この場合は、IT部門やサイトコレクション管理者に相談して、設定の変更をお願いしてみてください。

業務上必要な理由を説明すれば、特定のサイトだけ許可してもらえることもあります。

まとめ

SharePointの埋め込み機能を使いこなせば、もっと便利で見やすい社内ポータルが作れます。

最初はうまくいかないこともあるかもしれませんが、この記事を参考にぜひチャレンジしてみてください！

広告