請求書アプリを作りながら、 AppSheet (アップシート)の使い方を学びましょう。
前回(第5回)は、アプリのビュー(画面)を設定しました。
請求書データを作成する準備ができたので、あとは、請求書をPDFで発行するだけです。
今回は、AutomationでPDFを作成する際に必要なテンプレートをGoogleドキュメントで作成します。
本ブログ記事及びサンプルデータの著作権は、当社に帰属します。AppSheetを学習する目的での個人使用を除き、無断での複製、転載、改変、翻案、公衆送信等の利用を禁止します。詳細は、ウェブサイト利用規約をご確認ください。
目次
1. Googleドキュメントで請求書のテンプレートを作成する
それでは、請求書のテンプレートを作成していきましょう。
サンプルとしてWordのデータを用意しました。
まずは、下のWordアイコンをクリックして、データをダウンロードしてください。
Googleアカウントにログインして、GoogleドライブにWordのデータをアップロードしましょう。
WordデータをGoogleドキュメントに変換します。
今アップロードしたWordデータを開きます。
「ファイル」メニューをクリックして、「Googleドキュメントとして保存」をクリックします。
WordをGoogleドキュメントに変換して保存しました。
2. AppSheet はタグで差し込みができる
請求書は、「請求書」テーブルから作成します。
請求書に差し込みするデータは、
- 「請求書」テーブル(赤枠):「請求日」や「件名」などは「請求書」テーブルの値をそのまま差し込みます。
- 「取引先」テーブル(緑枠):「取引先」列(Ref)から「取引先」テーブルを参照します。
- 「明細」テーブル(黄枠):「Related 明細s」から「明細」テーブルを参照します。
先ほど、Googleドキュメントに変換した請求書テンプレートを開きます。
AppSheetでGoogleドキュメントに列の値を差し込む時に使用されるのがタグ <<>> です。
タグは、以下のように <<>> 内に [列名] を記載して使用します。
<< [ 列名 ] >>
例えば、請求書の請求日は以下のように書きます。
- <<[請求日]>>
テンプレートでは以下のような感じになっています。
この要領で「請求書」テーブルの列の値(上の図の赤枠の箇所です)をタグで書いていきましょう。
件名は「件名」を、請求金額は「合計」(Virtual Column)を差し込むので、
- <<[件名]>>
- <<[合計]>>
で大丈夫です。テンプレートでは以下のようになっています。
「小計」「消費税」「合計」は、Virtual Columnを使って以下のようにします。
- <<[小計]>>
- <<[消費税額]>>
- <<[合計]>>
テンプレートでは以下のようになっています。
「支払期日」と「備考」は以下の通りです。
- <<[支払期日]>>
- <<[備考]>>
テンプレートでは以下のようになっています。
3. 参照テーブルの値はリレーションシップを利用する
「取引先名」は「取引先」テーブルにあるので、「請求書」テーブルから直接取得できません。
このような場合は、「Ref」で設定したリレーションシップを利用して値を引っ張ってきます。
「取引先」列(Ref)から「取引先」テーブル(Source table)を参照して「取引先名」列の値を取得します(上の図の緑枠の箇所です)。
参照先テーブルから値を取得するタグの書き方は以下のようになります。
<< [ Ref を設定した列名].[参照先テーブル内の列名 ] >>
「取引先」テーブル内にある「取引先名」の値は以下のようにタグを書きます。
- [取引先].[取引先名]
テンプレートでは以下のようになっています。
4. StartタグとEndタグで明細行を表組にする
明細行は「請求書」テーブルにある「Related 明細s」列からリストで取得できます。
「Related 明細s」列は、「明細」テーブルの「請求書」列に「Ref」を設定した時に自動的に作成された列です。
「Related 明細s」から「明細」テーブルを参照して、明細行をリストで取得できます。
取得した明細行リストを表組にしたいので、PHPやJavaScriptの「for文」のような構文があると便利です。
AppSheetでは、StartタグとEndタグを設定することで実現できます。
<< Start: [ Related テーブル名s ]>>
<<[列名]>><<[列名]>><<[列名]>>...
<<End>>
請求書アプリでは明細のタグを以下のように設定しました。
表組の商品名欄にStartタグ、金額欄にEndタグを含めて、「単価」と「単位」「数量」を囲みます。
- <<Start: [Related 明細s]>><<[商品].[商品名]>>
- <<[単価]>>
- <<[数量]>><<[単位]>>
- <<[金額]>><<End>>
実際のテンプレートはこのような感じです。
以上、請求書のテンプレートをGoogleドキュメントで作成しました。
次回(第7回)は、今回作成したテンプレートを使って、Automationで請求書をPDFで発行します。
- 第1回 Automationで請求書を作成しよう
- 第2回 スプレッドシートからアプリを作成する
- 第3回 Refでリレーションシップを設定する
- 第4回 SELECT関数とSUM関数で合計を計算する
- 第5回 アプリの画面(ビュー)を設定する
- 第6回 Googleドキュメントで請求書のテンプレートを作成する
- 第7回 Automationで請求書をPDFで発行する