ラック
Home > ブログ > 記事 > 2017年12月 > Webサイトをブラウザで見たままに印刷する方法(Chrome編)

Webサイトをブラウザで見たままに印刷する方法(Chrome編)

カテゴリ: ホームページ

経緯「DTP延長線上の妄執」

スマホやタブレットが普及し、ほぼ常に手元にデジタルデバイスが存在する時代になって幾星霜。十数年前にはぽつぽつとあった「Webサイトを印刷して資料として使いたい」という要望を聞く機会はかなり減ってきたのではないかと思われます。印刷するくらいならばタブレットで見た方が色々とメリットがあると思います。

  • ペーパーレス化により、印刷にかかる物品(紙やインク)の節約
  • 紙で資料を作る手間(時間的コスト)の削減
  • インタラクティブ(双方向)なUX/UIの実装(クリックやタップによるアニメーションなど)を損なわない、アコーディオンなどによってしまわれているコンテンツの確認
  • etc.

また、レスポンシブデザイン隆盛の昨今においてはWebサイトと印刷は相容れない部分が起きているところもあります。レスポンシブにするためには、ある程度マージンなどに余裕があって、ブラウザや画面幅の伸縮に応じてマージンが自動的に調整されます。これに対し、印刷はA4などのように印刷できるサイズが決まっているため、見た目通りの印刷をさせようとするならば、マージンなども含めてpx(mm, inchなど)単位でカッチリサイズを決め打ちする必要があります。

そう、片やマージンなどの調整はブラウザ幅に応じて遊びがあるのに対し、印刷ではそうした遊びは必要なく、カッチリサイズを決める……といったように、レスポンシブデザインと印刷は相性が悪いと思われます。

仮に印刷に対応するならば、ブラウザでの表示用のcssに調整を加えるのではなく、印刷用のcssを別途用意して、そちらで調整を行う方がまだマシです。もっと言ってしまえば、そもそもWebサイトは印刷することを諦めて、別途印刷用のデータやデザインを起こしてしまった方が良いでしょう。

色空間にしても、RGBとYMCKでまったくの別物……つまり、ブラウザで表示されている色がそのまま印刷されるわけではないのです。

考え方も、実装もまったく異なる概念が要求される以上、個別に作成した方がクオリティは上がるでしょう。

しかし、それでも。それでもまだ、「Webサイトを印刷して資料として使いたい」という要求が時折発生します。それを聞くたび、Web屋さんは伊勢の神風も驚きの盛大なため息を暴風飆風の如く吹き散らすのでした。

対処「手練手管の処断」

仕方が無いので、中性子星よりも重い腰を上げて対処することにします。竜の卵のようにポンと簡単に解決策が出てきませんかね。

まずは、何も考えず、無為無策で印刷してみようとします。

今回対象にしたページは2017年の頭から盛大にずっこけた話 *amp test。レスポンシブの中でも単純な構造なので、テストに使おうと思った次第です。

Vivaldiの「ファイル」から「印刷」を実行した1ページ目

それなりに映っていますね。プリンタの指定をPDFに変えれば、紙への印刷ではなくPDFファイルとして出力することも可能です。ただし、PCのブラウザで閲覧した場合というより、スマホで閲覧したときのように幅が縮まっています。サイトによってはブラウザと見た目がまったく変わってしまう場合も……。

Vivaldiでページ全体をキャプチャ

次にVivaldiでページ全体をキャプチャした場合。この場合、指定できるのはJPEGかPNGのみです。1つの画像ファイルになっているため、印刷するときは適宜改ページすることができません。1ページに全て収まるように印刷すると、縦長のサイトでは無茶苦茶小さくなってしまうことも……。

今回の要求は満たせそうに無いので、拡張機能に頼ってみることにします。VivaldiはChromeの拡張機能がそのまま使えるのでこういうときも頼りになります。

今回使ったのは「Awesome Screenshot」という拡張機能。これをインストールして、「Capture entire page」でページ全体をキャプチャ。

Chrome拡張機能「Awesome Screenshot」のメニュー。この中の「Capture entire page」を選択

キャプチャが完了すると、プレビュー画面が開くので「Done」で完了させます。完了させると、今度はキャプチャした画像のプレビューと、その画像をどうするかを選択(ファイルとしてダウンロードするか、クリップボードに貼り付けるか、印刷するか)する画面に移動するので、印刷のボタンを選択。

Chrome拡張機能「Awesome Screenshot」の画像の処理を選択する画面。この中から印刷を選択

印刷を選ぶと、Vivaldi(またはChrome)の印刷画面に移動するので、ここでプリンタをPDFに変更すれば、ブラウザで見た状態の画像をPDFファイルとして保存できます。

Vivaldi(またはChromeの印刷画面)

これならば、PCのブラウザで見たままを印刷できるので、今回の要求を満たせそうです。

やれやれだぜ。

参考

タグ: Chrome,トラブル対処,Vivaldi

 



関連する記事一覧