AFormsPdf拡張で自動発行のPDF見積書をサクッと作る

AFormsの拡張ソフト「AFormsPdf」を使うと、AFormsのフォームでお客様が作った見積をPDF形式で自動発行できます。
この記事では、AFormsPdf付属のサンプルをカスタマイズして、PDF見積書をサクッと作る方法を説明します。

AFormsPdfの仕組み

AFormsPdfでは、サイトの運営者は「PDFテンプレート」を作ります。
このPDFテンプレートにはPDF見積書のレイアウトや記載内容が記録されています。
さらに、お客様がPDFファイルをダウンロードするタイミングも記録されています。

PDFテンプレートを作ったら、それをフォームに適用すれば、そのフォームからPDFファイルを自動発行できるようになります。

ステップ1. 好みのサンプルを選ぶ

AFormsPdfの日本語パックをインストールすると、サンプルのPDFテンプレートが5つ登録されます。
まずは、この5つのサンプルから好みのものを選びましょう。

「PDFテンプレート一覧」画面で、各PDFテンプレートの「プレビュー」をクリックすると、PDFファイルをプレビューできます。
（プレビューは自動生成されたデータで補完されているので、まるで本物の見積書のように表示されます。）

PDFテンプレートを選ぶ基準ですが、表示項目が理想の見積書と同じかどうかで選ぶと、この後の流れが簡単になります。
表示項目というのは、顧客の住所とか、見積の有効期限とか、見積明細のカテゴリーのことです。たとえば見積書に顧客の住所を記載するかどうかで、見積書のレイアウトは意外と変わってしまうものですので。

好みのサンプルを選んだら、まずそのサンプルを複製しましょう。
オリジナルのサンプルを編集するのではなく、複製した方を編集すれば失敗も怖くありません。
PDFテンプレートの複製は、「PDFテンプレート一覧」画面で、各PDFテンプレートの「複製」をクリックすればできます。

ステップ2. 見積書の設定をカスタマイズする

編集対象となるPDFテンプレートができたら、タイトルをクリックして編集画面を開いてください。
編集画面にはタブが2つあります。まずは「概要」タブから編集していきます。

ここでは大抵の場合、「タイトル」、「動作モード」と「フォント」をカスタマイズすればOKです。

タイトルは、お客様には表示されませんので、自分がわかりやすい名前を付けてください。
たとえば「〇〇のフォームの見積書」などと付ければ良いでしょう。

動作モードは、お客様がフォームを操作していく中、どのタイミングで見積書を提示するかです。次の選択肢があります。

フォントは、ゴシック体がいい場合は「IPA Pゴシック」、明朝体がいい場合は「IPA P明朝」を選ぶと良いです。
なお、 「小塚ゴシック」と「小塚明朝」では、フォント情報がPDFファイルに記録されないので、ファイルの閲覧環境によって字面に差異が出ますので注意してください。

動作モードとフォントを設定したら、画面左下の「変更を確定」ボタンを押して変更内容を確定しましょう。
何か設定を変更したら、その度に保存してプレビューで確認すると良いです。

ステップ3. 見積書の記載内容をカスタマイズする

次に「差込」タブを選んでください。ここでは、見積書の記載内容をカスタマイズしていきます。
画面の構成はAFormsのフォームビルダーと同じです。左側に部品の一覧があって、右側には部品の設定フォームがあります。

サンプルの見積書はそれなりによく出来ていますので、この記事では運営者向けにカスタマイズすべき部分のみを見ていきます。

ロゴや印影を変える

見積書には発行者の名前や住所が記載されますが、その中にはロゴや印影といった画像があります。
サンプルでは、ビビッドカラーズ（当プラグインの開発元）のロゴや印影っぽいけど明らかに印影ではない画像になっていますので、これを御社のものに変えてしまいましょう。
もしそういった画像が不要であれば、部品を削除してしまって構いません。

サンプルでは、ロゴは「vividcolors_logo.jpg」などと表記されている部品です。
印影は「imprint.gif」などと表記されています。

※画像を透過させたい場合（特に印影の場合ですね）は、GIF画像を使うようにしてください。PNG画像は当プラグインでは使えません。

社名や住所を変える

画像と同じように発行者の名前や住所も変更しましょう。

サンプルでは、「ビビッドカラーズ株式会社」などと表記されている部品が変更対象です。

同じやり方で、 見積条件や注意書きなども変えられます。

宛名の差込を変える

次に見積書の宛名を変更します。
見積書の宛名はお客様の名前ですので、これはフォームで入力されたデータを差し込む必要があります。
AFormsPdfでは、フォームで入力されたデータの差込は{{@"..."}}の形式で行います。

サンプルに、「{{@”お名前”}}　御中」などと表記されている部品があるはずです。
その項目を選択すると、「内容」という記入欄に「{{@”お名前”}}」と記載されています。
これは、フォームの「お名前」という項目（お客様属性）に入力された文字をここに差し込む、という意味です。
もし、項目の名前が「お名前」でなくて「姓名（漢字）」だったら差込の指定も「{{@”姓名（漢字）”}}」になります。

この指定箇所を、適用先のフォームの項目の名前に応じて変えてください。
差込の変更はこれでOKです。

同じやり方で、お客様の住所や電話番号を差し込むこともできます。

ステップ4. 保存する

以上で、PDFテンプレートのカスタマイズは完了です。
最後に、「保存」ボタンで確実に保存して、思い通りに出来ているかプレビューで確認しましょう。

ステップ5. フォームに適用する

最後に、作ったPDFテンプレートがフォームと連携するようにします。

AFormsPdfの設定から出て、AFormsのフォーム一覧に移動します。
PDFテンプレートと連携させたいフォームのフォームビルダー（編集画面）を開くと、「拡張」という新しいタブがあります。
これを選択してください。

そうすると、「利用可能な拡張」の中に、今作ったPDFテンプレートがありますので、これにチェックを入れて（変更を確定してから）保存してください。

これで、PDFテンプレートがフォームに適用され、連携するようになりました。
管理画面を出てフォームのページを開き、すべて思い通りに動くか確認しましょう。

補足：発行された見積書を運営者が見るには？

PDF拡張のv2.1.0から、発行された見積書を運営者も見られるようになりました。

管理画面で見たい場合は、注文一覧の注文データに「PDF」リンクやボタンが付属していますので、それをクリックすればPDFが開きます。

通知メールで見たい場合は、PDFテンプレートの編集画面の「全般」タブで、通知メールにPDFを添付するかどうかを選べますので、「添付する」を選ぶと通知メールにPDFが添付されるようになります。

上記2通りのどちらも、動作モードが「フォームに「PDFを出力」ボタンを追加する」の場合は使えませんのでご注意ください。

なお、PDF拡張のv2.0.Xでは、見積書を運営者が見るための良い方法はありません。
ですので、v2.0.Xをお使いで運営者が見積書を見たい方は、v2.1.0以降を使うようにしてください。ビビッドカラーズにご連絡いただければ最新版をお渡しします。