AppSheetで請求書アプリ(第2回)スプレッドシートからアプリ作成

folder_openAppSheet

請求書アプリを作りながら、AppSheetの使い方を学びましょう。
前回(第1回)は請求書アプリの概要について紹介しました。
今回は、実際にアプリを作成してみましょう。
スプレッドシートをGoogleドライブにアップロードして、テーブルと列の設定まで進めます。

1. スプレッドシートを作成する

それではアプリを作成していきましょう。
AppSheetアプリにはエクセルやGoogleスプレッドシートなどのデータが必要です。
このブログでは、請求書アプリのサンプルデータとしてエクセルのデータを用意しました。
まずは、下のエクセルのアイコンをクリックして、データをダウンロードしてください。

Googleアカウントにログインして、Googleドライブにエクセルのデータをアップロードしましょう。

GoogleドライブにエクセルのAppSheetデータをアップロードする。

Googleドライブ上でエクセルデータを開いた後、Googleスプレッドシートに変換して保存しておきます。

エクセルデータをGoogleスプレッドシートに変換する。

Googleスプレッドシートに変換して保存しました。

Googleスプレッドシートに変換して保存した。

2. AppSheetアプリを生成する

AppSheetにログインして、「Make a new app」をクリックします。

AppSheetにログイン後、「Make a new app」をクリックする。

「Start with your own data」をクリックします。

「Start with your own data」をクリックする。

App name(アプリ名)には日本語が入力できないので、とりあえず「Invoice」にします。
Category(カテゴリー)は選択しなくてもよいです。

「Create a new app」を設定する。

Choose your data(ファイルを選択)でさきほど保存したGoogleスプレッドシート(請求書)を選択して「select」をクリックします。

Googleスプレッドシートを選択してAppSheetアプリを生成する。

アプリが生成できました。
画面右のプレビューが表示すると下のようになります。

AppSheetエディタのプレビュー画面にアプリが表示される。

3. 請求書アプリのテーブルを追加する

AppSheetエディタの左側メニューにある「Data」をクリックして、データを確認しましょう。
タブメニュー「Tables」をクリックするとテーブルが表示されます。
テーブルとは、アプリからデータを追加したり、更新したり、削除できるデータの格納庫です。
「請求書」というテーブルをクリックしてみましょう。

AppSheetエディタでテーブルを表示する。

「View Source」をクリックするとアプリに取り込んだスプレッドシートが表示されます。
「請求書」というワークシートがあり、テーブル名になっています。

列を表示する。

ここで、請求書アプリで使用するテーブルを追加しましょう。
他に「取引先」「品目マスタ」「品目」というシートがありますね。この3つのテーブルを追加します。
AppSheetエディタ画面に戻って「Data」→「Tables」でテーブル設定を続けます。

「New Table」の右に「Add a table for "取引先"」「Add a table for "品目マスタ"」「Add a table for "品目"」というボタンがあります。このボタンをクリックしましょう。

AppSheetアプリのデータソースとしてテーブルを追加する。

「取引先」「品目マスタ」「品目」のテーブルができました。
テーブルの設定は特に変更する必要はありません。次に進みましょう。

AppSheetアプリにテーブルを追加した。

4. AppSheetで請求書を作成する

4つのテーブルの列を設定していきます。
はじめに、「請求書」テーブルの列を設定しましょう。
このテーブルがAppSheetで作成する請求書の部分になります。

AppSheetエディタの左側メニューにある「Data」を選択した状態で、タブメニュー「Columns」または、テーブルパネルの「View Columns」をクリックしましょう。
各テーブルの「列(Columns)」が一覧で表示されます。

列を設定する。

列には、アプリから追加した各項目のデータの値(文字、数字、日付、時間など)が保存されます。
アプリから追加したデータは、スプレッドシートでは1行ずつ記録されていきます。
この1行のデータを「レコード」と呼びます。

スプレッドシートのレコードを識別する。

それでは、「請求書」テーブルの列を設定していきましょう。
下の表のように、各列のフィールドを設定してください。

「請求書」テーブルの列設定

NAME TYPE KEY LABEL SHOW? EDITABLE? REQUIRE?
_RowNumber Number
ID Text check check check
取引先ID Ref check check check check
発行日 Date check check check
お支払期限 Date check check check
件名 Text check check check
備考 Long Text check check
最終更新日時 DateTime check check check
請求書番号 Text check check check
請求書ファイル File check check
トリガ Number check check

 

