Vivliostyle：息子と一緒に Makers：So-netブログ

	ブログをはじめるログイン

Vivliostyle-CLIで作ったドキュメントに表紙をつくる　 [Vivliostyle]

前回ドキュメントに要素を追加してようやく体裁が整ってきました。今回は１ページ目を表紙にしようと思います。１ページ目の背景色をかえてページ番号を付与しないようにするため、次のような要素をCSSファイルに付け加えます。

@page:nth(1) {
    margin: 0;
    background-color: #888888; /* 背景色をグレーに設定 */
    @bottom-center {
        content: none;  /* ページ番号をなくすためにボトムセンターにコンテンツはなし */
    }
}

これをプレビューしてみると次のようになりました。

Screenshot from 2024-01-20 22-35-34.png

これでは味気ないので、表紙の背景に画像を用いたいと思います。背景画像にはSVGフォーマットのものを使います。背景となる画像は次のサイトで作ることができます。

https://heropatterns.com/
Screenshot from 2024-01-20 18-44-08.png

適当なデザインをクリックすると画面があらわれます。その中にCSSのコードがあるので、それをコピーしてCSSファイルに転記します。

Screenshot from 2024-01-20 18-46-45.png

SVGファイルの定義がながいので一部省略をしていますが、次のようになりました。先程定義した背景色の定義は上書きするのに注意してください。

@page:nth(1) {
    margin: 0;
    background-color: #DFDBE5;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%239C92AC' fill-opacity='0.4' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 ...(省略)... 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E");
    @bottom-center {
        content: none;  /* ページ番号をなくすためにボトムセンターにコンテンツはなし */
    }
}

プレビューしてみました。少し本っぽくなってきたと思います。

Screenshot from 2024-01-20 22-51-12.png

次は章の飾り付けをしてみます。

※この記事は次の本を参考にしています。

Web技術で「本」が作れるCSS組版 Vivliostyle入門

出版社/メーカー: シーアンドアール研究所
発売日: 2023/05/12
メディア: Kindle版

前のVivliostyleの記事　　次のVivliostyleの記事

タグ：技術同人誌 vivliostyle

2024-02-04 22:49 nice!(8) コメント(0)
共通テーマ：趣味・カルチャー

Vivliostyle-CLIで作ったドキュメントにHTML要素を追加する　 [Vivliostyle]

前回は簡単なドキュメントを作ったので、そこのHTML要素を追加していきたいと思います。追加するのは、Divクラスを活用したサブタイトル要素とチャプタ用の要素「h2」です。

前回作ったHTMLドキュメントを次のように変更します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>吾輩はヌコである</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="mybook0.css" />
  </head>
  <body>
    <h1>吾輩はヌコである</h1>

    <div class="subtitle">ヌコと書生の物語</div>
    <h2>はじめての出会い</h2>

    <p>どこで生れたかとんと見当がつかぬ。
       何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
       吾輩はここで始めて人間というものを見た。
       しかもあとで聞くとそれは書生という人間で一番獰悪な種族であったそうだ。
       この書生というのは時々我々を捕つかまえて煮て食うという話である。
    </p>
  </body>
 </html>

CSSに要素を追加していきます。前回作成したCSSファイルの最後に h2 と .subtitle 要素を追加していきます。

@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");

* {
    box-sizing: border-box; /* 要素の計算方法を指定　*/
    /* boder-box は、子要素は親要素のサイズに制約され、*/
    /* ボックスの幅を指定できる */
}

@page {
    size: 148mm 210mm; /* A4 */
    font-size: 10Q; /* 1Q = 0.25mm */
    /* ボトムセンターにページ番号を設定 */
    @bottom-center { content: counter(page); } 
}

@page: left { /* 左ページを設定 */
    /* 天地のマージン */
    margin-block: 15mm;  
    /* 小口、ノドのマージン */
    margin-inline: 16mm 18.25mm; 
}

