【後編】業務効率UP！！ノーコードツールのGlideで書類授受管理アプリを作成（集計とメール送信追加）

お疲れ様です。
業務効率のため日々奮闘中の事務員兼主婦です。
職場の業務効率UPとして、ノーコードの**Glide**で書類授受管理アプリを作成しました。

https://qiita.com/kiku_2005/items/8483dc00e7d1af716b94


職場の方々へ何度か使用してもらったところ、以下の追加のご要望を頂いておりました。


:::note warn
**・集計作業の方法は？**
**・メールにCCをつけて上司にも送信できないか。**
:::

今回は、さっそくこの2つのご要望に着手していきたいと思います。


# 完成品


https://x.com/kiku_2005/status/1752839082206740739?s=20



## 使用ツール
・[Glide](https://www.glideapps.com)
・[Googleスプレッドシート](https://www.google.com/intl/ja_jp/sheets/about/)


# 製作開始（集計方法について）

## １. Glideデータベースでの集計作業
作成方法は以下を参考にしてみました。

https://hikari-sedori.com/glide-12/

①画面を`Date`に切り替えます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/3e471af7-5e5c-e71d-fe2b-8a493bb6e684.png)
②`Date`のカラムを`＋`で新規追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/478e9290-8f62-7abf-6f9a-55df25bf4d0c.png)
③`Name`を受取件数とし、`Type`はドロップダウンで`Computed`の`Rollup`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/e89addf7-420f-302a-1d00-7a19d1832ac9.png)
④`Precision`はプルダウンから整数を設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/70b4cf21-d798-c0a5-eb7f-d3411d834cc9.png)
⑤`Units`に件数の「件」と入力、`Display units after number`にレ点を入れ`Save`を押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/78f337a7-68eb-b051-7f1e-686221566dfa.png)
⑥受取件数カラムの表示が整数の件数表示になりました。この要領で発送件数も同様に設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/2446209c-d93e-126b-aae2-5c0bfa02d61f.png)
⑦続いて保管件数カラムの設定です。`Name`を保管件数とし、`Type`はプルダウンで`Computed`の`Math`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/a41fc74b-3ff7-6494-54da-992084e3aa9c.png)
⑧`CONFIGRATION`に受取件数-発送件数と入力すると、`REPLACEMENTS`に自動的に表示されます。`Precision`はプルダウンから整数を設定し、`Units`に件数の「件」を入力し`Display units after number`にレ点を入れ`Save`を押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/05f171c6-090f-833f-682f-529b0b9d0e4e.png)
⑨保管件数が表示されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/e52cdf90-7c70-fa89-e6e2-3102261dacd4.png)
データベース上の表示は出来ましたが、この方法だと残念ながらスプレッドシートの方にはデータが表示されません。いつもの要領でスプレッドシートからの作成方法に切り替えてみました。


## ２. Glideでスプレッドシートの集計結果を表示させる方法

<details><summary><b>前回作成分はこちら（折りたたみ）</b></summary><div>
普段使用しているExcelデータの書式を元に**Googleスプレッドシート**を作成します。**Glide**の設定次第ではExcelをそのまま使用することも可能です。今回はサンプル授受管理表シート、マスタシート、アドレス帳シートを準備しました。

サンプル授受管理シート
![➀書類授受管理.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/9991d383-efb3-6c5f-bccd-ecdc5b3c7673.png)
マスタシート
![➁マスタ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/40bcdb8f-b7b0-e7f1-5969-55e1bc79b3ce.png)
アドレス帳シート
![➂アドレス帳.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/c951eb0f-a93f-d969-ba5c-9529f234fc26.png)
</div></details>

①普段使用しているExcelデータの書式を元に**Googleスプレッドシート**を作成します。今回は追加で使用するサンプル授受保管件数シート、総件数シートを準備しました。（こちらにはすでにExcel関数が入っています。）

・授受保管件数シート
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/49406cb8-ee42-dde0-da82-1195ac4b9a5f.png)

<details><summary><b>Excel関数についてはこちら（折りたたみ）</b></summary><div>

・繰越列には前日の保管件数
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/aa29f98b-cad9-9ac4-cf90-486aa724c3b6.png)
・受取列には授受管理表シートから受取日でカウントした件数。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/dcd2c7d1-de6c-6d40-f215-b48866bf8c6a.png)
・発送列も授受管理表シートから発送日でカウントした件数。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/33152f3a-dc35-08b5-f48c-19f80c4f3479.png)
・保管列は単純に繰越残と当日発送件数を加算したものから当日発送件数を引いた件数。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/ba81d677-8efa-4e8a-713f-767c4ee03dd3.png)
</div></details>

・総件数シート（すでにExcel関数が入っています。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/b5bc8989-1cc9-1365-7ec0-2fc20fd254af.png)
<details><summary><b>Excel関数についてはこちら（折りたたみ）</b></summary><div>

・受取件数欄は授受管理表シートの受付日をカウントした件数。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/739fdcc6-43d9-465d-7a3e-7277533a5497.png)
・発送件数は授受管理表シートの発送日をカウントした件数。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/1c2bd962-e1a0-7956-a251-740d8fb43690.png)
・保管件数は単純に受取件数から発送件数を引いた件数。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/748884fa-e519-1c9c-5112-bff3fcf06385.png)
</div></details>

