【AppSheet】ノーコードアプリを作って業務効率化してみた

こんにちは。
IT未経験のデジタル成長記録Vol.3です:fist_tone1:
今回は、ノーコードアプリの開発で業務を効率化してみました！

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">不正駐輪チェック、本当に本当に手間すぎたからアプリ化した‼️<br>これならおじいちゃんたちも使えそう（？）<a href="https://twitter.com/hashtag/protoout?src=hash&amp;ref_src=twsrc%5Etfw">#protoout</a> <a href="https://t.co/dirQiKLorS">pic.twitter.com/dirQiKLorS</a></p>&mdash; れれ (@tezukar9) <a href="https://twitter.com/tezukar9/status/1819048713308012782?ref_src=twsrc%5Etfw">August 1, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# １．イヤーな業務がいっぱい
今回の業務効率化を考えながら、思わず後回しにしてしまう業務を洗いだしました。
* [ ] **ひたすらボタンをポチポチして丸つけする業務（30分程度）**　
* [ ] **紙に書いてからデータにする業務（40分程度）**　
* [ ] **取引先からきたデータをひたすら保存する業務（1件あたり2分）**
* [ ] **ひたすらコピペを繰り返す業務（1分）**

一旦私の周りで見つけたイヤーな業務はこれくらいだったのですが…
これ、見てるだけで冷や汗が止まりません💦

今回はこの中で、1番時間のかかっている **紙に書いてからデータ化する業務** を効率化していこうと思います！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/5a6fc881-8879-8970-093b-f0224c733436.png)

<details open><summary>紙→データ化業務の詳細 </summary>

**駐輪場不正駐輪チェック** で実施する業務なのですが、私たち **管理スタッフ** と **警備スタッフ** の2チームで毎月4回行っています。

1. 外にある駐輪場まで行き、不正駐輪（許可なしor期限切れ）している自転車があったら自転車の情報を紙の台帳に記入
2. 自転車を施錠し写真撮影
2. 事務所に戻ってExcelに転記+写真をPCへ移行

この作業は複数名で実施しているので、**手書きが故に確認の手間**が発生します😢
（字が達筆すぎて読めない、0なのか6なのか分からない　など…）
</details>


# ２．効率化しちゃおう！
何をどうやって効率化する？というところですが、今回はこの **『紙に書いてから』** という部分をなくしたいのですが…

PCを持って行って入力するのは大変だし…
スマホでできたらな…
ということで探していると、**AppSheet** なるものを見つけました！

> **AppSheetとは**
誰でも簡単にアプリを作成できるノーコード開発プラットフォームです。 ノーコード開発は、プログラミングの知識やスキルがなくても、アプリケーションやWebサービスを開発できる方法です。

アプリが作れるのか!!
ということで、**AppSheet**で簡単にアプリを作っていきます!!

 **★使用ツール★**
  * [ ] **Googleスプレッドシート**
  * [ ] **AppSheet**
  * [ ] **スマートフォン**


# ３．作り方

### 1⃣ Googleスプレッドシートで元となるデータを作る
今回はこれらの情報を入力できればOKなので、簡単に表を作っていきます。
 * [ ] 日付
 * [ ] 防犯登録情報
 * [ ] メーカー
 * [ ] 色
 * [ ] 特徴
 * [ ] 撤去理由（許可シールなし・期限切れ）

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/ba59fa15-1c93-4ae9-a3ad-fcd2d3547e51.png)

### 2⃣ AppSheetを開いてみる
Googleスプレッドシートのメニューバーより **拡張機能 > AppSheet > アプリを作成** の流れで進みます

![tempsnip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/035872bb-f6c6-1fdd-8b1f-999957c1c916.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/845de425-7f6a-067c-668d-2ace483d36ea.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/09890164-f2b2-9e8c-6770-00793fb01dce.png)

### 3⃣ 共有してみる
早速アプリを共有してみます！
AppSheetの右上にある人ボタンをクリック > **Copy sharing links** をクリック > **Install Link**のURLを送ればOK!!

![tempsnip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/288fa2c4-3728-c794-de57-01264f87dbf0.png)

![tempsnip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/729811af-d3c4-cb3e-4279-1e712f43f689.png)

# ４．使ってみてもらった
実際に駐輪チェックで使ってみてもらいました💡
【利用者】60代　総務スタッフ、50代　警備スタッフ　計2名

紙をアプリにしました！と伝えたところ、
**「え…難しいんじゃないの？」** との一言！
「いえいえ！書いてある内容を入力するだけです！」と伝えて何とか使っていただき、フィードバックをいただきましたので、一部抜粋紹介です💮

:::note info
  **良かった点**
 ・携帯で完結できて良い!!
 ・紙に書いてデータに起こす手間が省けて最高
:::


:::note alert
 **改善してほしい点**
 ・入力が決まっている単語など、選択式だと嬉しい
 ・ないと困る情報は入力必須にした方がいいのでは？
 ・写真だけ個別で送るの面倒くさいなぁ
:::

やっぱりフィードバック大切ですね😢
いただいたフィードバックをもとに、改善もしてみました!!
 
<details><summary>選択肢を作る!! </summary>

撤去理由は『許可シール無し』か『期限切れ』の2つしかないのに、ここに毎回テキスト入れるの面倒…
なので選択肢を作ります!!:raised_hand_tone1:

1. **NAME** の左横にある鉛筆マークをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/73121fe4-9f83-74f5-36ee-ba6addfe100c.png)

2. **Type** で **Enum** を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/931ed2c3-dc53-667c-fa57-f47aa624e630.png)

3. **Type Details** の**Values**に追加したい項目を入力
　※欄を追加したいときは **Add**をクリックすると追加されます:point_up_tone1:
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/d8d8fe35-d0d3-e086-23be-f4a927179869.png)

</details>

<details><summary>入力必須にする!! </summary>

入力を必須にしたい場合は、**Require?** にチェックを入れます

![tempsnip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/448c81e6-4be9-f2f8-1ccb-5185a3e28ccd.png)

</details>

<details><summary>写真を追加できるようにする!! </summary>

1. スプレッドシートに戻り、撤去理由の右隣列に **写真** と入力します
2. AppSheetに戻り、スプレッドシートの情報を反映させるため、右上のリロードをクリックします

![tempsnip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/2a287381-ccec-3a9e-33d6-ae9b81410d7c.png)
3. 写真の行が追加されたので、写真を登録できるように **Type** で **Image** を選択して**Done**をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/ca4fdda3-e7f6-f5f3-0d0f-c0268d1f48b4.png)

</details>

# ５．最後に
今回身の回りの嫌な業務を洗い出してみて、普段から業務の断捨離をうまくできてないんだということに改めて気づかされました…💦

今回はプロトタイプを **「実務へ携わる人に使ってみてもらいたい」** という思いがあったので、フィードバックをもらってよりよいモノが作れたのではないかなと大満足です。（やはり自分で気づけないところが多いなぁとしみじみ…）

最初から完璧を目指すのではなく、周りからフィードバックをもらってみんなで完璧を目指していきたいです:fist_tone1:

![11316_color.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3800463/2c20c9a6-6798-ac68-b6e3-53b25d3952df.png)

それではまた次の記事でお会いしましょう～～!!:wave_tone1: