開発者ブログ

今回は出力される帳票の簡単なデザインカスタマイズ方法についてご説明します。

今回操作するファイルは以下です。

billpdf.php(請求書PDF)
deliverypdf.php(納品書書PDF)
quote.php(見積書PDF)
PDFのファイル配置についてはこちらを参照ください

各PDF出力用プログラムはMBFPDFを継承した拡張クラスで構成されています。
せん茶請求書では基本的に１つの項目を表示するために４つの関数を使用します。

SetY(数字)
Y軸方向からの位置を指定します。

SetFont(フォント, スタイル, サイズ)
使用する字体を指定します。

フォント：
　　使用するフォントを指定します。日本語を使用する場合は事前にAddMBFont(フォント ,文字コード)を宣言しておかなければなりません。
スタイル：
　　フォントのスタイルを指定します。　(空文字: 標準　B: 太字I: 斜体　U: 下線)
サイズ：
　　フォントのサイズを指定します。

conv(文字列)
日本語の文字化けを防止します。

Cell(幅、高さ、文字列、境界線、改行、配置)
描画方法の指定を行います。

幅：
　　セルの幅を指定します。
高さ：
　　セルの高さを指定します。
文字列：
　　表示する文字列を指定します。
境界線：
　　セルのボーダーを指定します。(0:境界線なし 1:境界線あり L:左に境界線を引く T:上に境界線を引く R:右に境界線を引く B:下に境界線を引く)
改行：
　　次にCellをした際のこのCellからの基準値を指定します。(0:右 1:次の行 2:下)
配置：
文字列の配置を指定します。(L:左寄せ C:中央 R:右寄せ)

それでは実際にどうなっているか確認してみます。

ソースコードは以下のようになっています。

//名目
$this->SetY(32);
$this->SetFont(GOTHIC,”,12);
$str = $_param[‘Quote’][‘SUBJECT’];
$str = $this->conv($str);
$this->Cell( 100, 4.5, $str, ‘B’, 1, ‘L’);

今回は赤い枠で囲まれた部分のデザインを変更してみます。

//名目
$this->SetY(30);// すこし上にずらす
$this->SetFont(GOTHIC,”,20);// フォントサイズを大きくする
$str = $_param[‘Quote’][‘SUBJECT’];
$str = $this->conv($str);
$this->Cell( 100, 9, $str, 1, 1, ‘R‘);// 高さを大きくして、境界線をありにして右寄せにする

いかかでしょうか？

このように４つの関数を変更するだけでもデザインを大きく変更することができます。

ぜひ自分好みのデザインの帳票を作成してみてください。

もっと変更したいけどよくわからない、という方は、こちらの記事にメッセージを残していただくか、メールにてご質問ください。

今回は入力チェックについてご説明します。

せん茶請求書の入力チェックは、2種類に分かれています。
　case:1.　モデル内で定義した入力チェック
　case:2.　モデルを使わない入力チェック

なぜ2つ分かれているのかは後ほどご説明します。
まずは上記「case:1」の場所からご説明したいと思います。

case:1.　モデル内で定義した入力チェック

step1.実際の設定
せん茶請求書の大半のフォームの入力チェックがこの項目に含まれています。
設定している場所は
app/modelsにある、多くのphpファイルの中です。
例えば、bill.phpならば、請求書作成時の入力チェックが、company.phpならば、自社設定時の入力チェックとなっています。
それでは、実際の作業を交えながらご説明します。

bill.phpを開くと、上の方（せん茶1.1.1では21行目）に
var $validate
という変数が見つかります。
変数の中には
‘SUBJECT’ => array(
　　　　　　”rule0″ => array(‘rule’ => array(‘spaceOnly’),
　　　　　　　　　　　　　　　　　’message’ => ‘スペース以外も入力してください’
　　　　　　),
　　　　　　”rule1″ => array(‘rule’ => ‘notEmpty’,
　　　　　　　　　　　　　　　　　’message’ => ‘件名は必須項目です’
　　　　　　),
　　　　　　”rule2″ => array(‘rule’ => array(‘maxLengthJP’, 20),
　　　　　　　　　　　　　　　　　’message’ => ‘件名が長すぎます’
　　　　　　),
),
のような、項目が中に入っています。これが入力チェックを設定している箇所となっています。

