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

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

２０２４年あけましておめでとうございます　 [徒然日記]

２０２４年新しい年がはじまりました。新年あけましておめでとうございます。

が、なんと年末に家族そろってコロナにかかってしまい全滅状態。私は頭痛、喉痛、筋肉痛くらいなのですが、みんな熱を出してしまいダウンしています。コロナを持ち帰ったと思われる里帰り中の息子は３９．９度まで発熱してしまい意識もうろうとしていました。

散々な正月となってしまいまいました。皆さんもお気をつけください。

２０２３年もいろいろとチャレンジをしてきましたが、２０２４年も新しいことにチャレンジしていきたいと思っています。

２０２４年にしたい十のこと

①　ブログ週２回更新
②　自作アームロボット
③　自作ドローン
④　技術解説動画制作
⑤　技術書制作
⑥　毎月５０ｋｍ走破
⑦　毎月５ｋｍ泳破
⑧　健康診断で異常値なし
⑨　漫画・イラスト再開
⑩　作詞・作曲にチャレンジ

このうちいくつ達成できるかな。最近、出張が多く、あまり時間がとれないですが、無理せず楽しみながらチャレンジしていきたいと思います。

本年もどうぞよろしくお願いいたします。

2024-01-02 18:45 nice!(8) コメント(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)
共通テーマ：趣味・カルチャー

前の5件 | 次の5件

日	月	火	水	木	金	土
	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 で画像を挿入する　 [Vivliostyle]

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

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

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

ys_taro さん

検索ボックス

カレンダー

つぶやき

最新記事一覧

マイカテゴリー

息子と一緒に Makers

２０２４年あけましておめでとうございます [徒然日記]

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

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

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

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

ys_taro さん

検索ボックス

カレンダー

つぶやき

最新記事一覧

マイカテゴリー

２０２４年あけましておめでとうございます　 [徒然日記]

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

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

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

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