AppSheetMemo

AppSheetを使ったスマホアプリ開発メモ。画像メインなのでPC閲覧推奨。

TODOアプリを作る

TODOアプリをまじめに作ります。作業の状態、重要度、作業期日、カレンダーで期日確認、管理者画面で表示/非表示の切り替えと行削除、詳細が欲しいのでメモ書きを追加、指定した条件でメール送信する機能を考えてます。

 

完成画面スマホ版こんな感じ。

f:id:tanaka0:20211004095707p:plain     f:id:tanaka0:20211004095720p:plain

 

f:id:tanaka0:20211004095730p:plain     f:id:tanaka0:20211004095740p:plain

 

メインテーブルはこんな感じ。insert_dateはいらないかも・・・

f:id:tanaka0:20211003102553p:plain

メモ書き用テーブル。

f:id:tanaka0:20211003102601p:plain

 


 

■ 各画面を作る


Slicesで表示フラグがONのものだけ表示するやつを作る。数式は[visible]だけ入れればOK。

f:id:tanaka0:20211003103956p:plain

 

メインのビューを作り、さっき作ったSliceを設定します。2行以上表示されてもレイアウトに違和感が殆どない(と思う)Cardビューを使います。好みによって変えて下さい。

f:id:tanaka0:20211003110522p:plain

 

ソート、グループと集計、レイアウトを決めます。Action部分は全部Noneです。

f:id:tanaka0:20211003111932p:plain

 

メモリストのビューはrefにして隠します。View Optionsの説明は省略!

f:id:tanaka0:20211003113648p:plain

 

管理者用画面を作ります。まだ開発段階ですのでアクセスしやすい場所に表示しておきます。開発がひと段落したらPositionをmenuにしましょう。「N」と「Y」と表示されていますが、後述のグループ分けで[visible]を指定することでこうなってます。後で変えられます。

f:id:tanaka0:20211003120524p:plain

 

レイアウトを同じように設定し、管理者画面用に削除を追加。

f:id:tanaka0:20211003121305p:plain

 

・・・最初にやっておくべきでした。画面を乱発するので、現在どの画面なのかを確認できるようにします。開発中だけでも構いませんので設定推奨。

f:id:tanaka0:20211003155338p:plain

 

Detail画面を作っていきます。todoテーブルとmemolistテーブル連携用のバーチャルカラムをtodoテーブルに作ります。名前はmemoとしました。赤丸以外は変更不要。

=ref_rows("memolist", "todouid")

f:id:tanaka0:20211003161921p:plain

 

ビューを作ります。要らない情報が多い!減らします。

f:id:tanaka0:20211003155344p:plain

 

滅茶苦茶スッキリしました。これで連携も出来てるので、Addを押せばmemoを無尽蔵に書き込めます。管理者表示用のDetailも同様に作ります。(省略)

f:id:tanaka0:20211003161853p:plain

 

メモ用のDetailを作ります。また要らない情報を削ります。

f:id:tanaka0:20211003163305p:plain

 

滅茶苦茶スッキリ!

f:id:tanaka0:20211003163746p:plain

 

Form、編集画面を作ります。この辺は定型の文字を選ぶだけなので、選択肢にします。

f:id:tanaka0:20211003164939p:plain

 

[visible]は「N/Y」だと分かりにくいので、「非表示/表示」に変更します。

f:id:tanaka0:20211003165410p:plain

 

statusを選択肢から選べるようにします。「Ongoing/Stop/Finish」を用意。

f:id:tanaka0:20211003170438p:plain

priorityも選択肢から。「Low/Middle/High/Top」を用意。

f:id:tanaka0:20211003170819p:plain

 

その他、INITIAL VALUEにvislbeはtrue、statusはStop、priorityはLowを設定、全部必須入力にしました。選択肢が大きいので、Dropdownの方がスッキリするかもしれません。

f:id:tanaka0:20211003171252p:plain

 

contents部分には長い文章を入れる部分なのでLongTextに変更。改行も可。

f:id:tanaka0:20211003174111p:plain

 

Googleスプレッドシートのセルに入る最大の文字数が50,000とのこと。画面上でも、あまりに長い文章が入力されてしまうと見づらくなるので、ある程度の制限は必要と考えます。memolistのmemoにも同様の制限をかけましょう。

f:id:tanaka0:20211003173148p:plain

 

画面を作ります。管理者用画面も同様に作成します。

f:id:tanaka0:20211003201331p:plain

 

こんな感じで編集できる項目を追加します。管理者画面ではvisibleとinsert_dateを追加します。

f:id:tanaka0:20211003201340p:plain


memolistの編集画面も作ります。memoはLongTextに、最大文字数を500にしました。