②書類授受保管件数の設定です。`NAVIGATION`の`＋`を押して`Screen form data`の授受保管件数を追加します。`SCREEN`の`Source`は授受保管件数シート、`Label`を書類授受保管件数としタブのアイコンを選択、`STYLE`は`Data Grid`を選択します。`COLUMNS`は左から表示させたい順番に`ITEM1`から日付、繰越、受取、発送、保管を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/08929848-c4b9-e1c6-c2a4-a343364dd3fd.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/84319503-3860-e387-7abb-57e88e7076a8.png)

③同じく、総件数の設定です。`NAVIGATION`の＋を押して`Screen form data`の総件数を追加します。`SCREEN`の`Source`は総件数シート、`Label`を総件数としタブのアイコンを選択、`STYLE`は`Data Grid`を選択します。`COLUMNS`は左から表示させたい順番に`ITEM1`から受取件数、発送件数、保管件数を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/7beb0550-b678-31fe-071d-8c86f977185b.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/a91a4f0d-834a-3c0f-dca2-36fe858ed6b9.png)

# 製作開始（メール送信について）
## １. メール送信にCCを設定する方法

①メール機能追加方法です。コンポーネントの中から`Contact Form`を選択し`Title`を書類到着メールと書類発送メールとしました。前回、スプレッドシートに準備してある名前、アドレス、メッセージを選択していましたが、こちらはあくまでもスプレッドシート入力フォームの設定部分なので、簡素化するためアドレス入力部分を外しました。ここからさらに、`AFTER SUBMIT ACTION`で`Send email`の設定をプラスします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/2cb3b963-05f3-b36f-5cd3-b10f45bfc14e.png)
②`CONFIGURE ACTION`で`Send email`を選択。`To`に送り先のメールアドレスと`Cc`に所属上長のメールアドレス、`Subject`に「書類到着メール」と`Body`に「書類到着しました！」のメッセージを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/bbb7a43c-3d4e-cfcb-44b4-9876fa853a1d.png)
これでスプレッドシートとメール送信が同時に可能です。
あわせて、１clickで送信できる方法もご紹介します。

## ２. １clickでメール送信する方法
①コンポーネントの中から`Button`を選択、`Style`は`Basic`を選び、`ACTION`を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/c3523b01-731d-489b-b8a0-9d6c96af73c5.png)
②`Title`を書類発送メール、`Icon`を選びます。ここからさらに、`Show notification`で`Communication`の`Send email`の設定をします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/09d7f6a7-8870-b9a3-8d3a-56557670b51b.png)
③`Send email`の`To`に送り先のメールアドレスと`Cc`に所属上長のメールアドレス、`Subject`に「書類到着メール」と`Body`に「書類到着しました！」のメッセージを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/95059e0d-1362-415b-8f09-8da3d6649faa.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/4de103e5-976d-e354-aa01-1dcb0e3c923a.png)
④Glideでも簡易的な文であれば送信できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/4cfe4040-3fab-b86b-fd8d-08ebf6d294cf.png)
もし、長文を送信したい場合は**Zapier**などで連携させる方法もあるようです。

##  今回の気づきポイント
リンクさせる機能を発見したので設定してみました。
コンポーネントの中から`Link`を選択し、`Link to`にリンク先のURLを設定します。スタイルを`Row`にして、タイトルを「書類到着メール」とします。`Caption`にアプリ表示させるメッセージを入力し、アイコンを設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/77d80556-00d9-e73a-3c53-ac81a463b503.png)
例えば社内メールなどにリンクさせれば、通常のメールが送信できますね。

# 試作品を使用してもらった感想
再度、職場の上司、同僚、お隣の部署の営業担当の方にも使用してみてもらいました。
【上司】集計表もいいね！
【同僚】すごい時短ですよ！入力1分もかかってないです。記入したり印鑑もらいにいったりするの時間かかるんですよね。
【営業担当】メールも送れるようになってるし、わざわざ事務所に戻ってからやらなくてもいいから楽だわ。入力するのも簡単だもん。
との事でようやくほぼOKを頂きました:raised_hands_tone2:

せっかくなので、全国にある他部署にも説明をしてみました。
【他部署】ほんと面倒な作業で困ってるわ。これで残業増えたりする人もいるし、楽になるのは助かるわ。デジタル化するなら頑張って！
との事で応援して頂けました！感動:flushed:やはり、他の地域でも困り事になっていました。


# 感想
今回は遠くにいる他部署の方々にも感想と応援も頂けて、本当に報われた感じがしました:joy:この現場の声を、業務改善として提案していきたいと思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/19cf28e5-1db5-abdd-fe9b-26445ac678a8.png)


# 参考資料

https://nocodeblog.site/free-no-code-app-development-tool-glide/#emailssent

https://note.com/shinya_matsui/n/ned25b7fc4ec8

https://www.youtube.com/watch?v=XL7RHhF_Z5s

https://hikari-sedori.com/glide-39/#GlideButton

ここまでお付き合い頂きまして、ありがとうございました。