1. はじめに
Asciidoctor Web PDFは、asciidoc形式のファイルをPDFに変換してくれます。
フォントもとりあえずでよければ、適当に選んでくれるみたいです。
処理系は javascriptです。
Asciidoctor PDF(ルビー版）で、表紙をカスタマイズするのは難しすぎるので、
Asciidoctor Web PDFを使用しました。
2. 準備
Node.jsは インストールされているとします。
https://github.com/Mogztter/asciidoctor-web-pdf
を参考に、とりあえずグローバルインストールします。
コマンドプロンプトなどから、次のコマンド実行します。
>npm i -g @asciidoctor/core asciidoctor-pdf
インストールを確認するために、バージョン確認してみます。
>asciidoctor-web-pdf --version
Asciidoctor Web PDF 1.0.0-alpha.14～～～
のようになればOKです。
3. すること
adocファイルに、
- 文書番号
- 表紙ロゴ
- プロジェクト名
- 部署 架空の会社
をアトリビュートとして設定し、表紙に出力します。
4. ファイルの準備
表紙に表示したいアトリビュートを登録したファイルを作成します。
= 表紙作成サンプル
// 文書番号
: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.
ファイルができたら次を実行します。
>asciidoctor-web-pdf book_cover.adoc
簡単にPDFが作成できます。
5. 表紙をレイアウトする
追加したアトリビュートは、自動で反映されないので、コンバータを追加して、アトリビュートを出力します。
Asciidoctor Web PDFのBookサンプルを修正して、コンバーター template_cover.js を作成します。
このコンバーターを使用すると、id="cover"の要素に、アトリビュートが追加されます。
https://github.com/Mogztter/asciidoctor-web-pdf/tree/main/examples/book
この辺のサンプルを使っています。
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を変更します。
: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
これらファイルを1つのフォルダにまとめて、次を実行します。
>asciidoctor-web-pdf ./book_cover.adoc --template-require ./template_cover.js
次の表紙になります。
実際に使うには、template_cover.jsでは簡単すぎるので、
https://github.com/Mogztter/asciidoctor-web-pdf/blob/main/lib/document/document-converter.js
あたりを参考に、実用レベルにしてください。