Vivliostyle Viewer ユーザーガイド

Vivliostyle Viewer は、HTML+CSS文書を組版・表示するWebアプリケーションです。

使い方

Vivliostyle Viewer をローカル環境で利用する場合は、配布パッケージに同梱の README.ja.md(オンラインで読む)に記載の「使い方」の手順にしたがってWebサーバーを起動してください。

公開されているオンラインの Vivliostyle Viewer (https://vivliostyle.github.io/vivliostyle.js/viewer/vivliostyle-viewer.html) も利用できます(これは常に開発最新版に更新されてます)。

viewer フォルダ内 vivliostyle-viewer.html が Vivliostyle Viewer 本体です。

パラメータを指定しないで Vivliostyle Viewer を開くと、文書URLの入力欄(“Input a document URL”)と次のように使い方の説明が表示されます:

サポートされている文書の種類:

  • (X)HTML文書+ページメディア用のCSS
  • Web出版物(複数のHTML文書からなるコレクション):プライマリーエントリーページまたはマニフェストファイルのURLを指定します。
  • ZIP解凍済みのEPUB:OPFファイルのURLまたは解凍されたEPUBファイルのトップディレクトリを指定します。

注:

  • GitHubとGistのURLを直接指定することができます。そのようなURLが指定された場合、Vivliostyle は github/gist の raw コンテンツをロードします。
  • ⚠️Mixedコンテンツ(“http:” のURLが “https:” の Vivliostyle Viewer に指定された場合)は通常ブラウザによってブロックされます。
  • ⚠️Cross-Origin(異なるドメインへのリクエスト)は、サーバーが Cross-Origin Resource Sharing (CORS) を許可するように設定されていない限り、通常はブラウザによってブロックされます。

URLパラメータのオプション:

  • #b=<文書のURL> または #x=<文書のURL>
    • #b= Book閲覧。(X)HTML文書のURLが指定された場合、そのURLはプライマリーエントリーページのものとして扱われ、マニフェストまたは目次(<nav role="doc-toc"> などでマークアップ)からリンクされた一連のHTML文書が自動的に読み込まれます。
    • #x= (X)HTML文書が単純に読み込まれます。複数の文書を #x=<最初のHTML>&x=<2番目のHTML>... のようにして指定することもできます。
  • &spread=[true | false | auto]
    • true:見開き表示
    • false:単一ページ表示
    • auto:自動見開き表示(デフォルト)
  • &renderAllPages=[true | false]
    • true:印刷向き(すべてのページが印刷可能で、ページ番号は期待されるとおりに機能します)
    • false:閲覧向き(おおまかなページ番号を使って、クイックロード)
  • &style=<追加の外部スタイルシートのURL>
  • &userStyle=<ユーザースタイルシートのURL>

オプションは設定パネル(Settings)でも設定できます。

Vivliostyle Viewer で表示するHTML文書の指定

HTMLファイルを Vivliostyle Viewer で表示するには、Webサーバーが読み込める場所(上記手順にしたがってWebサーバーを起動している場合は、配布パッケージを解凍してできたフォルダ内)にそのファイル(およびそのファイルから読み込まれるCSSや画像ファイル)を置いた上で、次のようにパラメータを付加したURLをブラウザで開きます:

⟨Vivliostyle Viewer のURL⟩#x=⟨表示するファイルのURL (Vivliostyle Viewer からの相対)⟩

注: Vivliostyle Viewer 本体とは別ドメインの文書を読み込もうとする場合、文書があるWebサーバーの設定によって、文書が読み込めない場合があります。文書を読み込ませるためには、サーバー側で CORS (Cross-Origin Resource Sharing)の設定が必要です。

注: 数式の表示(MathMLおよびTeX形式に対応)にインターネット上のJavaScriptライブラリー(MathJax)を使用するため、文書に数式が含まれる場合はインターネット接続が必要です。

例: HTMLファイル samples/gon/index.html を表示する場合:

テキストボックスに文書ファイルのパス(または URL)を入力すると、その文書を表示する Vivliostyle Viewer のURLを下に表示します:

Web上に公開されている(X)HTML文書を表示する例:

EPUBを表示するには

ZIP解凍済みのEPUBファイルを表示することができます。その場合、次のパラメータを指定します:

#b=⟨表示する解凍済みEPUBフォルダのURL (Vivliostyle Viewer からの相対)⟩

例: samples/niimi/ フォルダに解凍済みのEPUBファイルを表示する場合:

テキストボックスにEPUBフォルダのパス(またはURL)を入力すると、その文書を表示するVivliostyle ViewerのURLを下に表示します:

GitHub上に公開されているZIP解凍済みのEPUBファイルを表示する例:

Web出版物を表示するには

Web出版物(複数のHTML文書からなるコレクション)を表示するには、次のパラメータを指定します:

#b=⟨プライマリーエントリーページのHTML文書またはマニフェストファイルのURL (Vivliostyle Viewer からの相対)⟩

Web出版物のマニフェストの形式については、W3Cドラフトの Web Publications および Readium Web Publication Manifest をサポートしています。

Web出版物のマニフェストが存在しなくても、指定したHTML文書内の目次要素内に他のHTML文書へのリンクがある場合は、それらの文書が自動的にロードされます。Vivliostyle はHTML文書内の次のCSSセレクタにマッチする要素を目次要素として扱います: [role=doc-toc], [role=directory], nav li, .toc, #toc

Web上に公開されている複数のHTML文書からなる出版物を表示する例:

見開きページ表示を指定するには

Vivliostyle Viewer は、表示領域の横幅が大きいとき(高さの1.45倍以上)、自動的に見開きページ表示にします。これを変えるには次の指定をURLに追加します:

&spread=true (常に見開きページ表示)
&spread=false (常に単ページ表示)
&spread=auto (自動切り替え=デフォルト)

Vivliostyle Viewer の設定パネル(画面右上のアイコン [Setting] をクリックして開く)でも、ページ表示モードの変更ができます。

スタイルシートを指定するには

HTMLファイルに指定されているスタイルシートに加えて、追加のスタイルシート(CSSファイル)を使うには、次の指定をURLに追加します:

&style=⟨スタイルシートのURL (Vivliostyle Viewer からの相対)⟩

この方法で指定したスタイルシートは、HTMLファイルで指定されているスタイルシートと同様(制作者スタイルシート)の扱いで、よりあとに指定されたことになるので、CSSのカスケーディング規則により、HTMLファイルからのスタイルの指定を上書きすることになります。

これに対して、次のようにしてユーザースタイルシート(スタイル指定に !important を付けないかぎり、制作者スタイルシートのスタイル指定を上書きしない)の指定もできます:

&userStyle=⟨ユーザースタイルシートのURL (Vivliostyle Viewer からの相対)⟩

複数個の &style= あるいは &userStyle= を使うことで、複数個のスタイルシートを指定できます。

データURLも利用できます。例えば:

&userStyle=data:,html{writing-mode:vertical-rl}

ユーザースタイルの設定は、設定パネルの User Style Preferences からも行うことができます。設定内容のCSSは設定パネルの CSS Details で確認することができます。

Web上に公開されている文書に、設定パネルからユーザースタイルの設定を加えた例:

この例のように、設定パネルからスタイルの設定を行うと、ユーザースタイルのCSS内のコメント /*<viewer>*//*</viewer>*/ で囲んだ部分に、設定パネルの項目から設定したスタイルのCSSコードが生成され、設定パネルの CSS Details に表示されます。ユーザー独自のCSSコードをそれに追加することができます。この例ではページヘッダーとページフッターを追加しています。

Vivliostyle Viewer から印刷・PDF出力を行うには

ブラウザの印刷・PDF出力機能を利用できます。例えば、Google Chrome で PDF に出力するには、メニューから「印刷」を開き、出力先として「PDFに保存」、背景のグラフィック ON と指定して「保存」します。

注意: 文書の全ページを印刷する場合、設定パネルで Render All Pages が On になっていることを確認してください。これが Off の場合、すでに表示されたページしか印刷できず、またページ番号が正しく出力されません。

VivliostyleがサポートするCSSの機能

VivliostyleがサポートするCSSの機能については “Features supported by Vivliostyle”(英語)を参照してください。

その他のドキュメント

その他のドキュメントは Vivliostyle ドキュメント にあります。

サンプル

固定ページサイズ

和文 文庫本フォーマット『ごん狐』

Page/Spread ViewRaw HTMLSource

和文 段組フォーマット『白馬岳』

Page/Spread ViewRaw HTMLSource

欧文 Web Fonts サンプル “Wood Engraving”

可変ページサイズ

英語 “The Malay Archipelago”

Page/Spread ViewRaw HTMLSource

日本語 横書き “高瀬舟”

Page/Spread ViewRaw HTMLSource

日本語 縦書き “高瀬舟”

Page/Spread ViewRaw HTMLSource

Adaptive Layout

“Apollo 8”

Page ViewSpread ViewRaw HTMLSource

“Candle”

Page ViewSpread ViewRaw HTMLSource

“Advanced Adaptive Layout”

Page ViewSpread ViewRaw HTMLSource

(from Peter Sorotokin's Adaptive Layout)

  • Page/Spread View: 自動見開き表示(online Vivliostyle Viewer)
  • Page View: 単ページ表示(online Vivliostyle Viewer)
  • Spread View: 見開き表示(online Vivliostyle Viewer)
  • Raw HTML: 通常HTML表示
  • Source: GitHub上のソースファイル(HTMLやCSS)へ

その他のサンプル

その他のサンプルは Vivliostyle Samples にあります。