iframeタグで外部コンテンツを埋め込もう

iframeタグを使用することにより、TwitterやFacebook、Instagramのタイムライン、そして今では当然のように使用されているGoogle マップやYouTube動画など、外部のWebページをサイトに埋め込むことができます。今回はiframeの基本と共に、外部Webサイトを自身のサイトに埋め込む方法を解説していきます。

iframeは何ができるの？

iframeはHTML5とCSSで使用されるタグです。Inline Frame（インラインフレーム）と呼ばれ、iframe（アイフレーム）と略されています。iframeは外部サイトのWebページを高さと幅を調整しつつ、自身のサイトに埋め込むことができます。

SNSの使用が盛んになっている近年では活用することが多いタグですが、外部サイトのWebページをサイトに埋め込むため、セキュリティ面も気をつけなくてはなりません。埋め込んだサイトに悪意のあるコードが含まれていた場合、自身のサイトに影響が出ないよう、sandbox属性を使用して対策することができます。

(iframeが使用できない場合、代りにobject要素を使用して動画や画像、HTMLなどを埋め込むことができます。HTML5にバージョンアップされたことにより、音声や動画を以前より簡単に扱えるようになりましたが、object要素はあくまでiframeが使用できない場合の代替案ですので、今回は省略します)

 

iframeの使い方

iframeタグはHTML文書の中に、埋め込みたい外部サイトのHTMLファイルを記入して使用します。

 

・<iframe>”表示させたいファイル”</iframe>

iframe内に読み込ませたファイルを表示させることができます。

 

・<iframe src>”埋め込みたいファイルのURL”</iframe>

src属性で表示させたいファイルのリンク先を指定できます。

 

・<iframe src=”埋め込みたいファイルのURL” name=”任意の名前”></iframe>

name属性を追加すると、インラインフレームに任意の識別名をつけることができます。名前をつける際は半角の英数字から始まる名前にしてください。また、 – (ハイフン)や _ (アンダーバー)、 : (コロン)、 . (ピリオド)といった記号も使用できます。name属性は、リンクやフォーム送信でtarget属性を指定する場合などに使用します。target属性を使うとウィンドウのどこに表示するかを決めることができます。

 

・<a href=“埋め込みたいファイルのURL” target=”_top”>リンクテキスト</a>

target属性を使うとウィンドウのどこに表示するかを決めることができます。

 

・<a href=“埋め込みたいファイルのURL” target=”_self”>リンクテキスト</a>

現在のウィンドウ(フレーム)に表示する。フレーム分割は解除。

 

・<a href=“埋め込みたいファイルのURL” target=”_blank”>リンクテキスト</a>

新規のウィンドウに表示する。

 

・<a href=“埋め込みたいファイルのURL” target=”_parent”>リンクテキスト</a>

親フレームに表示する。

 

・<a href=“埋め込みたいファイルのURL” target=”_ウィンドウ(フレーム)名”>リンクテキスト</a>

指定したウィンドウ(フレーム)に表示する。

 

・<iframe src=”埋め込みたいURL” width=”好みのページ幅″ ></iframe>

widht属性でpx数を記入し、埋め込んだURL（コンテンツ）を表示させる場所（ページ幅）を指定できます。

 

・<iframe src=”埋め込みたいURL” height=”好みのページの高さ″></iframe>

height属性でpx数を記入し、埋め込んだURL（コンテンツ）を表示させる場所（ページの高さ）を指定できます。

 

sandboxでサイトを守る

自身のサイトに埋め込みたい外部サイトのコードが、必ずしも安全であるとは限りません。悪意のあるコードが含まれている可能性があります。悪意のあるコードを自身のサイトに埋め込んでしまうと、埋め込んだサイトが悪意のあるコードの影響を受けてしまいます。

影響を受けないよう範囲を指定して制限できるのがsandboxです。sandboxを使用することにより、javascriptが禁止されるため影響の範囲を指定できます。

 

・<iframe src=”埋め込みたいURL” sandbox></iframe>

上記の記載をすることで、javascriptがformやscriptなどの実行を禁止するため、指定した範囲内をクリックしても反応することはありません。部分的に実行を許可したい際は下記を活用してください。

 

・allow-same-origin

親ドキュメントと同じドメインを持つものとして扱う

 

・allow-forms

フォームの送信を許可する。

 

・allow-popups

ポップアップの表示を許可する。

 

・allow-scripts

スクリプトの実行を許可する。

（ポップアップは含まれません）

 

・allow-pointer-lock

Pointer Lock APIを許可する。

 

・allow-top-navigation

最上位のウィンドウの操作を許可する。

 

Twitteの埋め込み方法

表示したいTwitterアカウントの、プロフィールページのURLをコピーし、『https://publish.twitter.com/』の検索バーにペーストし、『→』をクリックします。『Embedded Timeline』を選択すると、コピー用の埋め込みコードが作成されます。作成されたコードをコピーし、iframeタグに貼り付けると、Twitterのタイムラインをサイトに埋め込むことができます。

Facebookの埋め込み方法

Facebookの『ページプラグイン』を開き、下にスクロールします。『FacebookのページURL』に埋め込みたいページのURLを入力し、下にある『コードを取得』をクリックします。クリックするとパネルが表示されるので、パネルの『IFRAME』タブに記載されているコードをコピーします。コピーしたコードをiframeタグに貼り付けると、Facebookのタイムラインをサイトに埋め込むことができます。

Instagramの埋め込み方法

Instagramの『InstaWidget』を開き、『早速作ってみる』をクリックします。『ユーザー名』に埋め込みたいアカウントのユーザー名を入力し、その他の項目を入力します。

入力しプレビューをクリックすると、右側に設置されているプレビュー内容が更新されます。更新された内容に間違いがなければ、『埋め込みコードを取得』をクリックし、作成されたコードをコピーします。コピーしたコードをiframeタグに貼り付ければ、Instagramの投稿一覧を埋め込むことができます。

YouTube動画の埋め込み方法

埋め込みたい動画の右下にある『共有』をクリックします。すると『リンクの共有』というパネルが表示されるので、その中にある『埋め込む』をクリックしてください。クリックするとコピーすべきコードが表示されます。コピーする前に、動画の再生『開始位置』を変更すると、指定した位置から再生される動画を埋め込むことができるコードが作られます。作られたコードをコピーして、iframeタグに貼り付ければ完了です。

Googleマップマップの埋め込み方法

Google マップで場所の情報を検索し、検索結果きら『共有』をクリックします。クリックすると新しいいウィンドウが開くので、そこから『地図を埋め込む』をクリックしタブを切り替え、『HTMLをコピー』をクリックします。コピーしたコードをiframeタグに記載すると、Googleのマップがサイトに埋め込まれます。

ブラウザの互換性について

iframeを使うと簡単に外部のWebサイトを自身のサイトに埋め込むことができますが、中にはブラウザによって互換性の低いものから、全く対応していないものがあります。使用の際はGoogleやsafariなど、各ブラウザのリリースノートをご確認ください。

iframeを活用しましょう

上記で紹介したように、iframeタグを使えば簡単に外部のWebサイトを自身のサイトに埋め込むことができます。Google マップやYouTube、TwitterやFacebook、Instagramなどよく活用されているサービスも、コピーアンドペーストで埋め込み可能ですので、是非試してみてください。