PHPでPDF帳票を作成する

はじめに

こんにちは、イメージ・マジックのもあいです。

春になり、JリーグやMotoGP等のスポーツも今シーズンが開幕、UCLや欧州サッカーも終盤を迎えて情報を追ったり観戦したりするのが大変な状態です。インターネットが発達してこんなに情報が増えようとは思いもしなかった今日この頃です。 今回はPHPでPDF帳票を作成するために必要だったことをまとめてみました。

使用するライブラリ

FPDFmPDFwkhtmltopdf という選択肢から、mPDFを使用しました。選定した理由は扱いやすさとライブラリ自身がそれなりの頻度で更新されているからです。

インストール

composerでインストールできます。
composer require mpdf/mpdf
そのほかに日本語を表示させるのであれば日本語フォントが必要になります。

使い方

htmlとcssを用意する

mPDFはhtmlとcssでPDF帳票のレイアウトを作成します。htmlなのでポジションを調整するのが難しいと思われますが、cssのposition:absoluteが条件付きで使用することができます。

ドキュメントにも記載されているのですが、body要素の直下の要素にだけposition:absoluteが適用できます。これを使うことによりレイアウトを調整できます。単位もpxでは無くてptやmmが使えますので帳票レイアウトの調整はそれほぞ難しくないです。
下記のようなコードの場合aクラスとbクラスはposition:absoluteが適用できますが、cクラスは適用できません。
<body>
  <div class="a"></div>
  <div class="b">
    <div class="c"></div>
  </div>
</body>

htmlを取得する

弊社ではSymfony4を使用して開発していますので、htmlを取得する場合はコントローラのrenderViewメソッドでtwigとデータを渡すとhtmlが取得できます。

PDFを生成する

mPDFのインスタンスを生成するときに設定情報を配列で引き渡します。この時に用紙の大きさ/向き/マージンやフォントファイルの場所やフォントにkanする方法を引き渡します。 設定情報はだいたい下記の通りです。
$config = [
    'mode' => 'ja+aCJK',
    'format' => [297, 210],
    'dpi' => 200,
    'tempDir' => '/tmp/',
    'margin_left' => 0,
    'margin_right' => 0,
    'margin_top' => 0,
    'margin_bottom' => 0,
    'orientation' => 'P',
    'fontDir' => [
        '/path/to/fontDir/,
    ],
    'fontdata' => [
        'ipag' => [
            'R' => 'ipag.ttf',
        ],
        'ipagp' => [
            'R' => 'ipagp.ttf',
        ],
    ],
];
A4縦でDPIは200、フォントにIPAゴシックとIPAゴシックプロポーショナルを指定し、fontdataの配下のipagとipagpというキーはcssのfont-familyで指定することができます。

設定情報をmPDFのインスタンスに渡してWriteHTMLメソッドを呼び出してからOutputメソッドを呼び出すとPDFを標準出力に出力します。
Symfony4で標準出力の結果をクライアントに送信する場合はStreamedResponseクラスを使用することになります。
$mpdf = new \Mpdf\Mpdf($config);
$mpdf->SetDefaultFont('ipagp');
$mpdf->WriteHTML($html);
$mpdf->Output();

最後に

htmlで帳票を作成するに際に、位置がずれると問題になる帳票を作成した際に調査した結果です。

Google chromeでの2種類のスクリプトテスト

株式会社イメージ・マジックの技術ブログ、今週の担当のsoenoです。


今日は4月の初めの日です。

新学期かつ新元号の発表の日となります。

11時半が発表だそうです。

そんな節目のテックブログ何となく大事に思えるのですが、大丈夫でしょうか?

元号はともかく、今日の担当も実はエイプリルフールだったりしないかなと思いつつ始めます。

ブラウザでのスクリプトを動かすとき

あまり使わない関数の書き方に迷ったとき、

そういう時はコマンドラインでスクリプトを動かすとテストできます。

コンソールからスクリプトの実行

手順は以下の通り

  1. chromeブラウザでF12キーを押して DevToolsを立ち上げ
  2. メニューバーのConsoleを選択
  3. アクティブになっているテキストエリアにスクリプトを入力してEnter
https://www.google.com/で試す場合

  • まずhttps://www.google.com/に移動して
  • コンソールに以下のスクリプトを入れてEnter!
document.forms.f.q.value = "新元号";
document.forms.f.submit();
新元号についての検索結果がでます。

スニペットからスクリプトの実行

手順は以下の通り

  1. DevToolsのメニューバーのSoursesを選択
  2. 左のメニューのSnippetsを選択(なければ横の矢印を押して出てくるlistから選択)
  3. New Snippedの左の+ボタンを押して新規のSnippetを作成
  4. 空白のエリアに実行したいスクリプトを入力
  5. Ctrl と Enterを同時に押すか、右下の再生ボタンをクリック。
https://www.google.com/で試す場合

  • まずhttps://www.google.com/に移動して
  • 上の手順でSnipedの入力画面まで進み、
  • 以下のスクリプトを入力しCtrl + Enter!
var searchForm =document.forms.f;
searchForm.q.value = "新元号";
searchForm.submit();

注意点

jQueryなどのプラグインの動作を試したいといった場合は対象のプラグインが読み込まれている必要があります。

※例のgoogleページへのスクリプトは内部の変数などかわってたら来ません。

終わり

最後の平成に間に合わせようと駆け足になりましたが、以上です。

新しい元号の新しい時代が良いときとなりますよう…。

Seleniumテスト環境設定時の注意点

はじめに

株式会社イメージ・マジックの技術ブログ、今週の担当のsoenoです。

二週間以上前に買うと決めたものを未だに買えていません。
日常生活においてはどうでもいいことこそ、タスク管理が重要なのかもしれません。

さて、今回はSeleniumのテスト環境の設定時に気を付けることを書こうと思います。


Seleniumとは。

webアプリケーション向けのテスト実行ツールです。
GUIを通した操作を自動で行わせることができます。

名前にまつわる注意点

Selenium~といった名前が結構いろいろ出てきます。
細かく書いていくとかえってやこしくなるので実例は省略します。

調べた結果が何かおかしいといったときは手元のSelenium~と参照している資料のSeleniumが同じものかを確認するといいかもしれません。(バージョンなど)

selenium builder

「GUIから操作してテストを書き出せる。」というものだったらしいのですが、
今はもうないです。

同様の機能を提供するSelenium IDEというプラグインもありますが
2019年1月の時点でスクリプトの書き出し機能はいません。

Selenium IDE は書き出しはできないとはいえ、自動化時にどのように動くかや、
web Driverで使用するターゲット名の確認ができる点で有用だとおもいます。
記録と再生のみならばこれだけでも十分かもしれません。

PhantomJS

非表示で実行されるブラウザ、非表示軽量のため本などでseleniumとセットで使われているのですがこちらもメンテナンス終了とのこと。
https://groups.google.com/forum/m/#!topic/phantomjs/9aI5d-LDuNE

Headless Chromeに切り替えるか、Headless FireFoxにするか、
もしくはメンテナンス終了ということを考慮しつつphantomjsを使うか等の判断がいります。

その他

環境設定時にプラグイン間のバージョンが整う必要があります。
バージョンがおかしいというエラーが出たら解消します。

久しぶりに触ると忘れていたりするのがヘッドレスブラウザの起動
テストの前にwebDriverTypeとして指定したブラウザを起動します。

最後に

GUIのテストは日々更新されるブラウザを対象とします。
環境にもまだまだ変化がありそうです。
その時に今回は待ったことで再びはまらないように気を付けたいと思います。