一度で三度おいしい！仕事の報告ついでにサクッと資料共有もできるアプリ【AppSheet】

# 「AppSheet」でタスク管理アプリの作成に挑戦
![December.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/ca4e8074-f8f9-bfaa-82eb-e7e4befad358.png)

こんにちは！！はっちゃんです！！:sunglasses:
某小売業の本社で働いています。
全国の店舗を巡り、店舗の生産性をあげるために日々奮闘しています！！
今回は、**AppSheet**を使って、**タスク管理アプリ**を作成し、
仕事仲間の「**業務の見える化と報告手順を簡単にすること**」にチャレンジしました！！
　
(私の詳しい仕事内容については、こちらの記事で紹介しています:point_down_tone2::point_down_tone2:)

https://note.com/yuuki_1009/n/n5e5e034ea013

### :convenience_store: 店舗巡回あとの報告って面倒なのよ・・・
私の部署では、店舗現地で従業員への教育を行う専任チームがあり、
チームには8名が所属し、それぞれが週に約4～8店舗の巡回指導を担当しています。

巡回業務の終了後は、店舗ごとに巡回報告を行っています。
報告内容は、売場の実態を撮影した写真や従業員からのヒアリング内容、
チェックリスト項目の出来栄え状況をもとにして、パソコンで資料にまとめていきます。
その後、上長やチームメンバーに資料を添付してメールで報告をします。
この一連のフローだけでも、2時間以上かかってしまうこともあるんです・・・:sweat_drops:

巡回は移動時間も考慮して行動しないといけないので、
資料作成の時間を確保できず、報告業務が滞ってしまうことがあります。
さらに、上長がその進捗状況を直接確認することも・・・:disappointed_relieved:

そこで、
**①業務の進捗状況を“いつでもどこでも”確認できるようにすること**
**②資料や写真の共有と、報告連絡が一連のフローで完結できるようにすること**
を目指し、タスク管理アプリを作成しました！！
　
![Plan (3).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/3634d328-12dc-ec8b-2f35-908043711def.png)

### :thinking: ほかのタスク管理アプリとはなにが違うの？
私のAppSheetで作ったタスク管理アプリは、他のアプリとちょっと違いますよ～:relaxed:

例えば・・・
TodoistやTrelloは、タスクのリストやカンバン形式で管理するのが得意ですが、
資料を添付したり、報告をする機能はありません。
Microsoft To DoやAsanaもタスクを分けて整理するのは得意ですが、
チーム全員がリアルタイムで情報を共有する機能が不足しています。

このアプリでは、
「**タスク管理だけでなく、資料をその場で添付して、進捗状況をすぐに報告する**」
ことができます！！
また、AppSheetでアプリを作成することで、
「**使用デバイスに合わせたUIに自動で変換**」してくれるんです！！:clap_tone2:

これなら、スマホ片手にポチッと報告もできちゃいますよね！！:iphone:
　
![Plan (4).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/c2fb028b-3c3c-59af-15a3-c81f08f410ff.png)



# :computer: 実現したいこと
**1. タスクの進捗状況がわかるよう、「着手前・作業中・完了」でステータスを区別します。**
　
**2. アプリ内でファイル(資料や写真)を添付します。(Googleドライブにも自動保存)**
　　
**3. ステータスを“作業中”から“完了”に更新すると、報告メールが自動送信されます。**
　
<details>
  <summary>:hammer_pick: 使用したツール</summary>
・Google AppSheet

・Googleスプレッドシート

・Gmail

</details>

:triangular_flag_on_post:【アプリ実装後のイメージ】
![Plan (2).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/b42cbb1b-dad6-a7fe-03f8-64949deaf229.png)
　
:alarm_clock:【各作業をまとめて効率化を目指す】
![Plan (17).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/301496b1-34ab-c0c5-9edf-7eb7017b9b61.png)

# :pushpin: 完成形がこちら！
タスクがステータスごとに区別され、ファイルの添付も可能です。
Gmailへの自動送信もバッチリできました！！:incoming_envelope:

【ステータス移行とファイル添付】

https://x.com/yuukihatsugai/status/1833879461303030068

