📄
Asciidoctorで仕様書らしく体裁を整える方法
この記事について
この記事では Asciidoctor が出力するHTMLファイルの体裁をCSSを使って仕様書らしく整える方法について紹介します。
おおまかな手順
おおまかな手順を下記に示します。
- Asciidoctorのインストール
- コーディングの準備
- コーディング
- HTMLファイルの出力
- 動作確認
Asciidoctorのインストール
Asciidoctorをインストールする手順については AsciidoctorのInstallationセクション で詳しく説明されています。macOSの場合は下記のコマンドでインストールが可能です。
brew install asciidoctor
コーディングの準備
下記のコマンドを実行してコーディングの準備をします。
mkdir asciidoctor-requirement
cd asciidoctor-requirement
touch requirement.adoc
touch style.css
コーディング
requirement.adoc
エディタでrequirement.adocを開いて下記の内容を入力します。
style.css
続いてエディタでstyle.cssを開いて下記の内容を入力します。
HTMLファイルの出力
下記のコマンドを実行してHTMLファイルを出力します。
asciidoctor -a stylesheet=style.css -o dist/requirement.html requirement.adoc
動作確認
下記のコマンドを実行するなどして出力されたHTMLファイルを開きます。
open dist/requirement.html
ブラウザの印刷機能を利用すればPDF出力も可能です。Firefox はフッターにページ番号とページ総数を表示する機能を備えているのでおすすめです。
おわりに
Asciidoctorでは図表に番号やキャプションを入れられるなど細かい部分で「あ、嬉しい！」と感じることが多いです。シンプルなMarkdownも素晴らしいですが文書作成には多機能なAsciidoctorの方が適しているように感じます。
別の記事で Puppeteerでスクリーンショットを撮影する方法 を紹介しており、要件定義書に画面例を掲載したい時などにスクリーンショット撮影を自動化するのに役立ちます。興味がありましたら併せてご覧いただければ幸いです。
この記事がWordで仕様書を書くことにもう疲れた方のお役に立てれば幸いです。最後まで読んでいただきありがとうございました！
Discussion