Vivliostyle

Vivliostyle CLI v10リリース！ createコマンド統合で本作りがよりスムーズに

2025-12-21T00:00:00+09:00

CSS組版のエコシステムを支えるコマンドラインツール、Vivliostyle CLI。その最新メジャーバージョンとなるv10が正式にリリースされました！

今回のアップデートは、これまで周辺ツールとして提供されていたcreate-bookを本体に統合し、ユーザー体験をよりシームレスにすること、そしてプロ仕様の細かな制御を可能にすることに主眼が置かれています。

本記事では、v10で導入された主要な変更点と、それがユーザーの皆様の「本作り」をどう変えるのか、その詳細をご紹介します。

1. `create-book`がCLI本体に統合。`create`コマンドで即座にプロジェクトを開始

これまで、Vivliostyleで新しい本（プロジェクト）を作り始める際、プロジェクトの雛形作成ツールであるcreate-bookを別途利用されていた方も多いかと思います。

v10では、このcreate-bookの機能がVivliostyle CLI本体に完全に統合されました。

これにより、外部ツールを意識することなく、Vivliostyle CLIの標準機能として、対話形式でのプロジェクト作成が行えるようになりました。

迷わずスタートできる対話型インターフェース

使い方はこれまで以上にシンプルです。ターミナルで以下のコマンドを入力するだけで、おなじみのセットアップウィザードが起動します。

# まずVivliostyle CLIをインストール（管理者権限が必要な場合があります）
npm install -g @vivliostyle/cli

# その後、createコマンドを実行
vivliostyle create

また、以下ではVivliostyle CLIをインストールせずcreateコマンドが実行可能です。

npm create book@latest

コマンドを実行すると、英語による対話形式でいくつかの質問が表示されます。それらに答えていけば、必要なファイル一式が揃ったディレクトリが自動生成されます。

これまで独立していた機能がvivliostyle createとして一本化されたことで、インストールからプロジェクト作成までの動線が整理され、これからVivliostyleを使い始める方にとっても、より分かりやすく、迷いのない体験を提供できるようになりました。

2. PDF出力エンジンの選択肢が大幅に進化

Vivliostyle CLIの核心機能である「PDF出力」。これはバックグラウンドでブラウザ（Headless Browser）を動かし、レンダリング結果を印刷することで実現していますが、今回のアップデートでこのブラウザ制御機能が刷新されました。

ブラウザの種類だけでなく「バージョン」まで指定可能に

今回のアップデートにより、新たに使用するブラウザとしてChrome / Chromium / Firefoxを切り替えることが可能になりました。しかし、それだけではありません、ブラウザの「バージョン」まで指定できるようになりました。

これは、業務でドキュメント生成を自動化しているユーザーにとって非常に重要な機能です。

ブラウザの組版エンジンンは日々進化していますが、稀に「最新版のブラウザだと、今まで通りのレイアウトが崩れてしまう」というケースが発生します。今回のアップデートにより、設定ファイル（vivliostyle.config.js）やコマンドオプションで厳密にバージョンを指定できるようになりました。

// vivliostyle.config.js の例
module.exports = {
  // ...
  browser: 'chrome@143.0.7499.42', // 特定のバージョンを固定
  // ...
};

3. v10におけるその他の改善

v10.0のリリース後、開発チームはユーザーからのフィードバックを元に細かなバグ修正と機能改善を行ってきました。そして今回リリースされたv10.1は、それらの修正を含んだ「安定版（Stable）」となります。

特に、組版の品質と開発環境に関わる以下の重要なアップデートが含まれています。

全OSで自動ハイフネーションが利用可能に これまでOS環境によっては効かなかったhyphens: auto（CSSによる自動ハイフネーション）が、Windows、Mac、Linuxすべての環境で正しく機能するようになりました。これにより、欧文混じりのテキストにおいて、より美しい改行位置が自動的に計算されます。
Node.jsサポートバージョンの更新 サポートされるNode.jsのバージョンが20または22以上に変更されました。最新のJavaScriptランタイム環境に合わせて最適化が行われています。

これらの変更は、GitHub上の多くのIssueやPull Requestでの議論を経て実装されました。開発にご協力いただいたコミュニティの皆様、Issue報告をいただいた皆様に、この場を借りて深く感謝申し上げます。

さあ、新しいVivliostyle CLIを体験しましょう

機能統合によりさらに使いやすくなったcreateコマンド、そしてプロフェッショナルな要求に応える堅牢なブラウザ制御機能。進化したVivliostyle CLIを、ぜひあなたの本作りにお役立てください。

アップデート方法

npmを使用している場合、以下のコマンドで最新版にアップデートできます。

npm install -g @vivliostyle/cli

（プロジェクトローカルにインストールしている場合は、各プロジェクトのpackage.jsonを更新してください）

NLnetからの助成金を獲得

2025-07-07T00:00:00+09:00

はじめに

2024年11月、私たちはNLnet財団（以下、同財団）による助成金「NGI0コモンズ基金」に応募することにしました。同財団はオープンな情報社会の実現に貢献する組織や個人を支援する、オランダを拠点とする公益団体です。約半年の審査をへて2025年6月、とても幸運なことに私たちは採択通知を受け取ることができました。

今回の助成が意味すること

同財団の助成により、私たちは以下のような作業に集中することができます。

Vivliostyle.js
- 最新のCSS仕様のサポート
- ページと段の区切り処理の改善
- 脚注処理の改善
Vivliostyle Pub
- エディターでの簡易WYSIWYG表示
- テーマの編集
Vivliostyle CLI 他
- Chromium 以外のブラウザへの対応
- 組版サンプルとテーマの充実
ドキュメントの改善と充実

NLnet財団とNGI0コモンズ基金

1982年、オランダ、デンマーク、スウェーデン、イギリスのネットワークを相互接続するヨーロッパ初の通信網、EUnet（European Unix Network）が開設されました。このうちオランダ部分のネットワークを「NLnet」と呼びました。その後NLnetの管理は、オランダのUNIXユーザーグループNLUUG（Netherlands UNIX User Group）が担うことになります。

1989年、NLUUGは非営利のNLnet財団を設立し、さらに1994年、同財団は爆発的とも言えるインターネット網の拡大を背景に、インターネットサービスとバックボーンの提供に特化した商業インターネットプロバイダーNLnet Holding BVを設立し、同社は順調に業績を伸ばしていきます。

この後、1997年にNLnet Holding BVはUUNET（米国ワールドコムの子会社）に売却されて同財団の手を離れます。これ以降、同財団はオープンソースソフトウェアの普及やインターネットユーザーのプライバシーやセキュリティを支援する公益団体として精力的な活動をつづけています。

NLnet Foundation - History

一方、NGI0コモンズ基金は欧州委員会の次世代インターネット・イニシアチブの一環として設立された助成金プログラムです。この基金の目的は、インターネットの公共性、プライバシー、セキュリティを向上させるためのオープンソース技術プロジェクトの支援であり、その運営と資金配分を担当しているのが同財団です。

NGI Zero Commons Fund

このように、黎明期からインターネット及びオープンソースをサポートしてきた同財団、そして欧州連合（EU）の行政を担う欧州委員会が出資するNGI0コモンズ基金から助成を得たことを、私たちはとても名誉に感じています。

私たちは、これまで以上にインターネット標準やオープンソースコミュニティに寄与していかなければならない、そのように決意を新たにしているところです。どうかこれからもVivliostyleの活動を見守ってください。

GigaViewer for AppsにVivliostyle.jsが採用されました

2024-04-30T00:00:00+09:00

株式会社はてなは今年3月29日、自社のマンガビューワ「GigaViewer for Apps」が、「少年ジャンプ＋」（株式会社集英社）のアプリ版に採用されたことを発表しました。

はてなのアプリ専用マンガビューワを集英社が採用。2,700万ダウンロードを超える「少年ジャンプ＋」に提供開始（2024-03-29）

これにともない「GigaViewer for Apps」に組み込まれた小説用ビューワのレイアウトエンジンとして、Vivliostyle.jsが採用されたことをお知らせします。

もしかしたら、「なぜマンガアプリにVivliostyleが？」と不思議に思われる方もいるかもしれません。じつは集英社はマンガ作品のノベライズにも力を入れており、「少年ジャンプ＋」もたくさんの小説を掲載しています。

そうした小説を読みやすく組版するために選ばれたのが、Vivliostyle.jsというわけです。開発にあたって株式会社はてなは、まずBronze Sponsorとして私達をサポートすることを決めました。

「NARUTO—ナルト—暁秘伝咲き乱れる悪の華」
（©岸本斉史・十和田シン／集英社）

その上で、「GigaViewer for Apps」の小説用ビューワ用に、Vivliostyle.jsのモジュールであるVivliostyle Coreを文字組版用のレイアウトエンジンとして組み込みました。その開発にあたっては、同社からの技術的な質問に答える形で、なんどか私達もサポートさせていただいています。

「GigaViewer for Apps」はAGPLライセンスに従ってVivliostyle.jsを利用しています。たとえばソースコードの入手方法は、下記の手順により確認できる「オープンソース」の項目をご覧ください。

アプリ起動＞マイページ＞ギアマークをタップ＞著作権について＞オープンソース

今回の株式会社はてなとの提携によって、Vivliostyle.jsが「少年ジャンプ＋」という偉大な舞台を支える役割をいただいたことを、私達はとても栄誉に感じています。これから「GigaViewer for Apps」が、たくさんのアプリで使われるようになることを願ってやみません。

「Vivliostyle ユーザーと開発者の集い 2023春」開催報告

2023-06-16T00:00:00+09:00

CSS組版 Vivliostyle ユーザーと開発者の集い 2023春

当日のプログラムと動画へのリンク

第1部ユーザーからの報告
- 13:00-13:10（10分）（小形克宏）：本日の趣旨説明（movie）
- 13:10-13:40（30分）（藤井大洋）：VS Codeで使うVivliostyle（movie）
- 13:40-14:10（30分）（大津雄一郎）：『Vivliostyle CSS組版入門』刊行記念　もっと紙面であそぼう！（slide, movie）
- 14:10-14:15（5分）休憩
第2部 Vivliostyleからの報告
- 14:15-14:45（30分）（小形克宏）：Vivliostyleで旅行エッセイを共同編集／オンデマンド印刷（slide, movie）
- 14:45-15:15（30分）（緑豆はるさめ）：Vivliostyle CLIのアップデートと新しいVivliostyle Themes（slide, movie）
- 15:15-15:45（30分）（村上真雄）：Vivliostyle.jsの最新の進化（slide, movie）
- 15:45-15:50（5分）休憩
第3部ディスカッション
- 15:50-16:30（40分）5月開発者会議（movie）
- 16:30-16:40（10分）クロージング（村上真雄）（movie）

それぞれの発表の概要

VS Codeで使うVivliostyle（藤井大洋）：藤井さんはSF作家であるだけでなく、VS Codeで小説を執筆する機能拡張novel-writerの作者でもあります。今回はその紹介に加え、Vivliostyleを使ってMarkdownからPandockを使ってEPUBとPDFを作る方法について、操作画面を交えて説明していただきました。
『Vivliostyle CSS組版入門』刊行記念　もっと紙面であそぼう！（大津雄一郎）：絶賛発売中のVivliostyle解説本の著者が、「CSS 組版でこんなことができる」をテーマに、実際のCSSのコードや画面を見せながら紹介してくれました。
Vivliostyleで旅行エッセイを共同編集／オンデマンド印刷（小形克宏）：プライベートな世界旅行を撮影したカラーアルバムをVivliostyleで書籍化し印刷しました。そこで浮かび上がったVivliostylejsの課題として、OSにより出力結果が異なる問題を説明しました（なお、後日の検証により回避方法が報告され、現在は解決済みです）。　
Vivliostyle CLIのアップデートと新しいVivliostyle Themes（緑豆はるさめ）：これまでVivliostyleの課題だったCSSのカスタマイズしにくさを解決するため、Vivliostyle CLIとThemesを大改造したコミッターが、自らその詳細な内容を解説しました。
Vivliostyle.jsの最新の進化（村上真雄）：イベントの最後として村上代表が、ここまで報告された成果や課題を整理、これからVivliostyleはどういう方向に進むのか、その開発予定を報告しました。
5月開発者会議：この日出された論点を材料に、今後のVivliostyleの課題について登壇者とコミッターが議論しました。

Vivliostyleの解説本が発売！

2023-05-10T00:00:00+09:00

「CSS組版でここまでできる！」実践的な入門書

Vivliostyleを解説した初めての書籍『Web技術で本が作れる CSS組版Vivliostyle入門』が商業出版されました（電子書店へのリンクは文末にあります）。著者はITに強い編集プロダクション、リブロワークスの大津雄一郎さん。大津さんには、これまで何回も私達のイベント「Vivliostyle ユーザーと開発者の集い」に登壇していただきました。

なかでも商業出版『そろそろ常識？マンガでわかる「正規表現」』の制作を見ていただくとよく分かるのですが、「CSS組版でここまでできる！」ということをやってのけるのが大津さんです。商業出版本のページデザインをCSS組版で実現してきた達人による解説本ですから、実践テクニックを学ぶのに最適です。まず目次を見てみましょう。

1章 VivliostyleとCSS組版
- 1節 CSS組版ってどんなもの？
- 2節 Vivliostyleってどんなもの？
- 3節 Vivliostyleを導入する
2章 CSS組版ハンズオン
- 1節大まかな紙面を設計する
- 2節フォントを設定する
- 3節見出しのスタイルと改ページ調整
- 4節紙面上の要素を細かく調整する
- 5節 PDFを書き出す
3章 MarkdownとVFM
- 1節 Markdownは難しくない！
- 2節 Markdownの書き方
- 3節 HTMLや数式を混ぜて書く
- 4節知っておくと便利な原稿執筆Tips
4章 Vivliostyle CLI
- 1節複数のファイルを連結する
- 2節 Vivliostyle CLIのさまざまな機能
5章 CSS組版テクニック集
- 1節まずはここから！　必須の基本技
- 2節難易度中！　ちょっと高度なテクニック
- 3節難易度高め！　いろいろ組み合わせた複合技
6章入稿データを作る
- 1節印刷のための最低限の基礎知識
- 2節 Vivliostyleのみを利用した入稿
- 3節 DTPソフトを組み合わせた入稿
7章 Vivliostyle Pub
- 1節 Vivliostyle Pubの概要

最初に1章でCSS組版やそれを実現するVivliostyleについて概説した後、2章でCSS組版用のCSS、そして第3章ではVivliostyleのMarkdown（Vivliostyle Flavored Markdown）を実際に書いていきます。つまりここまでを読み進めていけば、手取り足取りMarkdownとCSS組版による本作りを教えてもらえるのです。

CSS組版ならではの実践テクニックを惜しげもなく公開

しかし、本書の真骨頂と言えるのは、やはりCSS組版の達人の本領が発揮される第5章、第6章でしょう。CSS組版でここまでできるのかということに感動の連続です。

入れ子の見出し番号、ぶら下げインデント、行取りで配置
辞書などで使われるツメ（サイドインデックス）を章ごとにずらして配置
伸縮自在の画像コラム枠を生成
インラインSVG画像をページ内の任意の座標に配置
CSS Gridを使った奥付の組み方
任意の場所・スペースに会話文の吹き出しを生成
凝ったデザインの目次を生成する
背景などを裁ち落とし領域にはみ出させる
後注、脚注、側注の生成

キリがないのでこの辺にしておきますが、こうしたCSS組版ならではのテクニックを惜しげもなく公開しているのが、本書の最大の魅力と言えます。

なお、来たる5月28日に開催予定「Vivliostyle ユーザーと開発者の集い 2023春」では、大津さんが本書の宣伝を兼ねてCSS組版テクニックを公開していただく予定ですので、どうかご参加ください。また、リブロワークスの下記ページで本書の紹介やサンプルページが公開されています。

【出版DXを実現する本！】『Web技術で「本」が作れる　CSS組版Vivliostyle入門』

本書は下記をはじめとした電子書店などで発売中です。ぜひお買い求めください！

紙版
電子版
- 本の森.jp
- Amazon
- honto
- 楽天kobo

(2023年5月16日：文末リンクを紙版と電子版に分載するよう修正)

新しい Vivliostyle Themes のご紹介

2023-04-23T00:00:00+09:00

以前のイベントで予告したとおり、Vivliostyle Themesは近日中に大きな変更を加えようとしていました。そして、ついに新しいVivliostyle ThemesをBetaバージョンとしてリリースできたことを嬉しく思います！今回リリースしたVivliostyle Themesは、単なるVivliosytleのためのCSSファイルという枠組みを超えた、CSSフレームワークの新しい形とも言える野心的なライブラリなので、この記事で少しだけ紹介させてください。

Vivliostyle Themesの使用方法

Vivliostyle Themesは、vivliostyle.config.js に以下のように設定することで使用できます。（v6.0.0より新しいVivliostyle CLIは自動でテーマファイルをインストールするため npm install は不要です）

module.exports = {
  theme: '@vivliostyle/theme-base',
};

使用できるテーマについてはVivliostyle ThemesのREADMEを参照してください。~~現時点ではBetaバージョンで提供しているため、テーマ名の末尾に @beta をつけることに注意してください。~~ （更新: 新しいVivliostyle Themeの安定版のリリースがされたため、@beta を指定する必要はなくなりました）

CSS変数をベースにしたCSSフレームワーク

新しいVivliostyle Themesは、すべて新たに作成したCSSフレームワーク @vivliostyle/theme-base をベースとして作られています。一般的なCSSフレームワークはBootstrapやTailwind CSSなどが知られていますが、Vivilostyle Themesはそのいずれとも異なる構成になっています。@vivliostyle/theme-base は、一言で表すと「Markdownなどの構造化されたドキュメントに適した、CSS変数でカスタマイズ可能なCSSフレームワーク」です。

@vivliostyle/theme-base を使用したドキュメントを見てみると、見た目はブラウザデフォルトのUser agent stylesheetとほとんど同じように見えます。その代わりに、各要素セレクターのプロパティにさまざまなCSS変数が設定されていることを確認できます。

