請求書アプリを作りながら、AppSheetの使い方を学びましょう。
前回（第5回）はViewを設定してアプリの見た目を整えました。ここまでで請求書データを作成する準備ができました。
次回（第7回）では、請求書をPDFで発行する機能をAppSheet Automationで設定します。
その前に、今回は請求書のひな形をGoogleドキュメントで作成します。
通常のアプリ開発において、帳票作成はちょっと面倒な実装になりがちです。
AppSheetならGoogle Docs（Google ドキュメント）に「タグ」を書くだけで取引先、金額、品目明細を請求書に差し込みができます。「AppSheet、すげえ」というテクニックのひとつなので、是非やってみてください！
目次
1. Googleドキュメントで請求書のひな形を作成する
それでは、請求書のひな形を作成していきましょう。
サンプルとしてWordのデータを用意しました。
まずは、下のWordアイコンをクリックして、データをダウンロードしてください。
Googleアカウントにログインして、GoogleドライブにWordのデータをアップロードしましょう。
Googleドライブ上でWordデータを開いた後、Googleドキュメントに変換して保存しておきます。
Googleドキュメントに変換して保存しました。
2. AppSheetはタグで差し込みができる
請求書は、「請求書」テーブルから作成します。
取引先情報は「請求書」テーブルにある「取引先ID」から「取引先」テーブルを参照して、列の値を取得します。
また、品目明細は「請求書」テーブルにある「Related 品目s」から「品目」テーブルを参照して、品目をリストで取得します。
では、先ほどGoogleドキュメントに変換した請求書のひな形をダブルクリックで開いてみてください。
AppSheetでGoogleドキュメントに列の値を差し込む時に使用されるのが「タグ」です。
AppSheetで使用するタグは以下のように、<<>>内に[列名]を記載します。
<< [ 列名 ] >>
例えば、請求書の発行日と請求書番号は以下のように書きます。
- <<[発行日]>>
- <<[請求書番号]>>
ひな形では以下のような感じになっています。
この要領で「請求書」テーブルの列の値（上の図の赤枠の箇所です）をタグで書いていきましょう。
請求金額は「合計」（Virtual Column）を差し込むので、
- <<[合計]>>
で大丈夫です。ひな形では以下のようになっています。
「小計」「消費税」「合計」は、Virtual Columnを使って以下のようにします。
- <<[小計]>>
- <<[消費税額]>>
- <<[合計]>>
「消費税」の列名は「消費税額」ですので注意してください。
ひな形では以下のようになっています。
「お支払期限」と「備考」は以下の通りです。
- <<[お支払期限]>>
- <<[備考]>>
ひな形では以下のようになっています。
3. 参照テーブルの値はリレーションシップを利用する
取引先情報は「請求書」テーブルから直接取得できません。
なので、AppSheetで設定したリレーションシップを利用して値を引っ張ってきます。
「取引先ID」列から「取引先」テーブルを参照して、必要な列の値を取得します（上の図の緑枠の箇所です）。
参照テーブルから値を取得するタグの書き方は以下のようになります。
<< [ Ref を設定した列名].[参照テーブル内の列名 ] >>
「取引先」テーブル内にある「取引先」「部署」「担当者」の値は以下のようにタグを書きます。
- [取引先ID].[取引先]
- [取引先ID].[部署]
- [取引先ID].[担当者]
ひな形では以下のようになっています。
4. AppSheetではStartタグとEndタグでループ処理ができる
品目明細は「請求書」テーブルにある「Related 品目s」列から品目リストを取得できます。
「Related 品目s」列は、「品目」テーブルの「請求書ID」列にRef型を設定した時に自動的に作成された列です。
請求書の「ID」と同じ「請求書ID」の値を持っている品目レコード（行）をリストで返します。
取得した品目リストを品目明細の表組にするために、PHPやJavaScriptでいうところの「for文」のようなループ処理ができる構文があると便利です。
AppSheetでは、StartタグとEndタグを設定することで実現できます。
AppSheetでは以下のような構文になります。
<< Start: [ Related テーブル名s ]>>
<<[列名]>><<[列名]>><<[列名]>>...
<<End>>
請求書アプリでは品目明細のタグを以下のように設定しました。
「品名」にStartタグ、「金額（税込）」にEndタグを含めて、「単価（税込）」と「数量」を囲みます。
- <<Start: [Related 品目s]>><<[品目マスタID].[品目]>>
- <<[単価]>>
- <<[数量]>><<[単位]>>
- <<[税込金額]>><<End>>
実際のひな形はこのような感じです。
PHPやJavaScriptなら「for文」でコードを書く必要がありますが、AppSheetならタグを配置するだけで完成です。
普通でしたら、ループ処理を含む帳票作成は非常に手間のかかる実装です。
AppSheetならノーコードで、<<Start>><<End>>で囲むだけなので分かりやすいですね！
さらに、AppSheetとGoogle Workplaceが統合されている強みもあります。
今回のその強みを活かして、Googleドキュメントでひな形を用意し、タグを使ってAppSheetからデータを引っ張ってくる方法をやってみました。
以上、請求書のひな形をGoogleドキュメントで作成しました。
次回（第7回）は、AppSheet Automationで今回作成したひな形を使って請求書のPDFを発行します。
Goolgeドキュメントのひな形はAppSheet Automationでメールを送信する際にも使えます。
応用が利くテクニックなので、この機会に使えるようにしておきましょう。
