In 'n' Out | 外部コンテンツの埋め込み

外部コンテンツを埋め込む

Webページでは、テキストや画像だけでなく、他のWebサービスで公開されている情報をページ内に直接表示することができます。
このように別のサイトの情報を自分のページに取り込むことを「埋め込み」と呼びます。

埋め込みタグ（iframe）

Webページの中に、別のWebページを表示するために使われるのがiframeタグ（インラインフレーム）です。
iframeを使うことで、自作したページや外部サイトのコンテンツを、現在のページ内にそのまま表示することができます。

構文

<iframe 属性="属性値">
</iframe>

iframeタグはインラインブロック要素であり置換要素で、属性を使わないと機能しないタグです。

iframe要素：属性抜粋
属性名	属性値	用途
src	任意のパス	指定されたパスのWebページを表示します。
width	任意の数値	表示幅を指定します。
height	任意の数値	表示高さを指定します。
title	任意の文字	アクセシビリティ用の説明文
loading	lazy	遅延読み込みを行います。
loading	eager	読み込みをすぐに行います。
allowfullscreen	なし	全画面表示を許可します。
sandbox	allow-scripts	埋め込んだページでスクリプトの許可をする。
	allow-same-origin	埋め込み元と同じクッキーやローカルストレージを共有可能にします。
	allow-forms	埋め込みページ内のフォーム送信を許可する。
referrerpolicy	no-referrer	埋め込み先に参照元情報（URL）を送信しない。
referrerpolicy	origin	参照元情報としてドメイン部分のみを送信します。

コード例

<iframe src="material/demo.html" width="600" height="400" title="デモ用サンプルページ"></iframe>

出力例

わかりにくいですが、src属性で指定したdemo.htmlの内容がiframeの中にそのまま表示されます。
iframeの中は独立したWebページとして動作するため、テキストや画像、レイアウトなどを自由に記述できます。
読み込むファイルの場所が同じフォルダ階層であれば相対パス（例：src="demo.html"）、別の階層なら（例：src="../sample/demo.html"）を指定します。
また、title属性を指定しておくと、iframe内に表示される内容を説明でき、アクセシビリティ（読み上げ支援など）の観点からも重要です。

ただし、リンク構造が複雑になると操作性が低下するため、ナビゲーションを含むページを丸ごと埋め込むのは避けた方が良いでしょう。
また、外部サイトの中にはセキュリティ設定によってiframeでの表示を制限している場合もあります。

YouTubeの埋め込み

YouTubeの動画は、埋め込みコードを使って簡単に表示できます。

ダイアログが表示されるので、「埋め込み」をクリックし、表示されたコードの「コピー」をクリックして、そのままHTMLに貼り付けます。

コード例

<iframe width="560" height="315"
    src="https://www.youtube.com/embed/nu6NE55_X7A?si=JU7aJass0tWGQZEy"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen></iframe>

出力例

このようにiframeを使えば、YouTubeの動画を自分のページ内で再生できます。
ただし、埋め込みを許可していない動画は再生できない場合があります。

Googleマップの埋め込み

Googleマップも同様に、共有機能から簡単に埋め込みコードを取得できます。

「HTMLをコピー」をクリックし、取得したコードをそのままHTMLに貼り付けます。

コード例

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3241.2861091541304!2d139.74285797540816!3d35.65858047259446!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bbd9009ec09%3A0x481a93f0d2a409dd!2z5p2x5Lqs44K_44Ov44O8!5e0!3m2!1sja!2sjp!4v1763006204151!5m2!1sja!2sjp"
    width="600" height="450"
    style="border:0;"
    allowfullscreen=""
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade">
</iframe>

出力例

サイズや枠線の有無などは、width・height・style で自由に調整できます。

埋め込みを活用するために

iframeを活用すれば、他サイトのコンテンツを自分のページに取り込み、情報量の多いページを作ることができます。
ただし、すべてのWebサービスがiframe埋め込みを許可しているわけではなく、サービスによっては制限がかかっている場合があります。
利用規約を確認し、著作権やプライバシーに配慮した運用を心がけましょう。