「請求書」テーブルの各列について設定します。

ID

「ID」列については電子名刺アプリで詳しい説明をしていますので、こちらを参照してください。

取引先ID

「取引先ID」列は、「取引先」テーブルの「ID」列の値を保存します。
請求書に取引先を関連付けるリレーションシップが設定され、取引先の名前、担当者、住所、連絡先などが請求書に差し込みされます。

「取引先ID」列はTYPEを「Ref」にしています。
「Ref」は、別テーブルの列の値を参照したり、テーブル間のリレーションシップを設定する列タイプです。

Ref
  • 別テーブルの値を参照して、リスト表示などに使用する
  • テーブル間のリレーションシップを設定する

「取引先ID」の左にあるペン型の編集アイコンをクリックすると、「取引先ID」列の設定パネルが表示されます。

AppSheetの列設定パネルで「取引先ID」を編集する。

Type Details に「Source table」があります。「取引先」を選択して、右上の「Done」をクリックします。

AppSheetの列設定パネル、「Source table」を「取引先」に設定する。

発行日

「発行日」列の設定をします。
請求書を作成する時に、初期値として今日の日付を表示させます。
「発行日」列 の左にあるペン型の編集アイコンをクリックすると、「発行日」列の設定パネルが表示されます。

「発行日」を編集する。

Auto Compute → Initaial Value(初期値)を設定します。
三角フラスコアイコンをクリックします。

Initial Valueを設定する

Expression Assistant が表示されます。以下のように入力して「Save」をクリックします。
TODAYというAppSheet関数は今日の日付を入力する関数です。

AppSheet列設定パネル、Expression AssistantでTODAY関数を設定する。

TODAY()

今日の日付を入力する。

件名

「件名」は初期値で「請求書」を表示したいと思います。
列設定パネルから直接設定してみましょう。
「件名」列の「INITIAL VALUE」のフィールドをクリックします。

AppSheet列設定パネルで、DISPLAY NAMEを設定する。

Expression Assistant が表示されます。
以下のように入力して「Save」をクリックします。

AppSheet列設定パネル、Expression Assistantを設定する。

設定後は「INITIAL VALUE」フィールドに「請求書」と表示されます。

AppSheet列設定パネルのDISPLAY NAME の設定が完成した。

最終更新日時

「最終更新日時」列は、請求書の内容を更新するたびに日時を保存しておきます。
列設定パネルから直接設定してみましょう。
「最終更新日時」列の「FORMULA」のフィールドをクリックします。

「最終更新日時」を設定する。

Expression Assistant から下のように「NOW()」と入力して「Save」をクリックします。
上の画面のように「FORMULA」のフィールドに「NOW()」と表示されます。
NOWというAppSheet関数は現在日時を入力する関数です。

AppSheet列設定パネルのFORMULAを設定する。

NOW()

現在日時を入力する。

請求書番号

「請求書番号」列は、重複がない一意の値を設定したいと思います。
一般的に、請求書番号は「日付-通し番号」のような感じだと思います。
通し番号の設定は少し手間がかかるので、ここでは現在日時を代用しましょう。

「最終更新日時」列と同じように、列設定パネルから直接設定します。
「請求書番号」列の「INITIAL VALUE」フィールドをクリックしてください。

「INITIAL VALUE」を設定する。

Expression Assistant に以下のように入力します。

AppSheet列設定パネル、Expression Assistantに関数を入力する。

「今日の日付」と「今日の時刻」を「-」でつなげて「請求書番号」を作成したいので、CONCATENATEというAppSheet関数を使いましょう。
()の中に、つなげたい文字列や [ 列名 ] をカンマ(, )で区切って列挙するだけで1つの文字列にできます。

CONCATENATE関数 CONCATENATE("文字列1", "文字列2", "文字列3", ・・・)=> 文字列1,2,3,...を連結する。

TEXTというAppSheet関数は、日時の値を任意のフォーマットに変換することができます。
ここでは、今日の日付(TODAY())の値を「yyyymmdd」に、現在の時刻(TIMENOW())の値を「HHMM」に変換します。

例えば、「2021年8月15日の17時25分」なら「20210815-1725」という請求書番号が生成されます。