これこそが @vivliostyle/theme-base によって実現していることです。

一般的なCSSは、まずスタイルを適用したいセレクターを選択して、その後に実際に適用するスタイルを記述します。 CSSのスタイルが重複して設定された場合、このセレクターの詳細度に応じて上書きするスタイルを記述します。この特徴により、CSSは正しく管理された範囲の中では柔軟に制御できます。

しかし、これはすべてのCSSを自分で管理できているときの話で、外部の人間がCSSを上書きするケースの場合困難が伴います。継承先のCSSが継承元のCSSを上書きするためには、元のCSSよりも高い詳細度のセレクターを設定したり !important をつけて詳細度を上げる必要がありますが、これは継承元のCSSの内容に依存しているため、読みにくく理解の難しいCSSになってしまいます。また、継承元のCSSがアップデートして詳細度が変わってしまうと、依存先のCSSも無効になってしまいます。これまでのCSSによるテーマ機能は、この「詳細度の制御」が課題でした。

新しいVivliostyle Themesは、セレクターを使う代わりに「CSS変数」を使ってスタイルの適用先を指定します。

/* 一般的なCSSの指定方法 */
h1 {
  font-size: 2.5rem;
  line-height: 1.5;
}
p {
  margin: 0.5rem 1.5rem;
}

/* Vivliostyle Themesの指定方法 */
:root {
  --vs--h1-font-size: 2.5rem;
  --vs--h1-line-height: 1.5;
  --vs--p-margin-block: 0.5rem;
  --vs--p-margin-inline: 1.5rem;
}

Vivliostyle Themesでは、--vs で始まる名前のCSS変数を定義しています。 4つのCSS変数はもとのセレクターとは関係ない :root というセレクターに設定されているため、継承元のスタイルの詳細度を気にする必要がなくなっています。

それでは、実際に設定できるCSS変数について紹介します。

体系化されたCSS変数

上記の例では h1 タグや p タグといった特定のタグに対する指定でしたが、Vivliostyle ThemesはVivliostyleがターゲットにする文章レイアウトがかんたんに実現できるように、設定するCSS変数の名前を体系化して定義しています。

`meta-properties.css`

ドキュメント全体に適用するもっとも基本的なCSS変数は meta-properties.css で定義されています。たとえば、ドキュメント全体のフォントや文字サイズ、縦書きか横書きか、などに関する情報です。

:root {
  --vs-font-family: serif; /* フォントをセリフ体に設定 */
  --vs-writing-mode: vertical-rl; /* 縦書きで表示 */
  --vs-spacing-rlh: 2rem; /* 各要素の基本的なマージンを設定 */
}

`basic.css`

h1 タグや p タグをはじめとした一般的な要素に対するCSS変数は basic.css で定義されています。 basic.css で定義されているCSS変数は、すべて --vs-- で始まる名前になっています。

:root {
  --vs--blockquote-font-size: 120%; /* blockquoteタグのフォントサイズを120%に設定 */
  --vs--figure-margin-inline: 2rem; /* figureタグのinline方向のmarginを指定 */ 
}

一部のHTML要素には、一括で設定するためのCSS変数も用意されています。

--vs--heading-*: Heading要素 (h1, h2, h3, h4, h5, h6) に対して一括で指定します
--vs--monospace-*: 等幅フォントが適用される要素 (code, kbd, pre, samp) に対して一括で指定します
--vs--lists-*: リスト要素 (ul, ol, dl) に対して一括で指定します

また、table タグについてはより細かく罫線の幅を制御できるようになっています、たとえば以下のようなCSS変数があります。

--vs--table-border-width-outer: 表の外側の罫線の幅を指定
--vs--table-border-width-row: 表の内側の横方向の罫線の幅を指定

それ以外のCSS変数

meta-propertiesやbasic以外にも、ページレイアウトに関する設定や相互参照、目次など、Vivliostyleが提供する機能の多くをCSS変数でのカスタマイズでカバーしています。より詳しいドキュメントは、@vivliostyle/theme-baseのREADME を参照してください。

実際の適用例

これらのCSS変数が実際にはどのように活用されているかは、theme-base 以外のテーマファイルを見ることで確認できます。

たとえば、theme-techbook のテーマファイルは @vivliostyle/theme-techbook/theme.css にあります。中身を簡略化するとこのようになっています。

@import url(../theme-base/theme-all.css);
@import url(../theme-base/css/lib/prism/base.css);
@import url(../theme-base/css/lib/prism/theme-okaidia.css);

/**
 * Theme variables
*/
:root {
  --vs-theme--anchor-color-body: #3498db;
  --vs-theme--blockquote-color-bg: #ecf0f1;
  --vs-theme--blockquote-color-body: #34495e;
  ...
}

:root {
  --vs-font-family: 'Neue Frutiger World', 'Verdana', 'Hiragino Sans', sans-serif;
  --vs-font-size-on-print: 75%;
  --vs-line-height: 1.7;
  --vs-widows-orphans: 3;
  --vs--heading-line-height: 1.2;
  ...
}

ご覧の通り、テーマファイル自身も theme-base のCSS変数の内容をカスタマイズすることでスタイルを変化させています。もちろん、自分でCSSを用意することでこのテーマからさらにCSS変数の内容を上書きすることもできます。また、Vivliostyleが提供するテーマは、--vs-theme-- で始まる名前のテーマ固有のCSS変数も提供しています。必要に応じてこの内容もカスタマイズしてください。

自分のテーマを作成する

自分のテーマを作成するための雛形生成ツール create-vivliostyle-theme も、新しいVivliostyle Themesに対応しました。雛形を生成するためには、以下のコマンドを実行します。

npm create vivliostyle-theme <your-theme-name>

生成される雛形にはこれまでのようなSASSファイルは含まれておらず、theme.css だけがあるシンプルな構成になりました。テーマが完成したら、ぜひnpm packageとして公開してみてください！

まとめ

この記事では、CSS変数によって新しくなったVivliostyle Themesについて紹介しました。新しいVivliostyle Themesは、フィードバックを受けたのち正式版としてリリースされます。ご意見がありましたら、ぜひ vivliostyle/themesのissueに登録してください。

「Vivliostyle ユーザーと開発者の集い 2022秋」開催報告

2022-11-30T00:00:00+09:00

「CSS組版 Vivliostyle ユーザーと開発者の集い 2022秋」の開催

11月20日に秋のユーザーイベントがオンライン開催されました。

CSS組版 Vivliostyle ユーザーと開発者の集い 2022秋

当日のプログラムと、それぞれのスライド資料、アーカイブ動画へのリンクは下記の通りです。

第1部
- 13:00-13:10（10分）本日の趣旨説明（小形克宏）（movie）
  - この日発表予定の演題とその概要を簡単にご説明します。
- 13:10-13:40（30分）Vivliostyle.jsの先行実装から考えるCSS text-spacingプロパティ（鈴木丈 Fontworks）（slide, movie）
  - まだブラウザで実装されていない、Vivliostyle.jsの先行実装（和欧間のアキ、連続する約物のスペーシング、行頭・行末のスペーシング）を、ユーザーの立場からレビューします。後半10分からは、実装者である村上代表が疑問に回答します。
- 13:40-14:10（30分）Vivliostyle.jsにおけるWeb標準、CSSサポートの大改善（村上真雄）（slide, movie）
  - 最近、新しく利用可能になったCSSグリッドレイアウト、CSS変数（カスタムプロパティ）CSSセレクターレベル4（:has()疑似クラスなど）等について詳しく説明します。あわせて課題として残っている未実装のCSSの機能などについても説明します。
- 14:10-14:15（5分）休憩
第2部　Vivliostyle開発報告
- 14:15-14:25（10分）Vivliostyleプロジェクトの今までとこれから（村上真雄）（slide, movie）
  - Vivliostyleプロジェクトで予定されている、非互換変更を含む拡張予定について説明します。たとえばVFMバージョン2（Markdown拡張仕様）でおこなうセクション分けの仕様変更、あるいはVivliostyle CLI v6における拡張予定、そしてthemeのスタイルシートの刷新などです。
- 14:25-14:45（20分）Vivliostyle CLI update - 2022 Autumn（緑豆はるさめ）（slide, movie）
  - 前半はこの半年のVivliostyle CLIのアップデート内容、例えばブラウザのライブラリをPuppeteerからPlaywriteに変更したこと、--cssオプションの追加、裁ち落とし関連のオプション追加等について説明します。後半は現在取り組んでいるテーマ機能の強化について詳しく説明します。
- 14:45-15:05（20分）VFMの仕様設計の再考（@nosuke23）（slide, movie）
  - Markdownの拡張方法について、考慮すべき点を整理します。セマンティックなマークアップは、どうしても名前衝突をおこす可能性が高くなります。これを防ぐために、CSSをモジュール化してコンポーネントを宣言的に割り当てる「宣言的マークアップ」が有効ではないかということを説明します。後半、発表を踏まえて村上代表、及びVFMのメンテナーakabeko氏が入って3人で討論します。
- 15:05-15:10（5分）休憩
第3部　広がるVivliostyle
- 15:10-15:30（20分）vivliostyle-cli-helperの公開と商業出版『Viviliostyle CSS組版入門(仮)』（大津雄一郎リブロワークス）（slide, movie）
  - 来年春に出版が予定されている『Viviliostyle CSS組版入門(仮)』の内容、及びそこで教材として使われるツールvivliostyle cli helperについて、著者みずからが詳しく説明します。
- 15:30-15:50（20分）Vivliostyle、もう一つのブルーオーシャン（小形克宏）（slide, movie）
  - Vivliostyleの強みはページ組版だけではありません。最近のVivliostyleのユーザー事例を見ると、いずれも共同編集機能を駆使したものであることが分かります。この共同編集機能こそがVivliostyleにとってのもう一つのブルーオーシャンなのかもしれません。そうだとすれば、ページ組版はオプションでよいことになります。
- 15:50-15:55（5分）休憩
第4部　11月開発者会議
- 15:55-16:25（40分）（movie）
  - この日出された論点を材料に、今後のVivliostyleの課題について登壇者とメンテナーが議論しました。
- 16:25-16:35（10分）クロージング（村上真雄）（movie）
  - 村上代表による閉会のことば。

今回のイベントでも、いくつもの「へえ！」というようなトピックがありました。以下では短くそれらをご紹介しましょう。

鈴木丈さん（FONTPLUS）による実装の評価

鈴木さんのVivliostyle.jsの先行実装から考えるCSS text-spacingプロパティでは、ブラウザがまだ実装していない仕様のうち、CSSテキストレベル4のプロパティtext-spacingに絞って、Vivliostyle.jsにおける実装を検証、評価して下さいました。その内容は現在の実装を概ね肯定するもので、私たちとしては今までやってきたことが間違っていなかったと心強く思いました。また、後半22分以降の村上代表によるコメントも、いわば鈴木さんの疑問に答えて実装の種明かしをする内容で、聞き応えのある対話が聞けたように思います。

近い将来Vivliostyle.jsで行取りが簡単に

村上代表のVivliostyle.jsにおけるWeb標準、CSSサポートの大改善では、後述する:has()疑似クラスをはじめ、多くの改善点の説明や近い将来のアップデートが予告されました。

中でも大きいのが、従来ブラウザーが実装している最新のCSSの機能のうち使えないものがあったところ、v2.16.0 (2022-07-19)、及びv2.17.0 (2022-07-29)において、基本的にすべて使えるようにしたことです。これにより将来ブラウザが実装するCSSの機能も、そのままVivliostyle.jsで使えるようになります。

そうしたCSS機能の中で、個人的に注目しているのがlh and rlh unitsです（16:12）。これはline-heightで指定された数値を単位として扱えるようにするもので、実装されれば「本文のn行分」という方法で見出しや画像等のサイズがごく簡単に指定できるようになります。とくに伝統的な日本語組版とCSS組版の違いに戸惑ってきたユーザーには朗報かもしれません。

VFMｖ2における非互換変更について

村上代表のVivliostyleプロジェクトの今までとこれからでは、VivliostyleのMarkdown方言、VFMが近々v2にアップデートすることが予告されました（2:41付近）。この中には非互換な変更が含まれるので、現在VFMで書いたデータを持っているユーザは対応が必要になります。

具体的には、現行v1では見出しの属性は基本的にsection要素にコピーされ、id属性は同じくsection要素に移動していましたが、v2からは廃止します。これらの振る舞いは、見出しを含むsection全体にスタイルが指定できるなど、Markdownの制限の中である程度柔軟な範囲指定を可能にする、便利な機能でした。

しかし最近、Vivliostyle.jsで子要素や後に続く任意の要素を指定する:has()疑似クラスを実装したことで、より精密な指定ができるようになりました。これにより従来の振る舞いは廃止する方が、ユーザーにとってメリットが大きいと判断したものです。

v2では見出しのid属性に限っては、section要素のaria-labelledby属性にコピーされることになりますが、これ以外の属性はコピーや移動はしないようになります。どうかご注意ください。

Vivliostyle CLIにおけるテーマ機能の強化

緑豆はるさめさんのVivliostyle CLI update - 2022 Autumnで注目したいのは、次バージョンで予定されているテーマ機能の強化です（10:20付近）。これはVivliostyle.jsで実装されたCSS変数（カスタムプロパティ）を本格的に利用しようとするものです。

具体的には、Vivliostyle themeの中で共通して使えるベーシックなテーマ、@vivliostyle/theme-baseを用意し、それを他のテーマが参照する形にします。これにより全体で使う変数を共通化することができます。たとえばフォントの種類、文字のサイズや色、段組の数などさまざまなCSSの機能が、まるでスイッチをオン／オフするような感覚で設定することができるでしょう。この日は開発中の機能のデモを実際に見ることができ（14:35）、便利さを実感することができました。とても楽しみです。

また、このテーマ機能の強化の後、いよいよEPUB出力のサポートに取り組むとのこと。来年はすばらしい年になりそうです。

Vivliostyle入門本が商業出版される

C&R研究所から待望のVivliostyle入門本が出版されます！　これを詳しく説明したのが、大津雄一郎さんのvivliostyle-cli-helperの公開と商業出版『Viviliostyle CSS組版入門(仮)』です。この本ではHTMLやCSSの知識を多少持っている人をメインターゲットにして、必要最低限の組版の知識を取り混ぜて、Vivliostyleの解説をすすめる形にするとのことです。構成案は以下の通りです。

VivliostyleとCSS組版
CSS組版ハンズオン
VFM Markdown入門
Vivliostyle CLIの活用
CSS組版デザインTips
入稿と印刷
Vivliostyle Pub

また、本書のハンズオンで使用予定のVSCodeの機能拡張vivliostyle-cli-helperのデモを見ることができました（15:21）。これを使うとVSCodeで原稿を書きながらプレビュー画面を簡単に表示させることができます。なんて便利！

本書の発売予定は来年、2023年3月〜4月とのこと。楽しみに見守りたいと思います。

おわりに

ここまで、当日のトピックをピックアップしましたが、これ以外にも聞き応えのある発表が盛り沢山でした。ぜひ上記リストからご自分の目で確かめてみてください。次回は来年、2023年4月の開催予定です。それまでVivliostyleの開発がどこまで進むのか、どうか来年もVivliostyleにご注目ください。

Vivliostyle Pubで作成したPDFファイルを印刷するサービスが開始

2022-09-07T00:00:00+09:00

7月に、Vivliostyle PubでPDFが出力できるようになったことを報告しました。このたび、そのPDFをPOD（プリントオンデマンド）で印刷できるサービスが開始されました。これは欧文印刷株式会社による印刷サービス mybooksPOD との提携によるものです。サービス名にある「POD」とは「Print On Demand」の略で、必要に応じて必要な部数だけを印刷できる方式です。

以下、Vivliostyle Pubからこのサービスを利用する方法を順を追ってご説明します。大まかな流れは、mybooksPODのページに遷移→PDFファイルを添えて見積もり依頼→サービスから見積金額が返信→OKならば正式に印刷を発注→納品というものです。

①Vivliostyle Pubで出力したPDFファイルを用意した上で、編集画面の右上にある「ユーザーガイド」（赤丸）のボタンを押します（下図）。

②すると新規タブにVivliostyle Pubユーザガイドが表示されますので、画面左のインデックスから「Actionメニュー > Export（出力）」（赤丸）をクリックします。

③同じく画面左のインデックスから「印刷会社への入稿」（赤四角❶）をクリックすると、「印刷会社への入稿」の節が表示されます。記事を読んだ上で、そのなかの mybooksPOD のリンク（赤丸❷）をクリックしてください。

④すると新規タブにmybooksPODのページが表示されます。内容をよく読んでから入稿をするようにしてください。

⑤ページ下へスクロールすると「見積もり依頼」のセクションがあります。印刷したいPDFファイルを選択、アップロードしたあと、フォームに必要事項を記入していきます。以下のページも参考にしてください。

入稿について

フォームへの入力が終わったら、画面下端の「次へ進む」をクリックしてください。

⑥「お見積もり内容の確認」の画面に遷移します。入力内容を確認して問題がなければ「送信」、修正したければ「戻る」ボタンを押します。

⑦数日後、欧文印刷株式会社から見積もり結果が届くでしょう。もしもその内容に納得がいくなら発注し、納品をお待ちください。納得がいかない場合はキャンセルすればよいだけです。

なお、mybooksPOD に関する詳細はここでは触れません。不明点があれば欧文印刷株式会社に直接お問い合わせください。

Vivliostyle PubでPDFが出力できるようになりました

2022-07-28T00:00:00+09:00

4月にアルファ版を公開したVivliostyle Pubは、その後も開発が順調にすすみ、このほどPDFの書き出しができるようになりました。それに伴い、ユーザーガイドも大幅に改訂しました。

Vivliostyle Pub α版ユーザーガイド

今回のアップデートの結果、たとえば現在のVivliostyle Pubは下記のようなことができます。

