Asciidoctor Web PDFで表紙をつくってみた

# 1. はじめに

Asciidoctor Web PDFは、asciidoc形式のファイルをPDFに変換してくれます。
フォントもとりあえずでよければ、適当に選んでくれるみたいです。
処理系は javascriptです。

Asciidoctor PDF(ルビー版）で、表紙をカスタマイズするのは難しすぎるので、
Asciidoctor Web PDFを使用しました。

# 2. 準備

Node.jsは インストールされているとします。

https://github.com/Mogztter/asciidoctor-web-pdf
を参考に、とりあえずグローバルインストールします。

コマンドプロンプトなどから、次のコマンド実行します。

```console
>npm i -g @asciidoctor/core asciidoctor-pdf
```
インストールを確認するために、バージョン確認してみます。

```console
>asciidoctor-web-pdf --version
Asciidoctor Web PDF 1.0.0-alpha.14～～～
```
のようになればOKです。

# 3. すること


adocファイルに、

* 文書番号
* 表紙ロゴ
* プロジェクト名
* 部署 架空の会社

をアトリビュートとして設定し、表紙に出力します。

# 4. ファイルの準備


表紙に表示したいアトリビュートを登録したファイルを作成します。

```asciidoc:book_cover.adoc
= 表紙作成サンプル
// 文書番号
:doc-number: 12343-4698-AEEE
// 表紙ロゴ
:doc-logo: ./otosam.png
// プロジェクト名
:doc-project: 表紙作成規格プロジェクト
// 部署 架空の会社
:doc-division: オトサム本店営業部
// 日付 正規のアトリビュートがあると思うが、とりあえず作成
:doc-date: 2022/6/30
// 上記アトリビュートをレイアウトするcss まだない
:stylesheet: book_cover.css

== section1

this is section 1.

== section2

this is section 2.
```

ファイルができたら次を実行します。

```console
>asciidoctor-web-pdf book_cover.adoc
```

簡単にPDFが作成できます。

![adocCover_B96.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165394/6d184140-6f8b-929a-a6b2-e783c9476dc7.png)

# 5. 表紙をレイアウトする


追加したアトリビュートは、自動で反映されないので、コンバータを追加して、アトリビュートを出力します。

Asciidoctor Web PDFのBookサンプルを修正して、コンバーター template_cover.js を作成します。
このコンバーターを使用すると、id="cover"の要素に、アトリビュートが追加されます。
https://github.com/Mogztter/asciidoctor-web-pdf/tree/main/examples/book
この辺のサンプルを使っています。

```js:template_cover.js
module.exports = {
  paragraph: (node) => `<p class="${node.getRoles().join(' ')}">${node.getContent()}</p>`,

  section: (node) => `<section class="chapter">
<h2>${node.getTitle()}</h2>
${node.getContent()}
</section>`,

document: (node) => `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="./book_cover.css" rel="stylesheet">
</head>
<body>
<div id="cover" class="title-page front-matter">
        <h1>${node.getDocumentTitle()}</h1>
<div id="doc-number">No. ${node.getAttribute('doc-number')}</div>
<div id="doc-project">プロジェクト: ${node.getAttribute('doc-project')}</div>
<div id="doc-date"> ${node.getAttribute('doc-date')}</div>
<img id="doc-logo" src=${node.getAttribute('doc-logo')} />
<div id="doc-division">担当部署: ${node.getAttribute('doc-division')}</div>        
</div>
${node.getContent()}
</body>`,
}
```

つぎに、サンプルの cssを変更します。

```css:book_cover.css
:root {
    --main-document-sizeX: 200mm;
    --main-document-sizeY: 290mm;
    --right-offset: 70mm;
}

@page {
  size:var(--main-document-sizeX) var(--main-document-sizeY);
  margin: 15mm 10mm 15mm 10mm;
}

body {
  font-family: 'Old Standard TT', serif;
}

#cover {
  padding-top: 40%;
}

#cover h1, h2 {
  text-align: center;
}

.chapter, .sect1 {
  page-break-before: always;
}

#doc-project {
    position:  absolute;
    padding:  0mm;
    left: 0mm;
    top: 8mm;
}

#doc-number {
    position:  absolute;
    padding:  0mm;
    left: calc(var(--main-document-sizeX) - var(--right-offset));
    top: 8mm;
}

#doc-date {
    position:  absolute;
    padding:  0mm;
    top: 0mm;
    left: calc(var(--main-document-sizeX) - var(--right-offset));
}

#doc-logo {
    position:  absolute;
    height: 10mm;
    left: 100mm;
    top: 170mm;
  }
 
#doc-division {
    position:  absolute;
    left: 100mm;
    top: 185mm;
}
```

架空の会社のロゴを準備します。
otosam.png
![logo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165394/2520bcaa-9b46-2bea-822b-35a77c5c76ad.png)


これらファイルを1つのフォルダにまとめて、次を実行します。

```console
>asciidoctor-web-pdf ./book_cover.adoc --template-require ./template_cover.js
```

次の表紙になります。

![adocCover_B222.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/165394/2ba348f5-39d4-bfdb-a572-4b1ad84e63ff.png)

実際に使うには、template_cover.jsでは簡単すぎるので、
https://github.com/Mogztter/asciidoctor-web-pdf/blob/main/lib/document/document-converter.js
あたりを参考に、実用レベルにしてください。