TEXT関数TEXT("日時", "フォーマット")=> 日時を指定したフォーマットに変換する。

トリガ

「トリガ」列は、第7回で請求書のPDFを発行する際に使用する列です。
詳細は第7回で解説するので、現時点では意味が分からなくても大丈夫です。
「トリガ」列の「INITIAL VALUE」フィールドをクリックして、Expression Assistantから「0」を入力して「Save」してください。

「トリガ」列の「INITIAL VALUE」に0を入力する。

「請求書」テーブルの列設定は以上です。
設定ができたら、画面右上の「SAVE」をクリックして保存してください。

AppSheetには自動的に保存する機能がありません。
設定を変更したら必ず「SAVE」で保存することを忘れずに。

「SAVE」ボタンをクリックして保存する。

5. 請求する取引先を登録する

続けて、「取引先」テーブルの列を設定してきましょう。
このテーブルに請求する取引先を登録していきます。

AppSheetエディタの左側メニューにある「Data」を選択した状態で、タブメニュー「Columns」→ 「取引先」をクリックして、列設定パネルを開きます。
下の表のように、各列のフィールドを設定してください。

「取引先」テーブルの列設定

NAME TYPE KEY LABEL SHOW? EDITABLE? REQUIRE?
_RowNumber Number
ID Text check check check
取引先 Text check check check check
部署 Text check check
担当者 Text check check check
郵便番号 Text check check check
住所 Address check check check
電場番号 Phone check check
メールアドレス Email check check

以上の列に加えて、「Related 請求書s」という Virtual Column(仮想列)が一番下にあるかもしれません。
これは、さきほどの「請求書」テーブル「取引先ID」列で、「Ref」でリレーションシップを設定したことにより、AppSheetが自動的に作成した仮想列です。

AppSheetではテーブル間のリレーションにより、Virtual Column(仮想列)が自動的に追加される。

「Related 請求書s」の列を右にスクロールしてみましょう。
「DESCRIPTION」のフィールドに「請求書 entries that reference this entry in the 取引先ID column」というのがあります。
「取引先」のViewを表示したときに、この長い文字列が表示されてしまうので、これを消去します。
その左隣にある「DISPLAY NAME」のフィールドをクリックして、Expression Assistant から「請求書」を入力しましょう。

AppSheet列設定パネル、DESCRIPTION を消去し、DISPLAY NAME を入力する。

6. 品目マスタを登録する

次に、「品目マスタ」テーブルの列を設定してきましょう。
このテーブルに品目のマスタを登録してきます。

AppSheetエディタの左側メニューにある「Data」を選択した状態で、タブメニュー「Columns」→ 「品目マスタ」をクリックして、列設定パネルを開きます。
下の表のように、各列のフィールドを設定してください。

「品目マスタ」テーブルの列設定

NAME TYPE KEY LABEL SHOW? EDITABLE? REQUIRE?
_RowNumber Number
ID Text check check check
品目 Text check check check check
単価 Price check check check
単位 Text check check check
税区分 Enum check check check

「品目マスタ」テーブルの各列について設定していきます。

税区分

「税区分」列は「10%」や「軽減8%」など、決められた値から選択するようにします。
その場合は、列TYPEを「Enum」にします。

「税区分」列の編集アイコンをクリックして、設定パネルを開きましょう。
Type Details を以下のように設定します。

  • Values:「Add」で「10%」「軽減8%」「対象外」を追加。「%(パーセント)」は全角文字にする。
  • Allow other values:チェックを外す
  • Auto-complete other values:チェックを外す
  • Base type:「Text」
  • Input mode:「Auto」または「Buttons」

Valuesの値について、「%(パーセント)」を全角文字にすることに注意してください。

税区分の「Enum」を設定する。

「税区分」はたいてい「10%」なので、初期値(INITIAL VALUE)を「10%」にしておきます。
列設定パネルで、「税区分」の「INITIAL VALUE」フィールドをクリックして、Expression Assistant から10%を入力してください。

AppSheet列設定パネルでInitial Valueを設定する。

単価

「単価」列を設定します。
「単価」列には税込金額を入力させたいので、列設定パネルから「DISPLAY NAME」に「単価(税込)」と入力しておきました。

AppSheet列設定パネルでDISPLAY NAME を設定する。

