Hugoテーマ「viBook」を使ったCSS組版（後編）

[Hugoテーマ「viBook」を使ったCSS組版（前編）](https://qiita.com/shunito/items/6a628d993cce3cd55b65)へ

前半ではHugoとviBookテーマの初期設定と基本的な使い方を説明したので、未読の方は参照を。
後半では、CSS組版向けの設定とPDF出力について。

## フォントの設定
CSS組版ならやはりフォントに凝りたいところかと思う。
方法は通常のWebフォントでのCSS設定と同じなので、フォントをダウンロードしてCSSに記述することで好きなフォントを利用できる。（ただしライセンスには気をつけよう）

テーマの組み込みCSSでは以下SCSSにフォントの@font-face記述がある。
標準では[源ノ角ゴシック](https://github.com/adobe-fonts/source-han-sans/blob/master/README-JP.md)と[源ノ明朝](https://github.com/adobe-fonts/source-han-serif/blob/master/README-JP.md)、ソースコード用に[源ノ角ゴシック Code ](https://github.com/adobe-fonts/source-han-code-jp)を使うための記述がしてあるが、フォント本体はテーマに同梱していない。

```
~themes/vibook/assets/css/_typography.scss
```

各々フォントをダウンロードしたら、以下に配置する。

```
~themes/vibook/static/css/fonts
```

CSSに記述するフォントのパスは、記述されている源ノ角ゴシックなどの例を参考にしてほしい。

## Markdownの変換カスタマイズ
Hugoの組み込みMarkdown変換は、[Blackfriday](https://github.com/russross/blackfriday)が利用されている。
config.tomlに設定を記述することで変換オプションを設定できるので、必要に応じ[Configure Blackfriday](https://gohugo.io/getting-started/configuration/#configure-blackfriday)を参照して調整してほしい。

なおviBookテーマのサンプルでは、```hardLineBreak``` を有効にしている。（でんでんマークダウンリスペクト）

## Hugo PipesとCSSでの装飾
HugoのExtended版を利用している場合、標準でSCSSによるアセットパイプライン機能が利用できる。
以下がviBookで準備しているアセットであるので、好きに改変してみてほしい。

```
~themes/vibook/assets/css/
```
通常のページと目次には```book.scss```とconfigの```pageProgressionDirection```の設定により```book-ltr.scss```か```book-rtl.scss```が読み込まれる。ltrとrtlは、ページ送りの方向により調整したい項目が出てきた時に利用しようと思って準備したものだが、現在のところ空である。
カバーページには```cover.scss```が読み込まれる。

読み込むCSSそのものの設定を変更したい場合には、以下をみると良いだろう。

```
~themes/vibook/layouts/partials/head.html
```

Shortcodesのsectionにより、部分的なスタイル適用が格段に楽になっていると思う。サンプルサイトの```00_ frontmatter.md```に利用例があるので使ってみてほしい。

なお、CSSの拡張はできるだけ```_style.scss```の編集を推奨する。
今後、viBookのアップデートに合わせそれ以外のスタイルは更新される可能性があるが、上記についてはユーザの拡張用の位置付けであるためである。

## VivliostyleでのPDF出力

PDFを作成するには、Chromeの印刷メニューから、送信先を「PDFに保存」にします。
その際、余白を「なし」に、オプション「背景のグラフィック」にチェックを入れます。

![スクリーンショット 2019-02-11 17.42.35.png](https://qiita-image-store.s3.amazonaws.com/0/2827/5d18cf8b-d5e1-32c4-29d4-7f8160f11e8d.png)

プレビューで問題なさそうなら「保存」を押してファイルを保存してください。

### 目次のページ数反映について

VivliostyleのCSS組版機能のひとつ、目次の自動ページカウントを有効にするには、設定の「Render All Pages」にチェックを入れます。

![vivSetting01.png](https://qiita-image-store.s3.amazonaws.com/0/2827/c8228831-4212-f7ec-980e-c15ea33f9121.png)

設定すると、目次ページの下に表示されるページ番号が正しくカウントされて「??」から数字に置き換わります。ページ数が多いとちょっとレンダリングに時間がかかりますので、最後にまとめてPDF化するときだけ有効にしても良いかもしれません。

### 印刷用PDFにするには
まずは、トップスタジオ武藤さんによる以下資料を読みましょう。

<a href="//www.slideshare.net/kenshimuto/css-103680329" title="入稿ヨシ、ご安全に！ CSS組版による商業書籍制作の理想と現実" target="_blank">入稿ヨシ、ご安全に！ CSS組版による商業書籍制作の理想と現実</a> </strong> from <strong><a href="https://www.slideshare.net/kenshimuto" target="_blank">Kenshi Muto</a></strong>


読みましたね？
はい、特に補足することはありません。。

ちなみに[Creative Cloud単体プラン](https://www.adobe.com/jp/creativecloud/compareplans.html)は現在2,180円/月。試用版もありますが、インデザだけ単月で使ってもいいんですよ？
下手にいろいろ試行錯誤して研究の結果、素直にお支払いした方がよいこともあると理解できるころには、上記金額がお安く見えてくることでしょう。。（経験者談）

## EPUB出力
まだ道半ばです。
Hugoで静的なファイルを出力するには単に```hugo```とコマンドを打つだけです。これにより、```public```フォルダに変換されたHTMLやCSS、画像類がまとめて出力されます。OPFも出力されますが、現状では必要なメタデータやアイテムなどが含まれていないので、まだまだ手間がかかります。

それ以上の問題として、EPUBには必要のないサイトマップなどのXMLやHugoの標準機能であるtagsやcategoriesのファイル、Vivliostyleのビューワー類も出力されてしまいます。

EPUB生成用のコマンドを別途準備した方がよさそう。どうせならGoで書こうかな.
→[Goならわかるシステムプログラミング](https://www.lambdanote.com/products/go)

## まとめ的なもの
- HugoとVivliostyleを使うと本の体裁のPDFが気軽に作れる。
- Hugoの機能を活用することで、素のMarkdownより拡張性があり、classつけたりしやすい。（独自記法が入ることでポータブルではなくなっちゃいますが）
- 印刷用PDFにしたり、EPUBにしたりを一発でというのはまだ道半ば。
- 文体がバラバラなのは仕様である。

Hugoでまだ利用していない[Data機能](https://gohugo.io/templates/data-templates/)やtag、categoryなども活用すればさらに応用は広がると思います。
面白い使い方を思いついた方はぜひ教えてください。