管理表アプリをGlideとGoogleスプレッドシートを使って作成してみた。

おつかれさまです。
金融業界で働いている事務員兼主婦です。
前回はLINE Botで体温チェック判定できるものを作ってみました。


https://qiita.com/kiku_2005/items/472791aab7dfe6d4e3af


今回は、日々職場で頭を悩ませている手作業管理業務を実際にデジタル化できないものかと色々調べてみました。

# Let'sチャレンジ！GlideとGoogleスプレッドシートで管理表アプリ作成
職場では書類授受管理、鍵管理、入退室管理、発送管理と様々な管理が紙に手書きの作業で行われています。この作業を簡単にデジタル化できそうな**Glide**を使用して、今回は試してみたいと思います。


# 完成品



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




## 使用ツール
* Glide
https://www.glideapps.com/
* Googleスプレッドシート

# 製作開始
## １. Glideに使用するGoogleスプレッドシートを作成
普段使用しているExcelデータの書式を元にGoogleスプレッドシートを作成します。**Glide**の設定次第ではExcelをそのまま使用することも可能です。今回は一気に４種類の管理表を作成したので４つのシートとマスタシートを準備しました。

➀授受管理表
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/31c588e1-5675-9840-49b4-9059dc7ca564.png)
➁鍵管理簿
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/01129b64-5ca2-3bfe-ecec-9d126c434991.png)
➂入退室管理
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/e031e096-2076-f011-42ae-ea7317682763.png)
➃発送管理表
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/dd746d75-af19-ef5a-0cc7-3f71b551ed6d.png)
マスタシート
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/f2eb724d-dfb9-fc02-5305-da35ed263a2a.png)



## ２. Glideの設定

基本的な使い方は下記を参考にしました。


https://hikari-sedori.com/glide2/

`＋New app`を押して新規作成。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/d0371d6d-7f92-4864-d42c-fee5b4e2c2b3.png)
名前を付けてモバイル版かＰＣ版かを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/14f5583d-7080-0f3e-b28c-20c898a53bb3.png)
連携させるソースを選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/a4f41719-54da-b6af-b5bf-a9edb1a46e8e.png)

今回は➀「授受管理簿」➁「鍵管理簿」をＰＣ版に、➂「発送管理表」➃「入退室管理表」は事務所入口で使用するためモバイル版で作成してみました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/45c4336e-5a1d-341e-b73a-b14b86927124.png)


### ➀授受管理簿（ＰＣ版）
* 日付＆氏名を検索しやすいように`List`スタイルで表示させるようにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/8607e0bc-e202-5051-c2f2-7c4c786658a2.png)
<details><summary><b>詳細設定（折りたたみ）</b></summary><div>

* `＋Add`を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/8607e0bc-e202-5051-c2f2-7c4c786658a2.png)
* 受付日は`Date`コンポーネントを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/da3e8934-c2f8-4f99-d931-47b61c74d2c7.png)
* カレンダーが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/6b2ac1a6-9e57-b4ca-b175-212e3fd6278b.png)
* 書類種類はたくさんあるので`Choice`コンポーネントを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/cd60cd9e-ecde-d1d4-3d6f-daed939ce9f6.png)
* 書類種類はマスタシートから`Dropdown`できるようにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/fd2d804a-5033-9328-214e-4e69dc065f14.png)
* 氏名は直接入力。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/684555cb-62dc-4bc7-06f6-14db7b9874bb.png)
* 経路も`Choice`コンポーネントで右下の`Crips`設定にしてマスタシートから選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/5175aa6d-ecb6-b6da-4eb0-d9d71d7f7d07.png)
* 受取担当者もマスタシートから`Dropdown`できるようにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/8d2ddb17-7173-8be7-5152-a983b3cfc889.png)
* 保管場所も`Choice`コンポーネントで右下の`Crips`設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/5dc48dc1-ea23-0d25-2822-791554a54e33.png)
* 発送日は`Date`コンポーネント選択してカレンダー表示。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/98acd5a5-3a6a-10dc-c3d6-8aacc0c1248b.png)
* 発送担当者もマスタシートから`Dropdown`設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/8fcce3ef-4d49-d0df-a244-a91a5921e780.png)
* 送付先も`Choice`コンポーネントで右下の`Crips`設定にしてマスタシートから選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/160b56a2-1345-d9e8-9ca0-05df0f9cb6ee.png)
* 発送経路も`Choice`コンポーネントで右下の`Crips`設定にしてマスタシートから選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/a2e05b9d-9d5c-f812-1450-3a193370f38b.png)
* 提出ボタンを押すとリストが増えました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/6f8759fc-9472-5200-5652-612fd538ecae.png)
* Date表示でも確認できますが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/ad7e63b5-4e59-af1c-a7a7-3f1f93a2eaf2.png)
* スプレッドシートも追記になりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/dc9eba83-c9c6-f187-c69b-53277f1b51ac.png)

</div></details>

### ➁鍵管理簿（ＰＣ版）
* `Data Grid`スタイルで表示させるようにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/a244e05e-0bc6-a7b7-c55c-4c0008572acb.png)
<details><summary><b>詳細設定（折りたたみ）</b></summary><div>

