スクリーンショットを撮らずにスクリーンショットを実現した話
フィードバックは説明するより見せたほうが伝わることがあります。アンケートで要素選択をオンにすると、訪問者は「一番上の青いボタン」と書く代わりに、ボタンや見出し、フォームの項目など、ページの特定の部分を指し示せるようになります。回答の詳細画面では、その要素だけを切り取った、スタイルもそのままのきれいな画像を、ハイライトされたページ全体のスナップショットと並べて確認できます。
これを実現するには、自分たちが所有していないページを、管理していないドメイン上で、本物のブラウザエンジンの中でレンダリングし、そこから1つの要素を正しいスタイルのまま切り取って返す必要がありました。最初のバージョンは素直な方法を試しました — クリックされた要素自身のマークアップだけを取り出し、単独でレンダリングするというものです。これは私たちが書いたどのテストでも正しく見えました。なぜなら、どのテストもインラインスタイルで装飾された要素を使っていたからです。ところが実際のページのボタンが外部スタイルシートのクラスから見た目を得ている場合、切り取った画像はスタイルのない状態で返ってきました。単独のフラグメントにはスタイルシートをリンクするページのhead部分も、styleブロックも、そのクラスが参照するCSS変数もありません — 何も壊れていたわけではなく、単にスタイルを適用する対象がそこになかっただけです。
解決策は、要素だけを単独でレンダリングする代わりに、ページ全体をレンダリングすることでした。選択の瞬間にクリックされた要素にはすでにマークが付けられているので、訪問者がキャプチャしたページ全体を、本物のスタイルシートと本物のレイアウトのまま一度だけレンダリングし、同じ読み込み済みのページから2枚のスクリーンショットを撮ります — ページ全体と、マークされた要素だけを切り取ったものです。ブラウザでのページ読み込み1回で両方の画像が得られるようになり、これは以前の方法が必要としていた2回の別々のレンダリングより手間も少なくなりました。
この変更によって訪問者の体験は何も変わりません — 今まで通り、指し示したいページの部分をクリックするだけです。変わったのは、その後に起こることです。文章の説明から再構築した推測ではなく、まさにその部分を正しいスタイルで写した本物の画像が得られます。