また、「単価」列はお金の計算を扱うので列TYPEを「Price」にしています。
AppSheetでは「Price」列の初期設定が米ドルの設定になっているため、日本円に設定し直す必要があります。「単価」列の左にある編集アイコンをクリックして「単価」列 を設定しましょう。

「単価」列を設定する。

Type Details を以下のように設定します。

  • Decimal digits(小数桁) :「0」
  • Currency symbol:「¥」

「Decimal digits」は初期設定では「2」になっていますが、日本円で小数桁は扱わないので「0」にしましょう。
「$」を「¥」に変更することを忘れずに。

AppSheetではPrice列 を日本円の設定にする。

7. AppSheetから品目を追加する

最後に、「品目」テーブルの列を設定してきましょう。
AppSheetから品目を追加すると、このテーブルに品目明細が作成されます。

AppSheetエディタの左側メニューにある「Data」を選択した状態で、タブメニュー「Columns」→ 「品目」をクリックして、列設定パネルを開きます。
下の表のように、各列のフィールドを設定してください。

「品目」テーブルの列設定

NAME TYPE KEY LABEL SHOW? EDITABLE? REQUIRE?
_RowNumber Number
ID Text check check check
請求書ID Ref check check check
品目マスタID Ref check check check check
単価 Price check check check
単位 Text check check check
数量 Number check check check
金額 Price check check
税区分 Enum check check check
消費税率 Decimal check check
消費税額 Price check check
税込金額 Price check check
作成日時 DateTime check check

「品目」テーブルの各列について設定していきます。

請求書ID、品目マスタID

「請求書ID」列には「請求書」テーブルの「ID」列の値を保存します。
「請求書ID」列はTYPEを「Ref」にしています。
編集アイコンをクリックして設定パネルを開き、Type Details の「Source table」を「請求書」に設定してください。

Type「Ref」を設定することにより、テーブル間のリレーションシップを設定する。

「品目マスタID」列には「品目マスタ」テーブルの「ID」列の値を保存します。
「品目マスタID」列はTYPEを「Ref」にしています。
編集アイコンをクリックして設定パネルを開き、Type Details の「Source table」を「品目マスタ」に設定してください。

Type「Ref」を設定することにより、テーブル間のリレーションシップを設定する。

これで、請求書と品目、品目と品目マスタを関連付けるリレーションシップが設定できました。
ついでに、列設定パネルで「品目マスタID」列の「DISPLAY NAME」を「品目」にしておきましょう。

AppSheet列設定パネルでDisplay name を設定する。

「品目」テーブルの列TYPE「Ref」については以上です。

実は、現在の状態だと請求書に品目明細を追加することができません。
「請求書」テーブルと「品目」テーブルのリレーションシップを親子関係に設定すればできるようになるのですが、説明が長くなるため、詳しくは第3回で解説することにします。

単価、単位、税区分

「品目マスタ」テーブルにも「単価」「単位」「税区分」という列がありました。
「品目」テーブルでは、「品目マスタ」に保存されている「単価」「単位」「税区分」を活用します。

品目明細を追加する際に、品目をリストから選択します。
その時にリレーションシップを活用して「単価」「単位」「税区分」を自動的に表示するようにします。

まずは「単価」列の設定をしてみましょう。
編集アイコンをクリックして「単価」列の設定パネルを開き、Auto Compute → Initaial Value(初期値)を設定します。
三角フラスコアイコンをクリックします。

AppSheet列設定パネルでAuto Compute、Initial Value を設定する。

Expression Assistant が表示されます。以下のように入力して「Save」をクリックします。
選択した「品目マスタID」を「ID」に持つ品目の「単価」を取得して表示しなさい、という意味です。
このように設定すれば、「品目」をリストから選択した時に、その品目の「単価」が自動的に表示されます。

AppSheet列設定パネル、Expression Assistantに関数を入力する。

「単位」「税区分」も同じように設定します。
列設定パネルの「INITIAL VALUE」フィールドをクリックして、Expression Assistant から入力します。

  • 「単位」:[品目マスタID].[単位]
  • 「税区分」:[品目マスタID].[税区分]

ついでに、「単価」列の「DISPLAY NAME」を「単価(税込)」にしておきましょう。

リレーションシップを利用して、INITIAL VALUE を設定する。

