Skip to content

Vivliostyle Pub v1 Req

Shinyu Murakami edited this page Nov 6, 2020 · 7 revisions

Vivliostyle Pub v1 要件仕様 (WIP)

生成可能なコンテンツフォーマット

  • PDF
    • 印刷用PDF
    • 閲覧用PDF
  • EPUB
    • リフロー型EPUB
  • WebBook
    • 1冊の本を表すWebコンテンツのファイル群を「WebBook」として定義する
    • 通常Webページとして閲覧可能
    • Vivliostyleで組版・閲覧可能

それぞれの詳細は以下。

PDF

  • 印刷用と閲覧用の2種類のPDFを出力できること
  • 印刷用PDFは PDF/X-1a 対応
    • CMYK可能: Vivliostyle CLI (press-ready)に実装済み✅
    • グレースケール可能: Vivliostyle CLI にオプション追加必要🔧
  • PDF Bookmarks(しおり)による目次付き
    • Vivliostyle CLI に実装済み✅
  • 縦書きの場合、右綴じの設定に
    • Vivliostyle CLI に処理追加必要🔧
  • 閲覧用PDFはテキストがアクセシブルであること
    • Chrome出力PDFの漢字が康熙部首に化ける問題の解決が必須
      • 🌟Vivliostyle CLI に処理追加🔧 あるいはChromeが修正されるか見極め

EPUB

  • リフロー型EPUBとする
    • CSS組版前のデータであるHTMLを使いリフロー型EPUBを生成する
    • v1では、CSS組版結果を固定型EPUBにする機能は予定しない(ニーズがあれば後で検討)
  • 最新EPUB標準仕様に準拠: EPUB 3.2
  • EPUBCheck ツールで検証されて、Amazon Kindle はじめ各電子書籍書店に対応可能なこと
  • EPUB の内容に含まれるファイルは WebBook 形式と基本的に同じものとする、ただし
    • HTML(拡張子 .html)は XHTML(拡張子 .xhtml)に直す
    • EPUB に必須のファイルを追加: "package.opf", "META-INF/container.xml", "mimetype"

WebBook

  • 通常Webページとして閲覧可能で、Vivliostyle で組版・閲覧可能
  • WebBook内のルートディレクトリに
    • "index.html": 次の内容を含む
      • <link href="publication.json" rel="publication"/> による出版物マニフェストファイルへのリンク
      • <nav role="doc-toc"> 要素による目次、WebBook内の他のHTMLファイルへのリンクを含む
    • "publication.json": 出版物マニフェストファイル
      • 仕様: W3C Publication Manifest
      • 出版物のメタデータ、出版物に含まれるファイルのリスト、内容を読む順番(Reading Order)が含まれる
  • 参考仕様: WebBook Level 1 (Unofficial Proposal Draft)
  • EPUB出力との関係
    • WebBookをソースとしてEPUBを生成
    • EPUBの内容文書はXHTML(拡張子 .xhtml)、WebBookは HTML(拡張子 .html)
      • EPUB生成のときに機械的に HTML→XHTML 変換
      • 🌟要議論:WebBookもEPUBと同様にXHTMLファイルにするか? メリットとデメリット
    • EPUBの "package.opf" ファイルは出版物マニフェストファイル "publication.json" の内容などから変換して生成
  • PDF出力との関係
    • WebBookをソースとしてVivliostyleで組版してPDFを生成
  • WebBookの公開
    • GitHubリポジトリ上にWebBookは作られるので、ユーザーがリポジトリを公開の設定にすることでWebBookの公開が可能
      • 例:ユーザーがGitHubページ公開の設定にした場合、https://<user>.github.io/<repository>/ に公開され、Webページとして閲覧可能
        • Vivliostyle Viewer でCSS組版結果を閲覧可能
          • https://vivliostyle.org/viewer/#src=https://<user>.github.io/<repository>/&bookMode=true

ファイルとディレクトリ構造

WebBook のファイルとディレクトリ構造の例

  • index.html
  • publication.json
  • html/
    • cover.html
    • titlepage.html
    • foreword.html
    • toc.html
    • ch1.html
    • ch2.html
    • ch3.html
    • ch4.html
    • afterword.html
    • colophon.html
  • images/
    • cover.jpg
    • fig1.png
    • photo1.jpg
  • themes/
    • css/
      • style.css
      • print.css
    • fonts/
      • foobar.woff

🌟 「🌟要議論:WebBookもEPUBと同様にXHTMLファイルにする」方式を採用するなら、 html/ のところは次のEPUBの例の xhtml/ と同じものに変わる

EPUB のファイルとディレクトリ構造の例

  • mimetype
  • META-INF/container.xml
  • package.opf
  • xhtml/
    • cover.xhtml
    • titlepage.xhtml
    • foreword.xhtml
    • toc.xhtml
    • ch1.xhtml
    • ch2.xhtml
    • ch3.xhtml
    • ch4.xhtml
    • afterword.xhtml
    • colophon.xhtml
  • images/
    • cover.jpg
    • fig1.png
    • photo1.jpg
  • themes/
    • css/
      • style.css
      • print.css
    • fonts/
      • foobar.woff

