情報畑でつかまえてロゴ
本サイトは NTTテクノロスが旬の IT をキーワードに
IT 部門が今知っておきたい最新テクノロジーに関する情報をお届けするサイトです

Webブラウザで本を作ろう【CSSで組版 第1回】

本コーナー「がっつり試し食い!」の新連載【CSSで組版】をスタートします!本連載では、HTML+CSSで組版を実現するVivliostyleでの組版を紹介しつつ、そこで使われるCSS仕様を解説していきます。

本コーナー「がっつり試し食い!」の新連載【CSSで組版】をスタートします!本連載では、HTML+CSSで組版を実現するVivliostyleでの組版を紹介しつつ、そこで使われるCSS仕様を解説していきます。

本のイメージ画像

組版とは

シリーズタイトルにもある組版という言葉ですが、あまり馴染みのない方もいらっしゃるかもしれません。組版とは、書籍やチラシ等を印刷するにあたり、文字や図などのコンテンツを配置し、見栄えのよい紙面を作ることをいいます。具体的な作業としては、配置場所以外に、ルビ、書体、文字サイズ等を指定して、紙面を作っていきます。

組版がどのようなことをしているか深く知りたい方は、W3C技術ノートの日本語組版処理の要件(日本語版)が参考になりますので、ぜひご覧ください。

CSS組版とは

HTMLのデータをマスターとし、CSSでレイアウトを指定して組版することをCSS組版といいます。CSS組版で、HTMLという1つのソースから、EPUBなどの電子書籍、Webコンテンツ、印刷データPDFを作成する、いわゆるワンソースマルチユースを実現することができます。

しかし、2018年6月現在では、印刷データを作成するために必要なCSSの仕様が未完成で、Webブラウザにも十分実装されているとは言えない状況です。「現状でもCSSでいい感じにレイアウトしてPDFに出せば、印刷データができるのでは?」と思ってしまうのですが、書籍という形を考えたとき、大きく足りない点があります。

それは、ページの概念です。

印刷する際のページサイズ、ページ内でのコンテンツレイアウト、ページ数や脚注等の配置、偶数・奇数ページでのレイアウト変更といったことが、現状できません。それらを実現するCSS仕様は策定中なのですが(詳しくは続く連載で紹介予定です)、Webブラウザでの実装はまだです。

それらを実現する製品やツールはいくつか存在しているのですが、手軽に利用するには敷居の高いものとなっていました。

Vivliostyleを使ったCSS組版

そんな中登場したのがVivliostyleです。Vivliostyleは、ページの概念を中心とした、Webブラウザ側で不足しているCSS組版機能をJavaScriptで実装するオープンソースプロジェクトです。その成果物を活用することで、手元のWebブラウザを使い手軽にCSS組版環境を作れます。

Vivliostyleを試してみよう

では、さっそくVivliostyleでのCSS組版を体験してみましょう。手軽に試す方法として、以下3つがあります。

  1. VivliostyleのコードをダウンロードしてViewerを使う
  2. VivliostyleのChrome拡張を利用する
  3. Vivliostyleを組み込んだオンラインエディタのViolaを使う

ここでは、もっともお手軽に試せる2を解説します。

書籍データの用意

簡単なCSSスタイリングと組版を施した、書籍データのHTMLを用意しました。

書籍データ

このファイルをダウンロードし、ファイル名index.htmlとして適当なフォルダにコピーしてください。

ちなみにこの書籍データで紹介していますそなえるんCSR+は、企業の災害備蓄品管理を効率化しながら、備蓄品の寄付サポートにより社会貢献までできてしまうというステキなサービスです。利用は無料ですので、みなさまぜひご検討ください。

Vivliostyle Chrome拡張のインストール

以下をChromeにインストールしてください。

Vivliostyle - Chrome ウェブストア

Webサーバのインストール

Vivliostyle Chrome拡張を利用するには、作成したHTMLファイルをWebサーバに配置する必要があります。手元にWebサーバがない方は、ChromeアプリのWeb Server for Chrome - Chrome ウェブストアがお手軽です。

Web Server for Chromeの簡単な使い方解説です。

まず、Chromeを起動し、アドレスバーにchrome://appsと入力してEnterキーを押すと、インストールしたChromeアプリの一覧が表示されます。

Chromeアプリ一覧

上のキャプチャでは一番右の、Web Serverと書かれたアイコンをクリックすると、Web Server for Chromeが起動します。

起動したWeb Server for Chrome

「CHOOSE FOLDER」ボタンをクリックすると、Webサーバのルートフォルダを指定することができます。書籍データを配置したフォルダを指定するとよいでしょう。

ルートフォルダ指定後、Chromeのアドレスバーにhttp://127.0.0.1:8887を入力してEnterキーを押してください。書籍データが表示されれば、Webサーバ起動に成功しています。なお、この時点ではVivliostyleは適用されていません。

Webサーバが用意できない場合は、先の書籍データへのリンクをそのままChromeで開くだけでもかまいません。後ほど行う見た目の変更はできませんが、CSS組版の結果を確認することはできます。

Vivliostyle Chrome拡張の適用

Chromeで書籍データを開いた状態で、Chromeのウィンドウ右上にあるVivliostyle拡張のアイコンをクリックすると、以下のようなメニューが表示されます。

Vivliostyle拡張のメニュー

このメニューで、一番上の「Paginate」をチェックし、左下のApplyボタンをクリックすると、Vivliostyle拡張が適用された画面が表示されます。Vivliostyle拡張のメニューはCloseボタンをクリックして閉じてもかまいません。

Vivliostyle拡張適用後

文章がページに分けられ、各ページにトンボやページ番号が入っています。また、偶数ページと奇数ページで左右の余白が異なっていたり、ページ番号の配置場所が変わっています。

ここからページを印刷すると、表示されているとおりに印刷できます。すばらしいですね!

このように、CSSの組版機能とVivliostyleを使えば、Webブラウザ上で簡単にCSS組版環境を作ることができます。

見た目を変更してみる

せっかくですので、CSSを編集し、見た目を変えて見ましょう。ここでは、横書きの文章を縦書きにしてみます。

書籍データindex.htmlにて、style要素の中を以下のように編集してください。

<style>
html {
widows: 3;
orphans: 3;
writing-mode: vertical-rl; /* この行を追加 */
}
/* 略 */
</style>

変更後、ページを再読込し、先ほどと同様にVivliostyle拡張を適用すると...

縦書きに変更した結果

ページに分けられているところは変わらず、縦書き表示になりました!

表示にいくつか違和感を感じるところもありますが、これらはCSSの機能で修正することができます。また、Wordでいいんじゃない?みたいな声も聞こえてきますが、前述のとおりで、HTMLとCSSでできることに嬉しさがあるのです。そのあたりは続く連載で紹介予定です。

次回予告

今回は、とりあえず試して見ましょうということで、環境を整え、サンプルの書籍データを表示してみました。

次回は、CSSの組版機能を紹介しつつ、ページの概念を解説していく予定です。蒸し暑くなってきましたので、体調に気をつけてお過ごしください。

著者プロフィール
鈴木 雅貴
鈴木 雅貴
作品公開の場としてのWebに可能性を感じ入社。 XML関連業務や継続的インテグレーション社内普及活動などを経て、 2013年より新たに設立されたHTML5推進室の主要メンバーとしてWeb技術を推進している。 セミナーでの講演や書籍執筆などの活動も行っている。 著書に『HTML5プロフェッショナル認定試験 レベル1 対策テキスト&問題集』(マイナビ/共著)。得意領域はCSS。 調理歴20年超。本人も原因不明のアヒル好き。