チュートリアル②PDFの作成

このチュートリアルの目標

• 雛形の作成方法がわかる
• PDF の作成方法がわかる
• プレビュー機能の使い方がわかる

PDF の作成

このチュートリアルでは Vivliostyle CLI を使います。CLI で出版物の雛形を作り、雛形に含まれるサンプル原稿やサンプルスタイルを改造することで、自分だけの出版物を作っていきます。

雛形の作成（新しく出版物を作る時のみ）

出版物の雛形を作ります。ターミナルを開き、次のように入力し、Enter キーを押します。mybook の部分は自由に変えて構いません。

npm create book mybook

雛形を作るにあたって必要な情報を対話形式で入力していきます。まずタイトルを入力します。空欄にする場合は、Enter キーを押してデフォルト値のまま次に進みます。

$ npm create book mybook
◇  What's the title of your publication?
│  Mybook

Enter キーを押すと次の入力画面に進みます。著者名と言語も同様に入力・選択します。

$ npm create book mybook
◇  What's the title of your publication?
│  Mybook
◇  What's the author name?
│  山田太郎
◇  What's the language?
│  Japanese

Enter キーを押すと、プロジェクトのテンプレートを選択します。Minimal は空のコンテンツのシンプルな雛形、Basic はスターターコンテンツ付きの雛形です。さらに Basic (Japanese) は表紙・目次・9章の日本語スターターコンテンツ付きの雛形で、VFM の書き方やスタイリングのガイドが含まれています。このチュートリアルでは Basic (Japanese) を選択しましょう。

$ npm create book mybook
◇  What's the title of your publication?
│  Mybook
◇  What's the author name?
│  山田太郎
◇  What's the language?
│  Japanese
◆  What's the project template?
│  ○ Minimal  ○ Basic  ● Basic (Japanese)

テーマはキーで選択します。このチュートリアルでは、技術書向けのテーマ @vivliostyle/theme-techbook を選択してみましょう。ソースコードの表示や目次にも対応しています。

$ npm create book mybook
◇  What's the title of your publication?
│  Mybook
◇  What's the author name?
│  山田太郎
◇  What's the language?
│  Japanese
◆  What's the project template?
│  ○ Minimal  ○ Basic  ● Basic (Japanese)
◆  What's the project theme?
│  @vivliostyle/theme-techbook

最後に、依存パッケージのインストールを行うかどうか確認します。” Yes “を選択すると自動でインストールされます。

$ npm create book mybook
◇  What's the title of your publication?
│  Mybook
◇  What's the author name?
│  山田太郎
◇  What's the language?
│  Japanese
◆  What's the project template?
│  ○ Minimal  ○ Basic  ● Basic (Japanese)
◆  What's the project theme?
│  @vivliostyle/theme-techbook
◆  Should we install dependencies? (You can install them later.)
│  ● Yes  ○ No

Enter キーを押すと、出版物の作成に必要なリソースのダウンロードが始まります（通常は数分以内に終わります）。以下の内容が表示されると完了です。

✔  SUCCESS Successfully created a project at mybook

指示のとおり、ターミナルで以下のコマンドを入力し、今自動で作られた作業用のディレクトリに移動しましょう。

cd mybook

ここまでの作業は新しく出版物を作成するときだけ行います。既存の原稿を修正するときには必要ありません。

雛形の構造

作成された雛形のディレクトリ構造を確認してみましょう。

mybook/
├── package.json           …出版物を作成するためのコマンドや依存パッケージの設定
├── vivliostyle.config.js  …出版物に関する設定ファイル
├── custom.css             …スタイルをカスタマイズするためのファイル
├── cover.css              …表紙専用のスタイルファイル
└── draft/                 …原稿ファイルのディレクトリ
    ├── 01_cover.md         …表紙ページ
    ├── 02_introduction.md  …はじめに
    ├── 03_vfm-guide.md     …VFM構文ガイド
    ├── 04_features.md      …Vivliostyleの機能紹介
    ├── 05_examples.md      …実践例
    ├── 06_styling-guide.md …スタイリングガイド
    ├── 07_advanced-features.md …高度な機能
    ├── 08_page-design.md   …ページデザイン
    ├── 09_distribution.md  …出力形式と配布
    ├── cover-image.webp    …表紙画像
    └── image-with-caption.webp  …キャプション付き画像