ただし、プレビューとPDF出力とでは組版エンジンの場所が異なるという仕様により、場合によってプレビューで使われるフォントとPDF出力で使われるフォントが一致せず、互いにページが食い違ってしまうことがあります。

フォントを利用するしくみ

ユーザーガイドでは、こうしたフォントの不一致を回避する方法も書いてありますので、ぜひご覧ください。

CSS組版のWebアプリ、Vivliostyle Pubは誰でも無料で使えます。ぜひ下記ページから試用してみてください。

クイックスタートガイド

2021年度事業報告書を公開しました

2022-06-16T00:00:00+09:00

2021年度（2021年4月1日〜2022年3月31日）の事業報告書を、下記のとおり公開しました。

2021年度事業報告書

例年のように、HTML、Vivliostyle ViewerによるA4サイズ、可変サイズ、そしてPDF、ソースコード、加えて英語版もご覧いただけます。

第4期となる2021年度において、おかげさまで当法人は単年度黒字を達成することができました。累積した赤字の解消まで道のりはまだ遠いですが、ようやくその一歩を踏み出すことができました。第1章では、そうした財務内容を報告しています。

このように好調な決算ができたのは、Vivliostyleプロダクトの開発が順調に進んだからこそです。そこで第2章として、プロダクトごとにどのような新機能が実装されたのかをまとめました。Vivliostyle.js、Vivliostyle CLI、Vivliostyle Pubについては、プルリクエスト数やコミット数などの指標により、分かりやすく開発状況をお伝えしています。とくにVivliostyle Pubについては、4月のアルファ版公開にむけた怒濤の開発状況が客観的なデータにより浮き彫りにされています。

こうした内容が、A4サイズで21ページにまとめてあります。Vivliostyleプロダクトのユーザであれば、きっと興味深く読むことができるのではないでしょうか。ぜひ一度、お手に取ってみてください！

2022年春ユーザーイベント開催とVivliostyle Pubアルファ版の公開

2022-05-29T00:00:00+09:00

「CSS組版 Vivliostyle ユーザーと開発者の集い 2022春」の開催

報告が遅れてしまいましたが、4月23日に恒例となっているユーザーイベントが、オンラインで開催されました。

CSS組版 Vivliostyle ユーザーと開発者の集い 2022春

当日のプログラムは下記のようなものでした（演題のリンクは動画記録へのものです）。

13:05-13:15（10分）本日の趣旨説明（小形克宏）
13:15-13:40（25分）私のVivliostyleとの付き合い方（藤井大洋）
13:40-14:00（20分）Vivliostyleの2022年開発計画を展望する（村上真雄）［スライド］
14:00-14:10（10分）休憩
14:10-14:30（20分）アルファ版を公開したVivliostyle Pub（takanakahiko）
14:30-14:50（20分）VivliostyleでWebフォントを使う：調査編（小形克宏）［スライド］
14:50-15-00（10分）休憩
15-00-15:20（20分）既存のThemesで印刷用PDFを作るには（Yusuke S.）［スライド］
15:20-15:40（20分）vivliostyle.orgではじめるCSS組版チュートリアル（やましー）［スライド］
15:40-16:00（20分）Vivliostyle CLI update - 2022 Spring（緑豆はるさめ）
16:00-16:10（10分）休憩
16:10-16:50（40分）4月開発者会議
16:50-17:00（10分）クロージング（村上真雄）

中でも貴重なのは、ゲストとしてSF小説家である藤井大洋さんをお迎えして、ご自身のVivliostyleによるPDF出力を利用した推敲ワークフローをデモしていただいたことです。藤井さんの導入事例については、後半の自由討議セッション「4月開発者会議」の中でも取り上げられ、コミッター達によって改善の可能性を含めた活発な議論がされました。

Vivliostyle Pubアルファ版、いよいよ公開！

もう一つ、この日の重要な出来事は、村上真雄代表によってVivliostyle Pub（上記スクリーンショット参照）のアルファ版公開がアナウンスされたことです。

Vivliostyle Pubアルファ版

Chromeブラウザ（PC版）を使えば、どなたでも無料で利用できます。また操作方法をまとめた下記ユーザガイドも、ぜひご活用ください。

Vivliostyle Pub アルファ版ユーザガイド

このプロダクトは一昨年から少しずつ開発が進められていたものです。最初の節目を迎えられたことを素直に喜びたいと思います。もちろん、アルファ版は最初の一歩にすぎません。まだまだVivliostyle Pubには克服すべき課題が山積しています。ひきつづき、次の節目であるベータ版を目指して開発を進めていきます。どうかご声援ください。

行末処理が進化して多様な組版ができるように

2022-02-08T00:00:00+09:00

図1 Vivliostyle Viewerの旧版 v.2.13.0（左）と新版 v2.14.0（右）

はじめに

2022年2月4日、Vivliostyle.jsはv2.14.0にアップデートされました。詳細は下記をご参照ください。

Vivliostyle.js v2.14.0

新バージョンは、前回ご紹介したJavaScript対応のように目立つものではないものの、東アジア言語、とくに日本語組版における選択肢を増やすものです。この記事ではその内容をかいつまんで説明します。

行末処理の進化

Vivliostyle.jsは、v2.12.0 (2021-11-13)において、CSS Text Module Level 4のtext-spacingプロパティと、CSS Text Module Level 3のhanging-punctuationプロパティを実装しました。これにより、日本語／中国語と欧語における単語間の間隔や、連続する全角句読点類の間隔を調整できるようになりました。text-spacing はまだどのブラウザも実装しておらず、hanging-punctuation はSafariだけが実装しているという状況を考えると、きわめて意欲的な取り組みと言えます。

とはいえ、この時点の実装は一部の機能が未実装でした。図1は前バージョン v.2.13.0（左、以下旧版）と、アップデート後のv2.14.0（右側、以下新版）で、同一のテストページを表示させたものです。あなたのブラウザでも、以下のリンクから同じように表示できます。

テストページの見出しは適用しているプロパティとその値です。サンプル文はすべて共通で、1行目は行末である10字目に読点（U+3001）、2行目は11字目に句点（U+3002）、3行目は10字目と11字目に半角の感嘆符（U+0021）と読点（U+3001）を配置しています。分かりやすくするために、文字サイズと同じ16pxずつ等間隔で水色の基準線を引いています。

その基準線が、1番目のサンプル文1行目の字間にピタリと揃っていることに注意してください。組版用語でいうと、字間はベタ（文字サイズと同一）で揃っています。この見出しにtext-spacing: none; hanging-punctuation: noneとあるように、このブロックはプロパティtext-spacingとhanging-punctuationを無効（none）にする指定がされています（だから旧版も新版も組版結果は同一）。ということは、字間と基準線が揃っていればツメ処理もアキ処理もしておらず、基準線よりも前に文字があれば何らかのツメ処理が、逆に後ろにあればアキ処理をしていることになります。そして、左右の組版結果を比較することで、新版の変更点が確認できるわけです。

多様な日本語組版が可能になった

では実際に図1を見てみましょう。見出しごとに加えた赤い分数に注目してください。これは、全部で3行あるサンプル文のうち、見出しのプロパティを適用することで字間と基準線が揃ったものがいくつあったかを示したものです。左の旧版の方は、プロパティを無効にした1番目を除けば、1/3が1つ、0/3が4つと、全体に基準線に揃ってない組版ばかりと言えます。

それに対して右側の新版はどうでしょう。1番目を除けば、0/3が2つ、2/3が2つ、3/3が1つあります。つまり、まったく基準線に揃ってない（0/3）ものと、揃っているものが多い（2/3、3/3）ものの両極に分かれています。これこそが新版の進化内容で、言い換えれば2つの異なった考え方の組版が選択可能になったと言えるのです。

一般に「日本語組版の基本はベタ組み」などと言われます。それは漢字と仮名を文字サイズと同じ字間（ベタ／全角）で組むことを指す言い方ですが、すべてを言い当ててはいません。なぜなら句読点類や括弧類の見た目の幅はベタではないからです。別の言い方をすると、これらをどのように組むかをめぐって、同じ日本語組版の中で異なる考え方があり得るのです。大雑把に以下の2つにまとめて捉えられるでしょう。

行頭行末を揃えることを優先する
字間をベタに揃えることを優先する

もちろん、両者の違いは正否でも優劣でもありません。どちらを読みやすく感じるかという好みの違いです。赤い分数に戻れば、基準線に揃ってないもの、つまり3番目の text-spacing: none; hanging-punctuation: force-end（右側0/3）と6番目の text-spacing: allow-end; hanging-punctuation: allow-end（右側0/3）が上記1に当たります。ここで、この2つに共通する値がhanging-punctuation: force-endであることは偶然ではありません。

そもそもhanging-punctuation:というプロパティは、いわゆる「ぶらさがり」（hanging punctuation）を実現するものです。そして、値 force-endは行末前後に句読点があれば、アキ処理かツメ処理をして強制的にぶら下げます。DTPアプリInDesignをご存知の方は「ぶら下がり方法→強制」をイメージしてください。結果として行末が揃うことになる反面、行中に調整が発生するので字間はベタになりづらくなります。

一方、2番目の text-spacing: none; hanging-punctuation: allow-end（右側2/3）と 4番目のtext-spacing: allow-end; hanging-punctuation: none（右側2/3）、そして5番目の text-spacing: allow-end; hanging-punctuation: allow-end（右側3/3）は、上記2に当たります。これらに共通するのはallow-endですが、もちろん偶然ではありません。

hanging-punctuation:の方の allow-endは、一定の条件を満たした場合だけぶら下げます。これもInDesignで例えれば「ぶら下がり方法→標準」に近いものです。force-end に比べれば調整がより少なくなるため、ベタは維持されやすくなります。そしてもう一つのプロパティ text-spacingにも allow-endがあり、こちらは行末の句読点類や括弧類を基本的には全角どり、場合によって半角どりにします。これも結果としてベタは維持されやすくなります。その反面、右側2番目、4番目、5番目の1行目のように、行末に半角分のアキが残り、行末は揃いません。前述したように、これを良しとするかどうかは「好み」です。

最後に左側の旧版の組版を見てみましょう。全体に行中で調整をするものが多い結果、行末は揃っています。つまり、上記1の考え方の組版は実現できているものの、上記2の組版が実現できていません。逆に言えば旧版では字間を均等に揃えることを優先する組版を選択できなかったところ、これも選べるようにしたのが新版のアップデートという訳です。

今回はとくに行末処理に特化して説明しましたが、以下のテストページからVivliostyle.jsの組版を、プロパティごとに確認できます。ぜひ一度お試しください。

Test cases

Vivliostyleの組版でJavaScriptが使えるようになりました

2022-01-24T00:00:00+09:00

現在開発中のVivliostyle Pubで、DynaFont の “DF玉刻華宋 StdN W4” を表示

はじめに

2022年1月17日にVivliostyle.jsが v2.13.0 に、同じく18日に Vivliostyle CLI が v4.6.0 にアップデートしました。改訂の詳細は下記をご覧ください：

今回のアップデートの目玉は、CSS組版にJavaScriptが使えるようになったことです。従来のバージョンでは、HTMLにJavaScriptのコードが含まれていた場合、内部的に削除していました。しかし、JavaScriptが使えないままではVivliostyleの用途を狭めてしまいます。そこでこれを利用できるようにしたのが、今回のアップデートです。

WebフォントにおけるJavaScript 対応のメリット

その中でも大きなメリットは、JavaScriptで利用するタイプのWebフォントサービスが利用可能になったことでしょう。一般にWebフォントをロードする方法は、以下の3種類です（カッコ内は該当するサービス名の例）：

@font-face によりネット上にあるフォントをロードする方法
@importかlink要素により外部スタイルシート経由でロードする方法（DynaFont、Google Fonts等）
JavaScriptによりロードする方法（DynaFont、Adobe Fonts、TypeSquare、FONTPLUS等）

Webフォントを使う上でネックになるのは、フォントをロードする速度がネットワークの速度に依存することです。これにより表示まで時間がかかりがちになります。この問題は文字セットが大規模になる日本語や中国語、韓国語フォントでより顕著になります。しかし、上記のうち3の方法であれば、JavaScriptを使って対象となるHTMLを読み込み、必要な文字だけを抽出したサブセットを作成することで、ロードの速度を早めることができます（ダイナミックサブセット）。

つまり、日本語や中国語、韓国語でWebフォントを使う場合、上記3の方法は大変有効になり得ます。ところがVivliostyleは、今までこれに対応できていませんでした。

Vivliostyle CLIでJavaScriptによるWebフォントを使うには

各社のWebフォントサービスを、実際にVivliostyle Viewerで使ってみたテストサンプルを下記で公開しています：

各社Webフォントサービスのテストサンプル

ところでWebフォントサービスの中には、ドメイン登録（利用サイトの登録）を利用条件にしているものがあります。他方、Vivliostyle CLIに限っては今までfileプロトコルによりHTMLドキュメントをロードしてきました。しかしfileプロトコルではドメイン登録はできません。そこで今回のアップデートで、新しく httpプロトコルでロードするオプションを追加しました。具体的には以下のようにして利用できます：

あらかじめWebフォントサービスに、ドメインとして http://localhost:13000を登録（各社の差異は後述）
オプションとして --http を指定して実行

より詳しい情報は、下記を参照してください：

Feat/http hosting #234

ただし実際のドメイン登録にあたっては、Webフォントサービスにより細かな違いがあります。参考まで以下にまとめてみました。

FONTPLUS

https://などを含めた「サイトURL」を登録します。Vivliostyle CLI で --http オプションをつけて利用するには、http://localhost:13000/を登録します。

TypeSquare

https:// などを含めない「ドメイン名」を登録します。Vivliostyle CLI で --http オプションをつけて利用するには、localhostを登録します。

DynaFont

ドメイン登録が利用条件になっていますが、localhost はドメイン登録なしで使えます。以下の同社FAQを参考にしてください：

Q：ローカル環境でWebフォントを使うことはできますか？

Answer：ローカル環境での開発のご要望に応えて、DynaFont Onlineではローカルサーバー上でWebフォントを表示することができます。ご自身のPCにローカルサーバーを構築いただき、localhostフォルダに該当のHTMLファイル及びCSSファイルを置くことで、ブラウザから https://localhost/ にアクセスいただくと、Webフォントをご確認いただくことができます

その他のJavaScript対応のメリット

JavaScriptに対応したメリットは、Webフォントに留まりません。現在広く流通している各種JavaScriptライブラリ、たとえば以下のようなライブラリを、Vivliostyleで利用できるようになりました：

おわりに

以上、今回のアップデートにおけるJavaScript対応について簡単にまとめました。より詳細な情報は、以下のIssueをご参照ください：

「Vivliostyle ユーザーと開発者の集い 2021秋」開催報告

2021-11-17T00:00:00+09:00

11月14日、恒例の「Vivliostyle ユーザーと開発者の集い 2021秋」がオンラインで開催されました。スライド資料、そして当日SNSで寄せられたコメントまとめ（byやましーさん）を、下記のページで公開しています。

また、当法人のYouTubeチャンネルで、以下のように発表ごとの動画を公開しています。ぜひご視聴ください。

第1部ユーザから見たVivliostyle
- 人工言語イジェール語の辞書をVivliostyleで作る（ざすろん）(10:29)
- Vivliostyle PubでWebフォントを使う（小形克宏）(17:33)
第2部ライブラリとしてのVivliostyle
第3部アプリケーションとしてのVivliostyle
第4部 Vivliostyle 開発会議(46:48)

今回は、私の設定の不手際により開始時間が30分ほど遅れてしまいました。またその影響もあり、高井歩さんの発表で予定していたアンケートがうまくとれなかったなど、反省点が多く残りました。参加を申し込んでくださったユーザーの皆さん、そしてスピーカーの皆さんには大変ご迷惑をおかけしました。深くお詫び申し上げます。

個人的に印象に残っているのは、イベント冒頭、ざすろんさんによる「Vivliostyleの公式サイトにある情報はアプリケーションの説明ばかりで、CSS組版そのものについての説明がない」という指摘で、大変刺さりました。たしかにユーザの立場で考えると、公式サイトの情報は偏りがありました。折りしも村上代表と、Vivliostyle.jsのCSS仕様の実装にある程度目途がついてきたので、次のステップとしてCSS組版の普及に取り組んでいこうと話していたところです。この機会に、どのようなことができるか考え直したいと思います。

また、私達の古い友人であるKojimaさんが提起したコードリーディングも、一過性のものにしてはならないと思いました。じつのところ、最近Vivliostyleで課題となっているのは、Vivliostyle.jsのコミッターが村上代表だけという点です。これを解消しないと持続性に懸念が生じます。それには多少遠回りに見えても、一人でも多くの人にソースコードを読んでもらうところから始めるしかありません。今必要なのは、その敷居を少しでも低くする取り組みだと気付かされました。

次回は来年、2022年春に開催の予定です。この頃にはVivliostyle Pubのベータ版公開も始まっているはずです。どんな発表ができるのか、どうかお楽しみに！

最近のVivliostyle.jsの進化について

2021-10-12T00:00:00+09:00

この1ヵ月、Vivliostyle.jsは重要なアップデートを重ねてきました。9月初頭までv2.8.1でしたが、本稿執筆時点のバージョンはv2.11.1になっています。その概要はChange Logで一覧できます。この記事では追加された便利な機能、そしてバグ修正にともなう組版結果への影響について説明し、最後に近日中に実装予定の機能について予告します。

CSSの機能追加

