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

請求書アプリを作りながら、 AppSheet （アップシート）の使い方を学びましょう。
前回（第1回）は請求書アプリの概要について紹介しました。
今回は、実際にサンプルデータを AppSheet に読み込んで、アプリを作成してみましょう。
テーブルを追加して、列の設定まで進めます。

1. サンプルデータをGoogleドライブにアップロードする

それでは、AppSheetで請求書アプリを作成していきましょう。
AppSheetアプリにはエクセルやGoogleスプレッドシートなどのデータが必要です。

このブログでは、請求書アプリのサンプルデータとしてエクセルのデータを用意しました。
まずは、下のエクセルのアイコンをクリックして、データをダウンロードしてください。

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

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

今アップロードしたエクセルデータを開きます。
「ファイル」メニューをクリックして、「Googleスプレッドシートとして保存」をクリックします。

エクセルをGoogleスプレッドシートに変換して保存しました。

2. Googleスプレッドシートから AppSheet アプリを作成する

AppSheetアプリを作成しましょう。

先ほど変換したGoogleスプレッドシート「請求書アプリ」を開いた状態で、「拡張機能」メニューをクリックすると、「AppSheet」が表示されます。
「AppSheet」にカーソルを合わせて、「アプリを作成」をクリックしてください。

「We're setting up your new app!」と表示されます。
AppSheetがサンプルデータを読み込んでアプリを作成します。

アプリが無事に作成されると「Your app is ready!」と表示されます。
右上の「×」ボタンか、「customize your app」をクリックして閉じましょう。

AppSheetアプリが作成できました。
アプリエディタ（App editor）画面の右側にアプリのプレビューが表示されます。

3. Googleスプレッドシートをアプリフォルダに移動する

第7回で、Automation（オートメーション）で作成したPDFファイルをアプリで開けるようにします。

そのための準備として、Googleスプレッドシート「請求書アプリ」をアプリフォルダ内に移動しておきます。
AppSheetにおけるデータ管理としてオススメの方法です。

AppSheetアプリを作成すると、マイドライブ内にデフォルトで以下のようなフォルダが作成されます。

• マイドライブ
  • appsheet
    • data
      • アプリフォルダ

アプリフォルダは「アプリ名 - ユーザーのアカウントID」になっています。
今回の請求書アプリの場合は「請求書アプリ-xxxxxxxx（アカウントID）」のようになっています。

アプリフォルダ「請求書アプリ-xxxxxxxx」内に、Googleスプレッドシート「請求書アプリ」を移動します。

Googleスプレッドシート「請求書アプリ」を右クリックします。
「整理」にカーソルを合わせて、「移動」をクリックします。

「請求書アプリ-xxxxxxxx」フォルダを開いて「移動」をクリックします。フォルダパス（フォルダの場所）は、

• マイドライブ > appsheet > data > 請求書アプリ-xxxxxxxx

です。

「請求書アプリ-xxxxxxxx」フォルダに、Googleスプレッドシート「請求書アプリ」を移動しました。

このようにアプリフォルダ内にデータソース（Googleスプレッドシート）をまとめておきます。
後で、データが迷子にならないのでオススメです。

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

アプリエディタの左側メニューにある「Data」をクリックして、データを確認しましょう。
Dataナビゲーション（青い帯の部分）に「請求書」テーブルが追加されていることが分かります。

テーブル（Table）とは、アプリからデータを追加したり、更新したり、削除できるデータの格納庫です。
テーブルは黒い円柱のアイコンで表示されます。

「請求書」テーブルをクリックして選択すると、請求書のデータ項目が中央のメインパネルに一覧表示されます。
こららのデータ項目を列（Columns）と呼びます。

メインパネルの上部に「View data source」ボタンがあるのでクリックしてみましょう。

サンプルデータの「請求書アプリ」スプレッドシートが開きます。

このスプレッドシートには、ワークシートが4つあります。
AppSheetがアプリを作成するときに、「請求書」ワークシートを読み込んでテーブルとして追加しました。

• 「請求書」ワークシートの1行目のデータ項目（ID、取引先、請求日、支払期日...）
• 「請求書」テーブルの列名（1行目「_RowNumber」は無視して、2行目のID以降）

が一致していることを確認してください。

「請求書アプリ」スプレッドシートには、「取引先」「商品」「明細」というワークシートがあります。
この3つをテーブルとして追加します。

アプリエディタ左側メニューにある「Data」をクリックします。
Dataナビゲーションの右上にある「+」ボタン（Add new data）をクリックします。

「SUGGESTIONS」に、「Add Table "取引先"」という薄青ボタンが表示されるのでクリックします。

「Add this table」ボタンをクリックしてテーブルを追加します。

