本記事をレビュー・編集していただいたJeff Smith氏に非常に感謝しております。
CSSをページメディアに応用
まだCSSが存在しなかったときのことを覚えていますか？ おそらく覚えていないでしょう。しかし、考えてみてください。CSSが登場したとき、CSSはWebレイアウトに関してまったく新しい考え方を提示しました。実際、CSSの登場以来、私たちはさまざまなレイアウトを試すようになりました。新しいレイアウトのトレンドは次々に生まれ、新しい考え方を提示しCSSの可能性を広げています。
先週、CSS Working Group Invited Expertの一員であり、Edge of my Seatの創立者であるRachel Andrew（レイチェル・アンドリュー）氏にインタビューしました。RachelはCSSに熱い思いを持っていて、その思いもあってCSS技術の精通者として一際目立った存在です。ページメディア（訳注：英文ではPaged Mediaと表記し「例えば紙、OHPフィルム、写真アルバムのページを印刷したのと同様の画像をコンピューター画面に表示したページのこと」W3C CSS Paged Media Module Level 3より）に関しては特にそうです。SitePointが出版している本のレイアウト制作にも協力してもらっています。これらの本もすべてCSSに関するものです！CSSのページメディアへの応用は非常にニッチなテーマですので、RachelからQ&Aセッションへの参加を了承する返事をもらったときには非常に感動しました。では、セッションの様子をお伝えしましょう！
Rachel氏への質問
質問：ページをレイアウトする場合、プリントページとWebページを使ったときの主な違いはなにかを知りたいのですが教えていただけますか？ Webページでは出せないプリントページの良さとはどういうところだと考えていますか？
Rachel：ページメディアではページサイズが固定されているため作業がずっと楽になります。仕上がりのフォーマットが分かっているものに出力するわけですから。
主な違いとしてはページメディアではページのモデルがあり、そのモデルには空き領域があってそこに作成したコンテンツを挿入できることが挙げられます。Prince docsで紹介されている例は参考になります。というのは、Webからプリントへ移行していく習熟曲線の移り変わりは、ほとんどの場合、モデルを理解することから始まるからです。
質問：プリントメディア用のCSSから学んだことや手法のうち、どのようなものがWebページのデザインにすぐに生かすことができますか？
Rachel：CSS Working GroupがCSS Generated Contentモジュールのリライトに取り組んでいます。このモジュールを使えば、CSS contentプロパティーを使ってコンテンツを文書に挿入できます。
プリントでは出来上がったコンテンツに大きく依存します。そうしてヘッダーとフッターにページ番号や動的に章のタイトルなどを挿入します。CSS WGブログの注意書きには以下のように書かれています。
実装を変更したい人のために、ほとんどのCSSからPDFへのレンダラーが重要なサブセットをすでにサポートしています。
Webコンテキストで利用可能なページメディア仕様用に作成したコンテンツを利用しやすくする、ということかもしれません。ただし、もちろんブラウザーがサポートする場合の話です。
質問：CSSをプリントにも応用しようと何年にもわたって試みられています。たとえば、ホーコン・ウィウム・リー（訳注：オペラ・ソフトウェアの最高技術責任者）のプリントのためのページメディアの提案などです。しかしこの提案は優先度の高い作業を重視するあまり先送りになっています。プリント機能の向上やページメディアの普及拡大のためのCSSへの現在のアプローチについて少し説明していただけますか？
Rachel：世の中には面白いアイデアが溢れています。むしろ問題なのは実際になにかを利用しようと思ったら、具体的なUAが必要だということです。このUAこそが人々を遠ざける要因なのです。
最近、私はホーコンのCSS Figures仕様のアイデアをいろいろな面から考えました。既存のもの、または将来生まれる可能性のあるものを使えば、こんなことやあんなことができるのではと考えを巡らしていました。
ページメディアでは仕様だけ分かれば作業するキャンバスの大きさがはっきりと分かります。もう1つのメリットが、ページメディアの仕様用に現在すでに作成されているコンテンツがあることが挙げられます。将来的にどうなるかは需要次第だと思われます。私見では、文書作成者がこれらの専用UAによってできることを知っていれば、もっと需要が生まれると思いました。そうなればブラウザーでも見てみようという人が多くなるでしょう！
質問：ほかにページをプリントする簡単なお勧めの方法はありますか？
Rachel：プリント出力を完全に制御するために、仕様を完全にサポートするUAを使ってプリントする必要はありません。ブラウザーから直接プリントする場合に制御できる部分は非常に限られていますから。
扱っているさまざまなページモデルが一旦分かってしまえば、Web用にCSSを書くよりも専用のプリントUAで作業する方が簡単だということは知っておくと良いです。私は長く本の制作に従事してきましたが、API（Prince（訳注：XML、XHTML、HTMLをPDFに変換するソフト）を直接またはサードパーティサービス https://docraptor.com/を使ってインストールすることもできます）を介してPrince UAを使うことも可能です。たとえばインボイスのPDFや報告書などをフォーマット化する必要がある場合、Webページの場合と同様の方法でライブデータを使ってフォーマット化できるでしょう。
質問：非常に多くのSitePoint発行書籍の制作を手掛けてきたと思いますが、「プリントのためのCSS」、またはCSS用のツールなどなにがまだ足りないと思いますか？
Rachel：毎回実際になにか作業すると、新しい問題点が発されます。たとえば、SitePointの書籍には多くのコードが含まれ、コードの最後にコードラッピング文字を挿入したいと考えました。この問題を解決するために最終的に面倒なJavaScriptを書くはめになりました。ありがたいことに、UAでできることの限界点に達した場合、Princeを使えばJavaScriptを実行しスクリプトを利用して文書に変更を加えられます。
質問：PrinceをはじめとするUAがあればCSSをプリントへ応用するアイデアが生き残る可能性が出てくるようですが、この方式が廃れてしまうようなことになると非常に残念です。CSSをプリントへ応用する方式への興味を復活させられる良い考えはなにかありませんか？
Rachel：CSSをプリントへ応用するというようなアイデアをもっとうまくサポートするブラウザーを誕生させられるかどうかは、私たちのコミュニティがサポートを要求するかどうかにかかっています。サポートが欲しいなら要求が必要です。ぜひ声をあげましょう！
声を上げるにはいろいろな方法があります。直接ブラウザーベンダーにサポートを要求してもいいですし、サポートして欲しいことをなにかに書いてもいいでしょう。サポートを求めているWebコミュニティや使用事例が実際にあることを見せるのです。そしてWebコミュニティや使用事例に関する話題を目にして「Web開発者はこのようなことを気にしているのですか？」という質問が出てきたら、はっきり「はい」と答えるのです。また、Webコミュニティのサポート要求や使用事例についてWebに書いてあればWeb検索で簡単に証明されます。
質問：もっと費用のかからない現実的なほかの選択肢を知っていますか？
Rachel：専門家用のツールはすべてお金がかかります。しかしDocRaptorのAPIを介してPrince技術を利用できます。使用用途によってはこちらのほうが効果的かもしれません。
ほかのフォーマットへの出力という点から見れば、ほかにもツールがあったほうがいいです。EPUBやMobi（Kindle）フォーマットにはHTMLやCSSを適用する方がずっと簡単だということが分かっています。というのも、これらのフォーマットはどういう方法を取っても必ずHTMLやCSSが必要だからです。
EPUBに取り掛かるにはPandocを使用してからSigilで整理します。そしてKindlegenツールを使ってEPUBをMobiに変換します。
ほとんどがコマンドラインスタックなのでこれらすべてを自動化し、文書からたくさんのバージョンの異なる本を作成すればいいのです。単純な作業なら先に述べた作業をすればいいだけですし、そうでないならここから始めて変更を加えていけばいいでしょう。
もっと詳しく知りたいですか？
インタビュー全文を見たい人はQ&Aを見てください。Rachel氏の会話が途切れるところもありますが、そこで話が終わったわけではありません。
Rachel Andrew
フロントエンド、バックエンドWeb開発者であると同時に作家、講演者です。最近の出版物はCSSグリッドレイアウト入門などがあります。オンライン、オフラインの両方で多くの出版物の寄稿者でもあります。また、CMS PerchやGoogle Developer Expert、CSS Working GroupのInvited Expertの共同創立メンバーで、自身のWebサイト、rachelandrew.co.ukでビジネスや技術について執筆しています。
（原文：Translating CSS for Paged Media with Rachel Andrew）
［翻訳：中村文也］
［編集：Livit］