EPUBの内容を生成するのは、ユーザーがEPUBエクスポートを実行を行ったときのみ。EPUBの内容のファイルはEPUBパッケージ(.epub)作成のためにWebBookから変換して生成するだけであり、GitHubリポジトリへの保存は不要。

原稿ファイル類のディレクトリ構造の例

  • package.json
  • README.md
  • LICENSE
  • vivliostyle.config.js
  • text/
    • cover.md
    • titlepage.md
    • foreword.md
    • toc.md
    • ch1.md
    • ch2.md
    • ch3.md
    • ch4.md
    • afterword.md
    • colophon.md
  • images/
    • cover.jpg
    • fig1.png
    • photo1.jpg
  • themes/
    • scss/
      • style.scss
      • print.scss
      • _variables.scss
    • fonts/
      • foobar.woff

これら原稿ファイル群(出版物のソース)からWebBook(成果物)のHTMLファイル群への変換は、原稿ファイルの更新があるたびに行われるようにする。そのため、このファイルとディレクトリ構造とWebBook のファイルとディレクトリ構造は、一緒に合わさったものになる(text/ に原稿、html/ に変換後のHTMLファイル、など)。v1では、同じGitHubリポジトリ上のデフォルトブランチに、ソースと成果物の両方を同時に保存することだけを想定する。

ユーザーのGitHubリポジトリ作成

ユーザーの出版プロジェクトごとにユーザーのGitHubのリポジトリが使用される。

以下、Vivliostyle Pubサイトにユーザーがアクセスして、執筆・編集作業を開始するまでの処理:

  • ユーザーがVivliostyle PubサイトにアクセスするとGitHubでログイン✨
    • GitHub連携がまだされていないユーザーに対して、GitHub連携の案内
      • GitHubアカウントを持っていないユーザーに対して、その作成方法の案内🔰
      • GitHub Appsのインストール処理
    • GitHubアカウントでログイン
      • ユーザーはログアウトしないでブラウザを閉じた場合、次に開くと最初からログイン状態となる
    • ログイン後の画面は、ユーザーの出版プロジェクトの一覧(すでにあれば)と新規出版プロジェクト作成のメニュー
  • 出版プロジェクトの一覧:ユーザーのGitHubリポジトリのうちVivliostyle Pub用のリポジトリ(出版プロジェクト)があれば一覧✨
    • ユーザーが書き込み権限を持つ他のアカウントや組織のリポジトリも対象とできること(共同編集を可能に)
    • Vivliostyle Pub用のリポジトリの判定
      • デフォルトブランチのルートディレクトリにファイル vivliostyle.config.js が存在すること
        • Vivliostyle CLI 用のプロジェクト(Create Book で生成されたものなど)も Vivliostyle Pub 用に移行可能とする
    • 一覧にはリポジトリ名と出版物のタイトル(vivliostyle.config.js から取得)を表示✨
      • 一覧の順番は更新が最新のものから
    • 出版プロジェクトを一覧から選択して開くと文書編集画面となる
      • 前回に開いたままで終了している場合は、最初から開いた状態(前回の作業状態)に
  • 新規出版プロジェクト作成💪
    • 最初に出版プロジェクト名(=GitHubリポジトリ名)を入力
      • GitHub APIでリポジトリ生成
    • 以下の設定項目を入力または選択(設定はあとからも変更可能)
      • 出版物のタイトルを入力
      • スタイルテーマを選択
      • 公開リポジトリとするか:デフォルトは非公開
      • ライセンスの種類を選択
    • 設定内容を vivliostyle.config.js に保存、そのほか以下のファイルとディレクトリを生成
      • package.json
      • README.md
      • LICENSE
      • themes/ --スタイルテーマからコピーされたスタイルシート
      • text/ --原稿(.md)を置く
      • images/ --アップロードされた画像がここに保存される

原稿ファイルの作成と追加

  • 新規出版プロジェクト作成時、スタイルテーマに含まれる原稿テンプレートにより原稿ファイル(.md)を生成💪
    • 🌟要検討:スタイルテーマの原稿テンプレートの仕様

例:text/document-1.md

出版物の構成要素の作成

表紙画像

タイトルページ(本扉)

前書き

目次

後書き

奥付

スタイルテーマとカスタマイズ

スタイルパラメータの設定

スタイルシートのカスタマイズ

新しいスタイルテーマの作成

原稿編集画面とプレビュー

  • プレビュー画面を確認しながらMarkdown入力・編集ができる
  • 🌟デフォルトのプレビュー画面は、変換されたHTMLをブラウザでスクロール表示✨
    • 現在編集中の原稿ファイル(.md)から変換されたHTMLのみ一度にプレビュー表示
    • 編集中の箇所が表示されるようにプレビューを自動スクロール
  • CSS組版ページ・プレビューモードに切り替えることができる

GitHubへの保存

PDF出力

EPUB出力

Clone this wiki locally