本記事はノーコードアプリ開発について全く知らなかった管理人が独学で勉強し、ここ大事!と感じた部分を記事にまとめています。
本ブログでは新UI画面で内容をまとめています。
新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

まずはじめに
- Automationの送信メールにアプリのViewを埋め込んで直接編集がしたい人
- 作成したアプリのUX/UIを向上させたい人
- 動的メール(Dynamic Mail)の設定方法がわかる
- 動的メールの設定の基本がわかる
AppSheetではAutomation機能を設定することで、比較的簡単にメール送信の仕組みを構築することができます。
AppSheetでアプリ開発をする人は、Googleアカウントを持っていると思うので、普段のメールツールとしてGmailを使っていることが多いのではないでしょうか?
実はAutomationで送信されるメールにアプリのViewを埋め込んで、アプリを開かなくても直接対象となるカラムを更新することが可能です。
まだ開発段階のような気がするので、本記事の内容からさらに今後更新されると思いますが、これを知っておくことでPCスキルが低い(メールの返信は出来るくらい)の人でも業務DXの恩恵をこうむることが出来るような仕組みを導入することも可能だと思います。
それでは勉強していきましょう(^^)

アプリ開発に慣れていない人はまずはこちらからどうぞ
アプリ開発において抑えておきたい基本が学べます(^^)
【まずはここから】抑えるべきAppSheetの基本項目
アプリに機能を実装するためのアクションボタンの設定についてまとめています(^^)
【まとめ】AppSheetのアクションボタンでできること
抑えておきたい基本ルール
こちらのページに動的メールの基本ルールが掲載されています。

わかってます。リンク先のページは文字が多すぎますよね?
ということで、私の方で特に重要だと思う部分を書き出してみました。
以下の点を抑えておけば、とりあえず大丈夫だと思います!
- 動的メールを使えるのはGmailユーザーのみ(上限は50通 / 日)
- サポートされているViewは、Detail と Form の2種類
- サポートされていないData typeが複数ある
- 動的メールに使えるアクションボタンは2種類(set the value と add a new row)
- 動的メールを転送すると埋め込み機能が解除される
- 動的メールの効果は受信後30日が期限
特に赤下線のルールは覚えておきましょう(^^)
サポートされていないData typeですが、これはメールに埋め込まれたView画面で編集ができないものと覚えておきましょう。
ChangeCounter
ChangeLocation
ChangeTimestamp
Color
Drawing
File
Image
Price
Progress
Show
Signature

これらのTypeを含むcolumnが存在する場合、Automationエラーが発生します
あと、設定が許されているアクションボタンは、
- あらかじめ設定した値を入力する set the value
- 自身もしくは別のテーブルに行を追加する add a new row
上記2つしかないので、あまりむずかしいロジックを組み立てることができないことも把握しておきましょう(^^)
検証データの紹介

設備トラブルを報告するアプリを想定して、上図のような列構成で検証をしてみます。
続いて、アプリのデータタイプの設定を今回はこんな感じでやってみました。

本記事では動的メールのイメージがつかめればいいので、細かな設定は省略します。
データタイプの設定が終わったら、次はアクションボタンの設定をしておきましょう。
ステータスカラムには未対応の値が入力されているので、これを確認済みにするアクションボタンを作っておきます。

Detail Viewの調整
動的メールに埋め込むことが出来るのは、DetailもしくはForm Viewになるので作り込みを行います。
このViewを作っておくことで、わかりやすいUIを提供する事ができるので妥協せずいきましょう!
ユースケースとして多いのは、Detail Viewの方だと思うので今回はこちらで設定を行います。
今回は埋め込みViewという名前のDetail Viewを作成します。


View optionの設定で特に大事になってくるのは、 Quick edit columns と Colmun order の2つです。
Quick edit columns にセットしたカラムは動的メール内で値を入力・更新することが可能
Column order は動的メール内で表示するカラムを決めることが可能
上図の設定では、届いた動的メールに表示されるのは現場写真と報告内容とコメントの3つです。
また、コメントに関してはメール内のカラムの値を直接編集できる設定となっています。
ここの設定は読者の方のユースケースに沿って、適切に設定をしてみてください(^^)
Automationの設定
特に難しい設定はないので、ポイントとなる部分だけまとめていきます。

条件は何でもいいですが、今回は新規にデータが登録された時 とします。

タスクは Send an email を選択し、Email TypeはEmbedded app view を選びます。

こちらを選ばないと動的メールは作成できません・・・

赤矢印の部分の設定をします。内容は自身のアプリ環境に応じて変えてください。

続いて、メール本文とメールに埋め込むViewを設定します。
動的メールの設定は以上です。
動的メールの検証
最後に、これまでに行った個々の設定が意図したとおりに表現されているか確認しましょう。

上図の Preview email body をクリックすることで、簡易的に確認することもできますが、こちらはスプレッドシートの2行目のデータでしか確認することができません。
その点に注意して検証をしてみましょう!

この画面は実際にGmailに届く動的メールとほぼ同じ画面です。
メールにはアクションボタンやQuick editで設定したカラムの編集が出来るのが確認できます。
動的メール内で操作した情報はスプレッドシートに反映されますので、アプリを開かなくてもアプリを開いて操作をしたことと同じ結果を得ることができます!
まとめ
以上、動的メールの設定についての記事でした。
簡単な承認フローや情報共有を目的とするようなアプリだと、今回ご紹介した設定で十分なことが多いので既存アプリに実装してみてもいいかもしれません。
最後にもう一度動的メールの制約のおさらいです。
- 動的メールを使えるのはGmailユーザーのみ(上限は50通 / 日)
- サポートされているViewは、Detail と Form の2種類
- サポートされていないData typeが複数ある
- 動的メールに使えるアクションボタンは2種類(set the value と add a new row)
- 動的メールを転送すると埋め込み機能が解除される
- 動的メールの効果は受信後30日が期限
もしアプリ開発中にエラーが発生した場合は、大体はData typeの設定だと思います。
エラーメッセージにもその旨が記載されるので、出た場合は解除してあげましょう!
記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。
わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです!
勉強お疲れさまでした(^^)