ゼロからVivliostyleでレポートを書くまで ①環境構築編
カスタマイズ編はこちら。
背景・目的
Markdownでいい感じのレポートを書きたい
普段からMarkdownを使って資料を作成したりメモを書いたりしている。
論文のようなちゃんとしたレポートをMarkdownで書けるフレームワークはないか探していたところ、Vivliostyle — 楽しく CSS 組版！ を発見。
Markdown記法で書けるが、Node.js/HTML/CSSも使うらしい。
HTML/CSSは若干触ったことがあるくらいだが、これを機にチャレンジしてみる。
環境構築
公式のチュートリアルがあるので、この通りにやってみる。
Node.jsのインストール
まずNode.jsって何？普通のJavaScriptと何が違うの？
参考
上記記事から、
- 普通のJavaScriptはブラウザ上でしか動かない
- Node.jsはデスクトップOS上で動くようなJavaScript派生
だと解釈。
内部ではChromiumのV8 JavaScriptエンジンが動いているらしい。
有名所だと、VSCodeはElectronと呼ばれるNode.jsのデスクトップアプリ開発フレームワークで作られている。
インストール実行
ここからインストーラをダウンロードしてインストール。
執筆時点のNode.js LTS最新版は16.17.0だったが、筆者環境では以前インストールしてあり（全く覚えていない）、16.16.0が入っていたのでこれを使っていく。
インストーラーの設定は何も変更せずNextを押していくだけ。
ちなみに、LTSはLong Term Supportの略で長期サポートが約束されているバージョン。
どんなソフトでもそうだが、基本的に一番の最新版よりもLTSの最新版を使ったほうが良い。
インストール確認
Node.jsのインストールが終われば、Node.jsのインタープリターであるnode.exeへのPATHが通っているはず。
PowerShellを起動し、node -vと入力してバージョン名が出てくればOK。
VSCodeのインストール
この記事を読んでいる方々はVSCodeを知っていると思う＆ググれば大量に出てくるので、具体的なインストール方法については割愛。
拡張機能は最低限以下のものを入れておくと良いかも。
- Markdown Preview Enhanced
- Markdown All in One
- Paste Image
サンプルレポート作成
ここから公式チュートリアル②に進む。
PowerShellで以下のコマンドを実行。
初回はcreate-bookというパッケージのインストールが求められる。
ここでは、mybookという名前のレポートを書くことにする。
npm create book mybook
突然出てきたnpmって何？
Node.jsのパッケージマネージャのこと。
Pythonでいうpip。
npmコマンドを使うことで、パッケージを簡単にインストールしたり今回のようなカスタムコマンドを実行したりできる。
npm = Node Package Manager の略かと思ったが、そうでもないらしい。
参考
まあパッケージマネージャであることには変わりない。
レポート情報の入力
Descriptionなどの情報を以下のように入力する。
今回はアカデミックテーマを用い、微調整を加えていく。
Happy writing!と表示されれば作成完了。
サンプルPDFの作成
mybook作成後、以下のコマンドを実行。
VSCodeでmybookフォルダが開かれる。
cd mybook
code .
VSCodeが開けたら、Ctrl + @でVSCode内でターミナル(PowerShell)を開く。
ターミナルで以下のコマンドを実行。
npm run build
以下の表示が出ればビルドが完了。
同じ階層にあるmanuscript.mdからmybook.pdfが作成されている。
manuscript.mdを開くと、通常のMarkdownでは見ない記法がある。
# {吾輩|わがはい}は猫である。
{吾輩|わがはい}は猫である。名前はまだ無い。
Vivliostyleで使われているMarkdownはVFM(Vivliostyle Flavored Markdown)と呼ばれる拡張されたMarkdown。
上記の例では語句にふりがなを振ることができる。
別のサンプルのビルド
とりあえずPDFが出力できたが、レポートとしてはあまり良い例ではないので、別の例も見てみる。
先程ビルドした際に、themesというフォルダが新しくできている。
その中の、themes/packages/@vivliostyle/theme-academic/example/microcomputer.mdを、mybookフォルダにコピーしてくる。
次に、mybook/vivliostyle.config.jsを編集する。
このファイルの編集によって、タイトルやテーマ、mdファイルの追加などが行える。
ここでは、entryにmicrocomputer.mdを追加する。
再度ビルドコマンドを実行すると、PDFが以下のように更新される。
ビルドの最中にA network error occurred.と出ているのが不穏だが、PDFには特に問題なさそうなので、見なかったことにする。
ビルドコマンドの他に次のコマンドを実行すればChromiumが起動し、MarkdownやCSSの変更をリアルタイムで反映させることができる。
npm run preview
まとめ
Vivliostyleでいい感じのレポートが作成できそうなことがわかった。
次回はテーマをカスタムして、更に見やすいレポートに仕上げていく。
カスタマイズ編
参考文献
Discussion