NGK2022S発表資料です https://ngk2022s.connpass.com/event/233520/ yagisan-reportsのWebサイト https://www.denkiyagi.jp/yagisan-reports/

1. Webブラウザ上で動作する
帳票エンジンを作る話
terurou
2022-01-22

2. terurou
• デンキヤギ代表取締役
• NGKの実行委員を12年ぐらいやってました
• 今回も関与はしてるけど、大して仕事してないです
1

3. [ad] yagisan-reports
2

4. 帳票とは？
• 請求書、申請書、明細書とか
• PDF出力したい
3

5. 帳票システムを作るのはだるい
• 帳票エンジンの選定
• 超高価エンプラ製品 ～ OSS
• 高機能な専用デザイナー ～ 低レベルな描画APIでゴリゴリ
• 普通に作ると帳票サーバーが必要
• FaaSでやってもいいけど、処理時間やメモリ量とかが…
• そもそも商用製品は帳票サーバーを立てる前提
4

6. 帳票エンジンのつらいところ
• 商用/OSS共に、全体的に古臭い
• 古臭い帳票デザイナーを使わないといけないのがしんどい
• headless Chromeを最近よく見るけど…
• HTML/CSSで帳票デザインを作れる人、どれだけいる？
• FaaSで動かすにはオーバーヘッドが大きい
5

7. 帳票サーバーがしんどい
• 単純にサーバーの構築/運用はめんどくさい…
• 死活監視、ストレージ運用、エラー時にどうするか…
• 帳票サーバーの負荷対策 → ジョブキュー化で泥沼
• 設計難易度が上がって、対応できる人が減る
• 帳票出力が非同期になるので、UIにどう組み込む？
• 出力依頼を出しておいて、完了したらメールで通知？
6

8. 7
サーバーサイドで帳票出力すると
めんどくさいことが多すぎるから、
ブラウザ側で生成させたらよくね？

9. ブラウザ上で動くPDFライブラリ
• JS実装のOSSがいくつかある
• jsPDF
• PDFKit.js
• pdf-lib.js など
• C++の実装をWASM化
• この中では、 pdf-lib.js が比較的おすすめ
• yagisan-reportsでも使用（2022年1月時点）
8

10. pdf-lib.jsが比較的オススメだが、問題もある
• UIスレッドの占有
• 日本語の取り扱い
• 日本語フォント
• 「Macの濁点」「中華フォント」「CP932」
• 低レベルな描画APIしかない
• レイアウト記述言語
• 改ページ処理
9
魔界
比較的マシ

11. UIスレッドの占有
• JSライブラリなので、当然UIスレッドで動く
• 大量ページ出力とかやると、UIが止まる
• Web Workerを使って別スレッドで実行しましょう
• これはそんなに難しくない
10

12. 日本語フォント
• pdf-lib内部ではfontkitにフォント処理を委譲
• fontkitの日本語フォント実装が不完全
• どうやら、OTFのcmap処理に問題があるっぽい
• 将来的には直したいが、当面は後回しにしている
• TTFであれば動作する
• ただしIVSは未実装→異体字は扱えない
11

13. OTFの日本語フォントが使えないと困る
• 使いたいフォントは全部OTF
• 自由に使える「JIS第4水準漢字」対応フォントは限られている
• Notoフォントとか、源ノ角ゴシックとか
• OTF→TTFに変換すればいける
• [注意] 前述のフォントはSIL Open Font License v1.1
12

14. SIL Open Font License v1.1 日本語訳抜粋
3）フォントソフトウェアの改変バージョンで、予約さ
れたフォント名を使用することは、その著作権所有者が
書面による明示的な許可を与えていない限りできない。
この制限はユーザーに示される主要なフォント名だけに
適用される。
→ TTFに変換したフォントは別名にする必要がある
13

15. 「Macの濁点」問題
• Apple社製OSで「だ」を入力すると、文字コード上は
「た」+「濁点」の2文字で構成されてしまう
• 濁点、半濁点は全てこうなる
• OS混在の開発現場で、たびたび発生する問題
• 正規化しないとPDF出力時に不都合がある
14

16. 「中華フォント」問題
• Notoフォントなどを使っていても発生する
• 「中華フォント」の字体にも
Code Pointが割り当て
• フォントではなく入力文字列が
誤っている→正規化が必要
15
引用: https://heistak.github.io/your-code-displays-japanese-wrong/

17. Unicode文字列の正規化
• String#normalize('NFC')が使えない
• Unicodeの正規化を行ってくれる便利メソッド
• JIS第3-4水準漢字の一部まで過剰に正規化してしまう
• 神 : U+FA19 （JIS第3水準漢字）
• 神 : U+795E
16

18. 「CP932」問題
• CP932 = MSが定めた日本語文字コードセット
• JISに収録されていない漢字が存在する
• 代表例は 髙 （はしごだか）
• 「JISに収録されている漢字」でバリデーションすると、
「はしごだか」を弾いてしまう
17

19. 都合の良い文字セットで、都合の良い正規化
• Unicode正規化アルゴリズムをベースに、
正規化ルールをごっそり入れ替えて対応
• JIS X 0213:2004 + CP932を含む文字セット
• 「Macの濁点」「中華フォント」は正規化
• ユニコードコンソーシアムが使えるネタを公開している
• https://unicode.org/Public/UNIDATA/UnicodeData.txt
• https://www.unicode.org/Public/security/latest/confusablesSummary.txt
18

20. 低レベルな描画APIしかない
• PDF仕様には低レベルな描画命令しかない
• 「この座標に」「文字を書く」「線を引く」みたいな感じ
• 表を描画するにも、自分で全部線を引く必要がある
• これを帳票を作るたびに毎回書いていたら生産性が低すぎる
19

21. レイアウト記述言語
• XMLベースの帳票レイアウト記述言語を自前実装
• XMLにしたのは、人間が読み書きしやすいから
• 最初はJSONで書いてたけど、人類には早すぎた
• XAMLやAndroidのLayout XMLに似た仕様
• 表組みのネストにも対応した
20

22. レイアウト記述言語の例
21

23. 改ページ処理
• 「明細が1ページに収まらない請求書」のような帳票は
改ページ処理に対応できないと出力できない
• 改ページ処理から逃げたエンジンは結構見かける
• 既存PDFをテンプレートにして、文字や図形を置くだけ
• これはこれで便利なので、yagisan-reportsでも対応している
• まともに向き合うと地獄
22

24. 改ページ処理の難しさ
• Webサイトを印刷した際に表示が崩れますよね？
あれを全部うまくやれるようにするイメージです
• もちろん仕様をかなり絞ってるが、それでもかなり面倒
• コーナーケースが大量にあり、テストコードの量がやばい
23

25. まとめ
• ブラウザ上で動く日本語帳票エンジンを作るのは大変
• 狂気の沙汰、やる前はここまで大変だと思ってなかった
• yagisan-reportsを使うと、今日話してきた問題が
全部対処済みらしいよ！
• 2022年春のパブリックリリースを目標にしてるらしいよ！
• クローズドのアーリーリリース版でよければ、すぐ使えます
• こういうのを開発したい人を募集中（アルバイト可）
24