Dataナビゲーションに「取引先」テーブルが追加されました。

同じ手順で、「商品」「明細」テーブルも追加しましょう。

テーブルの設定は特に変更する必要はありません。次に進みましょう。

5. 「請求書」テーブルの列を設定する

「請求書」テーブルの列を設定しましょう。

列には、アプリから追加した各データ項目の値（文字、数字、日付、時間など）が保存されます。
「請求書」テーブルの各列には、ID、取引先、請求日、支払期日など、請求書のデータが格納されています。

アプリから追加したデータは、スプレッドシートでは1行ずつ記録されていきます。

この1行のデータを行（Rows）と呼んだり、レコード（Records）と呼んだりします。
このブログではレコードと呼ぶことが多いので、「1行のデータのことだな」と思ってください。

アプリエディタ左側メニュー「Data」をクリックします。
Dataナビゲーションで「請求書」テーブルを選択して、中央のメインパネルに「請求書」テーブルの列設定パネルを表示します。

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

• TYPEをプルダウンから選択する
• KEY、LABEL、SHOW?などのチェックボックスをON / OFF する

ことで設定してください。

TYPE（データ型）とは列に保存するデータの種類（テキスト型、数値型、日付型など）のことです。
AppSheetがサンプルデータを読み込んだときに自動的に設定してくれますが、

• 備考：LongText
• 請求書ファイル：File

の2ヶ所の設定を変更します。
チェックボックスは「ON」のフィールドをチェックして、空欄はチェックを外してOFFにします。

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

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

 

「請求書」テーブルの各列について補足解説します。

ID

「ID」列は「請求書」ワークシートのA1にあらかじめ入れておきました。
AppSheetではワークシートの1行目に「ID」を入れておくと、自動的に以下のように設定してくれます。

• TYPE：Text
• KEY：ON
• LABEL：ON
• INITIAL VALUE：UNIQUEID()

AppSheetは「ID」列を自動的にKEYとして設定します。
KEYはレコードを識別する列に設定する必要があります。

「ID」列には、INITIAL VALUE（初期値）に「UNIQUEID()」という関数が設定されます。
この関数を設定した列には、重複がないユニークな値（ランダムな英数字8桁）が保存されます。

「UNIQUEID()」を設定することによりレコードの識別が可能になるので、その列をKEYとして使用できるようになります。

請求書アプリでは「ID」列に以下の設定を追加しています。

• LABEL：OFF
• SHOW ?：OFF

LABELを設定した列は画面（ビュー：View）で表示したり、他のテーブルから参照したときに表示されます。
名前（例：顧客名、社員名、商品名など）やタイトルをLABELに設定するのがオススメです。

請求書アプリでは「件名」列をLABELに設定しました。
件名が、ビューや他のテーブルから参照した時に表示されるので分かりやすくなります。

最後に、「ID」列はランダムな英数字なので、アプリ上に表示されてもあまり意味がありません。
なので、「SHOW ?」のチェックを外して非表示にしました。

取引先

「取引先」列は、TYPEを「Ref」にします。

列名の左にあるペン型の編集アイコンをクリックして、「取引先」列の設定パネルを開きましょう。
以下のように設定します。

• Type：Ref
• Source table：取引先

Source tableを「取引先」テーブルに設定しました。これは、

• 「取引先」列は、「取引先」テーブルを参照している

という意味です。

「取引先」列の設定パネルの右上「Done」ボタンをクリックして、パネルを閉じましょう。

アプリエディタ右側にあるプレビュー画面で、タブメニュー「請求書」を選択します。
「+」ボタン（Add）をクリックします。

「取引先」列の入力フィールドをクリックしてみましょう。

「取引先」テーブルの「ID」列の値がリスト表示されます。
「ID」列は、「取引先」テーブルのKEYに設定されています。

「取引先」列に「Ref」を設定することにより、

• Source table（「取引先」テーブル）を参照して、
• Source tableのKEY（ID）を選択する

ことができます。

「ID」が表示されても分かりにくいので、「取引先名」を表示するように変更できます。

Dataナビゲーションで「取引先」を選択して、LABELを「ID」から「取引先名」に変更しましょう。

「取引先」列のリスト表示が、「取引先名」に変更されました。

例えば、

• 商品マスタ
• 社員マスタ
• 顧客（取引先）マスタ

のようなマスタデータを持っていて、それらを参照して入力したい時には「Ref」を使用します。

「Ref」は、テーブル間のリレーションシップ（関連付け）を設定する際にも使用できます。
「Ref」を使用したリレーションシップ設定は、次回（第3回）で解説しているので、そちらを参照してください。

• AppSheet で請求書アプリ（第3回）リレーションシップで親子関係を設定

