「せん茶請求書」に限らず、帳票のデザインというのは帳票を作成するにあたって、重要な要素となります。中には、自分で独自にデザインをしたいという方もおられるでしょう。今回は簡単にですが、帳票のデザインの変更方法についてご説明いたします。
今回、ご説明するのは2つ
Step :1.帳票出力クラスのディレクトリ構造
Step :2.帳票の色を変えたい場合
Step :1.帳票出力クラスのディレクトリ構造
「せん茶請求書」では、帳票をPDFとして出力しています。PDFを独自にデザインするためには、PDFのデザインをしているクラスのプログラムを変更する必要があります。
その場所についてご説明します。
|- app
| |- webroot
| |- views
| |- vendors
| | |- shells
| | `- pdf
| | |- font
| | |- tutorial
| | |- billpdf.php(請求書PDF)
| | |- deliverypdf.php(納品書書PDF)
| | |- excn.php
| | |- exja.php
| | |- fpdf.css
| | |- fpdf.php
| | |- mbfpdf.php
| | |- quote.php(見積書PDF)
| | `- receiptpdf.php(領収書PDF)
| |- tmp
| |- tests
| |- plugins
| |- models
| |- locale
| |- libs
| |- controllers
| |- config
| |- app_model.php
| |- app_controller.php
| `- index.php
|
|- cake
|- vendors
|- plugins
|- LICENCE
|- README
`- index.php
それぞれ、
billpdf.php(請求書PDF)
deliverypdf.php(納品書書PDF)
quote.php(見積書PDF)
receiptpdf.php(領収書PDF)
のようになっています。帳票のデザインを変更する場合には、自分が変更したい帳票のファイルを変更していくことになります。
「せん茶請求書」では、FPDF・MBFPDFといった、オープンソースのライブラリを使用しPDFを作成しています。
Step :2.帳票の色を変えたい場合
1.色の追加と変更
帳票の色というのは、独自性を出すための大事な要素です。「せん茶請求書」では、黒、青、赤の三種類の色を選択できるようになっています。ですが、さらなる独自性を求めて、他の色を使いたいという方おられるでしょう。その方のために色の追加・変更方法をご説明します。
色を変更するためには、色を設定しているファイルを変更する必要があります。そのファイルは
app/config/constants.php
というファイルです。このファイルは「せん茶請求書」で使用される色々な定義が記述されています。
エディター等でファイルを開き、99行目~107行目の
//帳票カラー設定
Configure::write(‘ColorCode’,array(
0 => array( ‘name’ => ‘黒’,
‘code’ => array(‘r’=>’00’,’g’=>’00’,’b’=>’00’,)),
1 => array( ‘name’ => ‘青’,
‘code’ => array(‘r’=>’00’,’g’=>’00’,’b’=>’FF’,)),
2 => array( ‘name’ => ‘赤’,
‘code’ => array(‘r’=>’FF’,’g’=>’00’,’b’=>’00’,)),
));
と記述されている箇所を探します。
ここが帳票のカラーを指定している箇所となります。
ご覧のとおり、色はRGBによって指定されています。
例えば、青をもうちょっと薄くしたいという場合は、
1 => array( ‘name’ => ‘青’,
‘code’ => array(‘r’=>’00‘,’g’=>’00‘,’b’=>’FF‘,)),
という箇所を
1 => array( ‘name’ => ‘青’,
‘code’ => array(‘r’=>’A0‘,’g’=>’A0‘,’b’=>’FF‘,)),
というようにr,g,bの値を変更すれば変更完了です。
同じように色を追加したい場合には、
Configure::write(‘ColorCode’,array(
0 => array( ‘name’ => ‘黒’,
‘code’ => array(‘r’=>’00’,’g’=>’00’,’b’=>’00’,)),
1 => array( ‘name’ => ‘青’,
‘code’ => array(‘r’=>’00’,’g’=>’00’,’b’=>’FF’,)),
2 => array( ‘name’ => ‘赤’,
‘code’ => array(‘r’=>’FF’,’g’=>’00’,’b’=>’00’,)),
3 => array( ‘name’ => ‘黄’,
‘code’ => array(‘r’=>’FF’,’g’=>’00’,’b’=>’00’,)),
));
というように
3 => array( ‘name’ => ‘黄’,
‘code’ => array(‘r’=>’FF’,’g’=>’00’,’b’=>’00’,)),
を追加してあげれば追加完了です
*ファイルを変更し終えた後は上書き保存することを忘れないでください。
2.実際に色を変更
色の追加は終わりましたが、このままでは帳票の色は変更しません。変更するためには、色を指定する必要があります。
変更は、WEB上の自社設定でできます。
自社基本情報の中に、「枠色」という項目があります。
項目を押下すると 黒、青、赤 という項目、それに追加した項目があるはずです。
その追加した項目を選択すれば、帳票をその色へと変更することができます!
*項目が現れない場合には、更新を押下してみてください。
本日は、帳票のデザインについてご説明いたしました。
わからない方法等があればコメント等をしてもらえれば幸いです。
デザインは、個性を出すための大事な要素です。ぜひお試しください!
ピンバック: 帳票出力の簡単なカスタマイズについて | 開発者ブログ