AppSheet で請求書アプリ（第6回）請求書テンプレートを作成する

請求書アプリを作りながら、 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）を参照して「取引先名」列の値を取得します（上の図の緑枠の箇所です）。
参照先テーブルから値を取得するタグの書き方は以下のようになります。

「取引先」テーブル内にある「取引先名」の値は以下のようにタグを書きます。

• [取引先].[取引先名]

テンプレートでは以下のようになっています。

4.  StartタグとEndタグで明細行を表組にする

明細行は「請求書」テーブルにある「Related 明細s」列からリストで取得できます。

「Related 明細s」列は、「明細」テーブルの「請求書」列に「Ref」を設定した時に自動的に作成された列です。
「Related 明細s」から「明細」テーブルを参照して、明細行をリストで取得できます。

取得した明細行リストを表組にしたいので、PHPやJavaScriptの「for文」のような構文があると便利です。
AppSheetでは、StartタグとEndタグを設定することで実現できます。

[ Related 明細s ] を含めて、<<[ 列名] >>を<<Start>>と<<End>>で囲みます。

請求書アプリでは明細のタグを以下のように設定しました。
表組の商品名欄にStartタグ、金額欄にEndタグを含めて、「単価」と「単位」「数量」を囲みます。

• <<Start: [Related 明細s]>><<[商品].[商品名]>>
• <<[単価]>>
• <<[数量]>><<[単位]>>
• <<[金額]>><<End>>

実際のテンプレートはこのような感じです。

 

以上、請求書のテンプレートをGoogleドキュメントで作成しました。
次回（第7回）は、今回作成したテンプレートを使って、Automationで請求書をPDFで発行します。