v2.9.0
- @supports……CSSの特定のプロパティ、あるいはプロパティと値の組み合わせがサポートされているかどうかでスタイルを切り替えることができる
v2.10.0
- line-break: anywhere……句読点やスペースを含め、全ての文字間での改行を許容する
- overflow-wrap: anywhere……インライン要素に対してテキストが行ボックスからあふれないよう、通常改行しない箇所でも改行する
- white-space: break-spaces……要素内の文字列に含まれるホワイトスペースの扱いを規定。white-space: pre-wrap と似ているが、連続するホワイトスペースの間も改行する
- font-variant-caps……OpenTypeの欧文フォントにおける大文字関係の制御
- font-variant-ligatures……OpenTypeの欧文フォントにおける合字の制御
- font-variant-numeric……OpenTypeフォントの数字、分数、序数記号におけるグリフを制御
- min-content……ボックス内で自動改行される場合において、そのボックスの幅が最小になるよう、最も語長が長い単語に合わせてボックスを生成する
- max-content……コンテンツが最大幅になるよう、自動改行せずにボックスを生成する
- fit-content……利用可能領域が可変の場合において、まずmax-contentを使ってボックスを生成し、利用可能領域がmax-contentの幅を下回った場合は、利用可能領域とmin-contentの大きい方に切り替えてボックスを生成する
- unicode-range…… @font-faceで定義されたフォントのうち、特定の符号位置を指定する

中でも注目したいのが、最後のunicode-rangeです。これにより、たとえば欧文と和文で異なるフォントを指定したり、あるいは特定の文字や約物だけ別のフォントを指定したりすることが可能になります。また、中国語や日本語のWebフォントを指定する際、この機能を使ってグリフのサブセットを作成することで、容量を抑え表示速度を向上させることが期待できます。

Vivliostyle ViewerのUIにテキスト検索機能を追加

本ページ一番上のVivliostyle Viewerスクリーンショットをご覧ください。画面左上に虫眼鏡のアイコンが確認できるでしょう。これが新設されたテキスト検索アイコンです。以下のページから、実際に最新バージョンのVivliostyle Viewerが使えますので、ぜひお試しください。

Vivliostyle で本を作ろう Vol.5

バグ修正にともなう組版結果への影響

デフォルトスタイルシートにおける、`body`の`margin`の値を8pxから0に変更

Vivliostyle.jsでは、当初からユーザーエージェントのデフォルトスタイルシートのなかで、body（本文）のmarginの値を8pxに設定してきました。この設定はWebブラウザのデフォルト値を踏襲したものです。

ところが、CSS Paged Media Module Level 3では、ページのマージンを@page {...}のmarginプロパティによって指定することになっています。これにもとづき、VivliostyleをふくむほとんどのCSS Paged Media実装は、デフォルトスタイルシートで@page { margin: 10% }を設定しています。そうした中、Vivliostyle.jsだけが加えてbody { margin: 8px; }を設定するのは意味がありません。さらに言えば、Vivliostyle.jsのユーザはページ領域内の余分な余白を避けるため、常にbody { margin: 0 }を指定なければなりませんでした。

つまり、今までVivliostyle.jsが設定してきたデフォルトスタイルシートのbody { margin: 8px; }は、CSS Paged Mediaの実装には適していないと言えます。この状況を修正するため、v2.10.0で、このデフォルトスタイルシートの設定を削除しました（marginのデフォルトは0になります）。

スクリーンショットをご覧ください。意図的にマージンをなくすよう@page {margin: 0;}を指定したのに、左側のv2.9.1の緑色枠の外側には8pxの間隔が発生しています（現物はこちら）。それに対し、右側のv2.10.0では指定通り間隔はゼロであることが分かります（現物はこちら。コードはこちら）。

この修正により、v2.10.0の前後で組版結果が異なる可能性があります。Vivliostyle.jsを組み込んだ Vivliostyle Viewer、Vivliostyle CLI、Create Bookを、以前からお使いのユーザは、お手元のデータに影響がないか、一度ご確認ください。詳細は下記のIssueを参照してください。

Default body margin should be 0 in paged media #776

ルート要素で指定された継承プロパティを、`@page`の内容に継承できるよう修正

これもスクリーンショットで比較してみましょう。まず、ルート要素の中で以下のように記述したHTMLを用意します（コード全体はこちら）。:rootセレクタにより、文字に関するスタイル（色、フォント名、バリアント、サイズ等）を指定しています。これらは継承プロパティですので、続く@pageで指定されたヘッダとフッタに継承されるはずです。

:root {
  color: maroon;
  font-family: "Georgia", serif;
  font-variant: small-caps;
  font-style: italic;
  font-size: 200%;
}
@page {
  @top-center {
    content: "Here is the Page Header";
  }
  @bottom-center {
    content: counter(page);
  }
}

これを修正前後のVivliostyle Viewerに読み込ませたスクリーンショットをご覧ください。左側は修正前のv2.9.1（現物はこちら）、右側は修正したv2.10.0です（現物はこちら）。

画面の上端のヘッダと下端のフッタを左右で比べてください。左側の旧バージョンでは本来継承されるはずの文字に関するスタイルが有効にならず、ただヘッダとフッタの内容、位置だけが表示されてしまっています。これはぜひ直したいバグです。そこで右側の新バージョンをみると、ヘッダとフッタは指定通り、適切に表示されていることが分かります。

この修正によって、前項と同じくv2.10.0の前後で組版結果が異なる可能性があります。以前からVivliostyle Viewer、Vivliostyle CLI、Create Bookをお使いのユーザは、お手元のデータに影響がないか、一度ご確認ください。詳細は下記のIssueを参照してください。

Root element styles are not inherited to page context #568

直近のアップデート予定

最後に、この1ヵ月くらいに予定されている機能追加について、簡単にご紹介しましょう。

CSS Text Level 4: text-spacing……日本語／中国語と欧語における単語間の間隔や、連続する全角句読点類の間隔を調整
CSS Grid Layout……画面を複数のグリッドに分割することで、要素を列と行に整列させられる
WebフォントにおけるJavaScript 埋め込みコードをサポート……容量が大きくなりがちな東アジアフォントに多い、JavaScript 埋め込みコードによるWebフォントの指定をサポートする予定です（なお、現在でも@import埋め込みコードや、link要素による指定はサポートされています）

以上、駆け足で紹介しましたが、来月11月14日（日曜）に開催予定の「Vivliostyle ユーザーと開発者の集い 2021秋」では、村上代表がVivliostyle.jsのアップデートについて、デモを交えながら詳しく説明する予定です。どうかお楽しみに！

2020年度事業報告書を公開します

2021-07-02T00:00:00+09:00

2020年度の事業報告書を、下記のとおり公開しました。

2020年度事業報告書

第3期にあたる昨年度は、本当にいろいろなことがありました。突然のコロナ禍、そのなかでコントリビュータ達が開発資金確保のために未踏アドバンスト事業への応募を提案してくれたこと、そうしてチーム一丸となってVivliostyle Pubアルファ版を開発してくれたこと、それにも関わらず落選したこと。そのショックを乗り越えて、Vivliostyle CLI、Vivliostyle Themes、VFM、そしてVivliostyle Viewerが大きく機能アップしたこと。すべてコントリビュータの皆さんのおかげです。

第2章として決算報告も掲載しています。まだまだ赤字ですが、昨年度は150万円あまりの経常収益を上げることができました。そのうちの約6万円が一般の皆さんからの寄付金収入です。今期はもっともっと増やしていきたいと思っています。そうした1年のできごとを、ぎゅっと圧縮してA4、13ページのレポートにまとめました。上記リンク先では、Vivliostyle Viewerによる、読みやすいページ表示もご用意しています。ぜひお読みください！

技術書典 11 出展 & 合同誌無料配布キャンペーンのお知らせ

2021-06-26T00:00:00+09:00

こんにちは、Vivliostyle コラボレーターの spring-raining です。7 月 10-25 日に開催される技術書典 11 で Vivliostyle ユーザー会が頒布予定の『Vivliostyle で本を作ろう Vol. 5』と、無料配布キャンペーンについてお知らせします。

Vivliostyleで本を作ろう Vol. 5

https://techbookfest.org/organization/6255412097581056

第 5 回となった合同誌企画。今回は以下の記事を掲載予定です。どの記事もとても興味深い内容です！　また、今回もこれまでの『Vivliostyle で本を作ろう』と同様、物理書籍は有料となる代わりに全篇をこちらのサイトにて無料公開予定です。

Vivliostyle Theme のつくりかた (やましー)
Markdown を拡張する MDX はドキュメント作成の新たな可能性？　(spring-raining)
VFM 入門 2021 夏 (アカベコ)
Vivliostyle Foundation 2020 年度の活動まとめ (小形克宏)
CSS 組版の基本仕様 CSS Paged Media 入門のススメ (村上真雄)

この記事を執筆時点で絶賛入稿データの作成中です。締め切りに間に合うよう頑張ります！

無料配布キャンペーン

Vivliostyle ユーザー会では、技術書典のオフラインイベント再開を記念して、Vivliostyle を使って本を制作されているサークルの方に、こちらの「Vivliostyle で本を作ろう vol.5」を無料でお送りするキャンペーンを実施予定です。以下の内容を読み、ご希望の方はこちらのフォームから登録をお願いします。後ほど、お渡しのため個別にご連絡します。

https://forms.gle/zz83U64RLd4dSw6y5

お渡し条件

「技術書典 11」「技術書同人誌博覧会 5」で Vivliostyle を使って制作された新刊を出した (出す予定がある)
- 媒体は物理的な書籍だけでなく、電子書籍も対象となります
上記の新刊が Vivliostyle で制作されたことを証明できる情報を提出できる

お渡し方法

