メール内容とテンプレート
メールは件名と送り主と本文を設定できれば運用できると思っています。PDFを作成して添付ファイルにして送付なんてこともできる模様。私は試してません。
Email Subjectで件名、Email Bodyで本文、From Displayで送り主、PreHeaderは本文上部です。デプロイしないでテスト運用するとPreHeaderに追加されてしまう文章があるので注意。
メールの本文にはテンプレートを使うことができ、GoogleドキュメントかMicrosoft Wordが使えます。Createを選択するとGoogleドキュメントのテンプレートが自動作成されます。テンプレートを用意すると上記のEmail Bodyが無効になります。Viewを選択するとテンプレートが表示され、Googleドキュメントであればそのまま編集できます。自動作成されるテンプレートの場所は、Googleドライブ/appsheet/data/アプリ名/content/、です。
デフォルトで作成されるテンプレートはこんな感じ。テーブルの情報がダダ洩れです。
そのまま使うとこんな感じ。余白すごい。
テンプレートの余白がメール本文に反映される模様。余白は0にしましょう。
Googleドキュメント＞ファイル＞ページ設定
こんな感じに書き換えました。関数を駆使すれば他のテーブルの情報も読み出せる！
コメント部分、色々試したけど改行できなかった・・・苦肉の策「□」で見た目調整。ベタ書きですが表もこんな感じに出せる！
以上。
TODOアプリを作る
TODOアプリをまじめに作ります。作業の状態、重要度、作業期日、カレンダーで期日確認、管理者画面で表示/非表示の切り替えと行削除、詳細が欲しいのでメモ書きを追加、指定した条件でメール送信する機能を考えてます。
完成画面スマホ版こんな感じ。
メインテーブルはこんな感じ。insert_dateはいらないかも・・・
メモ書き用テーブル。
■ 各画面を作る
Slicesで表示フラグがONのものだけ表示するやつを作る。数式は[visible]だけ入れればOK。
メインのビューを作り、さっき作ったSliceを設定します。2行以上表示されてもレイアウトに違和感が殆どない（と思う）Cardビューを使います。好みによって変えて下さい。
ソート、グループと集計、レイアウトを決めます。Action部分は全部Noneです。
メモリストのビューはrefにして隠します。View Optionsの説明は省略！
管理者用画面を作ります。まだ開発段階ですのでアクセスしやすい場所に表示しておきます。開発がひと段落したらPositionをmenuにしましょう。「N」と「Y」と表示されていますが、後述のグループ分けで[visible]を指定することでこうなってます。後で変えられます。
レイアウトを同じように設定し、管理者画面用に削除を追加。
・・・最初にやっておくべきでした。画面を乱発するので、現在どの画面なのかを確認できるようにします。開発中だけでも構いませんので設定推奨。
Detail画面を作っていきます。todoテーブルとmemolistテーブル連携用のバーチャルカラムをtodoテーブルに作ります。名前はmemoとしました。赤丸以外は変更不要。
=ref_rows("memolist", "todouid")
ビューを作ります。要らない情報が多い！減らします。
滅茶苦茶スッキリしました。これで連携も出来てるので、Addを押せばmemoを無尽蔵に書き込めます。管理者表示用のDetailも同様に作ります。（省略）
メモ用のDetailを作ります。また要らない情報を削ります。
滅茶苦茶スッキリ！
Form、編集画面を作ります。この辺は定型の文字を選ぶだけなので、選択肢にします。
[visible]は「N/Y」だと分かりにくいので、「非表示／表示」に変更します。
statusを選択肢から選べるようにします。「Ongoing/Stop/Finish」を用意。
priorityも選択肢から。「Low/Middle/High/Top」を用意。
その他、INITIAL VALUEにvislbeはtrue、statusはStop、priorityはLowを設定、全部必須入力にしました。選択肢が大きいので、Dropdownの方がスッキリするかもしれません。
contents部分には長い文章を入れる部分なのでLongTextに変更。改行も可。
Googleスプレッドシートのセルに入る最大の文字数が50,000とのこと。画面上でも、あまりに長い文章が入力されてしまうと見づらくなるので、ある程度の制限は必要と考えます。memolistのmemoにも同様の制限をかけましょう。
画面を作ります。管理者用画面も同様に作成します。
こんな感じで編集できる項目を追加します。管理者画面ではvisibleとinsert_dateを追加します。
memolistの編集画面も作ります。memoはLongTextに、最大文字数を500にしました。
importanceも選択肢から。「Normal/Caution/Important」を用意。INITIAL VALUEはNormal。
画面の配置。
必要なヤツだけ表示。
カレンダーを作ります。
最終日だけ分かればいいので、StartとEnd両方にdeadline_dateを指定しています。
※本アプリで全く意味が無いinsert_dateをstart_dateに変更して、カレンダーで期間表示なんてできれば、よりアプリっぽいかも！とは思いますが、やりません。
■ 少し装飾
Format rulesを追加してpriorityを色で分かるようにする。Highはオレンジ、Topは赤にしてみた。コピーすると楽。
Importanceも同様に装飾。重要書き込みが分かりやすいかと。Importantは赤、Cautionはオレンジと下線、斜体にしてみた。やはりコピーすると楽。
一覧画面でmemoの書き込み数が分かるといいなーと考えたので実装してみた。todoにバーチャルカラムvTitleを作成。memoは関数ref_rowsでmemolistのデータを引っ張ってきています。これを関数countで数えて、0だったらタイトルをそのまま表示、0以外だったらタイトル(5)の様に表示しています。
=if(count([memo])=0,[title],[title]&" (" & count([memo]) & ")")
件数を数えるには関数selectでも出来たのでメモ。ref_rows同様リストの件数を返す模様。これらはエクセルで言うところの関数COUNTIF。便利。
=count(select(memolist[todouid],[todouid]=[_thisrow].[uid]))
titleをvTitleに変更して、memoの書き込み数が一覧画面から確認できた！上記で作ったFormat rulesも変更も忘れない。管理者画面も同様。とりあえず操作画面は完成。
■ メールを送る
statusがFinishに変更された時にメールを送信したい。
AppSheetではAutomationという機能で、指定したテーブルの挿入時、更新時、削除時とかのタイミングで処理を走らせることができる！時間指定もできる模様。Automation機能のTaskでメール送信やSMS送信もできる模様。
Automation＞Bots＞New Botを選択。
AIさんから処理の提案をしてくれます！やりたいことに近いものがあればそれを選んでカスタムするのが楽ですが、今回は全部手作業でやります。提案は無視してCreate a custom botを選びます。
Configure eventを選択してEventを作ります。
またAIさんから提案が出ましたが、Create a custom eventを選択。提案は全部無視します。
Botの中にEventが作れました！Eventは画面右部分で編集できます。ここで編集しているEventはEventsタブを開いた所にEvent単体で表示されます。そちらで編集しても問題ないです。
todoテーブルのData Change、Updates onlyの時に処理を行うよう設定します。できたら次の処理を作ります。+Add a stepを選択。
AIの提案を無視してStepを作成したら、作成されたStep、Run a task、Branch on a conditionの順に選択します。ここでは処理の分岐を作っています。
Finishに書き換えられた時を判定する条件式を入れます。[_THISROW_BEFORE]を使うと変更前のカラムデータを参照できます。変更前の情報をどこかに保管しておかないと実現できないはずですが、どうやってるんだ？便利！入力したら分岐先に処理を追加します。
=and([_THISROW_BEFORE].[status]<>"Finish",[status]="Finish")
AIの提案の中に「メールを送る」がありました。あえて選ばずCreate new taskを選択。
Taskのデフォルトが「メールを送る」なので保存を押せば完成です。後で分からなくならないよう適切な名前を付けましょう。
テストしました。指定した条件の時だけメールも届きました！
デフォルトのメール設定ではテーブルの情報まで届いてしまう模様。メールの件名や本文をスッキリさせたいところではありますが、やりたいことはできたのでヨシ！
メールでできることは後程まとめます。
以上。
カラム認識範囲がおかしい場合の対処
TODOアプリを作ってます。優先順位リストを作って、ユーザに選択させたい！
テーブルをアプリに追加して、prioritylistテーブルからリストを取得、選択できるようにします！この画面で、もうちょっと下にスクロールしてButtonsを選びます。
できましｔ・・・選択肢が足りません。上のstatus選択肢は問題ないのに。
テーブル構成を見てみると正しく読み込めていません。1行目ではなく4行目のMiddleがカラム名と認識されている模様。
Regenerate Structurreで再構成したりMiddleをpriorityに変更したりしても状況は変わりませんでした。
対処法は、この部分を太文字にする！これだけ！その後Regenerate Structurreするかテーブル削除して再取り込み！
再読み込み後の画面です。カラム名priorityが認識されてます！
Relatedなんたらというカラムが追加されています。他のテーブルとの連携用に追加されたカラムと思われます。削除しても復活します！見せたくないならShowをOffにするくらいしか対策は思いつきません。
選択肢が全部でました！
以上。
パーセントと進捗表示（Percent、Progress）
Percent型のカラムをCardViewのimageに指定すると、こんな表示ができる模様。これ以外では数字表示になる模様。活躍できる場所がピンポイント。
Progress型のカラムはこんな表示になる模様。ただしこの表示をできるのはGroup by指定ができる場所と、TableView、Detail、Formに限る。Progress型で出来ることは少ない。
DetailとFormはこんな感じ。ProgressはButtons表示、PercentはRange表示にしました。
データシートはこんな感じ。
■ Percent型の入力
Range表示がオススメ。50%を初期値にしたいならINITIAL VALUEに=0.5を入力。
■ Progress型について
Empty、Quarter、Half、Three Quarter、Fullの5種類で全部です。このテキストパラメータ5種しか受け付けません。25%とか50とか1/2とか指定しても反映されません。5種類しかないので選択肢に最初から盛り込んでしまいましょう。視覚的に分かりやすいButtons表示がオススメ。半分を初期値にしたいならINITIAL VALUEに=Halfを入力。
Stack表示とDropdown表示も参考まで。
■ Progressの配色
Form画面でFullは背景色とかぶる！円が見えない！ちょっと気になる。
Format rulesでこのカラムだけ色指定してしまえば良いのでは！？やってみる。
Highright colorを設定すると小さい○が追加される模様。EmptyとFullが同じ・・・？
Fullもまぜてあげて下さい・・・
さて、Fullだけ個別に色設定してみてどうなるかを試します。ダメだったら仕様だと思って諦めるしかありません。
FullとFull以外のFormat rulesを2個つくる。
=[Prog]<>"Full"（Full以外）
※数式は分かりやすい方が良い。ifで書くと長い・・・間違いが起こりそう。
=[Prog]="Full"（Fullだけ）
できた！
Fullの配色設定。上記のFull以外の配色パターンと合わせるには、赤と赤にすれば良い！
Formの画面。矛盾無し！センスも無し！
しかし！TableViewでProgressカラムにふたつの〇が表示されると、列幅が〇ひとつ分であるため「〇...」という表示になります。上記の配色に合わせてText sizeの倍率を上げて「〇〇」が入る列幅を確保しようとしてみましたが、小さいほうの〇しかサイズアップしなくて残念バランスになる模様。上記までの説明で使っている画像は、その都度列幅を広げて表示してましたゴメンナサイ（小声）
Format rulesでHighright colorを指定しなければ何も問題なかった。
BrandのPrimary colorとは近いけど違う色にしてるので〇が見える！完全解決！
以上。
DetailビューとFormビュー
オリジナルのDetailビューとFormビューを作りたい。
デフォルトのDetailビュー。スクロールしていくとこんな感じ。カラムたくさん。
オリジナルDetailビュー。表示する項目と順序と表示位置を変えることができた！
デフォルトのFormビュー。スクロールしていくとこんな感じ。長い。
オリジナルFormビュー。編集できる項目と順序と表示位置を変えることができた！
■ オリジナルのDetailビューを作る
UX＞Brand＞Header & Footer＞Show view name in headerをOnにする。作業後は戻してもよい。
システムビューと名前を区別する。PositionをRef以外にするとシステムビューとの切り替えができる！
Use Card LayoutをOnにすると画面上部をCardビューのような画面にすることができます。設定方法は省略。
Quick edit columnsにカラムを設定するとDetail画面なのに編集することができます！設定しないカラムはそのまま表示するだけです。Column orderはカラムの表示と表示順を設定できます！全カラムを表示する必要はないのです。Sortはご自由に。
Display modeは後述します。カラム名とデータの表示方法を設定です。Slideshow modeはこの画面で横にスワイプして隣のデータを表示させるかどうかの設定です。Max. nested rowsは関数REF_ROWSなどを使ってリスト表示をした時の最大行数です。
Display mode。Normalはこんな感じ。Centeredは全部中央寄せ。
No headingsはカラム名が非表示、Side-by-sideは横に対表示。
Use Card LayoutがOffの場合、設定項目が少し変わります。
Main imageに設定した画像がトップに表示されます。画像の表示パターンは3種あり、後述。Header columnsに設定したカラムはトップ中央に表示されます。
Main imageの表示パターンをImage styleで設定。Backgroundは背面に表示される。Fill、Fitは後述。
Image styleのFillとFit。
上記を駆使して以下の画面が完成。Card Layoutで画像だけ設定し、Column orderでnoteだけ表示、Quick edit columnsもnoteだけ設定、Display modeでSide-by-side。
■ オリジナルのFormビューを作る
設定項目はDetailと似てます。だいたい同じ！名前だけはしっかりつける。
Row keyとPage styleは勉強中。Form styleとColumn orderはDetailと同様にカラム名とデータの表示位置と表示順設定。必須データは必ず表示しましょう。idは非表示のキーにしてあったのですが、設定を強制されました。非表示なので画面には出ない。
Save/cancel positionは保存ボタンの上下位置設定。Finish viewはSave後に表示するビュー設定。Auto saveとAuto re-openは勉強中。
以上。
Onboardingビュー
こんな感じ。BACKとNEXTを選択すると次のデータが表示されるシンプル設計。
■ つくる
各項目を当てはめます。Noneをにすると該当項目が非表示になり上に詰められます。Finish viewは最後のデータに到達したときに次に表示するビューを設定します。**Automatic**になってますが、どこが表示されるか分かりません。明示的に何を表示するか設定しましょう。
以上。
