いわむぶろぐ

Webエンジニア@スタートアップ@のんびり綴ってます。

iframeを使って簡単に外部のHTMLを読み込む

iframeを使ってHTMLを埋め込む軽いタスクをいくつか行ったのでまとめます。

特に技術的に難しいことではないのですが、

明らか利便性が高く

エンジニア以外の方でも役に立つ機会がありそうなので見ていただければと思います。

● iframeって何?🤔

  • iframeとはHTML要素の一種です。
  • HTMLの中に、さらに入れ子でHTML・ドキュメントなどを埋め込むことができます。

今回の例では、この記事の中にgoogle-slideを埋め込んでいます。

以下のように埋め込んであります。

今回の例では、この記事の中にgoogle-slideを埋め込んでいます。
<iframe src="https://docs.google.com/presentation/d/e/2PACX-1vQup_zf4MKi0R65BBVdCS9XZmkDK2VvSQG371xeqQBI5gZd8azMmQopLJLgN3OrbslKmtueiEKh_7Bi/embed?start=false&loop=true&delayms=2000" 
width="960" 
height="360" 
allowfullscreen="true" 
mozallowfullscreen="true" 
webkitallowfullscreen="true">
</iframe>

属性

よく使用する属性をまとめました。他にも設定できる属性はたくさんあるので、気になった方は調べてみてください。

属性 意味
src 埋め込むhtmlを指定
height iframeの高さを変更
width iframeの横幅を変更
target iframe内のリンクを使用した時の動作の指定

● 主な用途

webページ内に外部のドキュメントや資料を埋め込む

  • 業務の中では、頻繁に更新したいコンテンツに対してiframeで埋め込むように変更しました。
    • iframeで埋め込むことによって、毎回アプリケーションのリリースをしなくても埋め込んだ資料の更新だけですむようにしています。

動画を埋め込む

  • 例えばyoutubeも簡単に埋め込むことができます。個人で運営しているサイトや、ブログなどに利用できます。
- 例えばyoutubeも簡単に埋め込むことができます。個人で運営しているサイトや、ブログなどに利用できます。

<iframe src="//www.youtube.com/embed/F6oGPunohOA" 
width="560" 
height="315">
</iframe>

● メリット😊

  • リリース不要でコンテンツの変更・更新ができます。
    • 例えば、webサービスの「FAQ欄」や「最新情報欄」は、日々修正や更新が必要ですが、srcで指定されているドキュメントを変更すれば良いので、リアルタイムで修正、更新を行うことができます。

● デメリット😭

  • 外部ファイルを読み込むので、時間がかかることもあります。
  • SEO上不利になることがあります。
    • ユーザーからはコンテンツがあるように見えますが、HTMLとしてはコンテンツが少ない(iframe要素しかない)ので、ページ自体の評価が上がりません。

HTML5から推奨されるようになった🎉

HTML4.01までは非推奨と見なされてきました

  • HTML 4.01のDTD* は以下の3種類があり、それに準じてマークアップを行う必要がありました。
    • Strict(厳格なHTML)
    • Transitional(過渡的なHTML)
    • Frameset(フレームを使用できるHTML)

W3C* はStrictを推奨していました。一方iframeはFramesetに適用していたので、非推奨とされてきました

DTD...Document_Type_Definition(マークアップの構成要素、指定できる属性などを定めた規則)

W3C...World_Wide_Web_Consortium(ブラウザーやサーバーについての技術に関する標準化を推進する団体)

HTML5.0からは推奨されるようになりました

まとめ

  • iframeは簡単に使えることができますし、使用できそうな機会もそれなりにあると思うので、その時はぜひ使ってみてください。
  • HTML5.0から正式に推奨されているので、エンジニアがコード見ても冷たい目で見られずすみますね。(見られたことはないけど)