みが市立図書館

Appearance

Vivliostyle Viewer ​

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

使い方 ​

Vivliostyle Viewer をローカル環境で利用するには ​

Vivliostyle Viewer をローカル環境で利用するには、Vivliostyle CLI の preview コマンドを使うのが便利です。Vivliostyle CLI のインストール方法と使い方については、Vivliostyle CLI ユーザーガイド、preview コマンドについては 組版結果のプレビュー をご覧ください。

それ以外の方法で Vivliostyle Viewer をローカル環境で利用する場合は、配布パッケージに同梱の README に記載の「使い方」の手順にしたがってWebサーバーを起動してください。

オンライン公開 Vivliostyle Viewer ​

オンラインで公開されている vivliostyle.org/viewer/ も利用でき、これは常に最新のリリース版に更新されています。いち早く最新のバージョンを試したい場合は、vivliostyle.vercel.appを利用してください。

Vivliostyle Viewer を自分のサイトに配置 ​

Vivliostyle Viewer の配布パッケージ（https://vivliostyle.org/ja/download/ からダウンロード）を解凍したものを自分のサイトに配置すれば、自分のサイトで Vivliostyle Viewer で閲覧する出版物を公開することができます。

Node.js のアプリケーションで利用するには、npmパッケージ版の @vivliostyle/viewer を使用してください。

Vivliostyle Viewer のスタートページ ​

パラメータを指定しないで を開くと、文書URLの入力欄 (“Input a document URL”)、 Book Mode と Render All Pages のチェックボックス、および使い方のヘルプが表示されます。

試してみる:

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

  • HTML文書＋ページメディア用のCSS
  • 本のような出版物（目次付き） (Book Mode: オン)
    • Web出版物（複数のHTML文書からなるコレクション）: 最初の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パラメータのオプション ​

  • #src=<document URL>
  • &bookMode=[true | false] (Book Mode)
    • true (デフォルト): 本のような出版物（目次付き）用
      • HTML文書のURLが指定された場合、その出版物マニフェストまたは目次（<nav role="doc-toc"> などでマークアップ）からリンクされた一連のHTML文書が自動的に読み込まれます。
    • false: 単体のHTML文書用
  • &renderAllPages=[true | false] (Render All Pages)
    • true (デフォルト): 印刷用（すべてのページが印刷可能で、ページ番号は期待されるとおりに機能します）
    • false: 閲覧用（おおまかなページ番号を使って、クイックロード）
  • &spread=[true | false | auto] (Page Spread View)
    • true: 見開き表示
    • false: 単一ページ表示
    • auto (デフォルト): 自動見開き表示
  • &style=<追加の（カスタム）スタイルシートのURL>
  • &userStyle=<ユーザー・スタイルシートのURL>

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

NOTE: Book Modeのデフォルトは以前はオフでしたが、Vivliostyle Viewer v2.18.0 からオンに変更されました。デフォルトで有効なのでパラメータ &bookMode=true の指定は省略することができます。HTMLファイル内の目次のリンク先のHTML文書を連結しないで最初のHTMLファイルだけを表示するには、&bookMode=false を指定してください。

表示するHTML文書の指定 ​

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

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

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

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

例: HTMLファイル を表示する場合:

EPUB ​

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

#src=⟨表示する解凍済みEPUBフォルダのURL⟩&bookMode=true

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

Web出版物（複数HTML文書） ​

Vivliostyle ViewerではWeb出版物（複数のHTML文書からなるコレクション）を表示することができます。この場合、次のようにパラメータを指定します:

#src=⟨最初のHTML文書またはマニフェストファイルのURL⟩&bookMode=true

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

HTMLの目次 ​

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

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

目次パネル ​

&bookMode=true（あるいは Book Mode チェックボックス On）を指定すると、単一のHTMLファイルでもWeb出版物と同様に、HTML内に目次要素があれば目次パネル（画面左上の目次アイコンをクリックして開く）が有効になります。

見開きビューモード ​

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

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

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

スタイルシートの追加（カスタム・スタイルシート） ​

HTMLファイルに指定されているスタイルシートに加えて、追加のスタイルシート（CSSファイル）を指定することができます。これにより文書のスタイルをカスタマイズするためのカスタム・スタイルシートを指定することができます。追加のスタイルシート（カスタム・スタイルシート）を使うには、次の指定をURLに追加します:

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

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

ユーザー・スタイルシート ​

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

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

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

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

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

設定パネルでのカスタム・スタイル設定 ​

カスタム・スタイルの設定は、設定パネルの Custom Style Settings からも行うことができます。設定内容のCSSは設定パネルの Edit CSS で確認することができます（CSSコードをそこで追加することもできます）。

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

css
/*<viewer>*/
@page { size: A4; }
/*</viewer>*/

@page :first {
  @top-left {
    content: none;
  }
  @top-right {
    content: none;
  }
  @bottom-center {
    content: none;
  }
}

@page :left {
  font-size: 0.8rem;
  @top-left {
    content: env(pub-title);
  }
  @bottom-center {
    content: counter(page);
  }
}

@page :right {
  font-size: 0.8rem;
  @top-right {
    content: env(doc-title);
  }
  @bottom-center {
    content: counter(page);
  }
}

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

印刷／PDFとして出力 ​

ブラウザの印刷・PDF保存機能を利用して、レンダリングされたドキュメントをPDFに変換できます。

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

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

Vivliostyle CLI ​

Vivliostyle CLI を使うとコマンドラインからPDFに出力できます。印刷に適したPDF/X-1a形式への変換も可能です。

サポートされているCSSの機能 ​

VivliostyleがサポートするCSSの機能については サポートする CSS 機能 を参照してください。

Copyright © 2023-present dolphilia