vivliostyle-2021-autumn

以下のイベントで akabeko が登壇した際の資料です。

CSS組版 Vivliostyle ユーザーと開発者の集い 2021秋 - connpass
https://vivliostyle.connpass.com/event/227954/?utm_campaign=recent_events&utm_source=feed&utm_medium=atom

Transcript

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

   View Slide

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

   View Slide

3. 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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. HTML と Markdown の比較
   HTML
   <
   h1>
   >HTML
   HTML
   h1>
   >
   
   
   
   <
   p>
   >
   文章
   文章
   p>
   >
   
   
   
   <
   ul>
   >
   
   
   
   <
   li>
   >
   リスト
   リスト
   li>
   >
   
   
   
   
   ul>
   >
   Markdown
   #
   # Markdown
   Markdown
   
   
   
   
   
   
   
   文章
   文章
   
   
   
   
   
   
   
   -
   -
   リスト
   リスト
   VFM 1.0 リリースと今後の展望 8
   

   View Slide

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

   View Slide

10. 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
    

    View Slide

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

    View Slide

12. ツールとしての 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
    

    View Slide

13. ライブラリーとしての 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
    

    View Slide

14. ライブラリーとしての 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. 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
    

    View Slide

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

    View Slide

20. Sectionization
    見出しをそのまま HTML 階層とする機能です。これは
    Pandoc の --section-divs
    を参考にしています。
    #
    # Level 1
    Level 1
    
    
    
    
    
    
    
    ##
    ## Level 2
    Level 2
    ↑が↓となります。階層ごとのスタイル適用に便利です。
    <
    section id
    id=
    ="
    "level-1
    level-1"
    " class
    class=
    ="
    "level1
    level1"
    ">
    >
    
    
    
    <
    h1>
    >Level 1
    Level 1
    h1>
    >
    <
    section id
    id=
    ="
    "level-2
    level-2"
    " class
    class=
    ="
    "level2
    level2"
    ">
    >
    
    
    
    <
    h2>
    >Level 2
    Level 2
    h2>
    >
    
    
    
    
    section>
    >
    
    
    
    
    section>
    >
    VFM 1.0 リリースと今後の展望 20
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. 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
    

    View Slide

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

    View Slide

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

    View Slide