スピード感をもって部門別実績表アプリを制作して意識改革するぞ！（Glide編）

# 今回はスピード重視で制作！
こんにちは！デジタル初心者で小売業に務めている私は今回「Glide」を用いて店舗の予算実績表を各部門ごとに表記して部門担当者、部門メンバーが気軽に予算の進捗状況を確認できるアプリをスピード重視（1日）で制作してみました。

**前回の記事**

https://qiita.com/apemasakun0917/items/acf8c12bd725f86de434
# 完成形はこちら
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">画像編集用 <a href="https://t.co/cfs3RlI0qc">pic.twitter.com/cfs3RlI0qc</a></p>&mdash; 齋藤正則 (@pmawjmng) <a href="https://twitter.com/pmawjmng/status/1714224675906351330?ref_src=twsrc%5Etfw">October 17, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

:::note info
**＜解説＞**
①各部門の売り上げ実績と予算比が表示されている。
②部門をタップすると**売り上げ実績**/**売り上げ予算**/**予算比率**が表示される。
③**Chart title**で予算比率の進捗状況を部門ごとグラフをタップし数値確認できる。
:::
# 予算の進捗を身近にとらえる
:::note info
**＜目的＞**
日々の売り上げを計上して自部門の予算進捗を把握し、残りの期間で販売強化に向けた意識つけにつなげたい。
:::
:::note info
**＜方法＞**
Glideを使いPCで制作したデータをスマートフォンで閲覧、入力できるようにする。
:::
:::note info
**＜手法＞**
**[Glide](https://www.glideapps.com/)**
**特徴**　ノーコードで多彩なアプリを実装できるツール。初心者でも手軽にアプリを制作できる。
**Googleスプレッドシート**
アプリで作りたいデータを制作し、Glideに反映させる。
:::
# Googleスプレッドシートの準備
![2023-10-17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/289b6ff5-337e-a598-0500-fd2678b8e11f.png)

<details><summary>詳細はこちら</summary><div>
①部門・・対象部門を入力　
②実績・・現状の実績額を入力③予算金額
③予算金額・・当月の予算額を入力
④画像・・フリー画像サイトからイメージに合った画像のURLを添付する
</div></details>

# Glideの制作 #
![2023-10-17 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/aeb5e5bf-fe35-b17f-e09e-abc7647dfb47.png)
<details><summary>詳細はこちら</summary><div>

①[Glide](https://www.glideapps.com/?utm_source=user-app&utm_medium=referral)**ホーム画面右上のOpen glide**サインアップ
②**NewApp**で新規作成を行う。
③**GoogleSheets**を選択して
![2023-10-17 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/1dea7227-9730-5945-cee6-c5e25d5c59a3.png)
④**Select a file**で作成したシートを選択
![2023-10-18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/c7fc1444-2400-a531-68e2-6929847b0d12.png)


### ホーム画面 ###
![2023-10-18 (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/8cc08e42-ad99-b279-b4f2-dd3b20fa0c3f.png)

**・COMPONENTS**
①Image・・フリー画像よりURLを添付
②Collection・・Tableを選択してITEMS DATA（右側下段）を画像のように設定

### 部門画面 ###
![2023-10-18 (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/928432b0-ccc9-73d9-6302-346e9b9f4877.png)
**・COMPONENTS**
①画像のように設定

**完成**
![2023-10-18 (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/23d63eac-dd7a-cea4-4ce0-70a239f114c7.png)

</div></details>


# 早速店舗の方へ使ってもらいました！ #
:writing_hand:体験者への説明
このアプリは毎日確認してる前日までの売り上げを入力して予算の進捗確認とさらなる販売強化につなげるべく制作しました。また、パートさんまでアプリを使ってもらうことでデジタル機器へなれるためのきっかけになればと思っています。使い方としては各自担当部門の先日売上を「実績（千）」入力することで「予算比（％）」の数値が変化しグラフが変化してきます。また、グラフをタップすることで自部門以外の進捗状況が確認できます。
:ok_hand:GOODコメント
・スマートフォンアプリが身近でできるのは驚き。このまますぐに使いたい。（管理者：副店長）
・このアプリは予算の進捗管理に役に立つしパートさんも予算に対して意識を持ちます（管理者：店舗総務）
・部門全体の進捗状況がグラフと数値で確認できるのはとても便利（他部門：責任者）
・各部門の写真がとても鮮やかでよい（他部門：責任者）
・スマートフォンで気軽に閲覧できるのは手間が省ける（自部門：パート）
:point_up:WISHコメント
・自分で実績を入力すること（他部門：パート）
・スマートフォンだと画面が小さいからスワイプして欲しい（他部門：パート）
・**当日予算がわかると便利（管理者：副店長）←やってみよう！**
・時季商品（おせちやウナギ等）の予算進捗も載せてほしい（他部門：パート）
・当日の売り上げ実績速報がわかるとよい（他部門：責任者）
・今月の重点販売の進捗状況（管理者：副店長）
・荒利率の状況も知りたい（他部門：責任者）
・各部門の当日の出勤者が知りたい（管理者：副店長）
・グラフや部門を色分けできるともっと見やすくなる（家庭：長男）

# 当日予算を確認できるようにやってみよう！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">以前作ったGlideに日別予算を追加してみた✨<a href="https://twitter.com/hashtag/%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8%E3%83%A3%E3%83%BC%E3%82%BA?src=hash&amp;ref_src=twsrc%5Etfw">#チャレンジャーズ</a><a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://twitter.com/hashtag/glide?src=hash&amp;ref_src=twsrc%5Etfw">#glide</a> <a href="https://t.co/E7S3YkjhS7">pic.twitter.com/E7S3YkjhS7</a></p>&mdash; 齋藤正則 (@pmawjmng) <a href="https://twitter.com/pmawjmng/status/1716434592432046196?ref_src=twsrc%5Etfw">October 23, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<details><summary>詳細はこちら</summary><div>
①スプレットシートの追加
・縦軸を部門、横軸を日別予算を入力※日別合計予算と部門別月間合計予算を入力しておくと見やすくなる。
画像はフリー画像サイトからイメージに合った画像のURLを添付する。

![2023-10-24 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/6bb65cf4-fbd6-70db-e855-4cca99dab8e2.png)

②COMPONENTSでDateGridを選択
・COLUMNSでITEM1は部門を選択してITEM2は画像を選択しITEM3から1日から月間合計予算まで**＋Additem**で追加


![2023-10-24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3557570/13de8d85-269a-58df-b2e9-fde84172d6b3.png)

</div></details>

# 振り返り
全員アプリを個人が制作できることに驚いていたことが印象的でした。また、説明をしていくといろいろなアイデアをいただきました。実際に手に取って使ってもらうことでデジタルに触れている実感と便利なツールだと思っていただきました。また、便利にかつ操作性や見やすさを衰えることなく作り上げることの線引きが難しいと感じた。しかし、皆さんのリアクションを見ると私が思う店舗における課題にズレがなかったことも大きな収穫でした。これらの気づきと反省をもとに次の制作に活かしていきたい。