Google AppSheetのアプリに論理削除の機能を追加する

## Google AppSheetとは？
AppSheetは、スプレッドシートをDBとしてノーコードで簡単にアプリケーションを開発することができるGoogleのサービスです。
基本的な機能はGoogleアカウントを持っている方だと誰でも無料で使うことができますが、有償版を購入すると、オートメーション機能やデプロイ機能なども扱えるようになり、作り込むと結構奥が深いサービスです。

## 課題点
ワークフローアプリや管理アプリなどを手軽に作れて非常に便利なのですが、気になったことが1つ。
それは、デフォルトの削除機能が物理削除であることです。

例として、ID(自動生成)と内容(フリーテキスト)を登録するアプリケーションを作成しました。
下の画像のように削除ボタンを押して削除し、DBの方を確認すると、該当行のデータが物理削除され、削除した行が空欄になっています。

![スクリーンショット 2023-10-26 145308.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334459/befffda1-6d08-165c-0a5d-bcb568b81c6a.png)

![スクリーンショット 2023-10-26 164046.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334459/6ae7c76e-09f6-8713-1506-1beaec8f5d64.png)

![スクリーンショット 2023-10-26 145353.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334459/3c4bcbb8-62e0-e820-bc9e-4981b922a497.png)
これを、空行にならないよう論理削除にする機能を実装しようと思います。

## 実装
まず、DBとして使っているスプレッドシートのテーブルカラムに「削除」カラムを追加します。
初期値を0として、論理削除された場合は1にします。
![スクリーンショット 2023-10-26 152319.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334459/5a7172ef-7648-7b6c-ee74-09d34bbc92de.png)

AppSheet側で、「Regenerate Schema」を押下して、テーブルを再読み込みします。
![スクリーンショット 2023-10-26 152348.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334459/f70a813d-512e-7ca3-a61b-c5f10945efb5.png)

以下のように削除カラムを設定します。

Show?(画面にデータを表示させるか)
　→<font color="Red">オフ</font>
Initial value(初期値を設定する)
　→<font color="Red">0</font>

![スクリーンショット 2023-10-26 153953.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334459/8e75980f-56f0-47e7-ddba-e37b11e976b3.png)

続いて、Actionsで論理削除用のアクションを追加します。
![スクリーンショット 2023-10-26 154349.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334459/2ead3c77-a938-45b1-cac0-667910bc1ac0.png)


以下のように追加したアクションを設定します。

Action name(アクションの名前)
　→<font color="Red">削除</font>
For a record of this table(アクションを実行する対象のテーブルを選択する)
　→<font color="Red">対象のテーブル</font>
Set these columns(アクションを実行した際に何のカラムにどんな値をセットするか)
　→<font color="Red">削除=1</font>
Prominence(アクションボタンをどこに置くか)
　→<font color="Red">Display as primary</font>
Needs confirmation?(アクション実行時に確認ダイアログを表示するか)
　→<font color="Red">オン</font>
Confirmation Message(確認ダイアログのテキストを設定)
　→<font color="Red">削除しますか？</font>

![スクリーンショット 2023-10-26 160932.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334459/a11a9ca8-b315-e203-49f5-2d2e0d1d4e0c.png)

これで物理削除用のボタンを押すと、削除カラムの値が「1」になるように設定できました。次に、要らないアクションを非表示にします。

まず、デフォルトの削除ボタンは不要なので、DataでDeletes機能をオフにします。
![スクリーンショット 2023-10-26 161338.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334459/e21328ff-3477-aa9d-a4f3-7f510f37241a.png)

また、デフォルトの編集ボタンを非表示にしたい場合、Dataでupdates機能をオフにしてしまうと追加した論理削除のアクションも非表示になってしまいます。なのでこちらはActionsの「Behavior」部分で制御をします。

以下のようにEditアクションを設定します。

Only if this condition is true(どんな条件でアクションを表示させるか)
　→<font color="Red">false</font>

![スクリーンショット 2023-10-26 162045.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334459/8a849518-01ca-a308-b39a-8887f82a5183.png)

後は、論理削除のアクションのアイコンをゴミ箱に変更してActions側の設定は完了です。
![スクリーンショット 2023-10-27 142221.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334459/51523777-64a4-937b-74bb-5450bd1a359b.png)

![スクリーンショット 2023-10-26 162152.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334459/3d651a96-4741-c0e5-fa6d-e2c3001025d8.png)

最後に、Dataで削除カラムが「0」の行のみ表示する設定を行います。

以下のように設定します。

Security filter(どんな条件でデータを表示させるか)
　→<font color="Red">[削除]=0</font>

![スクリーンショット 2023-10-26 163726.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334459/9a3a10db-bff2-54c0-c4de-880c966d23de.png)

## 動作確認

では実際に画面を確認しましょう。

テスト2を削除します。
![スクリーンショット 2023-10-26 163952.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334459/eac0910c-28fc-fc15-0d2d-bcf0f4c98cbb.png)
![スクリーンショット 2023-10-26 164010.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334459/d65ad52b-c44a-32e0-05bc-a4a3774075e6.png)

画面上から消えていることが分かります。
![スクリーンショット 2023-10-26 164031.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334459/2e4b8e4d-8498-603c-86dd-9ce68e35cf08.png)

DBを確認すると、正常に論理削除ができていました！
![スクリーンショット 2023-10-26 164045.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3334459/153309cd-a889-85ee-d5c1-2d18b5334206.png)
## まとめ
いかがでしたでしょうか？
AppSheetはローコード・ノーコードのサービスのため、ある程度デフォルトの機能に従う必要がありますが、今回のような少しの工夫で結構フレキシブルに対応が可能そうです。
皆様もAppSheetで論理削除を実装する機会があれば、ご参考にしていただけますと幸いです。