【小ネタ】BacklogのwikiのPDF化をちょっとだけいい感じにするスクリプトを紹介します

CX事業本部の熊膳です。 BacklogのwikiをPDFにするときに、ちょっといい感じにするスクリプトを紹介します。

はじめに

開発用の設計書はコードで書くことが多いですが、要件や報告などはBacklogのwikiで記述することがあります。また、お客様によってはこのドキュメントをPDFにして欲しいと依頼されることがあります。

このとき、こんなふうになることありますよね。

（「クラスメソッドの強み」から次のページにいって欲しいなぁ）

これを見出しごとに改ページすることで改善してみます。

改ページする方法

改ページは、CSSのbreak-beforeを利用します。PDF変換はブラウザの印刷機能を利用する前提です。

MDN break-before

CSS の break-before プロパティは、生成されたボックスの前で、ページ、段、領域をどのように区切るかを設定します。ボックスが生成されない場合は、このプロパティは無視されます。

page 該当するボックスの直前で改ページを行います。

見出しにこのスタイルを適用することで、改ページをコントロールします。

やってみた

では早速やってみましょう。

環境は以下で行います。

• Chrome 84（84.0.4147.89）

余計な要素を除外するために、Backlogのwikiに用意されている印刷用ページをベースに手を入れることにします。

まずは、h2タグにスタイルを適用してみます。印刷用ページを開きChromeのDevToolsのConsoleで以下のスクリプトを実行します。

// h2タグに適用
const  h2el  =  document.getElementsByTagName('h2');
Array.prototype.forEach.call(h2el, element  => {
	element.style.breakBefore  =  'page';
});

では、見てみましょう。印刷プレビューを表示してみます。

うまくいったようです。

h1タグやh3タグでも同様に指定することで改ページを挿入できます。

// h3タグに適用
const  h3el  =  document.getElementsByTagName('h3');
Array.prototype.forEach.call(h3el, element  => {
	element.style.breakBefore  =  'page';
});

どうしても改ページしたくない箇所がある場合は、DevToolsのElementsを開いてその部分のStyleを削除してあげればいいです。

まとめ

BacklogのwikiをPDF化したときに、見出しごとに改ページになって欲しいなぁという個人的な要望をbreak-beforeを用いて解決した方法を紹介しました。改ページのコントロール方法として文字サイズをちょっと変更するというテクニックもあったりするので、私は合わせ技で活用しています。

以上、どなたかの参考になれば幸いです。

おまけ

実は、今まで改ページの指定にpage-break-beforeを使用しており、break-beforeに置き換えられたことを今回初めて知りました。互換性のためpage-break-beforeは一応利用できるみたいですね。

MDN page-break-before

このプロパティは break-before プロパティによって置き換えられました。

最初、以下のスクリプトを実行すると、プロパティがbreak-before:pageに変わるのでちょっとあせりました。一瞬Chromeのバグか！と思ったのは内緒です。

element.style.pageBreakBefore  =  'always';

以上、おまけでした。