勤務シフトアプリをGlideで作成してみた。

お疲れ様です。
金融業界で働いている事務員兼主婦です。
以前、勤務シフトを確認できるLINE Botを作成し好評でした。

https://qiita.com/kiku_2005/items/ac0f7762b6a26941c251



今回は、社内でも使用できる仕様にするため、管理簿アプリなどを作成したことのある**Glide**で勤務シフトアプリを作成してみました。




# 完成品



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




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





# 製作開始
## １. Glideに使用するGoogleスプレッドシートを作成
普段使用しているExcelデータの書式を元に**Googleスプレッドシート**を作成します。**Glide**の設定次第ではExcelをそのまま使用することも可能です。今回はサンプルの勤務シフト表を準備しました。

サンプル勤務シフト
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/5657c24a-a966-5e45-1984-6339483dca08.png)



## ２. Glideの設定

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

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


①`＋New app`を押して新規作成。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/0bc3ed8e-75b8-ca58-4c1d-979fbbc565b1.png)

②名前を付けてモバイル版かＰＣ版かを選択。今回は出先での使用を考慮しモバイル版で作成しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/33d52d37-ab02-174d-fe15-3d8a98c7ffb1.png)

③連携させるソースを選択する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/a4f41719-54da-b6af-b5bf-a9edb1a46e8e.png)

④SCREENの`Souce`はグーグルシートのシート名を選び、`Label`は表題に表示させたい文字を入れます。STYLEは見やすいように`Table`を選択しました。ITEMS DATAは`Title`に日付、`Description`に曜日、`image`を選択します。設定後、`Edit`ボタンを押してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/a4c9d516-a391-de38-ca09-d3b412da0da2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/042bca33-a71d-fa50-1a62-8d562e814624.png)

⑤日毎の設定です。DATAの`Title`は日付で表示させるようにし、STYLEは`Simple`を選びました。`Title`に日付、`Subtitle`に曜日を表示させるようにし、`image`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/8f5a95e6-8ee0-db44-2493-6b5aa8b62045.png)

⑥`Date`画面で表示するとこのような形になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/4b5852b3-2864-c0a6-cc29-6955af31bd25.png)

<details><summary><b>カレンダーimageの設定方法（折りたたみ）</b></summary><div>

事前に**Canva**でカレンダーを編集作成しダウンロードをしておきます。`Data`画面のimage欄はこの状態でダブルクリックすると設定画面が出てきます。Nameを`image`、Typeを`Image`に設定し`Save`します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/a377d14a-d87d-70fe-d01e-ed6b56cd80eb.png)

imageのUploadしたい欄でダブルクリックし、１つずつUploadしていくと表示されるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/b25fe39c-9616-1688-d893-73ab2413ccac.png)

</div></details>

⑦次に`Settings`の中の`Name&Icon`で`Logo`に事前に**Canva**で編集作成したロゴをダンロードしておき選択、`Name`には表示名を入れてUploadする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/1f10c09e-04cb-13fb-c208-0012275927a5.png)

⑧表示名が変わり、アイコン部分にロゴが入りました。これがサインインする時の表示画面となります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/8a47168d-19e2-0165-ed47-16d0a81d2c07.png)

⑨次に同じく`Settings`の中の`Appearance`で背景の色を設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/c85f51d7-a6c5-efb1-7b7e-8b4f70f7919f.png)

⑩次にセキュリティのため、`Privacy`で`Private`を選択し、`Users`は同じチームに属する人だけに開示できるよう設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/0f1eb2eb-763e-1646-b9dc-f18466e47a29.png)

⑪`Share`ボタンを押すと、QRコードが表示されるので使用するモバイルに読みこませることで使用できるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/63f7bd8d-b24e-6664-d155-4cef36ff3462.png)


# 今回の作成ポイント
今回はロゴやカレンダーのImage画像を入れるため、**Canva**を使用してみました。
（引用元：[Canva](https://www.canva.com/)　2024年1月7日現在）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/1022a861-6563-4ec5-fb57-7a776a070f6c.png)

サムネイルやプレゼン資料、年賀状、名刺、チラシなど、幅広く利用できます。
![スクリーンショット 2024-01-03 113534.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/46214e46-5050-18e1-2e76-ed70abe13751.png)

料金は無料でも使用できますが、私は他にも色々と活用しているので、個人向けCanva Proプラン（月額）で使用しています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3570716/89edf9b0-5e46-fdef-0644-6ce57bfef3e1.png)


# 感想
今までの試作品ではデザインを後回しにしていたので、今回ようやく少し見栄えの良いものになりました。少しずつブラッシュアップして、周囲にご披露できるまでにしていきたいです。

# 参考資料

https://qiita.com/sakura210sakura/items/ce0c42aaec80c07ab763

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



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