HTMLのプレビュー機能を作る

WEBサービスを運営していると、ユーザー向けのアプリ（以後"フロントエンド"と呼びます）のほかに運営向けのアプリ（以後"バックエンド"と呼びます）を作ることがあると思います。イートスマートで提供しているWEBサービスでも、バックエンドがいくつか存在します。今回は、バックエンドにHTMLのプレビュー機能を作った話です。

先日、バックエンドにコンテンツを編集する機能を新たに追加しました。いくつかの選択肢とテキスト入力を組み合わせたもので、ここで編集されたものがフロントエンドに表示されます。このため、編集した内容がどのようにフロントエンドに表示されるか事前に確認するニーズがありました。

プレニュー機能は、iframeを書き換えることで実現したいと思います。まず、プレビューを表示するためにiframeを設置します。

<iframe class="preview"></iframe>

iframeを操作するには、以下のようにしてWindowオブエクトへアクセスします。

var iframeWindow = document.querySelector('.preview').contentWindow;

フロントエンドでの表示を確認するため、フロントエンドで利用しているスタイルシートを読み込みます。 Documentオブジェクトのheadに対してスタイルシートを書き出します。

iframeWindow.document.querySelector('head').innerHTML = '<link rel="stylesheet" href="https://mognavi.jp/css/style.css" type="text/css" />';

つぎに、編集した内容をbodyに書き出します。

iframeWindow.document.querySelector('body').innerHTML = contents;

編集機能のオブジェクトのchangeイベントで上記コードを実行するようにすれば、編集した内容を即座にプレビューすることが出来ます。