Open2

vivliostyleでMarkdownから本を作成する手順

nnn112358nnn112358

vivliostyleでMarkdownから本を作成する詳細手順

1. 環境構築

Node.jsのインストール

# macOSの場合（Homebrew使用）
brew install node

# Windowsの場合
# Node.jsの公式サイトからインストーラーをダウンロード

Vivliostyle CLIのインストール

npm install -g @vivliostyle/cli

2. プロジェクト作成

プロジェクトの初期化

mkdir my-book
cd my-book
npm init -y
vivliostyle init

これにより基本的なプロジェクト構造が作成されます。

Markdownファイルの配置

manuscriptsディレクトリにMarkdownファイルを配置します：

my-book/
├── manuscripts/
│   ├── 01-chapter1.md
│   ├── 02-chapter2.md
│   └── 03-chapter3.md
├── vivliostyle.config.js
└── package.json

3. 設定ファイルの編集

vivliostyle.config.jsの設定

module.exports = {
  title: '私の本のタイトル',
  author: '著者名',
  language: 'ja',
  size: 'A5',
  theme: '@vivliostyle/theme-techbook', // テーマを選択
  entry: [
    'manuscripts/01-chapter1.md',
    'manuscripts/02-chapter2.md',
    'manuscripts/03-chapter3.md'
  ],
  output: [
    'book.pdf',
    'book.html'
  ],
  workspaceDir: '.vivliostyle',
  toc: true,
}

テーマのインストール

npm install --save @vivliostyle/theme-techbook

利用可能なテーマ:

  • @vivliostyle/theme-techbook（技術書向け）
  • @vivliostyle/theme-academic（学術書向け）
  • @vivliostyle/theme-bunko（文庫本向け）
  • @vivliostyle/theme-slide（スライド向け）

4. Markdownの書き方

基本的なMarkdown構文

# 章タイトル

## 見出し2

### 見出し3

本文テキスト。**太字**、*斜体*、`コード`。

- リスト項目1
- リスト項目2

1. 番号付きリスト1
2. 番号付きリスト2

> 引用文

[リンクテキスト](URL)

![画像の説明](画像のパス)

Vivliostyle拡張構文 - ページスタイル指定

<!-- class: 特殊ページ -->

特別なスタイルを適用したいコンテンツ

5. ビルドと出力

プレビュー

vivliostyle preview

これでブラウザが開き、リアルタイムプレビューが表示されます。

PDF生成

vivliostyle build

設定ファイルで指定した出力先にPDFが生成されます。

6. カスタマイズ

カスタムCSSの追加

theme.cssファイルを作成し、設定ファイルで指定：

/* theme.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

body {
  font-family: 'Noto Sans JP', sans-serif;
}

h1 {
  color: #0066cc;
  page-break-before: always;
}

/* 必要に応じてスタイルを追加 */

設定ファイルを更新：

module.exports = {
  // ...他の設定
  theme: [
    '@vivliostyle/theme-techbook', 
    './theme.css'  // 自作のCSSを追加
  ],
  // ...
}

7. 目次の生成

Markdownファイルの先頭に目次用のプレースホルダーを追加：

<!-- toc -->

# 本文開始

8. よくある問題と解決法

  • 画像が表示されない: 相対パスが正しいか確認
  • 日本語フォントの問題: カスタムCSSでWebフォントを指定
  • 改ページされない: page-break-before: always;をCSSで指定
nnn112358nnn112358

エラーメッセージを確認したところ、Vivliostyleの実行中に必要なライブラリが見つからないという問題が発生しています。具体的には、libnss3.soというライブラリファイルが見つからないことが原因です。

問題の解決方法

このエラーはLinux環境で発生しており、Chromiumの実行に必要なライブラリが不足しています。以下の手順で解決しましょう：

Ubuntuまたはその派生ディストリビューションの場合

sudo apt-get update
sudo apt-get install libnss3

インストール後

ライブラリをインストールした後、再度Vivliostyleのビルドコマンドを実行してみてください：

vivliostyle build

もしこれでも問題が解決しない場合は、Playwrightのブラウザを再インストールすることも効果的です：

npx playwright install chromium

または、Vivliostyleが使用しているPlaywrightの依存関係を明示的にインストールする：

npx @playwright/browser-chromium install

これらの手順で問題が解決するはずです。必要なシステムライブラリをインストールすることで、Chromiumベースのブラウザがヘッドレスモードで正常に動作し、PDFの生成ができるようになります。