【報告メールをGmailで自動送信】
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/7ec1dcdf-2269-8a2c-47a8-5b0ca5008efe.png)






# :wrench: 実装手順
## 事前準備
### :arrow_forward: 元データとなるGoogleスプレッドシートを作成する 
AppSheetアプリには、スプレッドシートなどのデータが必要です。
“タスク”と“ドライブ”のページを分けて作成します。

:::note info
タスクページのタイトル「ID」にはデータを入力しないでOKです。
Appsheetのテーブル作成時に、「UNIQUEID()」という関数が設定され、
重複がないユニークな値（ランダムな英数字8桁）が保存されるようになります。
![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/a075a28e-7bb1-eee6-2dcb-4620c6a11dff.png)



<details>
  <summary>:book:「UNIQUEID()」関数について詳しく知りたい！ </summary>
「UNIQUEID()」関数は、コンピューターが作る「特別なID（識別番号）」を自動的に作ってくれる関数です。このIDは、誰かが使ったことのないような、他のIDとは同じにならないように作られます。

たとえば、複数人に名前を書いてもらうとき、同じ名前の人がいるかもしれません。
「UNIQUEID()」を使うと、必ず違う名前が作られるので、みんなが自分だけのユニークな名前を持つことになり、区別できるようになります。</details>

:::

【タスクのページ】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/b4e9800a-2e92-4bec-0b0e-626777ab2361.png)

【ドライブのページ】
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/2fd3602a-ba80-c798-569a-9767a51f91b1.png)

## タスク管理アプリ作成
### :arrow_forward: GoogleスプレッドシートからAppSheetを作成する  
先ほど変換したスプレッドシートを開いた状態で、
「拡張機能」メニューをクリックすると、「AppSheet」が表示されます。
「AppSheet」にカーソルを合わせて、「アプリを作成」をクリックしてください。
すると、AppSheetがサンプルデータを読み込んでアプリが作成されます！！:v_tone2:

以降、ベースとなるタスク管理アプリは以下の記事を参考に作成しました。
:point_right_tone2:[参考記事はこちらです　-Google AppSheet でタスク管理アプリをサクッとライブ作成-](https://comumag.com/column/57308/)
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/d6efa7d0-4aa0-8ac5-1a23-0ee15dcca5a5.png)


## 追加で実装した機能
### :arrow_forward: Googleドライブにファイルを保存する
「タスク」テーブル列のTYPE（データ型）を「**Ref**」にします。

「Ref」を設定すると、
「ドライブ」テーブルの「タスク」列は、
**・参照先の「タスク」テーブルを参照して、
・参照先の「タスク」テーブルの「ID」列の値を保存することにより、
・「タスク」と「ドライブ」の間で関連付けができます**

この「Ref」の設定によって、
タスクに関連するファイルをGoogleドライブに保存できるようになります。
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/1b96b552-45ae-d09f-ac43-69e249e03758.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/6385cd75-7b95-e86f-99d8-51e099b73254.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/8c66f02c-f805-fde4-3c02-967b0e6a993e.png)

### :arrow_forward: スライスでデータ(ステータス)を切り分ける
AppSheetには「**スライス**」という機能があります。
**テーブルから特定の条件に合致するデータを切り分ける**ことができます。

「着手前・作業中・完了」のステータスを区別して、各タスクを表示させます。
　
![画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/a4cbee74-d727-4125-cf17-7c8cb282ceb9.png)

![画像3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/718c3fc3-c6b1-5583-ef89-6dcfdd0b58ad.png)

### :arrow_forward: アクションでデータ(ステータス)を更新する
AppSheetには「**アクション**」という機能があります。
**アプリ画面上のボタン操作ワンクリックで、ステータスを更新する**ことができます。

「ステータス」列の値を
**①「着手前」から「作業中」へ更新するアクション
②「作業中」から「完了」へ更新するアクション**
を作成します。
　
![画像4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/5d2e8e65-d0c9-d7fe-3625-c6e1a240d7e1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/2bdc3a63-fc3a-1df0-28d2-bb22ce3f1cf3.png)

