VFM 1.0 リリース と 今後の展望 @akabekobeko CSS 組版 Vivliostyle ユーザーと開発者の集い 2021 秋

VFM 1.0 リリース VFM 1.0 リリースと今後の展望 2

VFM 1.0 リリース 2021/7/27 (JST) に VFM 1.0 をリリースしました！ リリース作業の関係でバージョンとしては v1.0.2 です 1.0 で対応した機能の詳細は以下を参照してください https://github.com/vivliostyle/vfm/milestone/2?closed=1 みなさまのご協力に感謝します！ VFM 1.0 リリースと今後の展望 3

VFM について 1.0 をリリースしたので VFM の役割や機能について改めて 解説します。 1. Markdown 2. VFM とは？ 3. VFM の代表的な機能 VFM 1.0 リリースと今後の展望 4

Markdown VFM 1.0 リリースと今後の展望 5

HTML Vivliostyle は Web 技術を利用して組版するシステムです。 そのため文書は HTML/CSS で記述することになります が、以下の課題があります。 HTML をきちんと書くのは難しい 最近のテキスト エディターはタグの入力補完など HTML を書くための補助機能が充実しています。 しかしそれでも HTML の厳密な仕様や記法の冗長さから、 直に文書を記述してゆくには厳しいです。 VFM 1.0 リリースと今後の展望 6

Markdown HTML が難しいのであれば 簡易記法を用意する 簡易記法で書かれたものを HTML に変換する 簡易記法を超えるものは HTML 直書きも可能 (オプション) こんな感じの仕組みがあるとよいですね。 そのために Markdown という記法が考案され、現在は広 く普及しています。 VFM 1.0 リリースと今後の展望 7

HTML と Markdown の比較 HTML <

>HTML HTML

> <

> 文章 文章

> <

> <
• > リスト リスト
>

> Markdown # # Markdown Markdown 文章 文章 - - リスト リスト VFM 1.0 リリースと今後の展望 8

VFM とは？ VFM 1.0 リリースと今後の展望 9

VFM とは？ Markdown にはいくつか方言があります。それらのうち現 在は CommonMark が実質標準で、それを拡張して広く普 及している GFM があります。 CommonMark https://commonmark.org/ GFM (GitHub Flavored Markdown) https://github.github.com/gfm/ VFM (Vivliostyle Flavored Markdown) は GFM を更に拡 張、より詳細な構造化や表現力の向上を目指すものです。 VFM 1.0 リリースと今後の展望 10

ツールとしての VFM VFM は Markdown 構文とコマンドライン ツール、ライブ ラリーの側面を持ちます。 VFM は Node.js 製のパッケージとして配布され、コマンド ラインまたは Node.js のプログラムからライブラリーとし て参照可能です。 @vivliostyle/vfm - npm https://www.npmjs.com/package/@vivliostyle/vfm VFM 1.0 リリースと今後の展望 11

ツールとしての VFM - 2 VFM のコマンドライン呼び出しは以下のようになります。 $ vfm sample.md $ vfm sample.md Markdown ファイルのパスまたは文字列を指定すると、そ れを HTML に変換した結果を出力します。 コマンドラインのリダイレクト機能 (Win/Mac/Linux 共通) を利用すれば HTML ファイルも生成可能。簡易な変換ツー ルとして便利です。 $ vfm sample.md > index.html $ vfm sample.md > index.html VFM 1.0 リリースと今後の展望 12

