pdfme 開発者レター 2024年2月

https://pdfme.com/blog/developing-pdfme-v4 の日本語版です

---

去年の12月からV4の開発を着手してすでに3ヶ月が過ぎようとしている。

開発スピードが遅くて申し訳ない。しかし少しづつV4のリリースは現実になってきている。

V4に実装予定の機能

1. Add DynamicTable Schema #332

   

   • Preview: https://add-dynamic-table-schema-332.vercel.app/
   • テーブルは計画と違う実装で進んでいる。
     • 二ヶ月前にImplementation Ideas for Dynamic Tables in pdfmeというブログ記事を書いたが実際には当時のアイデアとは違う方法で実装を行なった。
     • jspdf-autotable の実装をベースに行なった。
       • 整理されたクラス、オプション、レイアウトの計算が再利用できると考えた。
       • jspdf-autotable のコードを移植し、不要なコードを削除してテーブルの計算処理を利用している。
     • generatorとUIパッケージでgetDynamicTemplate という関数を呼び出し、その中でテーブルの高さを計算し、そのテーブルよりもY座標が下にあるスキーマのY座標を再設定したり、ページブレイクの処理を行なっている。
   • 致命的なバグがいくつかあり、うまく修正できずに1週間経過した。
     • getDynamicTemplate の実装の中でうまく計算ができていないことが致命的でリリースをブロックしている。
       • 🔥🔥🔥 [Form & Generator] The page break does not account for pages beyond the second page. #429
       • 🔥🔥🔥 [Form & Generator] When spanning across pages, it overlaps due to a padding issue. #428
     • バグはすでにissueを作成している。: https://github.com/pdfme/pdfme/issues?q=is%3Aissue+is%3Aopen+label%3Atable
     • 正直バグの修正がうまくいかずでスタックしている。ここで止まっていたくないので、次で紹介する他の機能の実装にも着手するつもりだ

2. Add a Left Sidebar for Placing Schemas #400

   

   • スキーマを追加する際にサイドバーから引き出せるUIを追加する
   • プラグインの定義が変わる（アイコンの追加）のでこのメジャーバージョンに入れるつもり

3. Placeholder, Expression

   

   • まだどのように実現するかは具体的なイメージはない。
     • Handlebars のようなテンプレートエンジンがレンダリング時に動くようになるとか？
   • しかしユーザーのニーズは明確にある。これも破壊的変更があるかもしれないので場合によってはV4に含めるべきだと考えている。
     • ref: https://github.com/pdfme/pdfme/issues/437
     • ref: https://github.com/pdfme/pdfme/pull/388
     • ref: https://github.com/pdfme/pdfme/discussions/208#discussioncomment-6594913

公開時期

• 早くリリースしたいが明確にバグがいつ解消できるか、他の機能についてもまだ着手していないので現時点では逆算してリリース日を決めることができない。
• 現時点では上記の機能のうちテーブルの実装しかない。しかもリリースするまでに解消すべき致命的なバグがあるのでまだまだ時間がかかりそうだ。
• V4で発表される機能に対して特に使う予定がない場合はこのまま安心してV3を使い続けてほしい。バグの対応などV3に必要な修正は今後も引き続き行なっていく予定だ。

alpha版へのアクセス

• V4のプレビュー環境を用意している: https://pdfme-playground-v4.vercel.app/

• V4の installの方法

  npmのバージョンからnextタグのついたものはV4のバージョンだ。現在各パッケージで4.0.0-alpha.0のバージョンがリリースされている。

  

  • 下記コマンドでインストール可能だ。
    • npm i @pdfme/common@4.0.0-alpha.0 @pdfme/schemas@4.0.0-alpha.0 @pdfme/generator@4.0.0-alpha.0 @pdfme/ui@4.0.0-alpha.0

後方互換性について

V4を使う場合、過去のテンプレートとプラグインは修正が必要になる。

• テンプレート:
  • template.sampledataは廃止になり、各スキーマのcontentプロパティにデザイナーの表示用データを持つようになりました。
    • 修正例: https://github.com/pdfme/pdfme/pull/427/files#diff-4f370f85245caa3e9aa10fa5ecded75ba9fca1530600f8ceadc8b94f01f7df77
• プラグイン:

  • プラグインの初期データとしてdefaultValueの代わりにdefaultSchema.contentを使うようになりました。

    

  • プラグイン内でonChangeした場合、これまでユーザーの入力をonChangeで書き換えていたが、{[key:string]:string}の形式でスキーマの自体定義も変更できるようになりました。
    これまでのonChangeと同じようにユーザーの入力を反映させたい場合は onChange({ key: 'content', value: data }); と書いてください。

    

  • 修正例: https://github.com/pdfme/pdfme/pull/427/files#diff-e64985c2bcbfd91c01ab897562721dccc7605499f81432b2e09c167e7a844bb0

• テンプレートにバージョン:

  • V4のデザイナーで作成されたテンプレートからテンプレートにバージョンが付くようになりました。現時点では開発版なのでプロパティは pdfmeVersion:"4-dev" が追加されます。

    

最後に

Help wanted!

テーブルのバグが解消されれば次のステップに進めるが、正直スタックしているので協力してくれる人がいると本当に嬉しい…

• 下記のIssueについて協力してくれる人がいれば教えてほしい。
  コラボレーターが現れたときに効率的に修正が行えるよう、これからissueに私が知っている情報を追記するつもりだ。
  • 🔥🔥🔥 [Form & Generator] The page break does not account for pages beyond the second page. #429
  • 🔥🔥🔥 [Form & Generator] When spanning across pages, it overlaps due to a padding issue. #428

スタックしているが前に進みたいと思っているので、3月は下記の機能の実装を開始するつもりだ。

• Add a Left Sidebar for Placing Schemas #400

みんなありがとう

2月は私は良い進捗を出すことができなかったが、コントリビューターは最高の仕事をしてくれた。ありがとう。

• Fix pdf text render overlap by avoiding line breaks in pdflib #417
• ui-build-optimization: development react/react-dom files in prod build fix #422

まだマージされていないが、カラータイプが追加されたこのPRもクールだ。

• Added support for color type option in generator #436

コード以外でもOSSへの貢献の方法は無限にある。

まずはソフトウエアを使うこと、そして良いと思ったら友達にこのライブラリを紹介すること、もしバグを見つけたらIssueから登録してください。

時間はかかるかもしれないですが、できるだけ返信していますし、コメントに目を通すようにしています。

V4は私がこのライブラリを作り始めた時に諦めていたテーブル機能が入る予定で、これは一人では絶対にできなかったことだ。サポーター、コントリビューター、ユーザーには感謝している。
私はOSSの力にはびっくりさせられている、今は最高のPDFライブラリができそうな気がするんだ！

またアップデートがあれば更新します。最後まで読んでくれてありがとう。