請求書アプリで取引先をプルダウンで選択すると、「取引先」列には「取引先」テーブルの「ID」列の値が保存されます。
「取引先」テーブルの「ID」列はKEYに設定されています。
つまり、「Ref」には、Source tableのKEY列の値が保存されるということです。

例えば、

• 「請求書」の「取引先」列で「関東青果株式会社」を選択すると、
• 「取引先」テーブルのKEY（ID）が「de5e78ce」が「取引先」列に保存される

という仕組みになっています。

請求日、支払期日

「請求日」と「支払期日」列には日付を入力します。
INITIAL VALUEにTODAY関数が設定されているので、請求書入力フォームで初期値として今日の日付が入力されます。

ただし、請求日と支払期日が今日であるとは限りません。
ここは空欄にしておいて、ユーザーが自分で入力するように変更しましょう。

「請求日」列のINITAIL VALUEフィールドをクリックします。

Expression Assistantが開くので、「TODAY()」を削除して「Save」します。

以下のように、INITAIL VALUEが空欄になっていればOKです。
同じ手順で、「支払期日」のINITAIL VALUEも空欄にしておきましょう。

件名

「件名」は、入力忘れ防止のために、初期値で「請求書」を表示しておきましょう。
個別の件名はユーザーが上書きして変更できるようにします。

列設定パネルで、「件名」列の「INITIAL VALUE」のフィールドをクリックします。

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

トリガ

「トリガ」列は、第7回で請求書のPDFを発行する際に使用します。
詳細は第7回で解説するので、現時点では意味が分からなくても大丈夫です。

「トリガ」列の「INITIAL VALUE」フィールドをクリックしてExpression Assistantを開きます。

「0」を入力して「Save」してください。

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

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

6. 「取引先」テーブルの列を設定する

「取引先」テーブルの列を設定しましょう。

アプリエディタ左側メニュー「Data」をクリックします。
Dataナビゲーションで「取引先」テーブルを選択して、中央のメインパネルに「取引先」テーブルの列設定パネルを表示します。

下の表のように、各列のフィールドを設定してください。「取引先」テーブルの列は少ないので、

• LABELを「ID」から「取引先名」に変更
• 「ID」のSHOW? と SEARCH? をOFFに変更
• 「取引先名」のREQUIRE?をONに変更

ぐらいで大丈夫です。

「請求書」テーブルと同様に、「ID」列をKEYに設定しています。

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

7.  「商品」テーブルの列を設定する

「商品」テーブルの列を設定しましょう。

アプリエディタ左側メニュー「Data」をクリックします。
Dataナビゲーションで「商品」テーブルを選択して、中央のメインパネルに「商品」テーブルの列設定パネルを表示します。

「商品」テーブルの列を設定してきましょう。
下の表のように、各列の

• TYPEをプルダウンから選択する
• KEY、LABEL、SHOW?などのチェックボックスをON / OFF する

ことで設定してください。

TYPE（データ型）とは列に保存するデータの種類（テキスト型、数値型、日付型など）のことです。
AppSheetがサンプルデータを読み込んだときに自動的に設定してくれますが、

• 単価：Price
• 税区分：Enum

の2ヶ所の設定を変更します。
チェックボックスは「ON」のフィールドをチェックして、空欄はチェックを外してOFFにします。

 

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

 

「請求書」「取引先」テーブルと同様に、「ID」列をKEYに設定しています。
「商品」テーブルの各列について、補足解説と設定を続けます。

単価

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

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

• Decimal digits（小数桁） ：「0」
• Currency symbol：「¥」

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

税区分

「税区分」列は「10％」や「軽減8％」など、決められた値から選択するようにします。
複数の選択肢からひとつだけ選択（単一選択）する場合、TYPEを「Enum」にします。

列名の左にあるペン型の編集アイコンをクリックして、「税区分」設定パネルを開きましょう。

はじめに、Typeを「Enum」にします。

続けて、Type Details を以下のように設定します。

• Values：10％、 軽減8％、非課税、対象外
  • 「％（パーセント）」は全角文字にしておいてください。
• Input mode：Dropdown

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

「税区分」はたいてい「10％」なので、初期値（INITIAL VALUE）を「10％」にしておきます。

Auto Computeタブをクリックして開きます。
Initial Valueの入力フィールドをクリックしてExpression Assistantを開きます。

Expression Assistant に「10％」（％は全角文字）を入力して「Save」します。

画面右上の「SAVE」をクリックして、設定を保存します。

以上、請求書アプリを作成してみました。

まだ「明細」テーブルの列設定をやっていませんが、次回（第3回）、「Ref」を使って「請求書」テーブルと「明細」テーブルのリレーションシップ（親子関係）を設定するところで解説します。