@page: right { /* 右ページを設定 */
    /* 天地のマージン */
    margin-block: 15mm;  
    /* ノド、小口のマージン */
    margin-inline: 18.25mm 16mm; 
}

:root { /* 共通設定 */
    font-size: 13Q;  /* フォントサイズ */
    line-height: 24Q; /* 段落の行送りサイズ */
    font-family: "Noto Sans JP"; /* フォント指定 */
    /* フォント太さを指定 100,200,...800,900 ノーマルは400 */
    font-weight: 400;  
    text-spacing: auto; /* 文字組設定を自動 */
    widows: 1; /* 孤立行は１行に */
    orphans: 1; /* 孤立行は１行に */
}

p {
    font-size: 13Q;
    line-height: 24Q;
    text-align: justify;  /* 行末揃え */
    /* 字下げ設定 em:文字サイズを1とした総体単位 */
    text-indent: 1em; 
    margin-block: 0;
}

h1 {
    font-size: 42Q;
    line-height: 100Q;
    margin-block-start: 40mm; /* 天のマージン */
    text-align: center;
    counter-reset: section-counter 0;
}

h2 {
    break-before: verso;  /* 改ページ */
    font-size: 32Q;
    line-height: 48Q;
    inline-size: 10em; /* ボックスの横方向長さ (em:文字サイズを1とした単位) */
    block-size: 1lh; /* ボックスの縦方向長さ (lh:行送りを1とした単位) */
    margin-block: 0 11mm; /* 前後のブロックのマージン */
}

.subtitle {
    font-size: 24Q;
    text-align: center;
    font-weight: 700; /* 太さ */
    margin-block-start: 40mm; /* 上マージン */
}

HTMLファイルを表示させて右クリックでメニューを出して、その中から「これプレビューvivliostyle preview (Current File)」を選択します。

Screenshot from 2024-01-20 12-15-35.png

今回は「h2」要素は章の見出しで改ページを追加したので、２ページになります。

Screenshot from 2024-01-20 12-27-25.png

１ページ目は表紙で、２ページ目から本文になります。少し書籍らしくなってきました。
次は表紙の飾り付けをしたいと思います。

※この記事は次の本を参考にしています。

Web技術で「本」が作れるCSS組版 Vivliostyle入門

出版社/メーカー: シーアンドアール研究所
発売日: 2023/05/12
メディア: Kindle版

前のVivliostyleの記事　　次のVivliostyleの記事

タグ：vivliostyle 技術同人誌

2024-01-28 20:36 nice!(6) コメント(0)
共通テーマ：趣味・カルチャー

Vivliostyle-CLIで簡単なドキュメントを作ってみる　 [Vivliostyle]

Vivliostyle-CLIを導入したので、Visual Studio Code で簡単なドキュメントを作ってみます。まずはワークスペースとしてフォルダ「mybook0」を作成します。その中に、「mybook0.html」と「mybook0.css」というファイルを作成します。

Visual Studio Code のメニューから「フォルダを開く」でmybook0 を開いて、「名前をつけてワークスペースを保存...」で保存しておきます。Visual Studio Code の画面は次のようになります。

Screenshot from 2024-01-14 21-11-50.png

mybook0.htmlにはドキュメントの内容をHTML形式で記述します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>吾輩はヌコである</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="mybook0.css" />
  </head>
  <body>
    <h1>吾輩はヌコである</h1>
    <p>どこで生れたかとんと見当がつかぬ。
       何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
       吾輩はここで始めて人間というものを見た。
       しかもあとで聞くとそれは書生という人間で一番獰悪な種族であったそうだ。
       この書生というのは時々我々を捕つかまえて煮て食うという話である。
    </p>
  </body>
 </html>

mybook0.css には次のようにページ設定と各要素の定義を記述します。ページ設定は @page という要素で指定します。

@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");

* {
    box-sizing: border-box; /* 要素の計算方法を指定　*/
    /* boder-box は、子要素は親要素のサイズに制約され、*/
    /* ボックスの幅を指定できる */
}

