見出し画像

【AppSheet】見積書作成アプリを作ろう！〜データ準備編〜

ふうた

  1. データの準備←今回の記事

  2. 画面設計

  3. PDFファイルの自動作成

  4. 見た目を整える

今回は第1回ということで、アプリを作るためのデータを作っていこうと思います！
目次の通り進めていきますので一緒にやっていきましょ〜！

データを入れる箱の選定（データベース）

AppSheetで使用できるデータベース

まず、AppSheetで使えるデータベースですがみなさんがよく使うスプレッドシートやAppSheetが提供しているAppSheetDatabase・BigQueryなどのクラウド型のデータベースやSalesforceといったGoogle以外のサービスと連携できます。
ただ契約しているライセンスによってできなかったりするので注意が必要です。

今回使用するデータベース

無料のライセンスで使えるのがAppSheetDatabeseとスプレッドシートなので、今回はスプレッドシートで進めていこうと思います。
後からデータの確認やシートを追加して集計をするといったことができるのが魅力です。

これから登場する用語について

今回スプレッドシートをデータベースとして使うため呼び方が少し変わります。
まず、データベースに格納されたデータは、テーブルと呼ばれる、表のような形式の構造でまとまって確認できるようになっています。
「シート1」や「シート2」がテーブルにあたります。
テーブルの中の縦の列のことをカラム、横1行のことをレコードと呼びます。

  • カラム

  • レコード

  • テーブル

この3つは基本となりますので覚えておきましょう。

どのようなデータを入れたいか決める

必要な情報は？

見積書を作成するうえで必要な項目は何でしょうか？

  • 日付

  • 顧客情報

    • 会社名

    • 名前

    • 連絡先（ここではメールアドレスにします）

  • 商品情報

    • 商品名

    • 単価

    • 個数

    • 小計

  • 合計金額

  • 見積書作成担当者名

  • （必要あれば）署名欄

大体こういった項目だと思います。
また、AppSheetでのアプリ作成では重複の値がない項目が必要なので表示はしませんが「ID」というのも加えておきます。
それでは、スプレッドシートを新規作成して作っていきましょう！

A1セルから順番に先ほど作った項目をカラムとして入れていきます

シート1を「見積書」に名前を変更しカラムを入力

あれ、商品情報のカラムがないですね💦
ここで、運用する時のことをイメージしてみましょう。
このタイミングで商品情報のカラムを作ってしまうと、入力する商品（サービス）が1つしかなければ問題ないですが、複数のときは入力できなくなってしまいます。
なので、見積書テーブルを親テーブルとして、商品情報のみをいれる子テーブルを作って紐づけていきます。

イメージ

新しく「商品情報」シートを追加して同じようにカラムを作っていきます。
ここでも重複しない項目として「ID」カラムを作ります。
また、親テーブルの見積書と紐づけるための「見積書ID」も作成します。
これでスプレッドシート側の準備は完了です！

商品情報

ここまでできたら見積書シートを選択し拡張機能からアプリを作成を押します。

拡張機能＞AppSheet＞アプリを作成

読み込みが完了したら左のメニューから「Data」を選択して確認しましょう。
そうすると、このような画面になっていると思います。

アプリを作成後Dataタブを表示

見積書シートしか読み込まれていないので、商品情報シートも追加します。
Dataの「＋」を押して「AddTable"商品情報"」と表示されていたら押すと追加出来ます。
もし何も表示されない場合は、GoogleSheetsを選択して商品情報シートがあるスプレッドシートを選んで追加します。
追加時の設定欄は、特に変更する必要はありません。

商品情報も追加できたら、初期設定は完了です。
次は、Dataタブを開いてデータの型を決めていきます。

データの型決めや関連付けを行う

データの型とは

データベースにデータを格納する時、そのデータがどんな種類のものなのかを区別するためのものです。例えば、数値（1, 2, 3など）、文字列（「こんにちは」など）、日付（2023年12月25日など）のように、データには様々な種類があります。この種類をあらかじめ決めておくことで、数値であれば計算したり、文字列であれば検索したりとデータに合った処理を行うことができます。
また、データの誤りを防ぐことにも役立ちます。例えば、数値のところに文字を入力してしまうと、計算がうまくいかないことがあります。

データ型の設定

それではそれぞれのテーブルのカラムにあったデータ型を設定していきます。
TYPEのところをクリックしてプルダウンリストから選んでください。

見積書テーブル
商品情報テーブル

画像のように出来たらOKです！
他にも、プルダウンリストから選ぶEnum型や画像を登録するImage型などがあるので、どのような動きになるか試してみてください。

関連付けを行う

続いて、子テーブルの商品情報を見積書テーブルに紐づけていきます。
こういった紐づけをリレーションシップと呼びます。
それでは設定していきましょう。
商品情報のデータ型設定画面で見積書IDカラムのTYPEで「Ref」を選び「SorceTable」に「見積書」を選択し、その下の「Is a part of?」にチェックを入れてください。
このチェックを入れることで、見積書作成時の画面で商品の追加や変更ができるようになります。

Doneを押した後、右上のSaveを押してDataタブの見積書を表示すると、一番下に「Related 商品情報s」というカラムが作成されます。
これはバーチャルカラム（仮想カラム）で、スプレッドシートには書き込まれないカラムです。
このバーチャルカラムが表示されたら、関連付けはこれで完了です！

数式の使用

続いて、数式を使って少し工夫をしていきます。
現在の状態では、商品の小計を入れる時に、いちいち単価と個数を掛け算しなければなりません。
これでは時間がかかり、面倒で使いづらいです。
これを解消するために、数式を設定いて小計を自動入力できるようにします。

使用方法

商品情報テーブルのDataタブを開き、小計カラムのFORMULAをクリックしてください。
そうすると数式を入力する画面が出るので、数式を入れてください。

FORMULAクリック後の画面
[単価]*[個数]

該当のカラムにカーソルを合わせるとinsertと出るのでそれをクリックしても入力出来ます。
この数式は、単価のカラムと個数のカラムの値を掛け算し、小計を計算しています。
それでは、確認してみましょう。

左のメニューバーの上から2番目をクリックし、見積書入力画面を表示してください。右のプレビュー画面の一番下にあるNEWをタップして単価と個数を入れてください。

もし入力画面がでなかったらView typeを「form」にしてください
小計がグレーになって入力出来なくなってます

小計の金額が変わりましたね。
このように、FORMULAに数式を入力することで、単価と個数の値が変更されるたびに、小計の値が自動的に更新されます。

まとめ

データ準備はこれで以上になります！
次回は見積書作成画面を作って行こうと思います。
ここまでで、うまくできないことなどありましたら、コメント欄に書いていただければと思います！

チャレンジ

現在の状態では、商品名と単価を手入力する必要があり入力ミスや作成する人によって表記がバラバラになって不便です。
今回の内容をもとに、次のことができるようにしてみましょう。
次回、答え合わせをします！

  1. 商品マスタを作成し商品情報入力画面でそのリストから商品を選択できるようにする

    • カラム

      • 商品名

      • 単価

      • （必要に応じてカラムを追加してください）

  2. 商品を選択した際に、商品マスタから対応する単価が自動的に入力されるようにする

  3. 商品登録した金額の合計を見積書作成画面に表示させる

3のヒント
合計を出す関数はスプレッドシートと同じです！

いいなと思ったら応援しよう！