技術書典18が発表されました！

次の本を書き始めるタイミングにあわせて、pagebreakコマンドがエラーにならない対策をしました。設定方法と、作業の備忘録です。

まずはじめに

技術書は、kmutoさんのRe:VIEWと、TechBoosterさんのReVIEW-Templateを使って書いています。生成したPDFを日光企画さんにそのまま入稿できるので、書籍作成初心者の自分には、絶大なる助けになりました。

エディターは、VSCodeを使っています。atsushienoさんによるRe:VIEWプラグインと、vscode-language-mugeneプラグインで、プレビューや自動校正を利用しています。このあたりの環境構築については、以下の記事に書いてあります。

仕上げのページ調整をする際に、pagebreakコマンドで改ページをしています。この時に、Re:VIEW プラグインが、pagebreakをエラーにしてしまうのが気になっていました。Re:VIEWのマニュアルに載っていないコマンドなので、正規のものではないようです。

以前から模索していた対策に成功したので、共有します。正規コマンドではなく、webやtextに出力できないものなので、自分用の改良ということで、ここで方法を書いておくにとどめます。

対応手順

対策したファイルを用意しました。ダウンロードして、インストールしたプラグインに上書きコピーすれば、対応できます。VSCodeに、Re:VIEW プラグインをインストールしてあることが前提です。

Releases · am1tanaka/review.js-vscode · GitHubを開く
Assetsにあるv0.20.0-add-pagebreak.zipをダウンロードする
ダウンロードしたzipファイルを展開する
ユーザーフォルダーから、.vscode\extensions\atsushieno.language-review-0.7.5\node_modules\review.js-vscodeを開く
zipファイルを展開したフォルダー内のdist, lib, testフォルダーを、開いたフォルダーに上書きコピーする

以上で完了です。

注意

//pagebreakは、公式コマンドではありません。rakeでの出力では、pdfやepubには対応していますが、ページがないwebやtextなどではエラーになります。webやtextに出力する際には、reファイルから//pagebreakを削除してください。

やったこと

備忘録として、やったことを残しておきます。

Re:VIEW プラグインが、Re:VIEWコマンドの処理で利用しているyfakariyaさんのGitHub - yfakariya/review.js-vscode: Another implementation of ReVIEWに、手を加えました。ReVIEW.js for VSCodeは、vvakameさんのGitHub - vvakame/review.js: Another implementation of ReVIEWに、不具合対応したものです。さまざまな方々の恩恵に預かって、助けてもらえています。

準備

GitHub - yfakariya/review.js-vscode: Another implementation of ReVIEWをフォークして、クローンする
VSCodeで開く
TERMINALを開く
npm run setupで設定

操作は、npmで実行できます。package.jsonを開くと、scriptsにコマンドが定義されています。npm runに続けて、コマンドを書けば実行できます。

ビルドとテスト

ビルドは、以下で実行できます。

npm run prebuild
npm run build
npm run postbuild

テストは、以下で実行できます。

npm run pretest
npm run test

ちなみに、手元の環境だと、テストは14個ほど失敗しています。失敗が出ても、気にしなくて大丈夫そうです。

テストを加える

テストがあるので、利用すると開発が楽です。test/fixture/validフォルダーに、テスト用のファイルを追加します。

test/fixture/validフォルダーに、新しいフォルダーを作成して、block_pagebreakという名前にする

他のコマンドを参考に、テスト用のデータを作ります。今回は、block_blanklineが似ているので、参考にしました。

block_pagebreakフォルダー内に、新しいファイルを作成して、content.reという名前にする
pagebreakを使ったreファイルの例として、次を入力する

= pagebreak のテスト

aaa
//pagebreak
bbb
//pagebreak
ccc

改行コードを、LFにして保存する

確認用の正解ファイルを作成します。

新しいファイルを作成して、content.htmlという名前にして、以下を入力する

// 1:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:ops="http://www.idpf.org/2007/ops" xml:lang="ja">
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" type="text/css" href="stylesheet.css" />
  <meta name="generator" content="Re:VIEW" />
  <title>pagebreak のテスト</title>
</head>
<body>
<h1><a id="h1"></a><span class="secno">第1章　</span>pagebreak のテスト</h1>
<p>aaa</p>
<p>[改ページ]</p>
<p>bbb</p>
<p>[改ページ]</p>
<p>ccc</p>
</body>
</html>

改行コードを、LFにして保存する

テキストの正解データを作成します。

新しいファイルを作成して、content.txtという名前にして、以下を入力する

■H1■第1章　pagebreak のテスト

aaa

[改ページ]
bbb

[改ページ]
ccc

改行コードを、LFにして保存する

以上で、テストファイルができました。TERMINALで以下を入力して、テストを実行してみます。

npm run pretest
npm run test

あれこれエラーが発生します。pagebreakのものを探すと、11と12番目でエラーが出ています。

エラー表示を確認すると、Re:VIEW プラグインで表示されるエラーが出てます。

これに対応できれば、いけそうです。

コマンドの追加

コマンドは、libフォルダー内の次の4つのファイルに追加します。

builder/htmlBuilder.ts
builder/textBuilder.txt
i18n/ja.ts
parser/analyzer.ts

htmlBuilder.ts

lib/builder/htmlBuilder.tsを開く
今回は、blanklineを参考にしたので、検索する
blanklineの定義をすぐ下に複製して、pagebreakとして定義する

// 644:
    block_pagebreak(process: BuilderProcess, _node: BlockElementSyntaxTree) {
        process.outRaw("<p>[改ページ]</p>\n");
        return false;
    }

textBuilder.ts

lib/builder/textBuilder.tsを開く
同様に、blanklineを検索して、参考にする
以下を追加する

// 476:
    block_pagebreak(process: BuilderProcess, _node: BlockElementSyntaxTree) {
        process.out("\n[改ページ]\n");
        return false;
    }

ja.ts

lib/i18n/ja.tsを開く
blanklineを検索して、参考にする
以下を追加する

// 26:
        "block_pagebreak": "改ページします。\n//pagebreak\nという形式で書きます。正式コマンドではありません。PDFやepubのみ対応です。",

analyzer.ts

lib/parser/analyzer.tsを開く
blanklineを検索して、参考にする
以下を追加する

// 579:
    block_pagebreak(builder: AcceptableSyntaxBuilder) {
        this.blockDecorationSyntax(builder, "pagebreak", 0);
    }

ビルド

できたら、TERMINALでビルドします。

npm run prebuild
npm run build
npm run postbuild

以上で、対応完了です。テストを実行すると、pagebreakのテストが成功します。もし失敗したら、改行がずれているか、改行コードLF以外になっている可能性があります。確認してみてください。

あとは、対応手順でやったのと同様に、対策したファイルを、インストールしてあるRe:VIEW プラグインへ上書きコピーします。

まとめ

Re:VIEW プラグインが利用しているreview.js-vscodeに、pagebreakの処理を追加して、pagebreakコマンドを認識するようにしました。ビルドしたファイルを、Re:VIEW プラグインのインストール先のnode_modulesフォルダーのreview.js-vscodeフォルダーの同ファイルに上書きすれば、VSCodeで//pagebreakコマンドがエラーにならなくなります。

対応させたのは、プレビュー機能だけです。rakeでwebやtextを出力しようとすると、pagebreakはエラーになります。使えるのは、pdfやepubのみなので、気を付けてください。そのあたりが微妙なので、フォークしたまま、上書きコピーでの対応にとどめました。

VSCodeのRe:VIEWプラグインにpagebreakブロック構文を認識させる

目次