宅急便の匿名配送 (https://www.kuronekoyamato.co.jp/ytc/customer/send/sp/) を利用して配送予定です。住所等を Vivliostyle ユーザー会に直接教える必要はありません。

免責事項

上記のフォームは『Vivliostyle で本を作ろう Vol. 5』のお渡しを約束するものではありません。また、都合により希望者全員にお渡しできない可能性もあります。感覚的には即売会での新刊交換くらいの気持ちで、期待せず待ってもらえるとありがたいです。

JEPAセミナーでVivliostyleについて報告

2021-06-16T00:00:00+09:00

2021年6月15日、日本電子出版協会（JEPA）のご招待により、村上代表と私がVivliostyleについて講演をおこないました。以下がその記録です。

講演の概要は、まず村上がCSS組版とVivliostyleプロジェクトについて概説した後、小形が利用事例として以下の5つをデモを交えて報告するというものでした。

上記のうち、④については当法人は開発に関わっておらず、独自にVivliostyleを利用してくれた事例です。以前から私たちのプロダクトを選んでくださったことをうれしく思っていましたが、今回のような機会ですこしでも世に広めるお手伝いができればと考え、取り上げた次第です。ぜひ動画のデモをご覧ください。

「Vivliostyle ユーザーと開発者の集い 2021春」開催報告

2021-04-23T00:00:00+09:00

去る4月10日、通算4回目となる「Vivliostyle ユーザーと開発者の集い」をオンラインで無事に開催することができました。当日のスライド資料や動画、SNSでの反応等を、下記のページで公開しています。

イベント資料一覧

発表ごとの動画は、下記からご覧いただけます（なお、動画はYouTubeのVivliostyle Foundationチャンネルにまとまっています。ぜひ登録をお願いします！）。

いつも当イベントでは、コミュニティ外部の方々にも登壇していただいています。今回も第1部として和田優斗さん、逢賀サクさん、そしてAndreas Zettl さんから貴重な報告を聞くことができました。和田さんには2020年度未踏事業として採択された新組版システム「Twight」をご発表いただきました。逢賀さんには非エンジニアの立場から取っつきづらいVivliostyleの現状を鋭く批判していただきました。また、Andreas さんには世界の主要CSS組版エンジン全てをAPI化し、自在に切り替えてプレビューできるご自身のサービス、PrintCSS Playground と PrintCSS Cloud を紹介してもらいました。まさに当イベントでしか聞けない素晴らしい発表ばかりで、心から御礼申し上げます。

さて、次回のイベントは10月を予定しています。その時期には、いよいよ私達のWebアプリ、Vivliostyle Pub が姿を現しているはずです。当然イベントでも大きく扱われるはずです。どうかその時をお待ちください！

Vivliostyle の最新アップデート — CLI 改良と CSS Paged Media サポートの充実

2021-04-21T00:00:00+09:00

Vivliostyle の最近の重要なアップデートは、Vivliostyle CLI のプレビュー機能改良、それから CSS Paged Media 仕様サポートの充実です。

Vivliostyle CLI のプレビュー機能改良：Vivliostyle Viewer を統合

Vivliostyle CLI v3.2 から、プレビュー機能が以前の簡易ビュワーから、フル機能の Vivliostyle Viewer に置き換わりました。それにともなう主な改善点やメリットは以下です：

見開き表示モード、ページスライダー、目次パネルからのナビゲーションなど、使い勝手が向上。
原稿ファイルの更新によるリロードで表示位置が先頭ページに戻ることなく保持されるようになりました。
ユーザースタイルシートの指定が可能になったので、既存のWebやEPUBコンテンツからの組版でもページレイアウトを変更可能。
Vivliostyle Viewer を別にインストールしたり、それを使うためにローカル Web サーバーを立ち上げることなどが不要に。

Vivliostyle CLI のインストール方法と使い方については、Vivliostyle CLI ユーザーガイドをご覧ください。

詳しい更新内容は Vivliostyle CLI 変更履歴をご覧ください。

CSS Paged Media 仕様サポートの充実

Vivliostyle.js (Core) の最近の一連のバージョンアップ（v2.4–v2.8）で、CSS組版の基本的な標準仕様である CSS Paged Media や関連CSS仕様のサポートが充実しました：

Named strings（名前付き文字列） / v2.4 (2020-12-28)
- 柱（ページヘッダー／フッター）に表示する文字列を本文中の見出しなどから得られるようにする機能
:nth() page selector （N番目ページセレクタ） / v2.5 (2021-02-26)
- 文書の N 番目のページのスタイルを定義できる機能
Named pages （名前付きページ） / v2.7 (2021-04-07)
- ページの種類ごとに名前をつけてページのスタイルを定義できる機能
:blank page selector （空白ページセレクタ） / v2.8 (2021-04-16)
- 改丁（見開きの左右ページを指定した改ページ）によって生じる空白ページのスタイルを定義できる機能

詳しい更新内容は Vivliostyle.js 変更履歴をご覧ください。

「Vivliostyle.js における CSS Paged Media の実装」

2021年4月10日にオンライン開催したイベント「CSS組版 Vivliostyle ユーザーと開発者の集い 2021春」で、Vivliostyle.js における CSS Paged Media の実装について発表を行いました。そのスライド資料をご覧ください。

Vivliostyle.js における CSS Paged Media の実装 (Vivliostyle Viewer で閲覧)
- HTML
- ソース (GitHub)

Vivliostyle CLI がv3にメジャーバージョンアップ

2021-02-08T00:00:00+09:00

今年初めてのエントリ「新年のご挨拶とVivliostyleのアップデートについて」の中で、Vivliostyle CLI v3を準備中であることを書きましたが、2月7日、正式にv3.0.0をリリースしたことをお知らせします！

vivliostyle/vivliostyle-cli/release/v3.0.0

メジャーバージョンアップだけあって、v3には多くの変更が含まれています。そのうち主要な新機能だけでも挙げてみましょう。

設定ファイルvivliostyle.config.jsを使って出版物のカスタマイズが可能になりました
Vivliostyle Themesをスタイルに指定できるようになりました
以下の形式を読み込めるようになりました
- “VFM”……書籍用に拡張したMarkdown
- “EPUB”……電子書籍のデファクト形式
以下の形式で書き出せるようになりました
- webpub……HTMLの交換形式（前回エントリの “webbook” と同じ。変更理由はこちら）

上記のうち、設定ファイルやVivliostyle Themes、VFMを使ったビルド作業について、コントリビュータの @spring_raining さんが短い動画を作ってくれました。本エントリ冒頭に掲げた動画です。それを詳しいタイムシートにおこしてみました。

作業概要の提示 (〜0.01)
ターミナルで設定ファイルを生成 (〜0.02)
設定ファイル vivliostyle.config.jsの読み込み (〜0.12)
設定ファイルを上書きしてカスタマイズ (〜0.21)
ターミナルでスタイルファイル (Bunko Theme) の読み込み(〜0.27)
ターミナルでMarkdownファイルを読み込み、ビルドしてPDFを出力(〜0.47)
Chromiumにより組版結果をプレビュー(〜1.05)
ChromiumからPDFを出力(〜1.15)

以上述べたような v3へのバージョンアップによって、Vivliostyle CLI の実用性は格段に向上しました。このCLIは今年公開を目指す Vivliostyle Pub の心臓部とも言える重要コンポーネントです。Vivliostyleの次なるステップに、どうかご注目ください！

追記（2021/02/16）

ドキュメント>ユーザガイドに「Vivliostyle CLI」を追加しました。これはインストールから始まり、目的ごとにその機能を詳しく説明した公式ガイドです。ぜひご一読ください！

新年のご挨拶とVivliostyleのアップデートについて

2021-01-06T00:00:00+09:00

はじめに

新年あけましておめでとうございます。今年もVivliostyleをよろしくお願い申し上げます。

Vivliostyleにとって昨年は、開発体制を整えたり、新プロジェクトを立ち上げたり、いわば大きな飛躍をするための「準備の年」だったように思います。今年は積み重ねてきた成果を生かし、大空へ飛び立てるよう微力を尽くすつもりです。

そんな「準備の年」にあって、Vivliostyleは着実にアップデートを重ね、機能を追加してきました。本来このブログでリリースをお知らせすべきなのですが、去年はそれができませんでした。そこで現在のVivliostyleの開発状況について、この記事で概略をお伝えしたいと思います。

vivliostyle.jsの機能追加

まずプロジェクト全体の基盤となる、vivliostyle.js のアップデート履歴については、GitHub のリリース履歴のページにまとまっています。見逃せない機能追加は以下の2点でしょう。

v2.2.0 (2020-11-26)……Vivliostyle Viewer のUIにページスライドバーを追加
v2.4.0 (2020-12-28)……named strings（名前付き文字列）のサポート

中でも可能性を感じるのが named strings です。以下のテストページで、このプロパティがどのように使えるのか確かめることができます。

Test cases / Named Strings

上記ページの “canary” または “stable” をクリックすると named strings を実装した最新バージョンの Vivliostyle Viewer （図上）が、“2019.11” か “2018.2” をクリックするとまだ実装してない過去バージョンのVivliostyle Viewer（図下）が起動し、両者を比較することができます。

これを見れば、出版に詳しい方なら「ああ、柱のことね」とうなずかれるかもしれません。もちろんそれは正しいのですが、named strings の可能性はそれに留まるものではありません。たとえばbody要素の中で使えます。これにより本文や見出しの中でnamed stringsとして指定した任意の文字列、たとえば本のタイトルや著者名等を代入することができるのです。

なお、これらのバージョンの開発には、株式会社日本ビジネスプレスより支援をいただいたことを記して感謝いたします。

Vivliostyle CLI v3.0 と webbook への出力

次に Vivliostyle CLI について。現在のバージョンはv2.1.2で、アップデート履歴は同じくGitHub のリリース履歴のページにまとまっています。これをみると、一番上に Release 3.0.0-pre.5 があることに気付かれるでしょう。じつは現在、メジャーアップデートに向けて作業中なのです。その v3.0 の仕様は下記にまとまっています。

Vivliostyle CLI v3.0 new spec

目玉となるのは、WebBook生成機能の追加です。これによりMarkdown（VFM）ファイルを読み込んで、webbook（本を作るためのHTMLファイル群とCSS、画像、フォントなどの関連ファイルをフォルダにまとめるフォーマット）を出力できるようになります。webbookとは何かについては、2020年秋の開発者イベントにおける村上代表の発表をご参照下さい。

これからのオープンな出版標準としての「WebBook」

このwebbookを中間ファイルとして出力することで、そこからEPUB、Webページ、PDFなどへ容易に変換することができるようになります。夢が広がりますね。

なお、Issue #86でv3.0 の仕様について議論が続いているので、興味のある方はぜひご参加ください。

そしてVivliostyle Pub について

最後に、私たちの最大の目標である Vivliostyle Pub についてです。ここまで述べてきた vivliostyle.jsも、Vivliostyle CLI 3.0も、すべてはVivliostyle Pubの要素技術とも言えます。その要件仕様は下記にまとまっています。

Vivliostyle Pub v1 要件仕様 (WIP)

この中で、Vivliostyle Pub が生成できるコンテンツフォーマットの一つとして webbook が挙げられていることからも分かるとおり、前述 Vivliostyle CLI 3.0 はVivliostyle Pubの最も重要なコンポーネントなのです。

私たちはこれらの開発を着実にすすめることで、今年大きく羽ばたくことを願っています。どうかご支援いただければ幸いです。

Vivliostyleの開発状況をOnline.tex 2020で報告

2020-12-21T00:00:00+09:00

はじめに

だいぶ報告が遅れてしまいましたが、去る11月21日、オンラインで開催された「Online.tex 2020」で、Vivliostyle Pubの開発状況について報告しました。この日のスライドを下記で公開しています。Vivliostyle Pubのデモを実際に公開の場でおこなったのは、この時が初めてだったと思います。

あしたのVivliostyle

実績あるTexコミュニティの主催だけあって、大変歯ごたえのあるフィードバックがいただけました。あらためて感謝いたします。

とはいえ、ライブということもあって、とっさに的確な回答ができず申し訳ありませんでした。そこで、あらためて代表の村上と協議した上で回答することにします。この日のフィードバックは、下記のようなものでした。

1. 行頭インデントが消えてしまっている
2. ルビ文字のサイズが大きすぎる
3. テーブル中のテキストにルビが使えないか
4. フォーカスが最初のページに戻ってしまう
5. エディタのカーソル位置が、プレビュー画面で表示されるとよい

1. 行頭インデントが消えてしまっている

お恥ずかしいことに、これは私のケアレスミスです。本来、VFMでは段落区切り（ハード改行）はリターン2つです。なのに当日私がデモで使った原稿は、1つしか入っていませんでした。この場合GFMなどでは無視するのですが、VFMの場合は段落区切りではないソフト改行と解釈され、HTMLでは <br> に変換されます（右図上）。

そのために改行はされたものの、段落の区切りではないので行頭はインデントはされませんでした。段落区切りをリターン2つに修正したスクリーンショットをご覧ください（右図下）。

2. ルビ文字のサイズが大きすぎる

この問題、じつは以前から指摘されていましたが、この機会にIssueとして登録しました。

ルビの文字サイズ問題: Minimum font size setting in Chrome causes ruby font size problem #673

簡単に説明しましょう。元来 Vivliostyle はブラウザの補完を目的とするpolyfill（ポリフィル）の一種です。つまり、多くの機能はブラウザにまかせ、そこで実装されていない、たとえばページネーション等の機能を自前で実装しているわけです。

このルビ文字の組版も同様で、Vivliostyleではなくブラウザ（Chrome）のレンダリング結果になります。ここで、もともとChromeでは最小文字サイズのデフォルト値は10pxです。ところが、CSSの指定によってはルビ文字のサイズがChromeの最小文字サイズを上回ってしまうため、結果としてルビが大きくレンダリングされてしまうのです（下図上）。

対処法として、Chromeの設定で最小文字サイズを0pxにすると、CSSの指定どおりにレンダリングされます（下図下）。

ちょっと脇道に逸れますが、よくみるとこのスクリーンショットのルビ組版は、ルビが親文字よりはみ出した場合、親文字に掛けるよう処理するJLReq 3.3.8 通りではないことに気付きでしょうか。じつは、Vivliostyle はページネーションのためのW3C仕様の実装も十分にできていません。その結果、細部ではしばしばルールどおりに組版できないのが実情なのです。図らずもこのルビ組版は、そんなVivliostyleの開発状況を示す一例と言えるかもしれません。

3. テーブル中のテキストにルビが使えないか

実際にテーブルの中でルビを指定してみたところ、ルビの指定に使うパイプ文字 | が、セルの区切りとして解釈されてしまいました。VFMのバグですね。これについてIssue登録しました（現在、熱心な討論がつづいているので、興味のある方はぜひ覗いてみて下さい）。

テーブルでルビを指定するとパイプ文字がセルの区切りにパースされる

ただし、この現象を回避する方法があります。VFMは生のHTMLをそのままパースしますので、HTMLでルビを指定すればよいのです。もともと、MarkdownはHTMLの簡易記法です。だから簡易記法で書けないことは本来の記法で書けばよいという思想からきた実装とも言えます。

なお、この件について当日私は、以前から登録されているIssue 図表キャプション内で他の記法が使えない #35と同様の問題で、ある要素の中で別の要素をネストできないと説明をしましたが、これはまた別の問題であり間違いです。お詫びして取り消します。

4. フォーカスが最初のページに戻ってしまう

はい、確かに現状は好ましくない動作であり、既に Issue として登録されています。

エディターで更新のたびにプレビューが１ページ目に戻らないようにすること #53

5. エディタのカーソル位置が、プレビュー画面で表示されるとよい

確かに。これも既に ver. 1 の実装要件を定めた「Vivliostyle Pubv1 要件仕様 (WIP)」に盛り込まれており、実装する予定です。

こうしてまとめると、図らずも Vivliostyle Pub の開発がまだまだ初期段階であることを示すような事例ばかりです。とくに組版について積み残しが多いことがお分かりいただけると思います。もちろん、これで良いわけがありません。Online.tex 2020への参加により、そうした現状をあらためて認識させられました。感謝すると共に、これらの課題を克服する決意を新たにしているところです。

GitHubのアカウントがなくともVivliostyleを支援できるようになりました

2020-11-20T00:00:00+09:00

今年4月からGitHub スポンサーを利用した支援を開始しました。幸いなことに、執筆時点で13人もの方々が、ここから支援してくださっています。大変ありがたいことで、スポンサーの方々には深く感謝申し上げます。

しかし、Vivliostyleの開発を一層すすめるためには、もっともっと多くの方々の支援が必要です。GitHub スポンサーはGitHubのアカウントが必要です。エンジニアにとってGitHubは身近なサービスですが、それ以外の人々にとって存在すら知らないという人が大多数でしょう。そこでGitHubのアカウントがなくともVivliostyleが支援できるよう、 Robot Payment のクレジットカード決済サービスを導入することにしました。現在、下記ページから同社のサービスを使った支援が可能になっています。

あなたも Vivliostyle のスポンサーになりませんか

GitHub スポンサーでは月毎の継続支払いのみでしたが、Robot Payment では継続支払いはもちろん、一括支払いも可能です。金額も継続支払いで100円〜250,000円、一括支払いで100円〜600,000円と細かく設定しました。また、GitHub スポンサーの決済はドル建てですが、Robot Paymentでは円建てです。

Vivliostyle はオープンソース・プロジェクトです。お好みの方法に合わせて、一人でも多くの方にご支援いただければと思います。

追記（2022-06-13）：Robot Paymentをつかったスポンサー募集は終了しました。今までのご愛用を感謝いたします。

「Vivliostyle ユーザーと開発者の集い 2020秋」開催報告

2020-11-06T00:00:00+09:00

　去る10月24日、オンラインで「Vivliostyle ユーザーと開発者の集い 2020秋」を開催しました。

YouTubeチャンネルにてライブ配信をしたのですが、当日および1週間後までの視聴者数は446人！　Vivliostyle始まって以来の人数で、CSS組版への期待と熱気を感じずにはいられません。身が引き締まる思いです。

当日の発表動画とスライド資料を公開しています。

オープニング

開会の挨拶／Vivliostyleの現状と展望（村上真雄）動画

第1部　Vivliostyle の現在

Vivliostyle CLIで広がるCSS組版のエコシステム（緑豆はるさめ）動画スライド
スピーディーな本作りとカスタマイズ可能な本作りのための Vivliostyle Themes プロジェクト（やましー）動画スライド
Vivliostyle Pub の現状と課題（takanakahiko）動画スライド

第2部 Vivliostyleの利用例

Vivliostyleで厚めの薄い本をCSSで組んだ話（みこう悠長）動画スライド
Rapid publishing for public health books against COVID-19（Simon Worthington）（村上真雄による背景説明＋字幕翻訳付）動画 Wiki
商業出版『そろそろ常識？マンガでわかる「正規表現」』の制作（大津雄一郎）動画スライド

第3部　ひろがるCSS組版の世界

Paged.js について〜Yet another CSS paged media polyfill〜（アカベコ）動画スライド
より良いタイポグラフィのための知られざるCSS（鈴木丈）動画スライド

クロージング

Q&Aセッション／終会の挨拶動画

当日の様子は登壇者でもある、あかべこさんがブログで報告してくれています。背景情報を含めとても詳しく、よくまとめてくれたので、ぜひ読んでみてください。

CSS 組版 Vivliostyle ユーザーと開発者の集い 2020 秋｜アカベコマイリ

最後に宣伝です。11月8日（日曜）に月例の開発者会議をオンラインで開催します。イベントでご覧に入れたVivliostyleのプロダクトをどうのように開発するか、皆で話し合います。誰でも参加可能ですので、見るだけでよいのでぜひご参加ください。

Vivliostyle Slack 招待リンク

URLは当日、Slackの #general チャンネルで告知します。もちろんSlackも公開していますので、ぜひ覗いてみてください。

2019年度事業報告書を公開します

2020-06-11T00:00:00+09:00

一般社団法人ビブリオスタイルの事業年度は4/1〜3/31です。下記の通り、第2期となる2019年4月1日〜2020年3月31日の事業報告書を作成しましたのでお知らせします。

私たちについて>2019年度事業報告書

読みやすいように、事業報告書は当法人のメインプロダクトである Vivliostyle Viewer でも閲覧できるようにしてあります。CSS組版による誌面をご確認いただければと思います。

事業報告書にも書きましたが、第2期は飛躍のための準備期間でした。今期はより遠くへジャンプできよう、頑張りたいと思います！

GitHub Sponsors で Vivliostyle を支援しませんか

2020-04-29T00:00:00+09:00

少し前に申請していた GitHub Sponsors に無事通過し、このほど募集ページが公開されました。

Become a sponsor to Vivliostyle

このページから任意のコース（tier）の “Select” ボタンをクリックすることで、Vivliostyleに対して毎月一定額を支援することが可能になります。支払いはクレジットカードかPayPalの2種類からお選びいただけます。また、“Who can see your sponsorship?” （あなたの支援を誰かが見ることができますか？）の項目で “Private” を選択すれば、匿名による寄付も可能です（デフォルトは名前を公開する “Everyone”）。

コース（tier）は全部で10種類、金額は毎月1ドルから6,000ドルまでと、幅広い選択肢を用意しました。募集ページは英語ですので、ここではその日本語訳でご説明します。

毎月$1 ⭐️ ファン・スポンサー： Vivliostyle を愛してくれてありがとうございます。お礼として vivliostyle.jsリポジトリの BACKERS.md ファイルで、バッジ⭐️とともにあなたのアイコンを掲載します。
毎月$3 🌟 ファン・スポンサー： Vivliostyle を愛してくれてありがとうございます。あなたのサポートに感謝をこめて、vivliostyle.js リポジトリの BACKERS.md ファイルで、バッジ🌟とともにあなたのアイコンを掲載します。
毎月 $10 🌹 ベーシック・スポンサー： Vivliostyle を愛してくれてありがとうございます。お礼としてお名前を Twitter で告知し、vivliostyle.js リポジトリの BACKERS.md ファイルと公式サイト vivliostyle.org で、バッジ🌹とともにあなたのアイコンを掲載します。
毎月$30 💐 ベーシック・スポンサー： Vivliostyle を愛してくれてありがとうございます。あなたのサポートに感謝をこめて、お名前を Twitter で告知し、vivliostyle.js リポジトリの BACKERS.md ファイルと公式サイト vivliostyle.org で、バッジ💐とともにあなたのアイコンを掲載します。
毎月$100 🥉 ブロンズ・スポンサー： Vivliostyle を愛してくれてありがとうございます。Bronze Sponsor としてあなたのお名前を Twitter で告知し、vivliostyle.js リポジトリの BACKERS.md ファイルと公式サイト vivliostyle.org で、バッジ🥉とともにあなたのアイコンを掲載します。その他、以下の特典が加えられます：
- vivliostyle.js リポジトリの README ファイルにあなたのロゴを掲載
毎月$200 🥈 シルバー・スポンサー： Vivliostyle を愛してくれてありがとうございます。Silver Sponsor としてあなたのお名前を Twitter で告知し、vivliostyle.js リポジトリの BACKERS.md ファイルと公式サイト vivliostyle.org で、バッジ🥈とともにあなたのアイコンを掲載します。その他、以下の特典が加えられます：
- vivliostyle.js リポジトリの README ファイルにあなたのロゴを掲載
毎月$500 🥇 ゴールド・スポンサー： Vivliostyle を愛してくれてありがとうございます。Gold Sponsor としてあなたのお名前を Twitter で告知し、vivliostyle.js リポジトリの BACKERS.md ファイルと公式サイト vivliostyle.org で、バッジ🥇とともにあなたのアイコンを掲載します。その他、以下の特典が加えられます：
- vivliostyle.js リポジトリの README ファイルにあなたのロゴを掲載
- 公式サイト vivliostyle.org にあなたのロゴを掲載
毎月$1,000 🏆 プラチナ・スポンサー： Vivliostyle を愛してくれてありがとうございます。Platinum Sponsor としてあなたのお名前を Twitter で告知し、vivliostyle.js リポジトリの BACKERS.md ファイルと公式サイト vivliostyle.org で、バッジ🏆とともにあなたのアイコンを掲載します。その他、以下の特典が加えられます：
- vivliostyle.js リポジトリの README ファイルにあなたの大型のロゴを掲載
- 公式サイト vivliostyle.org にあなたの大型のロゴを掲載
- 月2時間のサポートまたはコンサルティング
毎月$2,500 💎 ダイヤモンド・スポンサー： Vivliostyle を愛してくれてありがとうございます。Diamond Sponsor としてあなたのお名前を Twitter で告知し、vivliostyle.js リポジトリの BACKERS.md ファイルと公式サイト vivliostyle.org で、バッジ💎とともにあなたのアイコンを掲載します。その他、以下の特典が加えられます：
- vivliostyle.js リポジトリの README ファイルにあなたの大型のロゴを掲載
- 公式サイト vivliostyle.org にあなたの大型のロゴを掲載
- 月5時間のサポートまたはコンサルティング
毎月$6,000 💠 スペシャル・スポンサー： Vivliostyle を愛してくれてありがとうございます。Special Sponsor としてあなたのお名前を Twitter で告知し、vivliostyle.js リポジトリの BACKERS.md ファイルと公式サイト vivliostyle.org で、バッジ💠とともにあなたのアイコンを掲載します。その他、以下の特典が加えられます：
- vivliostyle.js リポジトリの README ファイルにあなたの大型のロゴを掲載
- 公式サイト vivliostyle.org にあなたの大型のロゴを掲載
- 月12時間のサポートまたはコンサルティング

Vivliostyle はボランティアによって開発されています。この機会にぜひ、支援をご検討ください！

「Vivliostyle ユーザーと開発者の集い 2020春」開催報告

2020-04-26T00:00:00+09:00

ご報告が遅れてしまいましたが、「Vivliostyle ユーザーと開発者の集い 2020春」を、無事に終えることができました。

前回の3月21日付投稿では、折りからのパンデミックを受け、会場に参加者を集める以外に、オンラインでの動画配信もおこなうことを報告しました。しかし、4月に入ってからも状況は悪化の一途を辿り、オンライン開催のみに変更せざるを得なくなりました。

そんな悪環境でしたが、全部で8人の登壇者による盛り沢山の報告により、なんとか「Vivliostyleの現在と未来」を提示できたように思います。

とくに御礼申し上げたいのが、この逆境の中、登壇を引き受けてくださったゲスト講演者のkondoyukoさん、そしてカウプラン機関極東支部さんのお二人です。外部からの率直な意見を聞く機会を持てたことは、これからのVivliostyleにとって貴重な機会でした。

また、今年後半の公開を目指して開発中の「Vivliostyle Pub」について、バックエンド、フロントエンド、あるいはmarkdownなど、さまざまな角度からご報告できたのもよかったと思います。

本来でしたら懇親会で、ゲストの皆さんはもちろん、来場してくださった方々と親しく意見交換したかったのですが、それがかなわず残念です。ぜひ後日、そうした機会を持てるようになることを願っています。

当日のスライドや動画記録は、すべて以下の募集ページに集約しました。お時間のあるとき、ぜひご覧ください。

CSS組版 Vivliostyle ユーザーと開発者の集い 2020春

ドイツ国立科学技術図書館が Vivliostyle により、COVID-19対策の公衆衛生教科書を出版

2020-04-10T00:00:00+09:00

世界中で新型コロナウイルス（COVID-19）が猛威を振るっています。ドイツでもこの数週間、医療関係者は厳しい戦いを強いられてきました。

TIB（ドイツ国立科学技術図書館）はこの戦いに打ち勝つため、ドイツ国内で公衆衛生サービスの第一線に立つ医学生を対象にした、オープンに利用できる学習システムの開発を急いできました。

2020年4月9日、TIBはその最初の成果である教科書 “Krisenmanagement” （危機管理）を、 Vivliostyle を使って完成させたことを発表しました。プレスリリースは下記から読むことができます。

“Krisenmanagement” そのものの説明と閲覧は下記からどうぞ。

私達が、TIBのスタッフである Simon Worthington 氏からSlackで質問を受けたのは、3月26日のことでした。そこから数日間、私達はWorthington 氏と技術上のやりとりをしました。

制作を担当したTIBの Lambert Heller 氏は4月8日、自身のTwitterへの投稿で、このプロジェクトで使った Vivliostyle や Fidus Writer、Hypothesis、GitHubなどのツールを挙げた上で、「これらがなければ、100人もの著者がいる本を迅速に制作するWebベースでのワークフローを構築するのはほとんど不可能でした」と述べています。

In fact, we are super glad to have tools like @fiduswriter, @Vivliostyle, @hypothes_is, @github etc. in place. Without them, a rapid and fully web-based production workflow of a book with +100 authors would hardly be possible.
Thanks @mrchristian99 for bringing it all together! https://t.co/FxgSEPgJE2
— Lambert Heller 🌈🦄🐶 (@Lambo) April 8, 2020

冒頭のプレスリリースは4月9日のものですが、GitHubのリポジトリを見ると4月3日には完成したようです。本書が一刻も早い刊行を急いでいたことを考えれば、Vivliostyle が彼等の期待に見事に応えられたことを誇りに思っています。

Worthington 氏によれば、TIBは本書を皮切りとして次々に本の刊行を続ける予定であり、とりわけ重要な一冊は「接触者追跡 (contact tracing)」に関するもので、ドイツのシステムがどのように機能するのかを詳細に説明し、より多くの医療従事者が迅速に処置を行えるように活用される予定だとのことです。

私達としては、これからも可能な限り彼等へのサポートを続けていくつもりです。また、もしも Vivliostyle を新型コロナウイルスへの対応で利用したい方がいれば、どんなことでも私達にご質問ください。

日々、辛い状況が続きますが、皆で力を合わせて COVID-19 を撃退しましょう！

“CSS組版 Vivliostyle ユーザーと開発者の集い 2020春” を開催します

2020-03-21T00:00:00+09:00

新型コロナウィルスの世界的流行の中、私達に何ができるでしょう？　いろいろ考えた末に、私達はむしろ開発をスピードアップしようと決めました。そこで、来たる4月4日に以下のようなイベントを開催します。

CSS組版 Vivliostyle ユーザーと開発者の集い 2020春

この情勢ですので、インターネット中継をメインとして、少人数の会場参加も可能とする二元開催です。URLは上記告知ページ、及びTwitterで発表します。お伝えしたいのは以下の3点です。

ユーザによるVivliostyleの使用報告と新たな提案
新バージョンの変更点と、新しい Vivliostyle ファミリーの紹介
年内公開予定のコンシューマ向け無料サービス “Vivliostyle Pub” の報告

新型コロナウィルスの流行は、そう簡単に収束しないと思われます。それでも私達は、生きている限り活動をやめられません。つまりウィルスへ対処しながら、私たちができる活動をしていかなくてはなりません。

そうして、テレワークを始め今まで以上にインターネットが重要なインフラとなる状況がつづくでしょう。そのために、今よりももっとWebは使いやすくなるべきです。

なかでも日本において課題となるのは、文書コミュニケーションの効率性です。だからこそ、Vivliostyleは開発を止めてはいけないと考えました。

どうか一人でも多くの人が、それぞれ可能な方法で、私達のイベントに参加されますよう呼びかけます。

技術書典7に出展『Vivliostyleで本を作ろう Vol.2』公開！

2019-09-25T00:00:00+09:00

9 月 22 日に開催された技術書典 7 に出展した Vivliostyle ユーザー会の同人誌『Vivliostyle で本を作ろう Vol.2』の全篇を公開します。 👉Vivliostyle サンプル

Vivliostyle Viewer で閲覧
 通常のウェブページとして閲覧 (Raw HTML)

ソースは GitHub に公開：

Vivliostyle 開発者とユーザーの集い 2019夏開催しました！

2019-09-04T00:00:00+09:00

2019年8月31日（土）、〈CSS組版 Vivliostyle 開発者とユーザーの集い 2019夏〉イベントを、Vivliostyleユーザー会／Vivliostyle Foundation の主催、JAGAT XMLパブリッシング研究会の協力により、開催いたしました。参加・協力してくれたみなさま、ありがとうございます！

イベントでの発表資料が公開されています：

《第1部》Vivliostyle 開発者ミーティング

「Vivliostyle開発のこれまでと、これからへ」
by 村上真雄(@MurakamiShinyu) Vivliostyle Foundation代表

Vivliostyle の開発課題(issue)を GitHub Projects - vivliostyle.js で、課題カテゴリーごとのプロジェクトにまとめたので、ミーティング参加者にどのプロジェクトが重要か聞きました（複数回答）。結果は以下：

Bugs: 7人
PDF printing: 7人
Input formats: 7人
Paged media: 15人
Typography: 8人
Layout enhancement: 10人
Web standards: 7人
Other improvements:
- Improved error handling (more stable): 5人
- UI multilingualization: 3人
- Search function: 3人
- Chrome extension: 6人
- Documentation: 12人

《第2部》Vivliostyle・CSS組版ユーザーミーティング

Vivliostyleユーザー会の合同誌の制作｜Markdownの複雑化と締め切りのはざまで
by 緑豆はるさめ(@spring_raining) Vivliostyleユーザー会
Vivliostyleと関連ツールの便利な使い方
by 村上真雄(@MurakamiShinyu) Vivliostyle Foundation代表
「マンガでわかるRuby」のCSS組版・制作秘話
by
- 湊川あい(@llminatoll) 『わかばちゃんと学ぶ』シリーズ著者
- よう(@youchan) Rubyist「猫と森羅と日本語とRuby」著者
Vivliostyleで縦組シナリオを組版する
by 小形克宏(@ogwata) 電脳マヴォ合同会社業務執行社員。文字とコンピュータのフリーライター
CSS組版やってみた！ by やましー(@yamasy1549)
楽したい組版｜markdownからPDFへ by 石原ひでみ(@hidemi_ishihara)
EPUBファイルからVivliostyleでPDFを作る by 田嶋淳(@JunTajima) 電書魂

イベントの Twitter 実況のまとめ

Togetterまとめ：CSS組版 Vivliostyle 開発者とユーザーの集い 2019夏
- Twitter ハッシュタグ: #Vivliostyle

イベントの参加者による報告ブログ記事

Vivliostyle version 2019.8.101 リリース

2019-08-20T00:00:00+09:00

Vivliostyle version 2019.8.101 をリリースしました。

（最新の Vivliostyle Viewer およびユーザーガイドをご覧ください。）

これは Vivliostyle version 2019.8.100 リリース！ソースコード TypeScript 化のバグ修正版です：

Viewer UI でキーボードの操作が無効になっていた
Viewer の自動ページリサイズが無効になっていた

詳細については、Release Notes を参照してください。

Vivliostyle version 2019.8.100 リリース！ソースコードTypeScript化

2019-08-16T00:00:00+09:00

Vivliostyle version 2019.8.100 をリリースしました。

（最新の Vivliostyle Viewer およびユーザーガイドをご覧ください。）

Vivliostyle.js ソースコードを TypeScript に移行

Vivliostyle.js の元となるプロジェクトは 2013 年頃に Google のPeter Sorotokin氏が開発した EPUB Adaptive Layout 実装で、そのソースコードは、JavaScript (ES5)と Closure Compiler のための型注釈を用いて書かれていました。現 Trim-marks Inc.のToru Kawakubo氏をメイン開発者として開発開始された Vivliostyle.js は、その同じソースコードスタイルを踏襲してきました。

この ES5 の JavaScript スタイルは古くなり今後の維持が難しいため、私たちはこれを TypeScript に移行することを決め、そしていま TypeScript への移行が完了しました。[#536]

ソースコードが TypeScript 化されたことで、オープンソース Vivliostyle 開発への貢献が活発になることを期待しています。

開発については、Development documentをご覧ください。

その他の変更と修正

TypeScript ソースコード用に再編されたビルドスクリプト
- 複数ターゲットへのトランスパイル： lib/vivliostyle.min.js for ES2018、 lib/vivliostyle-es5.min.js for ES5. [#538]
UA スタイルシートなどのリソースを別個にダウンロードしないようにした [#537]
これまでダウンロードパッケージと npm パッケージに同梱されていた大きなサンプルファイルを削除 [5c3becac] [245c9e7d]
- これによりダウンロードパッケージ (vivliostyle-js-latest.zip) のサイズが以前は 6.8MB あったのが 1.4MB に縮小されました。
- Vivliostyle のサンプルファイルは、vivliostyle.js から vivliostyle_doc リポジトリに移動しました。
Microsoft Edge で Web publication をロードしたときのエラー “Failed to fetch a source document” を修正 [1ed01afc]
EPUB OPF (.opf) の MIME タイプを認識しない一部の Web サーバーでのエラー “empty response for EPUB OPF” を修正 [db8e9bcb]

過去のリリースの概要

Vivliostyle バージョン 2019.1.106: 最後の JavaScript ソースコードのバージョン
Vivliostyle バージョン 2019.1.101: Viewer UI に目次パネル, Web publications (複数 HTML 文書), GitHub からの文書ロード, env(pub-title) と env(doc-title), ビューポート・パーセント単位, calc(), Viewer UI 設定パネル改良, Viewer スタートページ, Render All Pages 設定, vivliostyle メディア型
Vivliostyle バージョン 2018.10.100: Viewer UI にページ番号／総ページ数
Vivliostyle バージョン 2018.8.100: Viewer UI 改良, CSS 論理プロパティ

詳細については、Release Notes を参照してください。

Vivliostyle 開発者とユーザーの集い 2019-08-31 のお知らせ

2019-08-01T00:00:00+09:00

2019年8月31日（土）東京都内で、Vivliostyle の開発者とユーザーのミーティング・交流会を行います。

《第1部》Vivliostyle開発者ミーティング 13:10-14:20
《第2部》Vivliostyleユーザーミーティング 14:30-16:20
《第3部》交流懇親会 16:40-17:50

会場: 東京都杉並区和田1-29-11 日本印刷技術協会（JAGAT）
主催: Vivliostyleユーザー会／Vivliostyle Foundation
協力: JAGAT XMLパブリッシング研究会

イベント詳細と参加申し込みは、
👉告知ページ〈CSS組版 Vivliostyle 開発者とユーザーの集い 2019夏〉

Vivliostyle version 2019.1.106 リリース

2019-06-14T00:00:00+09:00

Vivliostyle version 2019.1.106 をリリースしました。

（最新の Vivliostyle Viewer およびユーザーガイドをご覧ください。）

これは 2019.1.101 リリースのバグ修正版です：

Firefox での印刷が正常にできなかった問題を修正
ページサイズ指定での vw/vh 単位がエラーになっていたのを修正

詳細については、Release Notes を参照してください。

技術書典6に出展『Vivliostyleで本を作ろう Vol.1』公開！

2019-05-06T00:00:00+09:00

前回記事「技術書典 6 に Vivliostyle ユーザー会が出展します！」にて紹介の『Vivliostyle で本を作ろう Vol. 1』全篇を公開します。 👉Vivliostyle サンプル

Vivliostyle Viewer で閲覧
 通常のウェブページとして閲覧 (Raw HTML)

ソースは GitHub に公開：

Vivliostyle version 2019.1.105 リリース

2019-04-23T00:00:00+09:00

Vivliostyle version 2019.1.105 をリリースしました。

（最新の Vivliostyle Viewer およびユーザーガイドをご覧ください。）

これは 2019.1.101 リリースのバグ修正版です：

ページ・マージン・ボックスの内容がページの下部に重複して表示されることがあるバグを修正
-epubx-expr() の式に演算子 != があると CSS パーサーエラーが発生してページ生成に失敗するバグを修正
一部のプロパティがページ・パーティションまたはマージン・ボックスのコンテキストで無視される問題を修正
text-combine-upright: all による縦中横が WebKit で機能しない問題を修正
サーバーでディレクトリ・リスティングが有効になっていると EPUB をロードできないことがあるバグを再修正

詳細については、Release Notes を参照してください。

技術書典6にVivliostyleユーザー会が出展します！

2019-04-13T00:00:00+09:00

【追記】 『Vivliostyle で本を作ろう Vol. 1』の全篇を公開しました。👉Vivliostyle サンプル

こんにちは！ Vivliostyle Foundation コラボレータの spring-raining です。この記事では 4 月 14 日に開催される技術書典 6 で、サークル「Vivliostyle ユーザー会」が頒布する同人誌「Vivliostyle で本を作ろう Vol.1」を紹介します。

技術書典って？

技術に関する同人誌の即売会、すなわち個人制作の本を売買する会です。回を追うごとに規模も拡大しており、今度の 4 月 14 日の技術書典 6 は池袋サンシャインシティで開催されます。

https://techbookfest.org/event/tbf06

技術と言っても内容は様々、ソフトウェアやハードウェア、科学技術、果てはエンジニア論までジャンルを問わず集められています。それらの本を制作するための選択肢として、今 Vivliostyle は徐々に活用が進んでいるのです。

Vivliostyle ユーザー会

かつてない技術書典の盛り上がり……乗るしかない、このビックウェーブに！ Vivliostyle の 1 ユーザーとして、私は Vivliostyle のさらなる普及を目指して「Vivliostyle ユーザー会」を立ち上げました。そして、Vivliostyle ユーザーだけの夢の合同誌「Vivliostyle で本を作ろう Vol.1」がここに完成したのです！ここでは、それぞれの記事の内容を簡単に紹介します。

●EPUB Adaptive Layout による段組み混在レイアウトへの挑戦（arinoth）

「ふりがなプログラミング」シリーズなど、多くの商業技術書を手がける編集プロダクション「リブロワークス」が、新しく Vivliostyle を使って試みられているレイアウト制作について紹介しています。Vivliostyle の裏で動く EPUB Adaptive Layout まで立ち入った貴重な記事です！

● 私が組版オペレータになっても？（takanakahiko）

本書と同じく、Vivliostyle で合同誌を制作した際の工程について紹介しています。複数人で記事を執筆する際は、Markdown で執筆ができる点も魅力ですね〜

●CSS 組版やってみた！（やましー）

CSS 組版が気に入りすぎて、同人誌だけでなく卒論まで Vivliostyle で組版してしまった剛の者による解説記事です。卒論という時間的な制約が強い条件で、CI による PDF のビルドにより極限まで作業を省力化している点がグッドです！

●Vivliostyle.js: TypeScript 化の道のり（spring-raining）

Vivilostyle.js で現在進行している TypeScript 化について、私も記事を書きました。先に予告しておきますが、分量はちょっと少なめです…

●Vivliostyle Viewer で CSS 組版ちょっと入門（村上真雄）

Vivliostyle Foundation 代表の村上による、「Vivliostyle Viewer」プロジェクトの解説です。「ちょっと」と言いつつめちゃめちゃ紹介されているので、この記事の内容だけでも大分使いこなせそうです…！

読んでみたい！

Vivliostyle ユーザー会や技術書典に興味があれば、ぜひ遊びに来てください！ か 22 にてお待ちしております。

お気に入り追加はこちらから！

Vivliostyle version 2019.1.103 リリース

2019-04-05T00:00:00+09:00

Vivliostyle version 2019.1.103 をリリースしました。

（最新の Vivliostyle Viewer およびユーザーガイドをご覧ください。）

これは 2019.1.101 リリースのバグ修正版です：

ページの背景色が塗り足し(bleed)領域に描画されない問題を修正
ショートハンドプロパティで vw/vh 単位、calc()、-epubx-expr() が無効になる問題を修正
env(doc-title) 等が content プロパティ値リストの一部として使われたときに動作しない問題を修正
Adaptive Layout スタイルシート使用時に目次ボックスが正しく生成されない問題を修正
目次ボックスのキーボードナビゲーションを修正：サブツリーアイテムを閉じずにツリーアイテムを閉じるとフォーカスが失われた
サイズを変更すると予期しないページ移動（最初のページから次のページへ）が発生する問題を修正
見開き左右のページ幅が異なる場合にページ見開きが正しく中央揃えされない問題を修正
固定レイアウト EPUB などで viewport サイズの指定があると誤ったページリサイズを引き起こす問題を修正
余白ゼロで印刷すると大きな画像が消えることがあるという問題を修正
カラー名 rebeccapurple をサポート
[ビューア UI] PDF に印刷したときにデフォルトのページサイズ auto が尊重されない問題を修正しました。
[ビューア UI] userStyle CSS の解析とエンコードの問題を修正
[ビューア UI] 小さな画面でメニューボタンを隠す順序を変更する
[ビューア UI] FontSize を調整して、テキストに有効な値を増減します。
[ビューア UI] “fontSize” URL パラメータを改善しました：パーセントと小数を受け入れます

詳細については、Release Notes を参照してください。

Vivliostyle version 2019.1.102 リリース

2019-03-04T00:00:00+09:00

Vivliostyle version 2019.1.102 をリリースしました。

（最新の Vivliostyle Viewer およびユーザーガイドをご覧ください。）

これは 2019.1.101 リリースのバグ修正版です：

EPUB をロードできないことがあったバグを修正しました。この問題は、解凍された EPUB ファイルのトップディレクトリを指定したとき、サーバーでディレクトリ・リスティングが有効になっている場合に発生しました。

詳細については、Release Notes を参照してください。

Vivliostyle version 2019.1.101 リリース

2019-02-27T00:00:00+09:00

Vivliostyle version 2019.1.101 をリリースしました。

（最新の Vivliostyle Viewer およびユーザーガイドをご覧ください。）

このリリースでは、以下の点が改善されています。

目次（Table of Contents, TOC）ナビゲーションが有効になりました

Viewer パラメータ #b= が使用されていて、出版物に目次データがある場合、目次パネルが有効になります。HTML 文書では、目次要素は <nav role="doc-toc"> などでマークアップされます。Vivliostyle は、CSS セレクタ [role=doc-toc], [role=directory], nav li, .toc, #toc で選択される要素を目次要素として認識します。

Web 出版物および同様の複数 HTML 文書をサポート

サポートされている文書タイプは以下のとおりです（Viewer パラメータ#b= 使用時）：
- ZIP 解凍済みの EPUB
  - 解凍された EPUB ファイルのトップディレクトリ、または OPF ファイルの URL を指定できます。
- Web 出版物（閲覧順のある HTML 文書の集まり）
  - プライマリーエントリーページまたはマニフェストファイルの URL を指定できます。
  - Web 出版物マニフェストのフォーマットについては、W3C ドラフト Web Publications および Readium Web Publication Manifest がサポートされています。
- (X)HTML 文書
  - (X)HTML 文書の URL が指定されている場合、その URL はプライマリーエントリーページとして扱われ、一連の HTML ファイルが自動的にロードされます。
    - Web 出版物マニフェストがプライマリーエントリーページの(X)HTML 文書で指定されている場合は、マニフェストの readingOrder が使用されます。
    - マニフェストが指定されていない場合、または “readingOrder” がマニフェストに含まれていない場合は、CSS セレクタ [role=doc-toc], [role=directory], nav li, .toc, #toc で選択される目次要素からリンクされた(X)HTML 文書がロードされます。

GitHub からの文書の読み込みと特定の URL のサポート

GitHub と Gist の URL は直接指定できます。github/gist URL が指定されている場合、Vivliostyle は github/gist の raw コンテンツをロードします。
青空文庫の(X)HTML の URL を指定できます。その場合、Vivliostyle は青空文庫の github raw コンテンツをロードします。
JS Bin の URL は JS Bin output URL に変換され、読み込むことができます。これは、Gist と同様に、小さな HTML+CSS コードで Vivliostyle の出力をテストするのに便利です。

出版物のタイトルと個々の HTML 文書のタイトルがビューアの UI に渡されるようになりました

[ビューア UI] Web ページのタイトルに表示中の文書のタイトルを反映します。

環境変数 ‘env(pub-title)’ と ‘env(doc-title)’ で出版物／文書のタイトルをページヘッダに出力できます

仕様：CSS Environment Variables Module Level 1 では env() 関数が定義されてます。ただし、env(pub-title) と env(doc-title) はまだ定義されていません。
env(pub-title)：出版物タイトル = EPUB、Web 出版物、またはプライマリーエントリーページの HTML タイトル。Viewer パラメータ #b= が使用されている場合に有効になります。
env(doc-title)：文書タイトル = HTML title、複数の HTML 文書からなる出版物の中の章や節のタイトル
タイトルデータが見つからない、つまり HTML に <title> 要素がない場合、または Viewer パラメータ #x= が使用されている場合の env(pub-title) などでは、空の文字列 “” が返されます。

ビューポートのパーセンテージ単位：vw、vh、vi、vb、vmin、vmax、およびページサイズのパーセンテージ単位 pvw、pvh、pvi、pvb、pvmin、pvmax

仕様：CSS Values and Units - Viewport-percentage lengths、ただしページサイズのパーセント単位はこれまでのところ定義されていません。
注：ページメディアのコンテキストでは、ビューポートのパーセンテージ単位 vw、vh、vi、vb、vmin、vmax は、ページエリアのサイズ、つまりページボックスのコンテンツ領域に対する相対値であり、@page ルールで指定された margin、border、padding は含みません。これはとても理にかなっていますが、ページサイズ相対の単位も必要かもしれません。pvw、pvh、pvi、pvb、pvmin、pvmax の各単位は、vw、vh、vi、vb、vmin、vmax と似ていますが、参照サイズはページ余白を含むページサイズです。

CSS ‘calc()’ 関数をサポート

仕様：CSS Values and Units - Mathematical Expressions
calc() 関数の他に、calc() 関数内で min() 関数と max() 関数を使用できます。
制限：calc() 内のパーセント値が正しく計算されません。
- この calc() 実装は、単に Adaptive Layout ‘-epubx-expr()’ function の実装を再利用したものであるため、今のところそれによる制限があります。

[ビューア UI] 設定パネルに新しいユーザースタイル設定 (“User Style Preferences”)

新しい設定：ページ余白、改ページ（widows/orphans）、画像、テキスト（基本フォントサイズ、行の高さ、フォントファミリ）
ユーザースタイルの CSS コードが “CSS Details” ボックスに表示されて、編集可能です
ユーザスタイル CSS は URL パラメータ userStyle=data:,/*<viewer>*/…/*</viewer>*/ に保存されて、再読み込み時に消えず、ブラウザでブックマークできます。
“Font size (%)” は “Text：large/small” ボタンで増減できる ViewerOptions の fontSize を反映しており、この設定は新しい URL パラメータ fontSize= に保存されます。

[ビューア UI] Vivliostyle Viewer のスタートページに文書の URL 入力ボックスと使用方法の説明

文書 URL パラメータ（#b= または #x=）が指定されていない場合、スタートページが表示されるようになりました。
ユーザーが入力した文書 URL は URL パラメータ #b= に反映され、Enter キーを押すと文書がロードされます。

Render All Pages（すべてのページをレンダリング ON/OFF）設定

On：印刷向き（すべてのページが印刷可能で、ページ番号は期待されるとおりに機能します）
Off：閲覧向き（おおまかなページ番号を使って、クイックロード） - このモードは、多数の HTML 文書で構成される大規模な出版物を閲覧するために必要です。
[ビューア UI] この設定は設定パネルと URL パラメータ renderAllPages=[true | false] で指定できます。
- デフォルト設定は #b=（Book 閲覧）の場合は renderAllPages=false、#x=（個別(X)HTML 文書）の場合は renderAllPages=true です。

デフォルトで ‘vivliostyle’ メディアタイプを有効にしました

これは ‘print’ メディアタイプのように使うことができ、Vivliostyle 特有のスタイルシートと一般的な印刷スタイルシートを区別するのに役立ちます。

その他の変更点

スタイルルール h1,h2,h3,h4,h5,h6 { break-after: avoid; } をデフォルトのスタイルシートに追加。デフォルトで見出しの後の改ページを避けるようにしました。
<style> 要素で media 属性が無視されていたバグを修正しました。
文書の読み込みに失敗したときのエラーメッセージを改善しました。
Viewer パラメータ #b= に対応する関数 loadEPUB() を loadPublication() に改名しました。これは EPUB だけのものではなくなったためです。

詳細については、Release Notes を参照してください。

謝辞

このバージョンの開発には、株式会社日本ビジネスプレスより支援をいただいております。

Vivliostyle version 2018.12.103 リリース

2019-01-03T00:00:00+09:00

Vivliostyle version 2018.12.103 をリリースしました。

このリリースには以下の変更が含まれています：

ルビ（あるいは inline-block/table 類）によって改ページの不具合が生じることがあったバグを修正
URLフラグメント・パラメータの f=epubcfi(…) でEPUBのスパイン項目の先頭にジャンプできないバグを修正
inline-table が別の table の中にあって改ページが起きるときにエラーが発生するバグを修正
設定パネルの Applay ボタンをクリックしたときにパネルを閉じるようにした
ウインドウ幅が広いとき Previous Page、Next Page および Text: Default Size ボタンを有効にした

詳細については、Release Notes を参照してください。

印刷・出版のためのオンラインエディタ Viola のご紹介

2018-11-22T00:00:00+09:00

はじめまして、Vivliostyle プロジェクトコラボレーターのspring-rainingです。今回は Vivliostyle を活用して私が制作したオンラインエディタ、Viola についてご紹介したいと思います。

開発経緯

2016 年、私はソフトウェア開発について紹介する同人誌を執筆するため、組版ソフトウェアを探していました。当時（そして今でも）そのような用途のための組版ソフトウェアのうち、デファクトスタンダードは LaTeX でした。しかし、私は自力で技術書を執筆し、レイアウトを思い通りに変更できるほど LaTeX を自在に扱えるとは言いがたく、別の選択肢を探していました。そんな時見つけた Vivliostyle は、Web アプリケーションエンジニアである私にとって、Web 技術を活用して組版を実現するという解決策が非常に魅力的なものに映りました。

以降現在まで 5 冊の同人誌を、一貫して Vivliostyle を用いて制作しており、Web 技術による組版というビジョンの先見性を確信しました。一方で、残念ながら Vivliostyle.js は単なる JavaScript のライブラリであるため、このライブラリを使うためには少なからず JavaScript の知識を必要とすることも事実です。そこで、私はより多くの人が CSS 組版を体験できるよう、Vivliostyle を組み込んだ新しいテキストエディタを開発することを決めました。

Viola について

Viola の一番の利点はエディタの機能性です。世にあるブラウザ向けのテキストエディタの中でも、Viola はかなりプログラマーや Web デザイナー向けの機能を備えたエディタになっています。複数の HTML や CSS、画像、フォントファイルなどを扱うことができるので、普段エディタ上で Web ページを作っているような感覚で、ページをレイアウトすることができます。

HTML や CSS にそこまで詳しくない人でも執筆できるよう、今後はテンプレートを追加していくことを計画しています。ぜひ https://viola.pub をチェックしてみてください！

viola-savepdf について

Viola の開発に関連して、私は viola-savepdf というツールも公開しました。これは、Viola のコア機能から Vivliostyle.js による変換機能を CLI 向けに切り出したもので、既に HTML や CSS を編集するワークフローを確立しているプロのエンジニア・デザイナー向けのツールです。

viola-savepdf をインストールするには、Node.js をセットアップした上で以下のコマンドを実行します。

npm install -g viola-savepdf

インストール後、以下のようなコマンドを実行することで PDF を生成できます。

savepdf -o output.pdf --size A4 input/index.html

また、--preview オプションを指定するとブラウザが起動し、プレビューを見ることができます。

savepdf --preview input/index.html

利点・欠点

Fidus Writerは、Viola と同様に、Vivliostyle を使って Web ベースの組版を実現する編集ツールの有力な選択肢です。Viola は文章の編集ツールであると同時に、HTML や CSS のテキストエディタでもあるので、より自由に原稿を編集することができます。Vivliostyle による出力結果のライブプレビュー機能も Viola の一押しの機能です。一方で、執筆時の軽快さや快適性といった面では、現状では長年開発を続けてきた Fidus Writer に軍配が上がります。両方のエディタを使ってみて、好みの使い方を探してみてください。

vivliostyle-print は viola-savepdf と似た機能を持ちますが、用途が少し違います。vivliostyle-print は JavaScript ライブラリとして提供され、Vivliostyle の変換機能を使いやす形で利用できる API を提供します。一方で、viola-savepdf はコマンドラインアプリケーションとして提供され、ローカルのディレクトリにある HTML や CSS に対して、Vivliostyle で変換した結果を保存することができます。

Vivliostyle とともに、Viola がより多くの人に愛用されることを願っています！

Vivliostyle と Webベース出版について——Fidus Writer 開発者によるインタビュー

2018-11-12T00:00:00+09:00

Vivliostyle によるCSS組版・PDF出力を組み込んだ学術論文用オンライン編集ツール Fidus Writer のWebサイトで、Vivliostyle 代表村上真雄へのインタビュー記事が公開されました（英語）。その日本語訳を以下に掲載します。

＊＊＊

Fidus Writer バージョン3.5で、PDF生成に Vivliostyle を使うようになりました。Vivliostyle はブラウザ技術を使ってPDFレンダリングを行う日本発のオープンソースプロジェクトです。Vivliostyle に関わっている中心人物である村上真雄（Shinyu Murakami）は、仙台市出身で現在は、言語聴覚士で本の著者である妻と、さいたま市に暮らしています。村上は長年にわたりページ・レンダリングとブラウザ技術を組み合わせることを提唱しており、Webページのスタイルを定義する CSS (Cascading Stylesheets)を、ページネートされたコンテンツのためにも使用する技術について非常に熱心なことで知られています。私（Johannes Wilm、Fidus Writer 開発者）は彼に、私たちの読者と視点を共有するために、いくつか尋ねました。

数年前、私は、ブラウザで印刷ダイアログを使用したとき、より良い印刷出力を作成するプロジェクトに取り組んでいました。私のシステムは、ページヘッダー、ページ番号、脚注、その他いくつかのものを追加することができ、それを作り上げるのには約1年かかっていました。私にとってこれは、PDF組版ソリューションの高価なライセンス料を支払うことを避ける方法でした。

そのとき私は、自分がやっていたことはかなり制限されたもので、おそらくは他の誰にも有用ではないことを知っていました。だから私は、2014年の終わりに突然、Vivliostyle プロジェクトをスタートするというあなたからのEメールを受け取ったとき、かなり驚きました。この段階で、あなたはすでにこの分野で知られた存在で、PDFページレンダリングでキャリアを積んでいました。当時のPDFレンダリングの状態がどのようなもので、なぜ私に連絡することを選択したのですか？

Vivliostyle プロジェクトを始める前、私は、別の組版エンジンの開発に携わっていました。その製品は CSS Paged Media 仕様をサポートし、高品質なPDFの生成が可能な、商用のプロプライエタリなソフトウェアです。しかし私は、これから必要とされるのはオープンソースでWeb上で動くものだと考え、新しいプロジェクト「Vivliostyle」を構想しました。O’Reilly Media の Tools of Change for Publishing の記事を読んで “BookJS” の存在を知っていたので、ブラウザ上での本の組版が実用になるだろうという確信がありました。そこで、できたら一緒にプロジェクトを進めたいと思い、その “BookJS” 開発者であるあなたとコンタクトを取ったのです。

あなたが Vivliostyle をセットアップしたとき、あなたと開発チームは、私が作り上げたソースコード上で開発を続行するのではなく、別のプロジェクトの上で開発を始めました。その決定の背後には何があったのですか？

私たちが目指していたのは、CSSによって自由なページレイアウトを実現できることです。すでに商用CSS組版エンジンで実装されている CSS Paged Media 仕様をサポートすることはもちろん、これからW3Cでの標準化が進むであろうCSSでのより高度なページレイアウト機能をサポートしたいと考えました。

それを１から自分たちで作るか、既存のオープンソースをベースにして作るか検討しました。

あなたの “BookJS” (またの名は Pagination.js、そのあと SimplePagination.js) は、JavaScript で本の組版を可能にした画期的なものでしたが、いくつか元々の制限がありました。ページレイアウトの指定には CSS ではなく JavaScript でのカスタマイズが必要であることなどです。

そこで注目したのが、Peter Sorotokin（元 Adobe、その後 Google に所属）による、EPUB のページレイアウトのためにCSSを拡張する提案 EPUB Adaptive Layout 仕様と、その JavaScript での実装です。ページテンプレートという新しいCSSの機能によってページレイアウトの指定ができることは魅力的でした。これをベースにして、印刷出版物の組版にも十分使えるように、CSS Paged Media と関連CSS仕様の実装を追加していくことが、私たちが目指しているものを作る近道だと考えました。

Vivliostyle は当初、この分野で活躍しているもっと大きな会社の子会社でした。それからスタートアップ企業となりました。そして最近ではそのスタートアップ企業は別の名前に変わり、Vivliostyle オープンソース・プロジェクトは非営利のモデルで運営されています。これらの変化の背景は何ですか、Vivliostyle を使用する可能性がある人たちにとってどのような違いがありますか、またどのような組織モデルのもとで Vivliostyle はプログラムされているのですか？

最初、私はそれ以前に仕事をしていた会社の支援を得て Vivliostyle をその子会社として創業し、そのあと別の支援者たちの協力を得て独立したスタートアップ企業となりました。

私たちのビジネスモデルは、オープンソースの開発を行いながら、同時に企業向けの商用ライセンスの販売とコンサルティング業務によって収益を得るというものでした。

しかし、しだいに会社の経営にとってオープンソース製品の開発にあまり時間を費やすことはできないという状況になっていき、その開発は停滞してしまいました。

その段階で、営利目的の会社と非営利のオープンソース・プロジェクト団体とに別れたほうが、双方にとってよいだろうということになったわけです。会社名とその商用製品のブランドは変わり（会社は Trim-marks Inc.、その製品は VersaType）、Vivliostyle という名前はオープンソースの側だけのものになりました。

オープンソースの Vivliostyle プロジェクトのために、私たちは新しい非営利団体である Vivliostyle Foundation（一般社団法人ビブリオスタイル）を設立しました。この新しい団体で私たちは、Vivliostyle プロジェクトに協力してくれる人たちと関わりをもつことにとても関心があり、開発への貢献者が増えることを期待しています。

Vivliostyle のライセンスも変更されました。当初は Apache ライセンスでしたが、今は AGPL です。それは、商用の書籍を書くためには使うことができないという意味ですか、あるいはそれでどういう影響がありますか？ライセンスの変更の背景にある考えは何でしたか？

当初私たちは Vivliostyle を Apache ライセンスのもとで開発しました。これはベースとしたオープンソース（Adaptive Layout）のライセンスを引き継いだものです。

その後 AGPL に変更しました。それはオープンソース版と同時に商用ライセンス版製品も扱っていた会社の方針によるものでした。現在、オープンソースの Vivliostyle プロジェクトはその会社から離れましたが、AGPL ライセンスを引き継いでいます。その会社のもとで開発された部分のソースコードの著作権は、今は Trim-marks Inc. の名前になっているその会社が保持しているからです。

AGPL ライセンスであることによって、ソースコードを改変して、別製品にしたりWebサービスに埋め込む場合には、改変したソースコードを開示する義務がありますが、Vivliostyle をそのまま利用して、あるいは、Fidus Writer など、Vivliostyle を利用している別のサービスを利用して、商用の書籍を制作することに何ら問題はなく、制限なしで Vivliostyle を印刷やPDF生成に使用することができます。

最初から、あなたは技術仕様の標準化にとても関心がありました。私たちが初めて会ったのは、オーストラリアでの World Wide Web Consortium（W3C）CSS ワーキンググループ（CSSWG）の会議でした。その後、私は Vivliostyle の立場で、ページフロート仕様に取り組むことになりました。当時、標準化作業に積極的には関与していなかったそれなりに大きなPDFレンダラの会社がいくつかありました。最近では、あなたが Vivliostyle Foundation を立ち上げたとき、CSSWG の招待エキスパートである Florian Rivoal と、Editing タスクフォースの招待エキスパートである私を、理事に迎え入れました。ページネーションに関連する機能を標準化することがなぜ重要なのですか？特にスタートアップ企業にとって、プロジェクト独自の新しい機能を作ることが妨げられることはありませんか？

HTML と CSS だけで本の組版を行うという技術は、まだ標準仕様が完成していないものです。そこでベンダーにとっては、標準を無視して彼らのソフトウェアの独自な方法で機能を実装していくというやり方も可能となっています。

しかし私は、それがよいやりかたとは思いません。それでは現在の特定のニーズを満たすことはできても、将来に標準仕様ができたらそれと互換性がなくなってしまい、非標準のものは捨てられることになってしまいます。

そこで、Vivliostyle では標準仕様の策定に積極的に関わりながら、Vivliostyle を開発して、後で標準になるものに可能な限り近づけるようにすることを決めました。

あなたが非標準のものは捨てられることなると言うのは、もはや動かないプロプライエタリなソフトウェアのために作られたコンテンツのことを考えていますか？それを再び使用できるようにするには新しい標準仕様に合うようにコンテンツのフォーマットを直さなければなりませんね。あるいは、標準仕様をアプリケーションで使えるようにするために作り直さなければならないプログラムコードのことを考えていますか？

ソフトウェアとコンテンツの両方とも影響を受けることになります。ベンダーは、新しい標準が利用可能になった後も、既存ユーザーのために非標準機能をサポートし続けることがよくあります。このようなベンダーにとって、古い非標準なものを残しながら新しい標準を実装することは面倒ですが、もし新しい標準を実装しなければ、それを使用したい新しいユーザーを失うことになります。

Vivliostyle を最初に始めたとき、どのようなユースケースを予見してましたか？そして今 Vivliostyle が実際にどう使われているのでしょうか？

Vivliostyle をはじめたとき、これが将来的にはWebブラウザ上でのビジュアルな編集・レイアウト機能と結びつくことで、ページレイアウトを必要とする幅広い用途に使われる可能性があるけれど、まずは、Web と EPUB など HTML 中心のコンテンツから印刷用のページレイアウトも必要とされるような場合に、Vivliostyle が特に役に立つはずだと考えていました。

そしてこれまで明らかになったところでは、Vivliostyle および別ブランドになった商用製品は、主に3つの出版分野、すなわち学術ジャーナル、製品カタログやマニュアル、そして技術書に使用されています。

技術書については、商業出版での技術書のほかに、技術者が自分で出版する技術同人誌を作るのに Vivliostyle が使われています。技術者たちは、たいていHTMLとCSSなら分かるので、ほかの難しい組版ソフトウェアを使う必要がない Vivliostyle が好まれています。

現在はまだ Vivliostyle が利用される出版分野はあまり多いとはいえません。それは、多くの用途に必要とされることが Vivliostyle で何でもできるようにはなっていないことと、使いやすさがまだ不十分なためです。たとえば、PDFの生成は、Webブラウザの印刷・PDF出力機能に依存していてそれがあまり高品質ではないということが制限になっています。

Vivliostyle は現在、PDFの生成とブラウザでのページの表示（例えば EPUB の場合）の両方に使用できます。 Vivliostyle の次の大きな目標は何ですか？

はい、Vivliostyle はPDFを生成するというだけではなくて、ブラウザ上でページネーション表示を行うビュアーとしても使うことができます。たとえば複数の HTML ファイルからなる文書や、EPUB のビュアーにもなります。

今後、私たちは、W3Cの出版ワーキンググループで標準化が進められている Web出版物 (Web Publications) に対応することを考えています。Vivliostyle がWeb出版物ビュアーとして使われることで、そのページレイアウトがより良いものとなり、またそれは、Web出版物と印刷出版物を同時に作ることが可能になるということです。

Vivliostyle は、Fidus Writer やおそらく他のテキスト編集アプリケーションにも適しているようです。Vivliostyle を自分のWebサイトやアプリに追加することで他に誰が恩恵を受けることができると思いますか？

Vivliostyle を組み込んだ出版用のテキストエディターとして、ほかに次のものがあります: Viola は印刷と出版のためのオンライン・エディターです。それから、MDBP: atom-markdown-book-preview は Atom エディター上でマークダウンで書かれたテキストを Vivliostyle でプレビューすることができます。

テキストエディター以外にも、Vivliostyle はオンライン電子書籍ビュアーや、さまざまなレポート生成アプリケーションのプレビューと印刷機能のために役に立つでしょう。

また、Webサイトで Vivliostyle Viewer を使用することで、HTMLコンテンツをスクロール方式のほかに、ページネーション方式でも読めるようにしたり、印刷用のページレイアウトを付加することができます。

そしてW3CでのWeb出版物の標準化が進んだときには、そのような出版物のビュアーとして、またWeb出版物オーサリングツールに組み込むものとして Vivliostyle が役に立つでしょう。

このようなとても深いインタビューができて本当にありがとうございます！私は、私たちのユーザーが Vivliostyle をどう受け取るのか、また、彼らがそれで何をもっと望むことになるのか、反響が楽しみです。

ありがとうございました！

Vivliostyle version 2018.10.100 リリース

2018-10-31T00:00:00+09:00

Vivliostyle version 2018.10.100 をリリースしました。

このリリースには以下の変更が含まれています：

ページ指定ジャンプ(Go to Page)、ページ番号/総ページ数表示
ナビゲーションUIの調整
タッチスクリーンで、拡大表示中あるいは横スクロール可能状態のときはページスワイプしないようにした
EPUB の内部リンクが機能しないバグがあったのを修正

詳細については、Release Notes を参照してください。

謝辞

このバージョンの開発には、株式会社日本ビジネスプレスより支援をいただいております。

Vivliostyle-print について

2018-10-03T00:00:00+09:00

（英語元記事からの日本語訳）

新パッケージ Vivliostyle-print についてのセルフ・インタビュー

Vivliostyle.js は、すでに数年間私たちとともにあります。ブラウザ内でページメディアを表示するだけでなく、ページメディアをターゲットにした追加の CSS で HTML を印刷することもできます。Vivliostyle-print にはどんな必要性がありますか?

Vivliostyle.js がすでに数年間存在していて、Vivliostyle-print が、CSS の面では何も新しいものを追加していないことはその通りです。HTMLとCSSのみを認識し、JavaScriptを認識しないエンドユーザにとっては、Vivliostyle Viewer (Vivliostyle.js + Vivliostyle-ui) を使用することは引き続き有効です。

私が直面した Vivliostyle.js の問題は、それを他のソフトウェアに含めようとしたときに、本当に複雑なプログラムだということでした。そして、最近までドキュメンテーションはあまり広範でありませんでした。今でもこのパッケージを作成する過程で、私はこれを動くようにするために、チャットや試行錯誤の多くで一日以上を費やす必要がありました。

Vivliostyle-print は、Vivliostyle.js の印刷機能を必要とするだけで他のものは必要としないプロジェクトにおいて、JavaScript 開発者にとっての苦労を取り除くはずです。

なぜあなたは Vivliostyle-print を作ることを決めたのですか?

私自身、Fidus Writer でそれが動くようにするため取り組んできました。Fidus Writer は、私が過去数年間を費やした学術用テキスト・エディターです。 2012年に遡ると、当時私たちは、ユーザーがドキュメントを書いている間にページネーションが行われるしくみをエディター自体に持っていました。それは実験的な技術である “CSS Regions” に基づいていました。しかし、Chromium チームがそれを削除することを決めたときに、私たちにあるのは、印刷ダイアログが呼び出されたときに呼び出されるページネーションという解決策だけになりました。その解決策 (paginate-for-print) は、数年前に急いで寄せ集めで作った代替策でした。私は Vivliostyle.js を推進しているにもかかわらず、その複雑さのために、私が Vivliostyle.js のためのコネクターを作るために席につく時間がなかったのです。そして今やっとそれができました。私は、他の人々が同じことをするのに多くの時間を費やす必要がないように、これを分かち合うのが最善だと考えたのです。

どのような種類のプロジェクトでこの恩恵を受けることができると思いますか?

他のテキスト・エディターのアプリケーションは、明らかに恩恵を受けるもののひとつです。しかし実際には、オンラインコンテンツのより高品質な印刷バージョンを提供したいすべてのウェブページが該当します。JavaScript を少し使用するだけで、ユーザーが CTRL+P を押したときに、オリジナルのコンテンツにページネーション用の追加のCSSを使用して Vivliostyle-print を実行させるようにできます。オンライン新聞やブログも頭に浮かぶでしょう。さらには、ウェブベース電子メール・アプリケーションさえも、Vivliostyle-print の恩恵を受ける可能性があります。私は本当にこれが Vivliostyle.js の利用の普及を助けることを望んでいます。

Vivliostyle.js を実行するとそのページの DOM は台無しになりませんか？ユーザーは印刷後にページをリロードする必要がありますか？

Vivliostyle-print はわずかに異なる動作をします。バックグラウンドで Vivliostyle.js を実行して（非表示の iframe で）、印刷ダイアログが消えた後に削除するのです。この方法では、元の DOM は Vivliostyle-print 実行の前と後にまったく同じです。

Vivliostyle version 2018.8.100 をリリースしました！

2018-09-10T00:00:00+09:00

Vivliostyle version 2018.8.100 をリリースしました。オープンソース Vivliostyle の組織変更からの最初のリリースです。

このリリースには以下の変更が含まれています：

ページナビゲーションUIの改良
- タッチデバイスでスワイプでページ移動できるようにした
- 先頭ページ／最終ページに移動するボタンを追加
- ページ移動できる方向にだけ矢印が出るようにした
最初のページのURLに &f=epubcfi(/2!) が付加されないようにした
CSS論理プロパティをサポート
バグの修正

詳細については、Release Notes を参照してください。

また、Vivliostyle Viewer ユーザーズガイドも更新しました。内容は：

使い方（ローカル環境で、またはオンライン Vivliostyle Viewer で）
Vivliostyle Viewer で表示するHTMLファイルの指定
EPUBを表示するには
複数のHTMLファイルを指定するには
見開きページ表示を指定するには
スタイルシートを指定するには
Vivliostyle Viewer から印刷・PDF出力を行うには

それから、私たちの組織 Vivliostyle.org に新しい名前がつきました。Vivliostyle Foundation です。

Vivliostyle の新しい始まり

2018-03-26T00:00:00+09:00

Vivliostyleは、Webと印刷の世界のギャップを埋めることを実現する目的をもって、スタートアップ会社として誕生しました。そのため、標準技術をオープンソースで実装しながら、様々なプロジェクトの活動をしてきました。

会社は当然にビジネスニーズによって進化してくものですが、Vivliostyleの場合は初期の戦略によって中心だったオープンソース・プロジェクトは中心ではなくなり、他のことを集中することになってきました。

2018年2月16日、Vivliostyle社は、この変化を反映して社名を変更し（新社名: トリムマーク株式会社）、オープンソース・プロジェクトとしての Vivliostyle の管理は、オープンソースを追求したい元メンバーたち（私たち）に移譲されることが決まりました。

同社については、trim-marks.com、または info@trim-marks.com にお問い合わせください。

Vivliostyle は、営利企業のものではなくなったので vivliostyle.com から vivliostyle.org に移動しました。今後、「Vivliostyle」のブランド（GitHub での Vivliostyle や各SNSでの Vivliostyle アカウントなど）は、オープンソース・プロジェクトでのみ使用されます。

トリムマーク株式会社の経営陣が、このオープンソース・プロジェクトを独立させて元の名前のまま継続できるようにしてくれたことに感謝します。

今後は、以下のことに重点を置くことになるでしょう（大雑把な優先順位）:

最新のWeb標準テストに対応するように、テストの自動化と継続的インテグレーションの設定
新しいユーザーや開発貢献者がより簡単に扱えるようにすること
相互運用性を高めて互換性バグを直すこと
最新のWeb標準に対応していくこと
エコシステム（npm, docker…）とより良く統合すること
新しいレイアウト問題解決方法を実験して、標準化につなげること

これら（あるいはもっと）の実現に協力したいという方は、ぜひ連絡ください！

私たちがいるところ:

乞うご期待！

Vivliostyle

Vivliostyle CLI v10リリース！ createコマンド統合で本作りがよりスムーズに

1. create-bookがCLI本体に統合。createコマンドで即座にプロジェクトを開始

迷わずスタートできる対話型インターフェース

2. PDF出力エンジンの選択肢が大幅に進化

ブラウザの種類だけでなく「バージョン」まで指定可能に

3. v10におけるその他の改善

さあ、新しいVivliostyle CLIを体験しましょう

アップデート方法

関連リンク

NLnetからの助成金を獲得

はじめに

今回の助成が意味すること

NLnet財団とNGI0コモンズ基金

GigaViewer for AppsにVivliostyle.jsが採用されました

「Vivliostyle ユーザーと開発者の集い 2023春」開催報告

当日のプログラムと動画へのリンク

それぞれの発表の概要

Vivliostyleの解説本が発売！

「CSS組版でここまでできる！」実践的な入門書

CSS組版ならではの実践テクニックを惜しげもなく公開

新しい Vivliostyle Themes のご紹介

Vivliostyle Themesの使用方法

CSS変数をベースにしたCSSフレームワーク

体系化されたCSS変数

meta-properties.css

basic.css

それ以外のCSS変数

実際の適用例

自分のテーマを作成する

まとめ

「Vivliostyle ユーザーと開発者の集い 2022秋」開催報告

「CSS組版 Vivliostyle ユーザーと開発者の集い 2022秋」の開催

鈴木丈さん（FONTPLUS）による実装の評価

近い将来Vivliostyle.jsで行取りが簡単に

VFMｖ2における非互換変更について

Vivliostyle CLIにおけるテーマ機能の強化

Vivliostyle入門本が商業出版される

おわりに

Vivliostyle Pubで作成したPDFファイルを印刷するサービスが開始

Vivliostyle PubでPDFが出力できるようになりました

2021年度事業報告書を公開しました

2022年春ユーザーイベント開催とVivliostyle Pubアルファ版の公開

「CSS組版 Vivliostyle ユーザーと開発者の集い 2022春」の開催

Vivliostyle Pubアルファ版、いよいよ公開！

行末処理が進化して多様な組版ができるように

はじめに

行末処理の進化

多様な日本語組版が可能になった

Vivliostyleの組版でJavaScriptが使えるようになりました

はじめに

WebフォントにおけるJavaScript 対応のメリット

Vivliostyle CLIでJavaScriptによるWebフォントを使うには

FONTPLUS

TypeSquare

DynaFont

その他のJavaScript対応のメリット

おわりに

「Vivliostyle ユーザーと開発者の集い 2021秋」開催報告

最近のVivliostyle.jsの進化について

CSSの機能追加

Vivliostyle ViewerのUIにテキスト検索機能を追加

バグ修正にともなう組版結果への影響

デフォルトスタイルシートにおける、bodyのmarginの値を8pxから0に変更

ルート要素で指定された継承プロパティを、@pageの内容に継承できるよう修正

直近のアップデート予定

2020年度事業報告書を公開します

技術書典 11 出展 & 合同誌無料配布キャンペーンのお知らせ

Vivliostyleで本を作ろう Vol. 5

無料配布キャンペーン

お渡し条件

お渡し方法

免責事項

JEPAセミナーでVivliostyleについて報告

「Vivliostyle ユーザーと開発者の集い 2021春」開催報告

Vivliostyle の最新アップデート — CLI 改良と CSS Paged Media サポートの充実

Vivliostyle CLI のプレビュー機能改良：Vivliostyle Viewer を統合

CSS Paged Media 仕様サポートの充実

「Vivliostyle.js における CSS Paged Media の実装」

Vivliostyle CLI がv3にメジャーバージョンアップ

1. `create-book`がCLI本体に統合。`create`コマンドで即座にプロジェクトを開始

`meta-properties.css`

`basic.css`

デフォルトスタイルシートにおける、`body`の`margin`の値を8pxから0に変更

ルート要素で指定された継承プロパティを、`@page`の内容に継承できるよう修正

Vivliostyle 開発者とユーザーの集い 2019夏開催しました！

Vivliostyle version 2019.8.100 リリース！ソースコードTypeScript化

●EPUB Adaptive Layout による段組み混在レイアウトへの挑戦（arinoth）

●Vivliostyle.js: TypeScript 化の道のり（spring-raining）

●Vivliostyle Viewer で CSS 組版ちょっと入門（村上真雄）