金額、消費税額、税込金額

「金額」「消費税額」「税込金額」列には計算式を設定します。
列設定パネルの「FORMULA」フィールドをクリックして、以下のように入力してください。

  • 「金額」:[単価]*[数量]-[消費税額]
  • 「消費税額」:FLOOR([単価]*[数量] - [単価]*[数量]/(1+[消費税率]))
  • 「税込金額」:[単価]*[数量]

AppSheet列設定パネルでFORMULA に計算式を設定する。

「消費税額」列には、FLOORというAppSheet関数を使用しています。
FLOOR関数は、()内の数値について小数点以下を切り捨てて整数にします。

FLOOR()

FLOOR(数値)  => ()内の数値の小数点以下を切り捨て、整数を返す。

「消費税額」列では、「単価」「数量」「消費税率」から消費税額を計算します。
Expression Assistant には以下のように入力しています。

消費税額を計算後、FLOOR関数で小数点以下を切り捨て、整数を返す。

税区分

「税区分」列は「品目マスタ」テーブルと同じように設定します。
「税区分」列の編集アイコンをクリックして設定パネルを開き、Type Details を以下のように設定します。

  • Values:「Add」で「10%」「軽減8%」「対象外」を追加。「%(パーセント)」は全角文字にする。
  • Allow other values:チェックを外す
  • Auto-complete other values:チェックを外す
  • Base type:「Text」
  • Input mode:「Auto」または「Buttons」

Valuesの値について、「%(パーセント)」を全角文字にすることを忘れずに。

消費税率

「消費税率」列は、「税区分」の値によって「0.1」「0.08」「0」いずれかの値を保存するようにします。
条件によって値を変える関数として、IFS関数を使用します。

では、列設定パネルで「消費税率」列の「FORMULA」フィールドをクリックしてください。

AppSheet列設定パネルで「消費税率」のFORMULAを設定する。

Expression Assistant に以下のように入力して、「Save」をクリックします。

AppSheet列設定パネル、Expression Assistantで税区分を設定する。

Expressionの意味は、

  • 「税区分」列が「10%」の時(条件式1)に「0.1」を入力する(処理1)
  • 「税区分」列が「軽減8%」の時(条件式2)に「0.08」を入力する(処理2)
  • 「税区分」列が「対象外」の時(条件式3)に「0」を入力する(処理3)

という意味です。

「税区分」列の値は3つあります。それぞれの値により入力する数値を変えています。
このように複数条件で処理を分岐するために、IFSというAppSheet関数を使用しています。

IFS()

IFS(
条件式1, 処理1,
条件式2, 処理2,
条件式3, 処理3,
...)

IFS関数は、()内の条件式が正しいときに、処理を実行します。
条件式1から順に、式が正しいか正しくないか(真か偽か)を判定します。
条件式1が正しい(真)なら、処理1を実行します。正しくない(偽)なら、処理1を飛ばして条件式2の判定に移ります。

式が正しくて処理が実行されたら、そこで処理はストップします。

Price、DateTime

「単価」「金額」「消費税額」「税込金額」列は、列TYPEを「Price」にしています。
「品目マスタ」テーブルの「単価」列で設定したように、日本円に設定し直す必要があります。

それぞれ列の左にある編集アイコンをクリックして設定パネルを開きましょう。
Type Details を以下のように設定してください。

  • Decimal digits(小数桁) :「0」
  • Currency symbol:「¥」

最後に「作成日時」列は、列TYPEが「DateTime」です。
列設定パネル、「作成日時」列の「FORMULA」フィールドをクリックして、Expression Assistant から「NOW()」を入力しましょう。

列TYPE「DateTime」のFORMULA に「NOW()」を設定する。

以上、請求書アプリを生成してみました。
請求書作成のためには、もう少し細かい設定が必要になります。
今回(第2回)は説明が長くなってしまったので、細かい設定については次回以降で解説します。

次回(第3回)は、列TYPE「Ref」で設定したリレーションシップを使用して、「請求書」テーブルと「品目」テーブルの親子関係を設定します。

Share Me!

前の投稿
AppSheetで請求書アプリ(第1回)Automationで請求書を発行しよう
次の投稿
AppSheetで請求書アプリ(第3回)リレーションシップで親子関係を設定

関連記事

メニュー