vivliostyle-2021-autumn

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 < <h1 h1> >HTML HTML</
</h1 h1> > < <p p> > 文章文章</ </p p> > < <ul ul> > < <li li> > リストリスト</ </li li> > </ </ul ul> > 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 の <head> タグへ対応することを目的としています。ここへ定義するような情報はおおむね表現できます。 <html> と <body> タグそのものの属性を定義することも可能です。 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 ↑が↓となります。階層ごとのスタイル適用に便利です。 < <section section id id= =" "level-1 level-1" " class class= =" "level1 level1" "> > < <h1 h1> >Level 1 Level 1</ </h1 h1> > < <section section id id= =" "level-2 level-2" " class class= =" "level2 level2" "> > < <h2 h2> >Level 2 Level 2</ </h2 h2> > </ </section section> > </ </section section> > 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

vivliostyle-2021-autumn

vivliostyle-2021-autumn

akabeko

More Decks by akabeko

Other Decks in Technology

Featured

Transcript

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

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

VFM 1.0 リリース 2021/7/27 (JST) に VFM 1.0 をリリースしました！リリース作業の関係でバージョンとしては

VFM について 1.0 をリリースしたので VFM の役割や機能について改めて解説します。 1. Markdown 2.

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

HTML Vivliostyle は Web 技術を利用して組版するシステムです。そのため文書は HTML/CSS で記述することになりますが、以下の課題があります。 HTML

Markdown HTML が難しいのであれば簡易記法を用意する簡易記法で書かれたものを HTML に変換する簡易記法を超えるものは HTML 直書きも可能

HTML と Markdown の比較 HTML < <h1 h1> >HTML HTML</

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

VFM とは？ Markdown にはいくつか方言があります。それらのうち現在は CommonMark が実質標準で、それを拡張して広く普及している GFM があります。

ツールとしての VFM VFM は Markdown 構文とコマンドラインツール、ライブラリーの側面を持ちます。 VFM は

ツールとしての VFM - 2 VFM のコマンドライン呼び出しは以下のようになります。 $ vfm sample.md $

ライブラリーとしての VFM Node.js のライブラリーとして VFM を参照できます。 Vivliostyle CLI、Vivliostyle Pub はこの方法で

ライブラリーとしての VFM - 2 ライブラリーとして VFM が公開している機能は以下です。通常は stringify を利用することになるでしょう。

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

VFM の代表的な機能 (構文) VFM の代表的な機能 (構文) の一部を紹介します。詳細や他の機能については以下を参照してください。 Vivliostyle Flavored

Frontmatter 文書の情報を定義する機能です。Markdown の先頭へ YAML 形式で記述します。 --- --- title title: :

Math 数式を定義する機能です。文中に MathJax 形式で記述します。 $x=\frac{a}{b}$ $x=\frac{a}{b}$ $$ $$ x=\frac{a}{b}

Ruby 任意の文字へルビを割り当てる機能です。 {Ruby| ルビ} {Ruby| ルビ} {} で囲まれた | 区切りの左に対象の文字

Sectionization 見出しをそのまま HTML 階層とする機能です。これは Pandoc の --section-divs を参考にしています。 # #

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

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

日本語ドキュメント VFM の公式資料は現時点で英語版のみです。より広く利用していただくため日本語版の作成を検討中です。なお 1.0 より少し前の内容にはなりますが、技術書典 11 で頒布したユーザー会本

ドッグフーディングドッグフーディングとは自身の開発している製品を自らがユーザーとして利用する試みを指します。現在の Vivliostyle としては CLI や Pub などのソフトウェ

VFM 2.0 春イベントにて 1.0 は旧 remark ベースで実装 2.0 で remark

VFM 2.0 micromark 対応は相当に厳しそうなので当面は旧 remark を利用した VFM 1.x を開発してゆく予定です。 remark

モト求ム！サポーター協力者！！現在の VFM 開発者は主に私一人です。なんとか 1.0 リリースまでは漕ぎ着けました。しかし私は

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