上記SUBJECTというのが、せん茶請求書の請求書作成時における、「件名」となっています。
rule0の中には(‘rule’ => array(‘spaceOnly’)と設定されています。
この項目は件名にスペースだけが入力された時にエラーにする、という設定です。
‘message’ => ‘スペース以外も入力してください’　ではエラー発生時のメッセージを設定できます。

同様に、notEmptyは何も入力されなかったとき、maxlengthJPは入力文字の最長を決める役割をしています。

step2.独自の入力チェック

上記で説明したルールの他にも多くの入力チェックがあります。
その中の入力チェックは2種類に分けられます。
　1.cakephpで最初から設定されている入力チェック
　2.せん茶請求書の独自の入力チェック

1については、cakephpについてお調べください。
2について、場所をご説明します。
app/plugins/cakeplus/models/behaviors/add_validation_rule.php
です。
このプラグインはオープンソースのプラグインを使用しています。
この中に多くの設定が含まれています。
また、独自の入力チェックを作成したい時も、ここに書きこむことによって、step1での設定が可能となります。
詳しくは、add_validation_rule.phpにて説明されているので、そちらを御覧ください。

case:2.　モデルを使わない入力チェック
複数の項目にまたがっての入力をチェックをしなければいけない場合など、cakephpの入力チェックでは実装することが困難だったため、cakephpの入力チェックを使用していない部分があります。
帳票ページの項目欄、自社設定などの電話番号やFAX番号などが、この項目に含まれています。
その設定場所は
app/app_controller.php
となっています。
31行目にfunction item_validation($_param,$_field)という関数があります。
この関数は帳票の項目欄での入力チェックとなっています。
この関数をapp/controllersのそれぞれのコントローラーで使用することにより、入力チェックを実装しています。

変更したいけどcakephpがわからない、という方は、こちらの記事にメッセージを残していただくか、メールにてご質問ください。

「せん茶請求書」に限らず、帳票のデザインというのは帳票を作成するにあたって、重要な要素となります。中には、自分で独自にデザインをしたいという方もおられるでしょう。今回は簡単にですが、帳票のデザインの変更方法についてご説明いたします。

今回、ご説明するのは２つ
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上の自社設定でできます。
自社基本情報の中に、「枠色」という項目があります。
項目を押下すると　黒、青、赤　という項目、それに追加した項目があるはずです。
その追加した項目を選択すれば、帳票をその色へと変更することができます!

＊項目が現れない場合には、更新を押下してみてください。

本日は、帳票のデザインについてご説明いたしました。
わからない方法等があればコメント等をしてもらえれば幸いです。
デザインは、個性を出すための大事な要素です。ぜひお試しください！

「せん茶請求書」では、帳票に自動押印する機能がありますが、機能を活用するにはまず、社判の画像を用意する必要があります。そこで、今回は社判をスキャンし、画像データにする方法について説明します。ここで説明する方法は、「自社担当者設定」の担当者印の登録の際にも応用できますので、一度試してみてください。

今回説明する方法ではWindowsにある機能を利用しますので、特にそれ以外の画像加工ツールなどは必要ありません。

※「せん茶請求書」の社判登録で画像を登録する時に、自動的に透過処理（背景抜き）とリサイズ処理がされます。

Step.1　：社判のスキャンを行う

まずは、A4の白紙に社判を押印し、それを会社・ご自宅にあるスキャナーや複合機でスキャンします。（データの保存形式は「Jpeg」を推奨しますが、bmp（ビットマップ）形式でしか保存できない場合は、下の方法でJpegに変換することができます。）スキャンする画像はそのまま利用しますので、押印する際は、かすれたり、見切れたりしないように注意してください。

 

 

 

 

 

 

 

 

 

【bmp（ビットマップ）から、Jpegへ変換する方法】

スキャンしたデータを「Paint」で開き、メニューより「名前をつけて保存」を選び、保存形式を「Jpeg」を選択して保存すれば、ｂｍｐからJpegに変換することができます。

 

Step.2　：スキャンしたデータのトリミングを行う

次に、必要なのは社判の画像ですので、不必要な余白部分は全てトリミングして、除きます。トリミングの方法については、以下の1～6の手順に沿って行えます。

1.スキャンした判子の画像データをWindows純正画像編集ソフト「Paint」で開きます。

 

 

 

 

 

 

 

 

2.　右メニューより「選択」ツールをクリックし、抽出する箇所を点線で選択し、図のように範囲を指定します。

 

 

 

 

 

 

 

 

 

3.選択範囲を指定したまま、右メニューで「コピー」をクリックします。

 

 

 

 

 

 

 

 

 

4.コピーをした後、メニューの「ファイル」より「新規」を選択し、新規ウィンドウを開きます。

 

 

 

 

 

 

 

 

 

5.新規ウィンドウを開いて、「編集」の「貼り付け」をクリックすると、先ほど範囲を指定し、コピーした画像が表示されます。これで余計な部分を切り取り、必要な画像のみにすることができました。

 

 

 

 

 

 

 

 

 

6.最後は、メニューの「ファイル」より「名前をつけて保存」をクリックし、画像データを保存します。保存形式は「JPEG」を選択してください（社判登録はPNG形式でも利用可能です）。あとは、お好きなファイル名を設定し、「保存」ボタンをクリックし、完了です。

 

 

 

 

 

 

 

 

以上を行っていただいたうえで、「自社設定」で、社判を登録いただくことができます。

これから、開発者ブログで「せん茶請求書」をご活用いただくうえで必要な情報や、使い方などをご紹介しますので、ぜひチェックしてみてください！

おかげさまで、４月１２日よりソースを一般公開いたしました。

せん茶請求書を是非よろしくお願いします。

まず本日は、インストールの際のパーミッション設定について記載します。

|– app(755)
| 　　|– webroot(755)
| 　　|– views(755)
| 　　|– vendors(755)
| 　　|– tmp(777)
| 　　| 　　 　`– cache(777)
| 　　| 　　　 　　 　|– models(777)
| 　　| 　　　　　　　`– persistent(777)
| 　　|– tests(755)
| 　　|– plugins(755)
| 　　|– models(755)
| 　　|– locale(755)
| 　　|– libs(755)
| 　　|– controllers(755)
| 　　|– config(777)
| 　　|– app_model.php(644)
| 　　|– app_controller.php(644)
| 　　`– index.php(644)
|
|– cake(755)
|– vendors(755)
|– plugins(755)
|– LICENCE(644)
|– README(644)
`– index.php(644)

/app/config・/app/tmpの書き込み権限の付与に気をつけてください。
インストール完了後は/app/configは755に変更してください。
※tmp以下のパーミッションについて、細かく権限を分けるように修正しました

何かこういう機能があればよりもっと使いやすくなるなど御座いましたら、お気軽にご報告頂ければと思います。