AppSheetを使った従業員管理アプリのプロトタイプ制作

こんにちは！小売業で働いているHaMaです。

今回は、ノーコードツールであるAppSheetを使ってスーパーマーケットの店舗従業員を管理するアプリを制作しました。
作成したアプリは従業員一覧や部署ごとの従業員一覧を表示し、新たな従業員を追加できる機能を備えています。
この記事では、プロトタイプの制作過程と、実際に同僚に使用してもらったフィードバックを紹介します。


# アプリ制作の背景
このアプリは、従業員管理を簡素化することを目的としています。
従来のスプレッドシートでは情報の更新や閲覧が手間となり、効率的な管理の難しい場面がありました。AppSheetを使うことで改善を図りました。

# 作品の紹介
以下の動画で、実際のアプリの動作をご覧ください。
<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">AppSheetで従業員管理アプリを作りました。 店舗従業員を把握でき、部署ごとにソートしてスプレッドシートに反映することで、提出物のチェックリストも作成できます。（全従業員対象のタスクがあり、管理者が誰がやっていないか把握できます）<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a><a href="https://twitter.com/hashtag/AppSheet?src=hash&amp;ref_src=twsrc%5Etfw">#AppSheet</a> <a href="https://t.co/GH4axS1fjS">pic.twitter.com/GH4axS1fjS</a></p>&mdash; HaMa (@HaMa53687932) <a href="https://twitter.com/HaMa53687932/status/1797054355692212555?ref_src=twsrc%5Etfw">June 1, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 使用したツール
+ Google スプレッドシート
+ AppSheet

# 制作の流れ
エクセルファイルの従業員データをGoogleドライブにアップロードし、拡張機能でAppSheetを作成します。
AppSheetでUIをデザインし、アプリからGoogle スプレッドシートを編集できるようにします。

## Google Sheetsへのエクセルファイルのインポート
###### Googleドライブにアクセス
Googleドライブにアクセスし、Googleアカウントでログインします。
###### エクセルファイルのアップロード
ドライブの画面で、「新規」ボタンをクリックし、「ファイルのアップロード」を選択します。
アップロード画面で、先ほどアップロードしたエクセルファイル（従業員管理アプリ.xlsx）を選択します。
###### Google Sheetsで開く
アップロードしたエクセルファイルを右クリックし、「アプリで開く」から「Googleスプレッドシート」を選択します。
これでエクセルデータがGoogle Sheets形式に変換され、編集可能な状態になります。

![スクリーンショット 2024-06-02 084701.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3756912/64ce5ebd-f67f-934b-306a-6f7ead274133.png)


## AppSheetアカウントの作成とアプリの開始
###### AppSheetにアクセス
[AppSheetの公式サイト](https://about.appsheet.com/home/)にアクセスし、Googleアカウントでログインします。
###### 新しいアプリの作成
アプリを作成したいGoogleスプレッドシートを開き、拡張機能からAppSheet→アプリを作成に進みます。

## データの構造を確認し、ビューを設定
###### データの構造を確認
AppSheetが自動的にスプレッドシートのデータを読み込み、基本的なアプリを生成します。
「Data」タブでデータの構造を確認し、必要に応じて修正します。
（今回は特にいじらなくて大丈夫です）

![スクリーンショット 2024-06-02 105852.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3756912/9c9cc031-7e95-d41f-a73f-633b9717fcbf.png)

###### 部署ごとのビューを作成:
「Data」タブの「Slices」を選択し、「+ New Slice」をクリックします。
「Slice name」には各部署名（例：農産）を入力し、「Source table」には従業員データのテーブルを選択します。
「Row filter condition」フィールドには、特定の部署をフィルタリングする条件を設定します。
例えば、管理部署の場合は次の通りです。

~~~
[部署] = "管理"
~~~

![スクリーンショット 2024-06-02 084756.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3756912/dbf0ccb0-f1f9-2623-4e91-95ba35a7689a.png)

同様に、他の部署ごとにスライスを作成します。

## ビューのカスタマイズ
###### ビューの作成
「Views」タブで「+」ボタンをクリックし、新しいビューを作成します。
「View Name」には適切な名前（例：管理）を入力します。
「View Type」は見やすいものを自由に選択します。「For this data」には、先ほど作成したスライス（例：管理スライス）を選択します。

![スクリーンショット 2024-06-02 110356.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3756912/387b26cf-8926-bf19-e265-34fcf7e13708.png)

同様に、他の部署ごとのビューも作成します。

## 従業員の修正と新規追加の設定
###### フォームの設定
「Views」タブで既存のフォームビューを確認し、新規従業員追加用のフォームを設定します。
必要なフィールド（名前、部署、役職など）が正しく表示されるように確認します。
（ここも今回は特にいじらなくて大丈夫です）

![スクリーンショット 2024-06-02 084855.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3756912/e0993e99-7343-4471-7157-e0e49721761a.png)

## スプレッドシートへの反映と印刷
AppSheetアプリから従業員データを更新すると、自動的にGoogle Sheetsにも反映されます。
部署ごとの従業員一覧がGoogle Sheetsに反映されたら、Google Sheetsの「ファイル」メニューから「印刷」を選択し、チェックシートを印刷できます。

###### 部署ごとのデータを別シートに書き出す
+ Google Sheets側の設定

メインシートとは別に、各部署ごとのデータを表示するためのシートを作成します。例えば、「管理シート」、「農産シート」、「畜産シート」など。

+ Google Sheetsの関数を使ってデータをフィルタリング

各部署ごとのシートにフィルタリングされたデータを表示するために、Google Sheetsの QUERY 関数を使用します。
例えば、「管理」シートには次のような QUERY 関数を設定します。

~~~
=QUERY(メインシート!A:D, "SELECT * WHERE D = '管理'")
~~~

これにより、「管理」部署の従業員データだけが「管理」シートに表示されます。

![スクリーンショット 2024-06-02 084720.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3756912/09325768-3341-b9e7-3760-5b18df6bbf11.png)

部署ごとのシートを選択して印刷することで、部署ごとにフィルタリングされたデータをチェックシートとして印刷することができます。

# フィードバック
実際に、作ったアプリを総務担当に使ってもらい、フィードバックをもらいました。
「今まで不慣れなエクセルで編集していたが、アプリなら直感的でわかりやすく、入力間違いも減ると感じた。」
「緊急連絡先も追加できないだろうか。」
「チェックリストのフォーマットがあると、使いまわせて便利だと思う。」

# 今後の課題
## 個人情報のセキュリティ
緊急連絡先を組み込むと、万が一の時すぐに連絡が取れて便利ですが、誰でも見られる状態は問題があると考えました。
疑似的なログイン画面を作るなどし、管理者や総務だけがアプリを使用できる状態にする必要があります。

# まとめ
AppSheetを使って従業員管理アプリを作成し、実際に使用してもらうことで多くの学びを得ました。今後はフィードバックを基にアプリを改良し、より使いやすいツールを目指していきます。ノーコードツールの利便性とユーザーフィードバックの重要性を実感できた貴重な経験でした。