タグアーカイブ: CSS組版

CSS組版Vivliostyleをインストール

CSS組版 Vivliostyle

CSS組版 Vivliostyleとは

Vivliostyle（ビブリオスタイル）は、最新のWeb標準技術を活用した新しいCSS組版システムを実現するソフトウェアです。従来の組版とは異なり、HTMLとCSSを使用するため、Web技術に慣れている人なら簡単に扱うことができます。

Vivliostyleとは

Vivliostyleは、HTMLドキュメントを入力してCSS設定に従ってページレイアウトを行い、PDFを出力します。これにより、Webのデザイン技術を活かして、美しく整った印刷物を簡単に作成できます。

Vivliostyleの環境構築

Vivliostyleの動作環境

CSS組版Vivliostyleは、macOS、Linux、Windowsのプラットフォームで動作可能です。動作には、Javascript実行環境のNode.js（バージョン12以上）が必要です。今回は、Windows11にインストールします。

Vivliostyleインストール

まず、Node.jsをインストールします。
図に示すNode.jsの公式サイトからNode.jsをダウンロードします。

node公式ページ

ダウンロードしたnode-v22.16.0-x64.msiをダブルクリックして、画面の指示に従ってNode.jsをインストールします。

nodeインストール

Node.jsをインストールすると、npm（Node Package Manager）もインストールします。Windowsのコマンドプロンプトでnodeのバージョンを確認します。


C:\ node --version
v22.16.0

C:\ npm --version
11.1.0

npmを使ってVivliostyleをインストールします。


C:\ npm install -g @vivliostyle/cli
・・・

C:\

Vivliostyleのインストールが完了したので、バージョンを確認します。


C:\ vivliostyle --version
cli: 9.1.1
core: 2.32.0

Vivliostyleの基本操作

基本操作の概要

Vivliostyleの基本操作概要を以下に示します。

Vivliostyle コマンド

ひな型の作成
initコマンドを使用して、基本構成ファイルvivliostyle.config.jsを生成します。
原稿の作成
テキストエディタを使用して、VFMマークダウン記法を用いて原稿（.md）を作成します。
紙面プレビュー確認
previewコマンドを使用して、原稿をレイアウトしてブラウザで紙面のプレビューを確認します。
出版用PDF作成
buildコマンドを使用して、原稿をレイアウトして紙面を構成してPDFを生成します。

ひな型の作成

Vivliostyleでドキュメントを作成するときは、最初にドキュメントディレクトリーを作成します。ドキュメントディレクトリー名はすべてASCII文字としてください。ディレクトリー名に日本語などが含まれる場合は、Vivliostyleが正常に動作しませんので注意してください。

ひな型（プロジェクトの基本構成）を作成するには、Vivliostyleのinitコマンドを使用します。


C:\ mkdir sample
C:\ cd sample
C:\ vivliostyle init
Successfully created vivliostyle.config.js
C:\

原稿の作成

Vivliostyleのマークダウン記法を使用して原稿を作成します。次に示す原稿をsample.mdに入力してください。
原稿ファイルの文字コードをUTF-8に設定してください。


# はじめてのCSS組版 
 
## CSS組版とは 
 
最新のWeb標準技術を使って印刷物の版下を 
作成する組版です。 
 
Vivliostyleは、 
**CSS組版**で書籍を作成するツールです。 
 
## 文書変換 
 
テキストファイルの原稿から下記文書を出力します。 
 
 - PDF 
 - EPUB

vivliostyle.config.js基本構成ファイルに次の内容を記述します。

・ title:にタイトル名（sample）
・ size:に書籍のサイズ（B5）
・ entry:に入力となる原稿ファイル（sample.md）


const vivliostyleConfig = { 
  title: 'sample', 
  ･･･ 
  size: 'B5', 
  entry: [ 
        'sample.md' 
  ], 
  ･･･

紙面プレビュー確認

紙面をプレビュー確認にするには、Vivliostyleのpreviewコマンドを使用します。


C:\ vivliostyle preview
🚀 Up and running ([ctrl+c] to quit)

図に示すようにChromiumブラウザでサンプル原稿の紙面をプレビューしました。

プレビュー表示

出版用PDF作成

出版用にPDFを作成するには、vivliostyleのbuildコマンドを使用します。


C:\ vivliostyle build
/ Processing PDF
sample.pdf has been created.
🎉 Built successfully.
C:\

図に示すようなsample.pdfファイルを生成しました。

PDF出力