Glideでサクッと！ 売場で役立つシフト管理アプリの作り方

# Glideでアプリ作成に挑戦
みなさま、こんにちは。
私は小売業で販売課長をしています。
デジタルを学び始めて早1ヶ月。今では業務や日常の中で、常にアイデアを探しています。さて、以前作成した「主任・課長シフトがすぐに確認できるLINEBot」が便利で私は毎日愛用しています。初めての制作物という愛おしさと無事に返答が帰ってくる嬉しさを感じています。一方、売場ではというと、残念ながら会社支給のスマホにはLINE機能が搭載されていないため、業務の中では活用できていないのが現状です。


https://qiita.com/nishia/items/d1ae5a2776bc0af92570


最近、Glideというノーコードツールを知りました。Glideは、プログラミング知識がなくても簡単にアプリ開発ができるツールです。そこでチームメンバーのために、学んだばかりのGlideを使って、売場で誰でも簡単に主任・課長シフトを確認できるアプリの作成に挑戦しました。このアプリが売場で活用されたら、シフト表を調べる時間や広いフロアを探し回る時間が削減できます。


# 完成品
![RPReplay_Final1718463784.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/36cf6836-60b5-326b-d709-1e4ce6be623b.gif)





# 使用ツール
・Glide
・Googleスプレッドシート



# 制作開始


## ステップ1: Googleスプレッドシートの準備
Googleスプレッドシートを新規作成します。
会社で使用している勤務計画をCSVデータでダウンロードし、アプリに必要なデータを加工しました。
![スクリーンショット 2024-06-13 13.19.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/2f59edd2-8ea8-c664-1a0a-3a84575af0f5.png)


## ステップ2: Glideの設定
Glideの[ホーム画面](https://go.glideapps.com/o/2SXmZgLw0qeCcd6ejaF7)にアクセスし、New Appを作成します。

![スクリーンショット 2024-06-12 14.32.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/1813abe8-646f-3af1-ad46-8be456b082a5.png)

「Start with data」の「GoogleSheets」を選択し、continueをクリックします。
![スクリーンショット 2024-06-12 14.41.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/9e62a839-3d09-ad44-5009-bc920230dcc0.png)

「Import　Google Sheet once」を選択し、continueをクリックします。
![スクリーンショット 2024-06-12 14.44.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/a2cf63df-1f46-93a6-481b-8dae0854dcfa.png)

先ほど作成したスプレッドシートを選択します。
![スクリーンショット 2024-06-12 14.51.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/a9677ee5-0975-b9f8-0453-72de91947057.png)

すると、このようなアプリがすぐに出来上がります。早い！
![スクリーンショット 2024-06-12 14.59.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/0aa8d5bd-2d8f-a8b7-a751-ac9ea04a292b.png)


## ステップ3: Glideの調整
画面右下の「ITEMS DATA」で表示方法を調整します。
勤務計画だけでは寂しいので、スプレッドシートに販促計画を加え、「Title」に「販促計画」を選択しました。
![スクリーンショット 2024-06-12 15.09.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/3503cdd3-5f3d-0b42-7d2b-ba160756d1ca.png)


## ステップ４: アプリを公開
画面右上の「Share」を押すと、QRコードとリンクが表示されるので使用する端末でアプリを開くことができます。登録したメールアドレスを入力し、ログイン用のPINコードが送られるので、メールを確認し、PINコードを入力してサインインをすると使用できます。
![スクリーンショット 2024-06-12 15.30.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/d06906df-e5e9-75b1-9b27-092e8ab84608.png)



# チームメンバーにアプリを試してもらう
作成したアプリを早速売場の方々に使用してもらい、貴重なご意見をいただきました。ご協力いただいたのは、チームメンバーAさん（50代）とBさん（60代）の2名です。お二人は、普段から積極的に意見をくれる頼りになるパートさんです。
今回作成したアプリは、①売場ですぐに確認できること②誰でも簡単に操作できること、という2つを目標に作成したアプリと伝えました。


## Aさんの感想
・すごい！これなら私でも使える。
・会議中に主任や課長を探すことがあるから、会議の日がわかるようにしてほしいな。
・セール企画がもっとわかるといいな。
・文字の大きさや曜日の色を変えたらさらに見やすくなるかも。


## Bさんの感想
・すごい！これは助かる。これを見てハンコを貰いに行けばいいんだね。
・カード企画もスマホでパッとわかるといいな。レジでカード企画を聞かれることが多くて、企画書をファイリングしているけど入っている作業台はレジから離れているから。



# フィードバックを受けて改良
【改良点①】「Title」を日付に変更し見やすく、販促計画に売場が関係する企画日を加えました。
![スクリーンショット 2024-06-12 18.44.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/d04ef582-a259-4584-54f0-4236b47755d5.png)


勤務時間に会議日程を加えました。
![スクリーンショット 2024-06-12 17.31.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/73932d39-3826-32df-6439-82c9041a8ba2.png)

【改良点②】「会員販促」のタブを増やし、カード・アプリ会員企画をカレンダースタイルでわかるようにしました。
![スクリーンショット 2024-06-16 0.28.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/649799a3-8529-1ad0-7d10-0b2a4bf41690.png)

【改良点③】画面右上の「Settings」をクリックし、「Appearance」で色をつけました。文字の大きさや色の変更はできませんでしたが、作成した日付画像をアイコンに設定しました。改良前に比べるとアプリ感も増して見やすくなりました。
![スクリーンショット 2024-06-16 0.26.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/1546a587-c34d-8758-1e00-e09db722c290.png)

アイコン画像は「canva」でテンプレートと素材を組み合わせてオリジナル画像が作成できます。無料版なので使用できるものには制限がありますが十分です。アプリを開くたびにワクワクするような可愛いアイコンを作りたくて、黙々と31日分を作成しDataに貼り付けしました。喜んでもらえますように。
![スクリーンショット 2024-06-13 12.27.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3786155/5f2e0c4c-5b7b-b9f4-1238-e5921e6ab682.png)



# まとめ
前回のCodePenでのアプリ作成では、コードの壁にぶつかり悪戦苦闘しました。しかし、今回Glideに出会ったことで簡単にアプリを作成することができました。チームメンバーにアプリを披露する際はドキドキでしたが、実際に使用してもらったところ良い反応を貰うことができとても嬉しかったです。今後も多くの人にアプリを活用してもらい、さらにブラッシュアップを重ねながら業務効率化に繋げていきたいと考えています。



# 参考資料
https://qiita.com/kiku_2005/items/953d67e6c7c75a285b32

https://qiita.com/am003004/items/526e762d69be265dccf5