ウェブページを画像にすると何が欠けるか：スクリプトが描く層
ウェブページを画像にすると何が欠けるかは、そのページをどれだけスクリプトが支えているかで決まる。ページを画像にでは、ページのマークアップを読み、そのマークアップから一枚の画像を描く。このブラウザの中でスクリプトは実行されない。読み込み後にスクリプトが足したものは、画像には入らない。
マークアップに書かれているものは残る。見出し、段落、表、罫線、背景色、文字サイズ、行間、文書に含まれる画像。スクリプトが後からやったことは残らない。二枚目のスライド、クリックで開くコメント、スクロールで埋まる一覧、送信後に出る通知。画質の問題ではない。その部分は最初からマークアップに入っていない。
ページを画像にが受け取るのは静的な内容だけ。スクリプトは実行されず、ログイン後のページも、別ドメインの画像も出てこない。
スクリプトが動かないので、最初に描かれたところで止まる
スクリプトで切り替わるスライダーは一枚目で終わる。スクロールで読み込む画像は空白のまま。ボタンで開くパネルは画像に存在しない。必要な一文がそのパネルの中だけにあるなら、この道具では取れない。
ログイン後のページも出てこない。ログインしてから見える内容を求めると、返ってくるのはログイン欄か、何もない空白になる。ReadyIMG にログインはなく、画像を受け取るアカウントサーバーもない。どこかのサイトへ代わりにログインすることもない。ここで読むのは、このブラウザが届く公開マークアップだけ。
別ドメインの画像は空白になる
ページの中の画像が別のドメインから来ていると、描くときにそのピクセルを読めない。場所だけが空く。同じサイトの画像は普通に出る。白い隙間、壊れた枠、罫線だけの四角。たいていはこれで、ファイルが壊れているわけではない。
- スクリプトが作る内容：二枚目のスライド、クリックで開くコメント、スクロールで埋まる一覧。
- ログイン後のページ：ログイン欄か、空白だけ。
- 別ドメインの画像：場所が空き、枠か隙間だけが残る。
アドレスが読めないときは HTML を貼る
ブラウザでアドレスを読めないページがある。まだ手元にあるだけのファイル、社内ネットワークでしか開かないページ、その場で組み立てた断片。そのときは HTML のソースを貼る。同じ静的なマークアップなので、欠けるものも同じ。
ビューポートの幅は最小 320 として扱う。狭い表示と広い表示は別のレイアウトで、同じページでも出来上がりは違う。誰に見せる画像かを先に決める。スマートフォン向けなら狭いほうで取る。
出せるのは三つ、ひとつ選ぶ
JPG、PNG、ピクセル画像を包んだ SVG の三つ。スクリーンショット、文字が主のページ、文書に貼るものは PNG のまま。文字の縁がきれいに残る。JPG しか受け取らない相手なら JPG。その SVG はピクセルを包んだ入れ物で、どこまでも拡大できるベクターではない。拡大すれば普通のビットマップと同じようにぼやける。
重くて送りにくければファイルを縮めるをもう一度通す。縮めるのは今ダウンロードした複製で、撮ったページはそのまま残る。
ページを画像には一度に一ページ。40 個のファイルをまとめて受ける道具ではない。一ページ終えたらダウンロードして、次へ進む。
この画像が向いている使い方
リンクを開かない相手に、その時のレイアウトを固定して渡す。翌日に変わってしまうページの記録を残す。文書に貼って、読む人を外へ出さない。どれも向いている。
途中の過程を撮るのには向かない。スクロールアニメーションの中間フレーム、読み込み中の骨組み、マウスを重ねたときの見た目。どれもスクリプトが動いて初めて出るもので、ここではスクリプトが動かない。
ネットワークに触れるのは二つだけ
ページを開いたとき、この訪問は 51.LA に数えられる。数えているのはページを開いたことで、画像ファイルではない。ファイルの扱いにこの境界を書いてある。画像は ReadyIMG にアップロードされず、ここにログインも登録もない。
もう一つは、切り抜きを初めて使うときに認識モデルをこの端末のキャッシュへダウンロードすること。別の道具の話で、ページを撮ることとは関係ない。計算はこの端末の中で終わり、ダウンロードされるのはここで作られた新しいファイル。
送る前に三つ見る
- 文字が切れていないか。広いレイアウトを狭い幅に入れると、見出しが三行に折れる。
- 画像が空いていないか。空いたら、同じサイトの画像に変えてもう一度。
- 保存したのは新しいファイル。ページも元の画像もその場所にある。
待ち行列はこの一度の訪問の中だけ。再読み込みやページを閉じると、ダウンロードしていない結果は消える。残す画像を先に受け取ってから、次のページへ。