【超ざっくり】Vivliostyleを使って第5版サプリを書くまで

CSS組版ツール Vivliostyleをお手軽に使うための機能、Vivliostyle Themeを使って世界で一番有名なRPGの第5版向けサプリを書けるテーマを作ったのですが、TRPGクラスタがちょろっと動かしてみるにはハードルが高いので、とにかくどういうものか見てみたいという人向けにめちゃくちゃはしょった使い方を説明します。windows11環境向けです。

Vivliostyleって何？　＞　Vivliostyle公式
Vivliostyle Themeって何？　＞　2024/05直近の解説記事

①node.jsを入れる

vivliostyle-theme-spellbook-5eはvivliostyle-cliから呼び出して使います。動作にNode.jsが必要なので、公式からインストーラーを入手してインストールします。

②プロジェクトを作る

Vivliostyleを使った本を出力するためのプロジェクトを半自動で準備してくれるツールがあるのでそれを使ってプロジェクトを作成します。

てきとうなフォルダの右クリックメニューから「ターミナルで開く」を選択し、コマンドプロンプトを立ち上げ、出てきた画面で以下のように打ち込んで新規プロジェクトを作成します。

npm create book {プロジェクト名}

• Description：本の説明　空欄でOK

• Author name：著者名　空欄でOK

• Author email：著者のメールアドレス　空欄でOK

• License：プロジェクトのライセンス　本をソースごと公開するのでなければ何でもいいです

• theme：上下キーで「@liarnose/vivliostyle-theme-spellbook-5e」を探して選択

ここまで進めると自動的にインストールが始まります。「🖋 Happy writing!」が表示されたらインストール完了。

③初回ビルド

コマンドプロンプト内で出来上がったプロジェクトのフォルダに移動します。エクスプローラーで開いて再度「ターミナルで開く」を選ぶか、「cd {プロジェクト名}」と入力しましょう。

現時点ではダミーの原稿データとして『吾輩は猫である』の冒頭が原稿に指定されています。動作確認としてはまずはこれをpdf化しましょう。以下のコマンドをコマンドプロンプトに打ち込みます。

npm run build

するとvivliostyle-cliが実行されます。次のようなpdfが出力されたら成功です。

吾輩は猫であるにゃーん

④テーマ用のサンプル原稿を入れる

このままだと実質ただのテキストファイルしかサンプルがないのでテーマ付属のサンプル原稿に差し替えます。
プロジェクトフォルダ内のviliostyle.config.jsファイルをtheme/@liarnose/vivliostyle-theme-spellbook-5e内のものに差し替え、同じくvivliostyle-theme-spellbook-5e内のexampleフォルダをプロジェクトフォルダ内に丸ごとコピーします。

この状態で再度「npm run build」を実行すると、出力されるpdfがこの記事のヘッダーのような内容に変わります。example/default.mdをテキストエディタで編集して再度ビルドすると編集内容がpdfにも反映されます。後は好きにしましょう。