@page {
    size: 148mm 210mm; /* A4 */
    font-size: 10Q; /* 1Q = 0.25mm */
    /* ボトムセンターにページ番号を設定 */
    @bottom-center { content: counter(page); } 
}

@page: left { /* 左ページを設定 */
    /* 天地のマージン */
    margin-block: 15mm;  
    /* 小口、ノドのマージン */
    margin-inline: 16mm 18.25mm; 
}

@page: right { /* 右ページを設定 */
    /* 天地のマージン */
    margin-block: 15mm;  
    /* ノド、小口のマージン */
    margin-inline: 18.25mm 16mm; 
}

:root { /* 共通設定 */
    font-size: 13Q;  /* フォントサイズ */
    line-height: 24Q; /* 段落の行送りサイズ */
    font-family: "Noto Sans JP"; /* フォント指定 */
    /* フォント太さを指定 100,200,...800,900 ノーマルは400 */
    font-weight: 400;  
    text-spacing: auto; /* 文字組設定を自動 */
    widows: 1; /* 孤立行は１行に */
    orphans: 1; /* 孤立行は１行に */
}

p {
    font-size: 13Q;
    line-height: 24Q;
    text-align: justify;  /* 行末揃え */
    /* 字下げ設定 em:文字サイズを1とした総体単位 */
    text-indent: 1em; 
    margin-block: 0;
}

h1 {
    font-size: 42Q;
    line-height: 100Q;
    margin-block-start: 40mm; /* 天のマージン */
    text-align: center;
    counter-reset: section-counter 0;
}

