【ガチ実践】1年間AppSheetを勉強 → 見積書作成アプリを作ってみた(^^)

本ブログでは新UI画面で内容をまとめています。

新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

まずはじめに

今回の記事は、ガチ実践です！

AppSheetを学び続けて1年が経過しました。

そんな私の今の実力を記録として残すべく、記事にその内容をまとめました。

そういえば見積書作成アプリをきちんと記事にまとめていなかった・・笑

そんな中で思いついたのが今回の企画(^^)

別の記事でそれとなくまとめてはいたので、今回の記事は要所のみを説明します。

かなり内容のレベルが高いと思うので、ついてこられた人は免許皆伝です！笑

それでは勉強していきましょう(^^)

refの基本を先に学んでおくと理解しやすいです

アプリを構成するシートの設定

今回のアプリを構成するデータシートは3つです。

見積書シート

見積書詳細シート

商品シート

• 見積書シート：このアプリの親テーブル（アプリの幹の部分）
• 見積書詳細シート：見積書シートの子テーブル（アプリの枝の部分）
• 商品シート：入力補助のため用意（アプリの葉の部分）

これらのスプレッドシートの構成でAppSheetにテーブル情報を送り、初期設定を行います。

それぞれのテーブルにおいて、カラム設定は以下のようにしました。

商品シートの設定

注意することとしては、LABELのチェックボックスを2つ用意することです。

AppSheetでは、テキストと写真の2つをラベルとして表示することができます。

見積書詳細シートの設定

1. refのSource tableを間違えずに設定
2. Initial valueにref構文をセット

商品価格を変えることがない場合は、App formulaに入力でOK！

商品の値引きを考えた場合、Initial valueのほうが汎用性が高いです。

また、個数のInitial valueに1を入力しておきましょう(^^)

見積書シートの設定

見積書シートでは、合計金額のカラムに

SUM([Related 見積書詳細s][合計金額]) を忘れずにセットしておきましょう。

PDFカラムのEditable?にFALSEを入力することも忘れずに！

Editableに関数を入力することで、編集に制限をかけることが可能です

キーとなるアクションボタンの作成

まずは、おおもとの見積書に明細をつけるためのアクションボタンを作成します。

見積書に明細を付与するアクションボタン

次に、見積書に明細を書き終えたものをPDF化するためのアクションボタンを作成します。

※このアクションボタンとAutomationの組み合わせでPDF化を実装します。

見積書をPDF化するトリガーのアクションボタン

メールの送信と見積書のPDFを仕組み化する

Automationを作成する前に、アプリの構成を微修正します。

アプリを作成している中で、「取引先も選択にして楽したい」と思ったので寄り道です(^^)

スプレッドシートに取引先シートを追加します。

取引先の会社名とメールの宛先に使うemailがあれば便利です。

Key値はemail、LABEL値は取引先にしましょう！

DataペインのTableタブからシート情報を読み込み、カラムタブから見積書シートをリジェネレイトします。

リジェネレイトが完了したら、見積書シートにある取引先カラムをrefでつなぎます。

仕組みを構築しているときに機能のちょい足し、、、あるあるです！(^^)

続いてAutomationの設定に移ります。少し複雑なのでここは以下の手順を参考に(^^)

Automationの発火条件を決める

値が更新されたときに発火するUpdates onlyとその条件式を入力します。

メール宛先の設定

赤枠の部分を参考に設定をします。

取引先カラムはrefによる参照（key値はemail）からメールアドレスが取得可能(^^)

送信するメールの内容を作成

見積書の書式を作成

Attachment Templateで見積書のテンプレートの作成とAttachment Archiveでメールに添付かつGoogle driveに保存を選択する。

ちなみに今回はこんな感じで書式を作成(^^)

アプリの動作確認

アプリの中核をなす部分の開発が完了したので、動作の確認を行います。

アプリが思いどおりに動いてくれることが望ましいですが、一発クリアは中々難しいです。

ちなみに、この記事をまとめる前に検証した際には、Automationのエラーが3回起こっています！笑

そのエラーの原因が何なのか？を探り、解決することが重要(^^)

設定したAutomationが動かないときの確認方法

Automationエラーの確認方法

これを覚えておくとアプリの検証が非常に楽になるため、ぜひ覚えておきましょう(^^)

エラーメッセージを確認することで、何が原因でAutomationが動かないのか？が一目瞭然になります(^^)

アプリの動作確認

それでは気を取り直してアプリの動作確認をします。

データを新規に登録

作成日、見積書番号、取引先を入力し、保存します。

見積書に明細を追加する

明細をつけるボタンは、見積書発行のアクションボタンを押すまで何回でも押すことが可能です。

見積書発行ボタンを押してメール送信を行う

見積書発行ボタンを押すことで、登録されているメール本文で自動でメールが送信されます。

ちなみに添付されている見積書は↓

いい感じやん！！

アプリのViewを整える

アプリの動作検証は問題がなかったので、最後にアプリの見栄えを整えます。

アプリ開発者のセンス次第で、UIやUXは変化します。

誰が触ってても直感的に使うことができ、また使いたいと思わせる

これが目指すべきゴールだと思います。

今回のアプリでは、下図のVewで落ち着きました(^^)

見積書の作成

まずは、新規の見積書を作成するために必要なForm Viewを設定

次に、新規で見積書を発行したあとに明細を付与するための導線を作っておきます(^^)

また、ViewタブのアイコンをわかりやすいものにすることでUIを高めることが可能です。

商品の登録

ここは特に難しい設定はないため、説明は割愛します。

取引先の追加

ここも特に難しい設定はないため、説明は割愛します。

発行した見積書

これまでに発行した見積書を確認するためのTable View

グルーピングやソート機能を使い、登録されている情報をよりクリアにしましょう(^^)

まとめ

以上、見積書アプリの作成（ガチ実践）の記事でした。

記事にまとめている最中にも、追加したいと思える機能が浮かび上がり、まとめるのが大変でした・・

すでにアプリをいくつも開発したことがある読者のかたは、真似してみると新たな発見があるかも？です。

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！

勉強お疲れさまでした(^^)