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からは推奨されるようになりました
HTML5.0のDTDは1つのみで、iframeも正式にW3Cから認められ、非推奨ではなくなりました
- その代わり、サポートされない属性も増えてしまいました。
- scrolling: スクロールの表示・非表示の設定
- frameborder: iframeの境界線の表示・非表示の設定
- その代わり、サポートされない属性も増えてしまいました。
自信を持ってiframeを使えます。
まとめ
- iframeは簡単に使えることができますし、使用できそうな機会もそれなりにあると思うので、その時はぜひ使ってみてください。
- HTML5.0から正式に推奨されているので、エンジニアがコード見ても冷たい目で見られずすみますね。(見られたことはないけど)