f:id:tanaka0:20211003203007p:plain

 

importanceも選択肢から。「Normal/Caution/Important」を用意。INITIAL VALUEはNormal。

f:id:tanaka0:20211003203019p:plain


画面の配置。

f:id:tanaka0:20211003204004p:plain

 

必要なヤツだけ表示。

f:id:tanaka0:20211003204315p:plain

 

カレンダーを作ります。

f:id:tanaka0:20211004155205p:plain

 

最終日だけ分かればいいので、StartとEnd両方にdeadline_dateを指定しています。

f:id:tanaka0:20211004155631p:plain

※本アプリで全く意味が無いinsert_dateをstart_dateに変更して、カレンダーで期間表示なんてできれば、よりアプリっぽいかも!とは思いますが、やりません。

 


 

■ 少し装飾


Format rulesを追加してpriorityを色で分かるようにする。Highはオレンジ、Topは赤にしてみた。コピーすると楽。

f:id:tanaka0:20211003210502p:plain

 

Importanceも同様に装飾。重要書き込みが分かりやすいかと。Importantは赤、Cautionはオレンジと下線、斜体にしてみた。やはりコピーすると楽。

f:id:tanaka0:20211003211142p:plain


一覧画面でmemoの書き込み数が分かるといいなーと考えたので実装してみた。todoにバーチャルカラムvTitleを作成。memoは関数ref_rowsでmemolistのデータを引っ張ってきています。これを関数countで数えて、0だったらタイトルをそのまま表示、0以外だったらタイトル(5)の様に表示しています。

=if(count([memo])=0,[title],[title]&" (" & count([memo]) & ")")

f:id:tanaka0:20211003212548p:plain

件数を数えるには関数selectでも出来たのでメモ。ref_rows同様リストの件数を返す模様。これらはエクセルで言うところの関数COUNTIF。便利。
=count(select(memolist[todouid],[todouid]=[_thisrow].[uid]))

titleをvTitleに変更して、memoの書き込み数が一覧画面から確認できた!上記で作ったFormat rulesも変更も忘れない。管理者画面も同様。とりあえず操作画面は完成。

f:id:tanaka0:20211003214049p:plain

 



■ メールを送る

 

statusがFinishに変更された時にメールを送信したい。

AppSheetではAutomationという機能で、指定したテーブルの挿入時、更新時、削除時とかのタイミングで処理を走らせることができる!時間指定もできる模様。Automation機能のTaskでメール送信やSMS送信もできる模様。

 

Automation>Bots>New Botを選択。

f:id:tanaka0:20211004135707p:plain

 

AIさんから処理の提案をしてくれます!やりたいことに近いものがあればそれを選んでカスタムするのが楽ですが、今回は全部手作業でやります。提案は無視してCreate a custom botを選びます。

f:id:tanaka0:20211004140820p:plain

 

Configure eventを選択してEventを作ります。

f:id:tanaka0:20211004140830p:plain

 

またAIさんから提案が出ましたが、Create a custom eventを選択。提案は全部無視します。

f:id:tanaka0:20211004140839p:plain

 

Botの中にEventが作れました!Eventは画面右部分で編集できます。ここで編集しているEventはEventsタブを開いた所にEvent単体で表示されます。そちらで編集しても問題ないです。

todoテーブルのData Change、Updates onlyの時に処理を行うよう設定します。できたら次の処理を作ります。+Add a stepを選択。

f:id:tanaka0:20211004143354p:plain

 

AIの提案を無視してStepを作成したら、作成されたStep、Run a task、Branch on a conditionの順に選択します。ここでは処理の分岐を作っています。

f:id:tanaka0:20211004143857p:plain


Finishに書き換えられた時を判定する条件式を入れます。[_THISROW_BEFORE]を使うと変更前のカラムデータを参照できます。変更前の情報をどこかに保管しておかないと実現できないはずですが、どうやってるんだ?便利!入力したら分岐先に処理を追加します。

=and([_THISROW_BEFORE].[status]<>"Finish",[status]="Finish")

f:id:tanaka0:20211004144807p:plain

 

AIの提案の中に「メールを送る」がありました。あえて選ばずCreate new taskを選択。

f:id:tanaka0:20211004145704p:plain

 

Taskのデフォルトが「メールを送る」なので保存を押せば完成です。後で分からなくならないよう適切な名前を付けましょう。

f:id:tanaka0:20211004150951p:plain

 

テストしました。指定した条件の時だけメールも届きました!

f:id:tanaka0:20211004152127p:plain

デフォルトのメール設定ではテーブルの情報まで届いてしまう模様。メールの件名や本文をスッキリさせたいところではありますが、やりたいことはできたのでヨシ!

メールでできることは後程まとめます。


以上。