Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Vivliostyle と関連ツールの便利な使い方

103 vues

Publié le

Vivliostyle 開発者とユーザーの集い 2019-08-31 発表資料2
Vivliostyle view: http://bit.ly/vivuser20190831
Source: https://github.com/vivliostyle/vivliostyle_doc/tree/gh-pages/ja/events/vivliostyle-usermeet20190831

Publié dans : Logiciels
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Vivliostyle と関連ツールの便利な使い方

  1. 1. Vivliostyleと関連ツールの便利な使い⽅ CSS組版Vivliostyle 開発者とユーザーの集い2019夏 2019-08-31 Vivliostyle ユーザー会 Vivliostyle Foundation 村上真雄@MurakamiShinyu / vivliostyle.org
  2. 2. ⽬次 1. はじめに 3 2. Vivliostyle Viewer 5 1. 公開されているVivliostyle Viewer の活⽤ 6 2. GitHub 上のHTML+CSS や EPUB データなどをVivliostyle Viewer で組版表⽰ 7 3. ⾃分のパソコン上のHTML+CSS ファイルをVivliostyle Viewer で組版表⽰ 8 3. vivliostyle-savepdf 10 4. おわりに 13 2
  3. 3. はじめに 3
  4. 4. ⾃⼰紹介 村上真雄@MurakamiShinyu, Vivliostyle Foundation 代表 1990年ごろ: テキスト整形ツールXTR を開発、公開。 2000年ごろから: Antenna House Formatter(アンテナハウス社 のXML/CSS組版エンジン)の開発に従事。 2014年: Vivliostyleプロジェクト開始、会社設⽴。 2018年: Vivliostyle Foundation(⼀般社団法⼈ビブリオスタイル)設⽴ ⇨vivliostyle.org オープンソースプロジェクト再始動。 W3C CSS標準化・⽇本語組版TF、JAGAT XMLパブリッシング研 究会などに関わってきています。 4
  5. 5. Vivliostyle Viewer 5
  6. 6. 公開されているVivliostyle Viewer の活⽤ Vivliostyle 公式サイトの「サンプル」ページでは、 vivliostyle.github.io/vivliostyle.js/viewer/vivliostyle-viewer.html と いうURL で公開のVivliostyle Viewer を使っていますが、これは誰 でも利⽤できます。 つまり、インストールしなくてもVivliostyle Viewer を使えます⭐ Vivliostyle Viewer の使い⽅👉 Vivliostyle Viewer ユーザーガイド 6
  7. 7. GitHub 上のHTML+CSS やEPUB データな どをVivliostyle Viewer で組版表⽰ 例えば、GitHub 上に公開されているIDPF / EPUB 3 Samples: github.com/IDPF/epub3-samples で試してみる: 「草枕」(kusamakura-japanese-vertical-writing) の中のひとつの XHTMLファイル⼀.xhtml をVivliostyle Viewer で組版表⽰ 「草枕」EPUB をまるごとVivliostyle Viewer で組版表⽰ ⭐GitHub Gist も使えます。例:Vivliostyleちょっと⼊⾨サンプル ちょっと試すのに、GitHub Gist や JS Bin (jsbin.com) が便利⭐ 7
  8. 8. ⾃分のパソコン上のHTML+CSS ファイルを Vivliostyle Viewer で組版表⽰ まず⾃分のパソコンにhttp-server を⼊れます。 インストール: (その前にまずNode.js がなかったらそれを⼊れる👉 nodejs.org) npm install -g http-server 8
  9. 9. ローカルhttp-server + 公開Vivliostyle Viewer 組版表⽰したいHTML+CSS ファイルが含まれるディレクトリ上で http-server を次のように起動: http-server . --cors -o -c-1 これで、http://localhost:8080 がブラウザで開いて、⾃分のパソコン 上のHTML+CSS ファイルが⾒れます。 そのlocalhost 上の組版表⽰したいHTML ファイルのURL を、公 開Vivliostyle Viewer に指定すると、組版表⽰できます。 (http-server に --cors オプションを指定してるので、これが可能 です。-o はブラウザ起動、-c-1 はキャッシュを無効にする指定) 9
  10. 10. vivliostyle-savepdf 10
  11. 11. vivliostyle-savepdf: コマンドラインでCSS組版してPDFに保存 以前の名前はviola-savepdf、はるさめ(@spring_raining)さん作 github.com/vivliostyle/vivliostyle-savepdf Vivliostyle 公式サイトの「ダウンロード」ページにもあります。 11
  12. 12. vivliostyle-savepdf のインストールと使い⽅ インストール:(まずNode.js がなかったら⼊れる👉 nodejs.org) npm install -g vivliostyle-savepdf 使い⽅の例:index.html を組版して、output.pdf に出⼒ savepdf ./index.html プレビュー表⽰するには: savepdf --preview ./index.html そのほかのオプションは:savepdf --help 12
  13. 13. Thanks! 13

×