### :arrow_forward: AppSheet Automationを追加する
**AppSheet Automation**は、
ボット（Bot）という決められた手順で**ワークフローを定義し、実行させる機能**です。
**・アプリ上でのデータ変更（追加、更新、削除）
・スケジュール（毎日定時、毎週○曜、毎月○日など）**
をトリガーとして自動化をさせます。

アプリ上のステータスを「作業中」から「完了」に更新した際、
Gmailの所定の宛先に「報告メール」を自動送信させる設定をします。
　
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/19413843-ad24-cf5b-2b9e-34cf2a8723c7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/dc1ac012-8c63-4614-6789-a2858542c266.png)




# :lips: 実際に使ってみてどう？ 仕事仲間の声！！
実際にタスク管理アプリのプロトタイプを試してもらいましたー！:wink:
フィードバックをもらったお二人は、私の先輩にあたる方々です。

![Plan (5).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/b6a147b4-3818-55e6-3eb8-e30a2d25feaa.png)

### :loudspeaker: 使ってもらう前の説明
まず、アプリの基本的な機能と目的を説明しました。
「このアプリは、タスクの進捗状況を管理するだけでなく、資料を添付して報告も簡単にできるよう設計されています。これにより、全員が同じ情報をリアルタイムで共有できるため、コミュニケーションがスムーズになります。」と伝えました。
また、使い方のデモンストレーションも行い、アプリの各機能を一通り紹介しました。

### :ear_tone2: どんな聞き方をしたか
使ってもらった後、アプリの使い勝手や機能についての感想を尋ねました。
**◆アプリの操作は簡単だったか？
◆タスク管理や報告に役立ったか？
◆改善してほしい点や追加してほしい機能はあるか？**
といった質問をしました。また、自由に思ったことを話してもらう時間も設けました。

### :raising_hand_tone1: どんなフィードバックがあったか
![Plan (6).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/686ada51-449d-8466-ed79-305b30865fc2.png)

### :bulb: フィードバックに対して感じたこと・学んだこと
フィードバックを受けて、ユーザーの視点に立つことの重要性を改めて感じました！
作成しながら実感していたところもありましたが、
まだまだ実務レベルでは使いづらい部分があることを痛感しました・・・:confounded:
　
Oさんの使いやすさに対する評価は嬉しいものでしたが、Tさんの意見を聞いて、
**全体のタスク状況を一目で把握できるようにするための改良が必要**だと気づきました。

<font color="Red">※フィードバックを受けたあと・・・
①期日の表示が「期日超過」で赤文字、「期日3日前」で黄文字に変更されるよう修正
:point_right_tone2:[参考記事はこちらです　-AppSheet UX設定について-](https://qiita.com/shoyo0111/items/22cc3dcbff1037e942f4)  
![画像2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/79272c7a-b473-e47a-bb52-1e57f172fa56.png)



<font color="Red">②各タスクのスケジュールを一覧化するため、カレンダー機能を実装
:point_right_tone2:[参考記事はこちらです　-AppSheet でカレンダー・グラフ表示を追加しよう！-](https://www.youtube.com/watch?v=9oH6UZK2M8A) 
![30200e1c3292dbf31d9e193f33314a38 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3822788/f58bfd76-a14a-9b58-5850-3e89cd9f546d.png)


　
また、アプリ上での資料作成については、
「**アンケート形式で回答することで、自動で簡易的な資料が作成される機能**」も
実装できればより便利になると感じました！！
たとえば・・・
チェックリストの各項目を入力したら、それをもとに資料化してくれるイメージです！
Appsheetでできるかどうかは、さらに勉強しないとダメですね・・・:books:
　
今後は、**他のアプリ開発ツールも試しながら、さらなる機能実装とUI改善**に
取り組みたいと思います。
多様なニーズに応えるためには、**柔軟な設計**が必要であることを学びました！！:writing_hand_tone2:

ここまでご覧いただきありがとうございました～！！:bow_tone1:

　
【参考記事】

https://appsheet-apps.jp/appsheet/mytask-02/

https://appsheet-apps.jp/appsheet/automation-review-01/