#あすみかんの上にあすみかん

#たのしいことしかかかないことをここに決意します

FigmaとPHPで作る、1ミリたりとも表示崩れしない最強の帳票印刷ソリューション をみたよ / asumikam #phpcon_odawara Advent Calendar

adventar.org

これは、asumikam #phpcon_odawara Advent Calendarの2日目の記事です🎄 本日は「FigmaPHPで作る、1ミリたりとも表示崩れしない最強の帳票印刷ソリューション」の感想を書いていきます!

💡 トーク概要・動画 fortee.jp

📖 スライド speakerdeck.com

感想

「ニーズに合うような帳票出力サービスがなかったので、Figmaでうまいことつくったった〜〜〜」という話でした。 ニーズ自体は特殊ケースというわけではなく、至極真っ当なやりたいこと、そして立ちはだかるエグい課題、という感じでした。

  • HTML/CSSでブラウザの印刷機能でPDF化
    • エグいコードができあがる←わかる
  • Excelで作ってLibreOfficeのヘッドレスモード等でPDF化
    • エグいExcelシートができあがる←わかる
  • 外部サービスを活用
    • 良いが、高い。ニーズにあわなかった←ありそう

帳票に関するコーディングは軽いものならしたことがありますが、幸い(?)じぶんはミリ単位で細かく帳票をデザインしたい、と言われたことがありません。 自分がその環境に置かれたらどうする!?同じように絶望するかもしれねぇ...。

で、たつきちさんがすごいのはここからです。 ビジュアルデザインの重要さが問われるのなら、"扱いやすいツール"で細かく調整してからSVGエクスポートで、HTMLに埋め込めばいいのでは?と閃いたそうです。 余談ですが、「※布団の中で思い付きました」とあり、ふとした時にこういう良いアイデアって降ってくるよな、あるある〜とクスッときていました。

実際にやってみると、デコード周りで詰まりはしたが、うまくいった!という感じでした。 実は私がこの登壇のめちゃくちゃ好きなところはここです。 詳しくはスライドを見て欲しいのですが、課題があった時に名推理しているところがめちゃくちゃかっこいいですw また、ユーザーの使いやすさを追求するためのこだわりを感じて、素敵でした。(自分だったらマルチバイト文字やめちゃうかも)

最後は怒涛の力強い解決法のオンパレード、という感じで、たつきちさんのエンジニアとしての粘り強さ・力強さを魅せてもらえました。 (2枚以上の帳票これだと大変そうだな〜と思っていたのですが、そもそも入口を分けちゃう解決法、それが適用できるように仕様を落とし込んだところがよかったです)

ちらっとためしてみた

github.com

READMEをみつつ自分でつくったSVGファイルでやろうとしたのですが、READMEのキャプにあったオプションが自分のFigmaで出てこないからなのか、変換ができなかった...🤨(無料プランだからかな....??)

そのため、exampleファイルを使いつつ試しに手元で動かしてみたのですが、めちゃくちゃ簡単にできたすげ〜〜〜〜!!!CDNからも配信されていて手元でパッと試せて良い....!!

めちゃくちゃ簡単に書き換えられた

たつきちさん、登壇ありがとうございました

とにかくスライドが見やすくて、大変よかったです・・・!! みんなに目を止めて欲しいところを自然に強調していて、「ホスピタリティ〜〜〜」となったりしていました。

出たアイディアに対して、想像もできる、道のりもわかるけど、それが遠すぎて実はもっといいかんじにいけるのでは?と考えて結局なにもできていない...みたいなことに陥りがちなのですが、たつきちさんはできそうなパターンをガツガツ試して、最終的に実現に至るまでパッケージ化しているところが、強さだ....と圧倒されました。学びが多かったです。

たつきちさん、素敵な発表ありがとうございました🙏✨✨✨