* `＋Add`を押します。NO.は直接入力。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/a8e19bbe-0f2f-0556-f95e-2d7dc7e53bbb.png)
* メーカーも直接入力。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/5cce98f9-0aca-fafb-e877-50623f82abc3.png)
* 使用場所は`Choice`コンポーネントで`Dropdown`設定にしてマスタシートから選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/ab77f359-872b-b89f-56d0-f867d6dfbfd4.png)
* 管理者は直接入力。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/8e3efde4-b7ba-8a10-3e5f-6492d6b6ed2d.png)
* 保管場所も`Choice`コンポーネントで`Dropdown`設定にしてマスタシートから選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/9463df1e-0c33-2015-a1ab-4f80c032225a.png)
* 授受日は`Date`コンポーネント設定してカレンダーを選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/6b533cf9-04d2-21a8-63fc-c72b092f43ec.png)
* 提出ボタンを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/fc01af9e-222a-58d8-ae4e-0ef508d25f9a.png)
* Dataが送信されリストが増えました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/ec5fc1c3-e21a-d368-2ec3-fdfa8a9f4961.png)
* Dataでも確認できますが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/419b2fba-62f2-f461-6094-963b0f1f6fec.png)
* スプレッドシートも追記になりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/f1ed8c50-8809-cf6c-4d58-346026331bfc.png)

</div></details>


### ➂入退室管理（モバイル版）
* レイアウトがモバイル版になります。毎日の付け忘れ防止に`Checklist`スタイルで確認できるような表示にしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/fb774c18-0e3f-4fd3-4cb6-54008125229e.png)

<details><summary><b>詳細設定（折りたたみ）</b></summary><div>

* `Add`ボタンを押します。日付はカレンダー選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/58940526-6ce6-b36b-57b4-f4715f9d4130.png)
* 解錠時間は`Date Time`コンポーネント設定してカレンダー選択の後に時間設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/0d73984e-fd4d-d701-4d8f-30c8ea5158d1.png)
* 氏名は直接入力。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/b05105db-12e7-9d48-6e8d-12552ab58851.png)
* 施錠時間は`Date Time`コンポーネント設定してカレンダー選択の後に時間設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/b7967123-b8bb-615e-5216-c59449232d02.png)
* 氏名は直接入力して、提出ボタンを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/43e24209-4591-4248-dbaf-9ef2f17a3e36.png)
* Dataが送信されリストが増えました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/141998bc-dc6f-25cb-e716-fe19d316795d.png)
* Dataでも確認できますが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/745e54ee-0fec-a8ce-d0f6-f2bbae1e9872.png)
* スプレッドシートも追記になりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/d868133f-0dbd-c1cc-4a4d-9b17df832417.png)

</div></details>

### ➃発送管理表（モバイル版）
* レイアウトがモバイル版になります。`Data Grid`スタイルで確認しやすい表示にしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/c66dd507-b1cf-e000-0937-4ca626a75af1.png)


<details><summary><b>詳細設定（折りたたみ）</b></summary><div>

* `Add`ボタンを押します。日付はカレンダーで選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/c6fb4a12-2b3c-9559-977c-163837d0d8e8.png)
* 発送担当者は直接入力。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/91f52de2-a83c-51ec-4b9c-5bed590678d5.png)
* 数量は直接入力。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/54327c16-e197-edc2-4713-d5eb2cb80018.png)
* 受取担当者は直接入力。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/f2eabfbb-3a0a-ec32-ce28-3504a96b1fa2.png)
* 時間は`Date Time`コンポーネントを選択し、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/092b61e8-b7c4-1021-6101-d6d31a8e8f78.png)
* カレンダーから日付と時間を入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/e54a4052-1214-18cd-b09e-7b9d81f16542.png)
* 提出ボタンを押す。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/251bc85c-c724-b018-fa3d-6223584161f2.png)
* Dataが送信されリストが増えました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/5e3ee4da-ebbf-0314-77b6-c259c80888b9.png)
* Dataでも確認できますが、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/7788d273-5b23-6e58-ad11-12da033350df.png)
* スプレッドシートも追記になりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/97860da8-b25a-a8fb-6df4-e8551d8868dd.png)

</div></details>

# 作成のポイント
日付と時間の表記については**Glide**も**Googleスプレッドシート**も設定が必要でした。

**【Glide】**
* Data画面の日付のプルダウンを押して`Edit`を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/42c2720a-152b-d640-4720-36468883ddcc.png)
* 日付だけ表示されるように`Date only`を選択し、今回は長さを `Short`にしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/8cafca08-e1a9-fe04-445e-1ce6b394d4b2.png)
* 時間も同じようにプルダウンを押して`Edit`を選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/64bb8fe1-00a8-3636-134a-98cd644566cd.png)
* 今度は時間だけが表示されるように`Time only`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/49682784-6c52-d6e8-99bc-0fe84d2cdb6a.png)

**【Googleスプレッドシート】**
* 日付と時間の列は表示形式の詳細設定を忘れずに。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/6252d074-2ed8-81d7-6393-65f0212843d7.png)
* 時間は秒数まで表示されてしまうので、カスタム日時を選択して、見やすいように設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/2b139cad-973b-8fd6-e765-06e649d40d93.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/c46d0b1c-1695-faad-8517-5b91f74de89e.png)


# 感想
新しい試みだったので調べるのに時間がかかりましたが、とても簡単に作成できてました。これなら誰にでも簡単に扱えそうですし、色々と応用も出来そう。職場でも試作品としてご披露したところ、とても好感触でした。ただし、気になったのは実際に職場での導入が可能かというところ。今回の**Glide**は無料プランで作成しているので上限があります。また、先日初めてセミナーに参加して同じような機能を持つ**Power Apps**を知りました。次回は**Power Apps**へチャレンジして、比較検証してみたいと思います。

# 参考資料

https://qiita.com/Rs_n_ishii/items/3729293c223ed5ee2db6

https://qiita.com/murakani/items/da4355c332598f1c42d8

https://qiita.com/opa11111/items/6ea8d8382c3435a77b5c

https://qiita.com/jiko111/items/b0b3d7efc06686e8e27e



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