8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

文字化けと友達になった経験

Last updated at Posted at 2023-04-01

初投稿になります。
エンジニアに転職して1年程になる元高校教師です。
ちょっと変な人です。
私についてはこちら

機会あれば「教員はエンジニアに向いているか否か」について書きたいな。

よろしくLaravelくん

2023年2月に転職をし、そこからLaravel(8を利用)と友達になりました。
(ちなみにそれまではJavaとAngularを触っていました。)

laravelプロジェクトに配属され1ヶ月が立つか立たないかの時のことです。
laravel-dompdfというプラグインを使って、文字化けに苦しめられました。
この経験を自分への備忘録として書き示しておこうと思います。

laravelでpdfを出力しよう

pdfを出力するプラグインとして以下の方法があります。

  • tcpdf
  • fpdi
  • mpdf
  • dompdf

今回は導入が簡単かつHTMLで記載したページをPDF化してくれるdompdfを採用しました。
こちらのプラグインは細かく設定を変更することもでき、汎用性もあります。

laravel-dompdfを使ってわかったこと

使い方はこちらを参考にしました。

決して難しくなかったのですが色々使い勝手が悪く、下記の点がわかりました。

  • CSSの読み込みが不十分で、Bootstrap等の大規模なものは適さない。
  • HTMLを2回与えて描画するとCSSが効かない。

そのため、PDF化できても最初はCSSの問題に苦戦しました。

文字化け発生

最も苦労したのは文字化けでした。このプラグイン自体が日本語対応されていません。
そのためIPAフォントをダウンロードして利用しました。
ローカル環境ではすんなり上手く行ったのですが、stg環境で文字化けしてしまい、かなり時間を浪費してしまいました。
そんな中わかったのは

  • blade内にsciriptタグでフォントを読み込む場合
    1. IPAフォントからfont-weightごとにファイルが自動生成する
    2. 自動生成したファイルを読み込むことで文字化けが解消される
  • cssでフォントを読み込む場合
    1. IPAフォントファイルを読み込まないため、文字化けしてしまう

どの参考例を見てもscriptタグを用いて実装していました。
「CSSにまとめたくないのかなぁ?」
と疑問に感じてましたが、上記の理由から皆さん避けていたのだと思います。

解決策

blade内にsciriptタグでフォントを読み込ませ、ファイルを自動生成させれば解決となります。
しかし、git上で管理していないファイルを増やしたくないことから以下の対応をしました。

  1. blade内にsciriptタグでフォントを読み込ませ、ローカルでファイルを自動生成させる
  2. scriptタグを書きたくなかっため、自動生成後にCSSへお引越し
  3. stg環境へは自動生成したファイルも一緒に

この方法により、git上でファイルを全て管理できるかつ、文字化けが克服できました。

最後に

今回の実装のテストにより200枚以上のPDFを出力、ダウンロードフォルダがカオスになりました。
細かい仕組みなどはまだ理解し切れてませんが、

「きっとまた文字化けで苦しむことがあるから」

との天からの囁きが耳から離れないためちゃんと勉強しておこうと思っています。
初学者が書く内容で、中身が浅くなっちゃいましたが以上備忘録とします。
精進します!

8
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?