Zenn
🐇

pdfme 開発者レター 2024年2月

2024/03/02に公開5件
OSS
PDF
オープンソース
帳票
pdfme
idea

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

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

V4に実装予定の機能

  1. Add DynamicTable Schema #332

  2. Add a Left Sidebar for Placing Schemas #400

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

  3. Placeholder, Expression

公開時期

  • 早くリリースしたいが明確にバグがいつ解消できるか、他の機能についてもまだ着手していないので現時点では逆算してリリース日を決めることができない。
  • 現時点では上記の機能のうちテーブルの実装しかない。しかもリリースするまでに解消すべき致命的なバグがあるのでまだまだ時間がかかりそうだ。
  • 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を使う場合、過去のテンプレートとプラグインは修正が必要になる。

  • テンプレート:
  • プラグイン:

    • プラグインの初期データとして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!

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

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

みんなありがとう

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

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

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

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

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

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

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

Discussion

shisyamo4131shisyamo4131

はじめまして。
pdfmeに興味を持ちまして、nuxt(v2)にて試してみようと思ったのですが、
@pdfme/commonをimportすると以下のエラーが発生します。

you may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

試してみたコードは貴Webサイトのサンプルをnuxt用に少し変えたものです。

<template>
<div>{{ template }}</div>
</template>

<script>
import { BLANK_PDF } from "@pdfme/common"
export default {
data() {
return {
template: {
basePdf: BLANK_PDF,
schemas: [
// ...
]
}
}
}
}
</script>

webpackでfontファイルの読み込み時に適切なローダーの設定がないのだろうと推測しているのですが、解決方法をご教示いただけないでしょうか。

hosaka313hosaka313

Nuxt 2.17.2で同じエラーに遭遇しましたので、ご参考にコメントします。

nuxt.config.tsに下記のように追加するとloaderのエラーはなくなりました。

nuxt.config.ts
  build: {
    transpile: ["@pdfme"]
  },

これとは別に@pdfme/schemas のインストールが必要でした。

optional chaining（?）の部分の読み込みの問題のようです。（参考に別の方の記事を添付します。）

Nuxt app で AWS SDK for JavaScript v3 を使えるようにする
https://mrk21.hatenablog.com/entry/2022/11/02/233050

もし参考になりましたら。

Kyohei FukudaKyohei Fukuda

お返事がめちゃくちゃ遅れて申し訳ないです。(通知見てなかった...)

Nuxtで検証できていなかったので助かります。ありがとうございます！

shisyamo4131shisyamo4131

hosaka313様

ありがとうございます。
別機能の実装に追われていて未だ確認できていないのですが、時期が来たら参考にさせていただきます。
作成者様のお役に立つかもしれませんので、結果もこちらにご報告いたします。

遅くなって申し訳ありません💦

shisyamo4131shisyamo4131

だいぶご無沙汰してしまいました。
やっと試行する時間が取れましたので、hosaka313様のアドバイスも含めて試してみましたところ、

import { generate } from '@pdfme/generator` で

This dependency was not found:
@pdfme/schemas/utils in ./node_modules/@pdfme/generator/dist/esm/src/generate.js
To install it, you can run: npm install --save @pdfme/schemas/utils

@pdfme/schemasもインストールしたのですが、utilsへの参照ができていないようです。
助けていただけますと幸いです。