ライブラリーとしての VFM Node.js のライブラリーとして VFM を参照できます。 Vivliostyle CLI、Vivliostyle Pub はこの方法で Markdown を HTML 変換しています。 import import { { stringify stringify } } from from '@vivliostyle/vfm' '@vivliostyle/vfm'; ; console console. .log log( ( stringify stringify( (` ` # はじめに # はじめに {Vivliostyle| ビブリオスタイル} の世界へようこそ。 {Vivliostyle| ビブリオスタイル} の世界へようこそ。 ` `) ), , ) ); ; VFM 1.0 リリースと今後の展望 13

ライブラリーとしての VFM - 2 ライブラリーとして VFM が公開している機能は以下で す。通常は stringify を利用することになるでしょう。 関数 機能 stringify Markdown 文字列を HTML 文字列に変換する。 VFM unified https://github.com/unifiedjs/unified プラグ インとしての VFM を返す。 readMetadata Markdown から Frontmatter (後述) だけを解析。 詳細な制御用に VFM 、Vivliostyle CLI のように複数 Markdown を横断処理してメタデータから目次生成するな どのために readMetadata を提供しています。 VFM 1.0 リリースと今後の展望 14

VFM の代表的な 機能 (構文) VFM 1.0 リリースと今後の展望 15

VFM の代表的な機能 (構文) VFM の代表的な機能 (構文) の一部を紹介します。詳細や 他の機能については以下を参照してください。 Vivliostyle Flavored Markdown https://vivliostyle.github.io/vfm/#/vfm 前述のように VFM は GFM を更に拡張しているため、その 機能は標準で含まれています。 また HTML 埋め込みに対応しており、Markdown として 表現しきれないものは HTML で記述することも可能です。 VFM 1.0 リリースと今後の展望 16

Frontmatter 文書の情報を定義する機能です。Markdown の先頭へ YAML 形式で記述します。 --- --- title title: : " 文書のタイトル" " 文書のタイトル" --- --- 主に HTML の タグへ対応することを目的として います。ここへ定義するような情報はおおむね表現できま す。 と タグそのものの属性を定義すること も可能です。 VFM 1.0 リリースと今後の展望 17

Math 数式を定義する機能です。文中に MathJax 形式で記述しま す。 $x=\frac{a}{b}$ $x=\frac{a}{b}$ $$ $$ x=\frac{a}{b} x=\frac{a}{b} $$ $$ インライン数式 $...$ とディスプレイ数式 $$...$$ が あります。以下はディスプレイ数式を処理した分数の例。 x = a b VFM 1.0 リリースと今後の展望 18

Ruby 任意の文字へルビを割り当てる機能です。 {Ruby| ルビ} {Ruby| ルビ} {} で囲まれた | 区切りの左に対象の文字 (列)、右へルビ を記述します。この構文はでんでんマークダウンのグルー プルビを参考にしています。 電書ちゃんのでんでんマークダウン - でんでんマークダウン https://conv.denshochan.com/markdown#ruby 例えば「かいりょくらんしん 怪力乱神をかた 語らず」のようになります。 VFM 1.0 リリースと今後の展望 19

Sectionization 見出しをそのまま HTML 階層とする機能です。これは Pandoc の --section-divs を参考にしています。 # # Level 1 Level 1 ## ## Level 2 Level 2 ↑が↓となります。階層ごとのスタイル適用に便利です。 < > <

>Level 1 Level 1

> < > <

>Level 2 Level 2

> > > VFM 1.0 リリースと今後の展望 20

今後の展望 VFM 1.0 リリースと今後の展望 21

今後の展望 1.0 リリース後の展望として以下を検討しています。 日本語ドキュメント ドッグフーディング VFM v2.0 求ム！協力者！ ！ VFM 1.0 リリースと今後の展望 22

日本語ドキュメント VFM の公式資料は現時点で英語版のみです。より広く利用 していただくため日本語版の作成を検討中です。 なお 1.0 より少し前の内容にはなりますが、技術書典 11 で 頒布したユーザー会本 Vol.5 で日本語の解説記事を寄稿し ています。 Vivliostyle で本を作ろう https://vivliostyle.org/ja/make-books-with-vivliostyle/ VFM 1.0 リリースと今後の展望 23

ドッグフーディング ドッグフーディングとは自身の開発している製品を自らが ユーザーとして利用する試みを指します。 現在の Vivliostyle としては CLI や Pub などのソフトウェ ア、前述のユーザー会本となります。これをもっと拡大し てゆきたいです。とりあえず以下の Web サイト構築に VFM 導入を検討しています。 Vivliostyle 公式ページ https://vivliostyle.org/ Vivliostyle Flavored Markdown https://vivliostyle.github.io/vfm/#/vfm VFM 1.0 リリースと今後の展望 24

VFM 2.0 春イベントにて 1.0 は旧 remark ベースで実装 2.0 で remark 13 対応 ただし micromark ではなく unified/MDAST のみ対応 という方針を宣言しました。 しかしその後の調査で Markdown 構文間の連携と排他のた めに remark を利用するなら micromark 対応は必須である ことがわかりました。 VFM 1.0 リリースと今後の展望 25

VFM 2.0 micromark 対応は相当に厳しそうなので当面は旧 remark を利用した VFM 1.x を開発してゆく予定です。 remark 13 移行を想定して大きな機能は VFM 2.0 へ見送っ ていましたが 1.x 対応とするか迷っています。 remark/plugins.md https://github.com/remarkjs/remark/blob/main/doc/plugins.md remark プラグインでも公式以外、かつ構文連携と排他の必 要なものだと remark 13 移行を保留しているものが散見さ れますね... VFM 1.0 リリースと今後の展望 26

モト 求ム！サポーター 協力者！ ！ 現在の VFM 開発者は主に私一人です。 なんとか 1.0 リリースまでは漕ぎ着けました。しかし私は 他にもいくつか運用しているプロジェクトがあるため VFM へ割くリソースが足りません。そこで... モト 求ム！サポーター 協力者！ ！ 開発以外のドキュメント整備や利用レポートなども大歓迎！ 不足している情報やほしい資料などがあれば Twitter や Slack などで気軽に声をかけてください VFM 1.0 リリースと今後の展望 27

ご清聴 ありがとうございました！ VFM 1.0 リリースと今後の展望 28