CSS組版のVivliostyleを使ってみたーツールのインストールー

私も技術同人誌なるものをやってみようかなと思い、技術誌を作る上でどんなソフトが良いのかなと思い、調べてみました。

候補になるのは、Texをベースとした「Re:View」とCSSをベースとした「Vivliostyle」です。見栄えを見てみると、Vivliostyleがなんかかっこいい。CSS/HTMLベースというのもポイント高いです。必要なツールが、Node.jsのみというのもいいですね。

で、Node.jsのインストールですが、ちょっとはまりました。結論からいうと、sudo apt-get でインストールしてはいけません。バージョンが古いため、使おうとすると「SyntaxError」エラーが出てしまいます。

Node.jsは、Linuxの場合、ダウンロードサイトからzip圧縮したものをダウンロードして使います。解凍したら、フォルダにパスを通せば使えるようになります。 私の場合、解凍フォルダが"node-v18.17.1-linux-x64"なので、次のように”.bashrc”に登録して使えるようになりました。

# Node.js settings
export NODE_HOME=$HOME/node-v18.17.1-linux-x64/
export NODE_PATH=$NODE_HOME/lib/node_modules
export PATH=$NODE_HOME/bin:$PATH

ターミナルで次のようにコマンドを打って、使えるかどうか確認します。

$ node -v
v18.17.1
$ npm -v
9.6.7

次のVivliostyleを使えるようにします。チュートリアルにしたがって作業を勧めてみます。

まず、次のコマンドをターミナルから打つと、"create-book" パッケージをインストールするか？と聞かれますので、Yを押してインストールします。

$ npm create book mybook
Need to install the following packages:
  create-book
Ok to proceed? (y)

インストールが終わったら、同じコマンドを打つことで文書のテンプレートを作成することができます。途中、文書のスタイルを聞かれるところがありますが、今回は「Techbook (技術同人誌) theme」を選択してみました。

$: ~/vivliostyle$ npm create book mybook
? Description はじめてのVivliostyle
? Author name よしのたろう
? Author email [e-mail]
? License CC-BY-SA-3.0
? choose theme @vivliostyle/theme-techbook - Techbook (技術同人誌) theme

Creating a new package in /home/ystaro/vivliostyle/mybook.

Initializing a git repository
> git init

Installing dependencies using npm
> npm install
npm WARN deprecated trim@0.0.1: Use String.prototype.trim() instead

added 637 packages, and audited 638 packages in 41s

158 packages are looking for funding
  run `npm fund` for details

4 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Successfully created /home/ystaro/vivliostyle/mybook

1. cd mybook
2. create and edit Markdown files
3. edit entry field in your vivliostyle.config.js
4. yarn build or npm run build

See https://docs.vivliostyle.org for further information.

? Happy writing!

ここで、"mybook" というフォルダが作られます。ドキュメント本体は、"mybook" フォルダの中の "vivliostyle.config.js" というファイルの中の "entry" で指定されています。この場合は、”manuscript.md” になります。もちろん変更することも可能です。

module.exports = {
  title: 'mybook', // populated into `publication.json`, default to `title` of the first entry or `name` in `package.json`.
  author: 'よしのたろう ', // default to `author` in `package.json` or undefined.

  ... 

  theme: '@vivliostyle/theme-techbook@^1.0.0', // .css or local dir or npm package. default to undefined.
  entry: [
    'manuscript.md', // `title` is automatically guessed from the file (frontmatter > first heading).

  ... 

  ], // `entry` can be `string` or `object` if there's only single markdown file.

  ... 

  // },
}

manuscript.md の中身は、サンプルとして夏目漱石の「吾輩は猫である」が記載されています。

# {吾輩|わがはい}は猫である。 {吾輩|わがはい}は猫である。名前はまだ無い。 どこで生れたかとんと{見当|けんとう}がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という>人間中で一番{獰悪|どうあく}な種族であったそうだ....

これを製版するには、次のようにコマンドを打ちます。

$ cd mybook
$ npm run build

> mybook@0.0.0 build
> vivliostyle build

 manuscript.md {吾輩|わがはい}は猫である。
 manuscript.md {吾輩|わがはい}は猫である。
? Processing PDF
mybook.pdf has been created.
〓 Built successfully.

実際に作成されたPDFを見てみましょう。PDF Viewerで見てもよいですが、次のようにすれば、vivliostyle で見ることもできます。

$ npm run preview

> mybook@0.0.0 preview
> vivliostyle preview

〓 Up and running ([ctrl+c] to quit)

出来上がった本は次のようになりました。



なんか良い感じですね。次からいろいろとカスタマイズしていきたいと思います。

---

Web技術で「本」が作れるCSS組版 Vivliostyle入門

• 出版社/メーカー: シーアンドアール研究所
• 発売日: 2023/05/12
• メディア: Kindle版

技術同人誌を書こう！　アウトプットのススメ 技術の泉シリーズ (技術の泉シリーズ（NextPublishing）)

• 出版社/メーカー: インプレス NextPublishing
• 発売日: 2018/04/13
• メディア: Kindle版

わかりやすく書ける！技術同人誌初心者のための執筆実例集 技術の泉シリーズ (技術の泉シリーズ（NextPublishing）)

• 作者: 石井 葵
• 出版社/メーカー: インプレス NextPublishing
• 発売日: 2019/07/12
• メディア: Kindle版

タグ：vivliostyle 技術同人誌