ここで天・地・小口・ノドは次のようになっています。
(出典：https://www.book-hon.com/column/9961/)

ドキュメントをビルドするには、html ファイルを開いた状態で右クリックをするとメニューが開くので、その中から「vivliostyle cli helper」を選択し、「これプレビューvivliostyle preview(Current File)」を指定します。

Screenshot from 2024-01-14 22-17-03.png

すると別画面が開いて、次のようにプレビューを見ることができます。

Screenshot from 2024-01-14 22-17-46.png

次からはいろいろと装飾をしていきたいと思います。

※この記事は次の本を参考にしています。

Web技術で「本」が作れるCSS組版 Vivliostyle入門

出版社/メーカー: シーアンドアール研究所
発売日: 2023/05/12
メディア: Kindle版

前のVivliostyleの記事　　次のVivliostyleの記事

タグ：vivliostyle 技術同人誌

2024-01-20 11:40 nice!(6) コメント(0)
共通テーマ：趣味・カルチャー

Vivliostyle-CLI の導入をしてみる　 [Vivliostyle]

表紙を作ろうとしたのですが、Vivliostyleのテンプレートを改変していくのはなかなか手間がかかりそうです。次の書籍を読むと、Vivliostyle-CLIというものを使っており、HTMLとCSSで表紙やチャプタの飾りを作っています。

Web技術で「本」が作れるCSS組版 Vivliostyle入門

出版社/メーカー: シーアンドアール研究所
発売日: 2023/05/12
メディア: Kindle版

ひとつひとつ丁寧に説明しているので、テンプレートの膨大なソースを読み解くよりも分かりやすいです。ということで、テンプレートを改変して使うことはあきらめ、Vivliostyle-CLIを使っていきたいと思います。

Vivliostyle-CLIは、 Visual Studio Code の拡張機能です。拡張機能の検索ボックスに「Vivliostyle」と入れるとインストール画面が現れますのでインストールします。

Screenshot from 2024-01-14 00-41-42.png

インストールができたら、次にターミナルを開いて、ターミナルから次のコマンドを入力します。

$ npm install -g @vivliostyle/cli

コマンドが成功するとターミナルに次のようなメッセージが表示されます。

Screenshot from 2024-01-14 00-48-52.png

これで、Vivliostyle-CLIのインストールは完了です。

次は、Vivliostyle-CLIを使って簡単なドキュメントを作ってみたいと思います。

次のVivliostyleの記事

タグ：技術同人誌 vivliostyle

2024-01-14 01:31 nice!(7) コメント(0)
共通テーマ：趣味・カルチャー

Vivliostyle で画像を挿入する　 [Vivliostyle]

前回は、Vivliostyle のドキュメントの用紙サイズを変更しました。

今回は、Vivliostyle のドキュメントに画像を挿入してみます。画像を挿入するには、マークダウンで記述されたドキュメント ”manuscript.md” を変更するだけです。画像の挿入もマークダウン形式と同じです。とっても簡単ですね。

# {吾輩|わがはい}は猫である。

{吾輩|わがはい}は猫である。名前はまだ無い。

$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

どこで生れたかとんと{見当|けんとう}がつかぬ。何でも薄暗いじめじめした所でニャー>ニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番{獰悪|どうあく}な種族であったそうだ>。この書生というのは時々我々を{捕|つかま}えて{煮|に}て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の{掌|てのひら}に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである>。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの{見始|みはじめ }であろう。

![SPRESENSEガール](img/spresense_girl.png)

この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはずの顔がつるつるしてまるで{薬缶|やかん}だ。その{後|ご}猫にもだいぶ{逢|あ}ったがこん>な{片輪|かたわ}には一度も{出会|でく}わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと{煙|けむり}を吹く。どうも{咽|>む}せぽくて実に弱った。これが人間の飲む{煙草|たばこ}というものである事はようやくこの頃知った。

これを npm でビルドします。

$ cd mybook
$ npm run build

> mybook@0.0.0 build
> vivliostyle build

 manuscript.md {吾輩|わがはい}は猫である。
 manuscript.md {吾輩|わがはい}は猫である。

? Processing PDF
mybook.pdf has been created.
〓 Built successfully.

これをプレビューしてみます。

$ npm run preview

> mybook@0.0.0 preview
> vivliostyle preview

〓 Up and running ([ctrl+c] to quit)

出力結果です。図のキャプションも入れてくれてますね。でも "Figure" になっているのを "図"に直したいところです。

いろいろ調べたところ"vivliostyle.config.js" の language 設定を有効にすればよいようです。よくよく見たら用紙サイズもこちらで変更できますね。

mybook/themes/packages/@vivliostyle/theme-base/css/partial/page.css

を、”--vs-page--size: auto;” に戻して、今度はA4に設定してみましょう。

module.exports = {
  title: 'mybook', // populated into `publication.json`, default to `title` of the first entry or `name` in `package.json`.
  author: 'よしのたろう ', // default to `author` in `package.json` or undefined.
  language: 'ja', // default to undefined.
  size: 'A4', // paper size.
  theme: '@vivliostyle/theme-techbook@^1.0.0', // .css or local dir or npm package. default to undefined.
  entry: [
    'manuscript.md', // `title` is automatically guessed from the file (frontmatter > first heading).
  ], // `entry` can be `string` or `object` if there's only single markdown file
}

これをビルドしプレビューをしてみます。”Figure” が "図" に変更され、用紙も "A4" に変更されていました。

Screenshot from 2023-10-22 20-48-38.png

次は表紙を作ってみたいと思います。

Web技術で「本」が作れるCSS組版 Vivliostyle入門

出版社/メーカー: シーアンドアール研究所
発売日: 2023/05/12
メディア: Kindle版

わかりやすく書ける！技術同人誌初心者のための執筆実例集技術の泉シリーズ (技術の泉シリーズ（NextPublishing）)

作者: 石井葵
出版社/メーカー: インプレス NextPublishing
発売日: 2019/07/12
メディア: Kindle版

技術同人誌を書いたあなたへ～著者のしあわせなミライ～

作者: mochikoAsTech
出版社/メーカー:
発売日: 2019/08/02
メディア: Kindle版

タグ：技術同人誌 vivliostyle

2023-10-22 20:54 nice!(15) コメント(0)
共通テーマ：趣味・カルチャー

Vivliostyle の用紙サイズを変更する　 [Vivliostyle]

前回は、Vivliostyle のドキュメントに数式を組み込みました。

今回は Vivliostyle の用紙サイズを変更してみたいと思います。用紙を変更するには、CSS のページ要素　@page を変更します。生成したプロジェクト「mybook」フォルダに基本的なCSSのページ定義が次のファイルにあります。

mybook/themes/packages/@vivliostyle/theme-base/css/partial/page.css

今回は用紙を「A5（148mm 210mm）」に設定します。上記ファイル中に記述されている "--vs-page-size: auto" を変更します。

:root {
  /* --vs-page--size: auto; */
  --vs-page--size: 148mm 210mm;
  --vs-page--width: auto;
  --vs-page--height: auto;
  --vs-page--marks: none;
 ... 省略...
  --vs-page--cover-break-after: page;
  --vs-page--cover-break-before: page;
}

変更をしたら「mybook」フォルダ直下でビルドをします。相変わらず「A network error occurred.」が出ますが無視します。

$ cd mybook
$ npm run build

> mybook@0.0.0 build
> vivliostyle build

 manuscript.md {吾輩|わがはい}は猫である。
 manuscript.md {吾輩|わがはい}は猫である。
[×] A network error occurred.
... 省略  ...
[×] A network error occurred.
? Processing PDF
mybook.pdf has been created.
〓 Built successfully.

出力がどうなったのか見てみましょう。

$ npm run preview

> mybook@0.0.0 preview
> vivliostyle preview

〓 Up and running ([ctrl+c] to quit)

かなり本らしくなってきました。次は画像を挿入してみたいですね。

Screenshot from 2023-10-04 23-14-59.png

Web技術で「本」が作れるCSS組版 Vivliostyle入門

出版社/メーカー: シーアンドアール研究所
発売日: 2023/05/12
メディア: Kindle版

技術同人誌を書こう！　アウトプットのススメ技術の泉シリーズ (技術の泉シリーズ（NextPublishing）)

出版社/メーカー: インプレス NextPublishing
発売日: 2018/04/13
メディア: Kindle版

わかりやすく書ける！技術同人誌初心者のための執筆実例集技術の泉シリーズ (技術の泉シリーズ（NextPublishing）)

作者: 石井葵
出版社/メーカー: インプレス NextPublishing
発売日: 2019/07/12
メディア: Kindle版

タグ：技術同人誌 vivliostyle

2023-10-04 23:29 nice!(14) コメント(0)
共通テーマ：趣味・カルチャー

Vivliostyleで数式を組み込んでみた　 [Vivliostyle]

前回、CSS組版の Vivliostyle をインストールしました。

CSS組版のVivliostyleを使ってみたーツールのインストールー

今回は、Vivliostyle で数式を組み込む方法を試してみたいと思います。数式はTexの表記方法で組み込むことができます。Texで表現された数式を '$$' で囲みます。前回作ったプロジェクト"mybook"の中にある「吾輩は猫である」の序文が記載された 'manuscript.md' に数式を組み込んでみましょう。

# {吾輩|わがはい}は猫である。

{吾輩|わがはい}は猫である。名前はまだ無い。

$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

どこで生れたかとんと{見当|けんとう}がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という>人間中で一番{獰悪|どうあく}な種族であったそうだ....

このドキュメントをビルドします。ビルドの最中に大量に ”A network error occurred.” というメッセージが出ますが、ビルドは成功しているようです。

$ cd mybook
$ npm run build

> mybook@0.0.0 build
> vivliostyle build

 manuscript.md {吾輩|わがはい}は猫である。
 manuscript.md {吾輩|わがはい}は猫である。
[×] A network error occurred.
[×] A network error occurred.
[×] A network error occurred.
... 省略 ...
[×] A network error occurred.
[×] A network error occurred.
[×] A network error occurred.
[×] A network error occurred.
? Processing PDF
mybook.pdf has been created.
〓 Built successfully.

実際に出力がどうなっているのか見てみましょう。次のコマンドで出力結果を見ることができます。

$ npm run preview

> mybook@0.0.0 preview
> vivliostyle preview

〓 Up and running ([ctrl+c] to quit)

次のようにきれいに数式を埋め込むことができました！

数式がこうやってきれいに組み込めると、ちょっとテンションあがりますね。少しずつ使い方を学んでいきたいと思います。

Web技術で「本」が作れるCSS組版 Vivliostyle入門

出版社/メーカー: シーアンドアール研究所
発売日: 2023/05/12
メディア: Kindle版

わかりやすく書ける！技術同人誌初心者のための執筆実例集技術の泉シリーズ (技術の泉シリーズ（NextPublishing）)

作者: 石井葵
出版社/メーカー: インプレス NextPublishing
発売日: 2019/07/12
メディア: Kindle版

プロジェクト思考で行こう！～技術同人誌を作る技術 (技術の泉シリーズ（NextPublishing）)

作者: 稲山文孝
出版社/メーカー: インプレスR&D
発売日: 2019/09/06
メディア: Kindle版

タグ：技術同人誌 vivliostyle

2023-09-29 22:32 nice!(11) コメント(0)
共通テーマ：趣味・カルチャー

CSS組版のVivliostyleを使ってみたーツールのインストールー　 [Vivliostyle]

私も技術同人誌なるものをやってみようかなと思い、技術誌を作る上でどんなソフトが良いのかなと思い、調べてみました。

候補になるのは、Texをベースとした「Re:View」とCSSをベースとした「Vivliostyle」です。見栄えを見てみると、Vivliostyleがなんかかっこいい。CSS/HTMLベースというのもポイント高いです。必要なツールが、Node.jsのみというのもいいですね。

で、Node.jsのインストールですが、ちょっとはまりました。結論からいうと、sudo apt-get でインストールしてはいけません。バージョンが古いため、使おうとすると「SyntaxError」エラーが出てしまいます。

Node.jsは、Linuxの場合、ダウンロードサイトからzip圧縮したものをダウンロードして使います。解凍したら、フォルダにパスを通せば使えるようになります。私の場合、解凍フォルダが"node-v18.17.1-linux-x64"なので、次のように”.bashrc”に登録して使えるようになりました。

# Node.js settings
export NODE_HOME=$HOME/node-v18.17.1-linux-x64/
export NODE_PATH=$NODE_HOME/lib/node_modules
export PATH=$NODE_HOME/bin:$PATH

ターミナルで次のようにコマンドを打って、使えるかどうか確認します。

$ node -v
v18.17.1
$ npm -v
9.6.7

次のVivliostyleを使えるようにします。チュートリアルにしたがって作業を勧めてみます。

まず、次のコマンドをターミナルから打つと、"create-book" パッケージをインストールするか？と聞かれますので、Yを押してインストールします。

$ npm create book mybook
Need to install the following packages:
  create-book
Ok to proceed? (y)

インストールが終わったら、同じコマンドを打つことで文書のテンプレートを作成することができます。途中、文書のスタイルを聞かれるところがありますが、今回は「Techbook (技術同人誌) theme」を選択してみました。

$: ~/vivliostyle$ npm create book mybook
? Description はじめてのVivliostyle
? Author name よしのたろう
? Author email hogehoge@gmail.com
? License CC-BY-SA-3.0
? choose theme @vivliostyle/theme-techbook - Techbook (技術同人誌) theme

Creating a new package in /home/ystaro/vivliostyle/mybook.

Initializing a git repository
> git init

Installing dependencies using npm
> npm install
npm WARN deprecated trim@0.0.1: Use String.prototype.trim() instead

added 637 packages, and audited 638 packages in 41s

158 packages are looking for funding
  run `npm fund` for details

4 high severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Successfully created /home/ystaro/vivliostyle/mybook

1. cd mybook
2. create and edit Markdown files
3. edit entry field in your vivliostyle.config.js
4. yarn build or npm run build

See https://docs.vivliostyle.org for further information.

? Happy writing!

ここで、"mybook" というフォルダが作られます。ドキュメント本体は、"mybook" フォルダの中の "vivliostyle.config.js" というファイルの中の "entry" で指定されています。この場合は、”manuscript.md” になります。もちろん変更することも可能です。

module.exports = {
  title: 'mybook', // populated into `publication.json`, default to `title` of the first entry or `name` in `package.json`.
  author: 'よしのたろう ', // default to `author` in `package.json` or undefined.

  ... 

  theme: '@vivliostyle/theme-techbook@^1.0.0', // .css or local dir or npm package. default to undefined.
  entry: [
    'manuscript.md', // `title` is automatically guessed from the file (frontmatter > first heading).

  ... 

  ], // `entry` can be `string` or `object` if there's only single markdown file.

  ... 

  // },
}

manuscript.md の中身は、サンプルとして夏目漱石の「吾輩は猫である」が記載されています。

# {吾輩|わがはい}は猫である。

{吾輩|わがはい}は猫である。名前はまだ無い。

どこで生れたかとんと{見当|けんとう}がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という>人間中で一番{獰悪|どうあく}な種族であったそうだ....

これを製版するには、次のようにコマンドを打ちます。

$ cd mybook
$ npm run build

> mybook@0.0.0 build
> vivliostyle build

 manuscript.md {吾輩|わがはい}は猫である。
 manuscript.md {吾輩|わがはい}は猫である。
? Processing PDF
mybook.pdf has been created.
〓 Built successfully.

実際に作成されたPDFを見てみましょう。PDF Viewerで見てもよいですが、次のようにすれば、vivliostyle で見ることもできます。

$ npm run preview

> mybook@0.0.0 preview
> vivliostyle preview

〓 Up and running ([ctrl+c] to quit)

出来上がった本は次のようになりました。

Screenshot from 2023-09-19 00-28-48.png

なんか良い感じですね。次からいろいろとカスタマイズしていきたいと思います。

Web技術で「本」が作れるCSS組版 Vivliostyle入門

出版社/メーカー: シーアンドアール研究所
発売日: 2023/05/12
メディア: Kindle版

技術同人誌を書こう！　アウトプットのススメ技術の泉シリーズ (技術の泉シリーズ（NextPublishing）)

出版社/メーカー: インプレス NextPublishing
発売日: 2018/04/13
メディア: Kindle版

わかりやすく書ける！技術同人誌初心者のための執筆実例集技術の泉シリーズ (技術の泉シリーズ（NextPublishing）)

作者: 石井葵
出版社/メーカー: インプレス NextPublishing
発売日: 2019/07/12
メディア: Kindle版

タグ：vivliostyle 技術同人誌

2023-09-18 23:35 nice!(11) コメント(0)
共通テーマ：趣味・カルチャー

Vivliostyle ブログトップ

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

RSS1.0 | RSS2.0

息子と一緒に Makers

Vivliostyle-CLIで作ったドキュメントに表紙をつくる　 [Vivliostyle]

Vivliostyle-CLIで作ったドキュメントにHTML要素を追加する　 [Vivliostyle]

Vivliostyle-CLIで簡単なドキュメントを作ってみる　 [Vivliostyle]

Vivliostyle-CLI の導入をしてみる　 [Vivliostyle]

Vivliostyle で画像を挿入する　 [Vivliostyle]

Vivliostyle の用紙サイズを変更する　 [Vivliostyle]

Vivliostyleで数式を組み込んでみた　 [Vivliostyle]

CSS組版のVivliostyleを使ってみたーツールのインストールー　 [Vivliostyle]

ys_taro さん

検索ボックス

カレンダー

つぶやき

最新記事一覧

マイカテゴリー