忘備録

Vivliostyleで出版

Posted on by pasocafe00 / 0件のコメント

Vivliostyleの導入

公式のチュートリアルを参考にインストール〜初回の起動までを体験すると良いです。ちなみにNode.jsが必要になります。pasocafe00はMac版の下記をインストールしました。

  • Node.js（18.13.0 LTS）
  • ターミナル（コマンドプロンプト）
  • npmで create book スクリプトを実行
  • 本の名前などの入力、テーマの選択をして、雛形を作る
  • 本文ファイルを編集
  • npm run buildで初回変換（必要なファイルなどを自動ダウンロードしてコンパイルみたいなことをしてくれる）
  • npm run preview でプレビュー画面が表示
  • 以降、本文ファイルを編集するとプレビューが自動で更新される

Vivliostyleのカスタマイズ

参考

  • 書籍情報などの全体に関する設定は vivliostyle.config.js
  • テーマを編集する場合は @vivliostyle 以下から原本を theme フォルダにコピーして作成を始める
  • vivliostyle.config.js の thema で上記のパスを指定（例：./themes/theme-techbookValon）
  • cd themes/mytheme でテーマフォルダに移動して、npm run watch:scss でscssを監視対象に
    →エラーが出た
    →mythemeフォルダで npm install node-sass でインストールしたら動くようになった。これであっていたのか不明。
  • themes/mytheme/scss/theme_common.scss を好きに編集
    →反映されない
    →チュートリアルで作った manuscripts フォルダの中の themes フォルダを削除してから previewし直すと反映される。
    →ソースコードはprimsが使用されている。theme_common.scssの先頭にocodiaのスタイルシートが転記されているので、ここを自分の好きなdefaultのスタイルに置き換えた。本来はまっとうな設定方法があるが、よくわからないから強制改変した。
  • プレビューが更新されて確認できるよ

目次作成

章番号その１

章番号の表示の仕方がわからない

https://vivliostyle.github.io/themes/#/ja/tutorial/step3.md

採用しているtechbookのテーマでchapterやsectionと言った、番号を管理する変数が使用されている。所々でインクリメントの処理が書かれている。しかし、それを表示してみるとH1やH2、H4どれでもインクリメントされてしまい、章番号だけインクリメントできない。上記によると自分で変数を作ればできそうなので、自前で用意してみることにした。

または、下記を参考にtechbookのカウンターを修正するか

http://frog.raindrop.jp/knowledge/archives/002457.html

わかったこと

  • techbookにでインクリメントされていたsectionは挙動がおかしい
  • counter-incrementなどは同じクラスに１つ以上書くと挙動がおかしい

章番号その２（章番号と節項番号は別に定義する）

vivliostyleではcssのカウンターを利用しているが、複数ファイルを纏めて作成する場合はcssのカウンターでは対応できない。そのためvivliostyleの@pageなど@系列の定義に章番号定義し、その他の節や項番号は通常のタグに記述するそうだ。

@page :first { /* 全原稿ファイルの中で1枚目のページ */
  counter-reset: chapter;
}

@page :nth(1) { /* 各原稿ファイルの中で1枚目のページ */
  counter-increment: chapter;
}

body { /* 各原稿ファイル */
  counter-reset: section;
}

h1 {
  counter-increment: section;

  &::before {
    content: counter(chapter) "." counter(section) "章 ";
  }
}

本文の書き方（マークダウン）

プリントパックへの入稿で気をつけること

行頭に使用した絵文字🤩が、印刷できないとのことなので、画像化することにした。

（プリントパックの事前チェッカーでエラーが出る）

VivliostyleでPDF化（Windowsの絵文字の柄のほうが好きなのでWindowsでPDF化した）したあと、Edgeなどで開き、

  1. 印刷
  2. プリンター：Microsoft Print to PDFを選択
  3. その他設定
  4. 拡大/縮小：実際のサイズ
  5. ファイル名を指定して印刷

して出力したファイルを使用した。

プリントパックの事前チェッカーにかけると、エラーが無くなった。

参考：https://curio-shiki.com/blog/pc-tedukuri/pdf-outline-free#toc1

Scratchのキャプチャーについて

本を作成するにあたって、Scratchのブロックや作成したプログラムをキャプチャーする必要があるが、Scratchのブロック一覧や作成画面はグリッドとうっすらとした色がついている。ここを消すためにはCSSを開発タブから編集する必要がある。キーとなるクラスやIDは下記の通り

  • .blocklySvg
  • .blocklyFlyoutBackground
  • blocklyGridPattern666959931169824

フローチャートなどの図の作成について

アプリではなくWebサービスとして図が描けるものを選定。

draw.ioがシンプルかつ操作性が良好、VSCodeでも利用可能（プラグイン）ということで、draw.ioを採用！！

フォント

ヒラギノ角ゴを採用。draw.ioでは Hiragino Kaku Gothic Pro を指定すること。

配色

https://coolors.co/より

#264653, #2a9d8f, #e9c46a, #f4a261, #e76f51

コメントする