draft/ ディレクトリには、9つの日本語原稿ファイルが含まれています。これらは Vivliostyle の使い方を解説したスターターコンテンツです。このまますぐに PDF を作成できます。vivliostyle.config.js の詳しい内容は次のチュートリアルで解説します。

PDF の作成

Basic (Japanese) テンプレートにはスターターコンテンツが最初から含まれています。では早速、このスターターコンテンツから PDF を作成してみましょう。ターミナルで以下のコマンドを入力します。

npm run build

このコマンドを実行することで、Vivliostyle は以下の手順で PDF を作成します。

1. Markdown 形式で書かれた原稿ファイルを HTML に変換
2. vivliostyle.config.js の設定に従い、テーマを適用して組版
3. PDF を出力

コマンドを実行すると、次のような表示が出ます。初回実行時はリソースのダウンロードが発生します（通常は数分以内に終わります）。

$ npm run build

> [email protected] build
> vivliostyle build

✔ draft/01_cover.md Vivliostyle出版物テンプレート
✔ draft/02_introduction.md はじめに
✔ draft/03_vfm-guide.md VFM: Vivliostyle Flavored Markdown
✔ draft/04_features.md Vivliostyleの機能
✔ draft/05_examples.md 実践例
✔ draft/06_styling-guide.md スタイリングとカスタマイズ
✔ draft/07_advanced-features.md 高度な機能とテクニック
✔ draft/08_page-design.md ページデザインとレイアウト
✔ draft/09_distribution.md 出力形式と配布
✔ Finished building Mybook.pdf
📗 Built successfully!

Mybook.pdf という名前の PDF が作成されました。早速ファイルを開いてみましょう。表紙・目次・9つの章からなる技術書が出来上がっています。

原稿の編集とプレビュー

では、スターターコンテンツを編集しながらプレビュー機能を使ってみましょう。テキストエディタで原稿を編集→ターミナルでコマンドを実行して PDF を作成……という流れを踏んでもよいのですが、原稿を編集するたびにコマンドを実行するのは面倒です。もっと効率的な本作りのために、Vivliostyle はプレビュー機能を用意しています。プレビュー機能を使うと、原稿の編集に合わせて PDF のプレビューを自動的に表示できます。

実際にやってみましょう。ターミナルで以下のコマンドを入力します。

npm run preview

ブラウザが起動し、表紙・目次・全9章のプレビューが表示されます。

プレビューを起動させたまま、draft/02_introduction.md を開き、本文の一部を変更して保存します。例として、冒頭の段落に一文を追加してみましょう。

変更前:

Vivliostyle CLIは、HTMLやMarkdownドキュメントを高品質な出版物に組版するための強力なコマンドラインツールです。Markdownのシンプルさと、書籍・技術文書・学術論文などに求められるプロフェッショナルな出力品質を兼ね備えています。

変更後:

Vivliostyle CLIは、HTMLやMarkdownドキュメントを高品質な出版物に組版するための強力なコマンドラインツールです。Markdownのシンプルさと、書籍・技術文書・学術論文などに求められるプロフェッショナルな出力品質を兼ね備えています。まずはこの章で基本的な使い方を学びましょう。

保存すると、原稿の編集に合わせて自動的にプレビュー画面が更新されます。

まとめ

このチュートリアルを通して、スターターコンテンツを使って PDF を作成し、プレビューで編集内容を確認できるようになりました。実際の執筆においては、以下の手順を踏むことになるでしょう。

1. 雛形の作成
   • ターミナルで npm create book mybook を実行
   • テンプレートは「Basic (Japanese)」、テーマは「@vivliostyle/theme-techbook」を選択
2. 生成されたファイル構造の確認
3. PDF の作成
   • ターミナルで npm run build を実行
4. プレビューの起動
   • ターミナルで npm run preview を実行
5. 原稿の編集
   • 原稿を編集すると、自動的にプレビュー画面が更新

Basic (Japanese) テンプレートにはスターターコンテンツが含まれているため、すぐに PDF を作成できます。次のチュートリアルでは、このスターターコンテンツを自分の原稿に置き換え、スタイルをカスタマイズする方法を学びます。

• 前：チュートリアル①インストール
• 次：チュートリアル③原稿とテーマのカスタマイズ
• チュートリアル一覧