自分のWebサイトでデザインを紹介したり、JavaScriptの実行結果を紹介したいと思った時は意外と面倒だったりします。特にデザインや元々のサイトデザインに影響される部分があったり、JavaScriptはセキュリティが気になるかも知れません。 そこで使ってみたいのがiframifyです。任意のDOMをiframeにしてくれるソフトウェアです。

iframifyの使い方

実際に適用しているデモです。上では単なるdivタグですが、下にあるのはiframeで囲まれています。

幅を指定したりすることもできるので、コンテンツのレスポンシブ環境下での見せ方なども提示できます。

オプションとしてスタイル、スクリプトタグを追加したりメタタグも指定できます。iframeを書いてコンテンツを別ファイルに分けても良いですが、iframifyを使えば一つのページ上に全部のコンテンツを書いて、好きな場所をiframe化できるのが便利です。

iframifyはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

iframify edenspiekermann/iframify: Replace a node with an iframe version of itself