Markdownでプロフェッショナルな請求書を作る
請求書のような、プロフェッショナルで洗練された文書の作成は、企業にもフリーランスにもよくある必要です。こうした目的にはLaTeXやHTMLがよく使われますが、複雑で保守が面倒になりがちです。そこで登場するのが、汎用の文書変換ツールであるPandocと、軽量マークアップ言語のMarkdownです。この2つを組み合わせると、カスタマイズ可能な請求書テンプレートを作るための、シンプルかつ強力な方法になります。
この記事では、PandocのMarkdownのfenced divとCSSを使って、プロフェッショナルな請求書を作る方法を紹介します。また、この方法がLaTeXや完全なHTMLファイルと比べて、なぜ保守しやすく汎用性が高いのかについても掘り下げます。
請求書テンプレート
ChatGPTの助けを借りて作った請求書テンプレートです。この種の用途にはとてもうまく機能します。
# Invoice
**Invoice Number:** INV-0001
**Date:** YYYY-MM-DD
**Due Date:** YYYY-MM-DD
::: bill-to
## Bill To
**Name:** Customer Name
**Address:** Street Address
**City:** City
**State:** State
**ZIP:** Postal Code
**Country:** Country
**Email:** email@example.com
**Phone:** +00-000-0000
:::
::: ship-to
## Ship To
**Name:** Recipient Name
**Address:** Street Address
**City:** City
**State:** State
**ZIP:** Postal Code
**Country:** Country
:::
::: items
## Items
| Description | Quantity | Unit Price | Total |
|-------------------|----------|------------|------------|
| Item 1 | 5 | $10.00 | $50.00 |
| Item 2 | 2 | $20.00 | $40.00 |
| Item 3 | 1 | $30.00 | $30.00 |
| **Subtotal** | | | **$120.00**|
| **Tax** | | | **$12.00** |
| **Total** | | | **$132.00**|
:::
::: notes
## Notes
- Payment is due within 30 days from the date of the invoice.
- Please make checks payable to [Your Company Name].
- If you have any questions concerning this invoice, contact [Your Contact Information].
:::
---
Thank you for your business!
[Your Company Name]
[Your Street Address]
[Your City, State, ZIP]
[Your Phone Number]
[Your Email Address]
[Your Website]
<style>
body {
font-family: Arial, sans-serif;
}
.section {
margin-bottom: 20px;
}
.bill-to, .ship-to {
display: inline-block;
width: 48%;
}
.bill-to {
float: left;
}
.ship-to {
float: right;
}
.items::before {
content: "";
clear: both;
display: table;
}
.items {
margin-top: 10px;
}
.items table {
width: 100%;
border-collapse: collapse;
}
.items th, .items td {
border: 1px solid #000;
padding: 5px;
}
.notes {
font-style: italic;
}
@media print {
.bill-to, .ship-to {
width: 45%;
}
}
</style>
LLMへのプロンプト
何段階かに分けて進める必要があるかもしれませんが、次のプロンプトを目安として使えます。
“Create html invoice with css that can be printed, but only output markdown with pandoc fenced_divs and also output the css.”
仕組み
Pandocのfenced div
Pandocのfenced divを使うと、特定のクラスを持つブロックレベル要素を作れます。このテンプレートでは、bill-to、ship-to、items、notesなど、セクションごとに異なるクラスを使っています。このモジュール式の方法により、各セクションを別々に柔軟にスタイル設定できます。
Pandocのfenced divを理解する
fenced divは、Pandocの拡張Markdown構文の一部です。1つ以上の段落、見出し、リストなどのブロックレベル要素を、特定のクラスや識別子を持つコンテナで囲めます。文書の一部に特定のスタイルを適用したいときに特に便利です。
構文
fenced divの基本的な構文は次のとおりです。
::: class-name
Content inside the fenced div
:::
:::：このコロンでfenced divの始まりと終わりを示します。class-name：divに割り当てたいクラス名に置き換えます。
<div class="class-name">
<p>Content inside the fenced div</p>
</div>
使用例
fenced divを使って、特定のクラスを持つセクションを作る例です。
::: warning
## Warning!
This section contains important information.
:::
この例では、fenced divの中のコンテンツにwarningクラスが付与されます。CSSでこのクラスにスタイルを設定し、たとえば文字を赤くしたり、警告アイコンを付けたりできます。
<div class="warning">
<h2>Warning!</h2>
<p>This section contains important information.</p>
</div>
複数のクラスやIDを適用する
fenced divには、複数のクラスやIDを適用することもできます。構文は次のとおりです。
::: {#my-id .class1 .class2}
Content inside the fenced div
:::
#my-id：divにmy-idというIDを割り当てます。.class1 .class2：divにclass1とclass2というクラスを割り当てます。
<div id="my-id" class="class1 class2">
<p>Content inside the fenced div</p>
</div>
請求書テンプレートでの使い方
紹介した請求書テンプレートでは、bill-to、ship-to、items、notesといった個別のセクションを作るためにfenced divを使いました。セクションごとに異なるクラスを使うことで、それぞれに特定のスタイルを適用でき、レイアウトのデザインや保守が楽になります。
CSSによるスタイル設定
含まれているCSSは、レイアウトの調整、罫線のスタイル、印刷用のスタイルなど、請求書の見た目を整えます。これにより、請求書がプロフェッショナルに見え、そのまま印刷できる状態になります。
含まれている<style>タグには、レイアウトの調整、罫線のスタイル、印刷用のスタイルなど、請求書の見た目を整えるCSSが記述されています。ブランドやデザインの好みに合わせてカスタマイズできます。
- レイアウト：
bill-toとship-toのセクションは横に並べて表示されます。また、itemsセクションが正しく配置されるよう、クリアフィックスも追加しています。 - 表のスタイル： 品目の表には罫線と余白を付け、情報をすっきりと見せています。
- 印刷用スタイル：
@media printクエリーにより、印刷時にレイアウトが適切に調整されます。
なぜLaTeXや完全なHTMLではなくMarkdownを選ぶのか
シンプルさと読みやすさ
- Markdown： 人間が読みやすく、すっきりしています。
- LaTeX： 強力ですが複雑です。
- 完全なHTML： タグが入れ子になって扱いにくくなります。
保守性と柔軟性
- Markdown： コンテンツとスタイルが分離されていて、更新が簡単です。
- LaTeXと完全なHTML： 保守により多くの時間がかかります。
ほかの形式への変換のしやすさ
- Markdown＋Pandoc： HTMLやPDFへ手間なく変換できます。
HTMLへの変換
Pandocを使えば、このMarkdownファイルをHTMLなど、Pandocが対応するあらゆる形式に変換できます。MarkdownファイルをHTMLに変換する簡単なコマンドは次のとおりです。
pandoc -s your-invoice.md -o your-invoice.html
PDFへの変換
ブラウザーの印刷機能かPandocを使って、HTMLファイルをPDFに変換します。
pandoc your-invoice.html -o your-invoice.pdf
まとめ：汎用性の高い解決策
請求書テンプレートの作成にMarkdownとPandocを選ぶと、シンプルさ、保守性、柔軟性が得られます。LaTeXやHTMLに詳しくない人でも取り組みやすく、PDFを含むさまざまな形式に簡単に変換できます。
次に請求書を作る必要があるときは、ぜひPandocとMarkdownを試してみてください。プロフェッショナルでカスタマイズ可能な文書を作るための定番になるかもしれません。
インスピレーションをくれたTokyo Buildersの皆さんに感謝します。楽しい請求書作りを！