Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

Webブラウザ上で動作する帳票エンジンを作る話

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Próximo SlideShare
MQTTとAMQPと.NET
MQTTとAMQPと.NET
Cargando en…3
×

Eche un vistazo a continuación

1 de 25 Anuncio

Más Contenido Relacionado

Similares a Webブラウザ上で動作する帳票エンジンを作る話 (20)

Anuncio

Más de terurou (20)

Más reciente (20)

Anuncio

Webブラウザ上で動作する帳票エンジンを作る話

  1. 1. Webブラウザ上で動作する 帳票エンジンを作る話 terurou 2022-01-22
  2. 2. terurou • デンキヤギ代表取締役 • NGKの実行委員を12年ぐらいやってました • 今回も関与はしてるけど、大して仕事してないです 1
  3. 3. [ad] yagisan-reports 2
  4. 4. 帳票とは? • 請求書、申請書、明細書とか • PDF出力したい 3
  5. 5. 帳票システムを作るのはだるい • 帳票エンジンの選定 • 超高価エンプラ製品 ~ OSS • 高機能な専用デザイナー ~ 低レベルな描画APIでゴリゴリ • 普通に作ると帳票サーバーが必要 • FaaSでやってもいいけど、処理時間やメモリ量とかが… • そもそも商用製品は帳票サーバーを立てる前提 4
  6. 6. 帳票エンジンのつらいところ • 商用/OSS共に、全体的に古臭い • 古臭い帳票デザイナーを使わないといけないのがしんどい • headless Chromeを最近よく見るけど… • HTML/CSSで帳票デザインを作れる人、どれだけいる? • FaaSで動かすにはオーバーヘッドが大きい 5
  7. 7. 帳票サーバーがしんどい • 単純にサーバーの構築/運用はめんどくさい… • 死活監視、ストレージ運用、エラー時にどうするか… • 帳票サーバーの負荷対策 → ジョブキュー化で泥沼 • 設計難易度が上がって、対応できる人が減る • 帳票出力が非同期になるので、UIにどう組み込む? • 出力依頼を出しておいて、完了したらメールで通知? 6
  8. 8. 7 サーバーサイドで帳票出力すると めんどくさいことが多すぎるから、 ブラウザ側で生成させたらよくね?
  9. 9. ブラウザ上で動くPDFライブラリ • JS実装のOSSがいくつかある • jsPDF • PDFKit.js • pdf-lib.js など • C++の実装をWASM化 • この中では、 pdf-lib.js が比較的おすすめ • yagisan-reportsでも使用(2022年1月時点) 8
  10. 10. pdf-lib.jsが比較的オススメだが、問題もある • UIスレッドの占有 • 日本語の取り扱い • 日本語フォント • 「Macの濁点」「中華フォント」「CP932」 • 低レベルな描画APIしかない • レイアウト記述言語 • 改ページ処理 9 魔界 比較的マシ
  11. 11. UIスレッドの占有 • JSライブラリなので、当然UIスレッドで動く • 大量ページ出力とかやると、UIが止まる • Web Workerを使って別スレッドで実行しましょう • これはそんなに難しくない 10
  12. 12. 日本語フォント • pdf-lib内部ではfontkitにフォント処理を委譲 • fontkitの日本語フォント実装が不完全 • どうやら、OTFのcmap処理に問題があるっぽい • 将来的には直したいが、当面は後回しにしている • TTFであれば動作する • ただしIVSは未実装→異体字は扱えない 11
  13. 13. OTFの日本語フォントが使えないと困る • 使いたいフォントは全部OTF • 自由に使える「JIS第4水準漢字」対応フォントは限られている • Notoフォントとか、源ノ角ゴシックとか • OTF→TTFに変換すればいける • [注意] 前述のフォントはSIL Open Font License v1.1 12
  14. 14. SIL Open Font License v1.1 日本語訳抜粋 3)フォントソフトウェアの改変バージョンで、予約さ れたフォント名を使用することは、その著作権所有者が 書面による明示的な許可を与えていない限りできない。 この制限はユーザーに示される主要なフォント名だけに 適用される。 → TTFに変換したフォントは別名にする必要がある 13
  15. 15. 「Macの濁点」問題 • Apple社製OSで「だ」を入力すると、文字コード上は 「た」+「濁点」の2文字で構成されてしまう • 濁点、半濁点は全てこうなる • OS混在の開発現場で、たびたび発生する問題 • 正規化しないとPDF出力時に不都合がある 14
  16. 16. 「中華フォント」問題 • Notoフォントなどを使っていても発生する • 「中華フォント」の字体にも Code Pointが割り当て • フォントではなく入力文字列が 誤っている→正規化が必要 15 引用: https://heistak.github.io/your-code-displays-japanese-wrong/
  17. 17. Unicode文字列の正規化 • String#normalize('NFC')が使えない • Unicodeの正規化を行ってくれる便利メソッド • JIS第3-4水準漢字の一部まで過剰に正規化してしまう • 神 : U+FA19 (JIS第3水準漢字) • 神 : U+795E 16
  18. 18. 「CP932」問題 • CP932 = MSが定めた日本語文字コードセット • JISに収録されていない漢字が存在する • 代表例は 髙 (はしごだか) • 「JISに収録されている漢字」でバリデーションすると、 「はしごだか」を弾いてしまう 17
  19. 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. 20. 低レベルな描画APIしかない • PDF仕様には低レベルな描画命令しかない • 「この座標に」「文字を書く」「線を引く」みたいな感じ • 表を描画するにも、自分で全部線を引く必要がある • これを帳票を作るたびに毎回書いていたら生産性が低すぎる 19
  21. 21. レイアウト記述言語 • XMLベースの帳票レイアウト記述言語を自前実装 • XMLにしたのは、人間が読み書きしやすいから • 最初はJSONで書いてたけど、人類には早すぎた • XAMLやAndroidのLayout XMLに似た仕様 • 表組みのネストにも対応した 20
  22. 22. レイアウト記述言語の例 21
  23. 23. 改ページ処理 • 「明細が1ページに収まらない請求書」のような帳票は 改ページ処理に対応できないと出力できない • 改ページ処理から逃げたエンジンは結構見かける • 既存PDFをテンプレートにして、文字や図形を置くだけ • これはこれで便利なので、yagisan-reportsでも対応している • まともに向き合うと地獄 22
  24. 24. 改ページ処理の難しさ • Webサイトを印刷した際に表示が崩れますよね? あれを全部うまくやれるようにするイメージです • もちろん仕様をかなり絞ってるが、それでもかなり面倒 • コーナーケースが大量にあり、テストコードの量がやばい 23
  25. 25. まとめ • ブラウザ上で動く日本語帳票エンジンを作るのは大変 • 狂気の沙汰、やる前はここまで大変だと思ってなかった • yagisan-reportsを使うと、今日話してきた問題が 全部対処済みらしいよ! • 2022年春のパブリックリリースを目標にしてるらしいよ! • クローズドのアーリーリリース版でよければ、すぐ使えます • こういうのを開発したい人を募集中(アルバイト可) 24

×