SharePoint ページには Stream Web パーツや YouTube Web パーツが用意されており、簡単にそれぞれの動画をページに埋め込んで表示することができます。しかしときには、他の動画サイトで公開されている動画を埋め込みたくなることもあります。
そこで今回は、ニコニコ動画を例にして、そうした動画をページに埋め込むための方法を書いておきます。
埋め込み Web パーツを活用しよう
さまざまな Web サイトをページに埋め込むために利用できるのが、その名もずばり「埋め込み」Web パーツです。この Web パーツを利用することで「iframe」と呼ばれる形式で、他の Web サイトのページを埋め込むことができます。
ここでは iframe 自体の解説はしませんので、もっと詳しく知りたい場合はネットで検索してみてください。
埋め込み Web パーツの設定はシンプルなもので、iframe の形式で書かれた HTML を入力するだけです。
ニコニコ動画を埋め込むための iframe タグ
ニコニコ動画を埋め込むための iframe タグは、動画ページの [共有] メニューにある [動画情報とサムネイル埋め込みコード] から取得できます。
たとえば『ゆるキャン△ 第1話「ふじさんとカレーめん」』の iframe タグは次のようなものでした。
<iframe
width="312"
height="176"
src="https://www.nicovideo.jp/thumb/so32488462"
scrolling="no"
style="border:solid 1px #ccc;"
frameborder="0">
<a href="https://www.nicovideo.jp/watch/so32488462">
ゆるキャン△ 第1話「ふじさんとカレーめん」
</a>
</iframe>これをそのまま埋め込み Web パーツの設定にコピペしましょう。
これで設定は終わり……なのですが、サイトコレクションの既定の設定のままではエラーが表示されてうまく動作しません。次に、このエラーへの対処方法を説明します。
HTML フィールドのセキュリティ設定
さきほどのエラーは、サイトに設定されたセキュリティ設定が原因です。iframe は便利なものですが、ときおりサイバー攻撃に用いられることがあります。そのため SharePoint では、iframe を用いて Web サイトをなんでもかんでも埋め込めなくなっているわけです。そこでまずは、ニコニコ動画の iframe を読み込めるように設定を変更していきます。
設定を変更できるのは、このサイトの特権管理者だけです。その管理者の操作によって、右上の歯車アイコンから [サイトの情報] – [すべてのサイト設定を表示] と辿ってサイトの設定画面を開くと、「サイト コレクションの管理」という項目が表示されます。
そして、この中にある [HTML フィールドのセキュリティ] を開きます。ここでは「外部 iframe の許可」を設定することができます。既定では [次のドメインからに限り iframe 挿入を投稿者に許可します] が選択されています。そして、その下には許可リストが表示されているので、ここにニコニコ動画の iframe で必要な「www.nicovideo.jp」を追加します。
ドメインを入力し [追加] ボタンをクリックしたあとで、許可リストにきちんと追加されていることを確認し [OK] を押したら設定は終わりです。
埋め込み Web パーツの表示を確認する
ここまで設定ができたら、もう一度さきほどのページの編集を行い、埋め込み Web パーツの設定をし直してみましょう。今度はエラーが表示されずに、iframe で呼び出された内容が表示されるはずです。
ここで「なんか思ってたのと違う……」と思った人も多いかもしれません。本当はそのまま動作を再生できるプレイヤーを埋め込みたいですよね。
ニコニコ動画のプレイヤーを埋め込む iframe タグ
プレイヤーを埋め込むための iframe タグは、動画の [共有] メニューからは取得できないため、下記の通りに自分で作成する必要があります。
<iframe
src="https://embed.nicovideo.jp/watch/so32488462"
height="100%"
width="100%">
</iframe>ここでポイントなのは、「/watch/」の後ろの部分を埋め込みたい動画に合わせて変更する点です。ここの値は、動画ページの URL や先ほど [共有] メニューから取得した iframe タグの中などにもありますので、どこかしらから見つけて設定します。
そして忘れてはいけないのが、[HTML フィールドのセキュリティ] の設定です。今度は「embed.nicovideo.jp」を許可リストに追加します。
これらの設定が終わると、SharePoint ページにニコニコ動画のプレイヤーが埋め込まれて表示されるはずです。
これでバッチリですね。
さいごに
今回はニコニコ動画の動画を SharePoint ページに埋め込む方法を紹介しましたが、この設定の一連の流れを知っていれば、他のサイトにも応用できます。ただし、iframe の値はそれぞれの Web サイトで異なるものであったり、そもそも iframe で呼び出せないように設定されている Web サイトもあることには注意が必要です。
ゆるキャン△第 4 期も楽しみですね。
