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