HTML / ZIP プルーフ

HTML / ZIP プルーフの概要#

単体の HTML ファイルや、複数ファイルをまとめた ZIP サイトをプルーフとしてアップロードできます。Web ページのデザインやコーディング成果物を、画像化したスナップショット上でレビューできます。

単体 HTML#

1 つの HTML ファイルをアップロードすると HTML プルーフが作成されます。アップロード時にはレビュー画像を自動生成しません。プルーフを開き、レビュー表示の生成ボタンからブラウザ拡張機能でキャプチャします。拡張機能を利用できない場合は、確認画面からサーバー側レンダリングへ切り替えられます。 CSS や画像が外部 URL を参照している場合は、その URL が到達可能である必要があります。

ZIP サイトのエントリ判定#

複数の HTML / CSS / 画像ファイルを ZIP にまとめてアップロードできます。エントリは次の規則で決まります。

index.html / index.htm があれば、そのファイルをサイトのエントリとして使います。
index ファイルが無くても HTML が 1 ファイルだけなら、そのファイルを自動的にエントリとして使います。
index ファイルが無く HTML が複数ある場合は取り込みを停止します。トップページを index.html に変更して再アップロードしてください。
相対パスで参照される ZIP 内のアセット（CSS / 画像 / JS）はそのまま解決されます。

index ファイルが無く HTML が複数ある場合は MULTIPLE_HTML_NO_INDEX としてエラーになります。画面上でエントリを選ぶ機能はありません。

動的 iframe の静的化#

ブラウザ拡張機能は、その時点でブラウザに表示されている内容をレビュー画像として取り込みます。サーバー側レンダリングへ切り替えた場合、Google カレンダー / Google フォーム / Google マップなどの動的 iframe は静的な代替表示になることがあります。

JS fetch 系動的コンテンツの制約#

ページ読み込み後に JavaScript の fetch などでコンテンツを取得・描画する部分は、その描画結果が HTML 作成者の実装やタイミング、外部データに依存するため、すべての環境で完全に一致させることは原理的にできません。

JS fetch で動的に描画される領域は非決定論的で、サーバー側スナップショットでの完全一致は保証できません。ブラウザでの忠実な表示を確認したい場合は、ブラウザ拡張機能でのキャプチャを利用してください。

拡張機能でのブラウザ忠実キャプチャ

ブラウザ拡張機能をインストールします。
アップロードした HTML プルーフを開き、レビュー画像の生成を選びます。
拡張機能でキャプチャすると、ブラウザでの表示に忠実なスナップショットがレビュー画像として保存されます。

HTML プルーフの動的コンテンツに関する制約や、よくある質問はFAQ / トラブルシュートも参照してください。