無料&ノーコードでタスク管理アプリを簡単作成！初心者が知識ゼロからでも作れる！#Glide

こんにちは！
最近システム部に異動したばかりの新米で毎日〆作業に追われている、くまです。
小売の会社に勤めています。
〆作業に追われているのに作業が効率よく進まない、だから**タスクが管理しきれなくなる。そんな悪循環に陥っています。**

# タスク管理の悩み
1ヵ月前まで営業部にいたのですが、その時も本社からの指示事項、売場改善などたくさんのタスクがあり、**どれが終わってなくて、どれが何日までで、…といつもヌケモレにおびえる日々。**

・タスクを紙に書き出したり、エクセルで管理したり・・・
・チームの進捗管理もメールで報告もらい、それをエクセルで集計して・・・
と手間がかかり、もっと簡単に進捗を見える化をしたいと感じていました。

そんな中、`Glide`というアプリ作成ツールを発見！
Glideは**無料で簡単にアプリが作れる人気のノーコードツール**で、プログラミングなしでアプリが作れます。

タスク管理はどの部署でも共通の課題です。アプリをチームで活用することで効率化し、
　・ヌケモレをなくす
　・チームで見える化する事で、相互の進捗を見て協力・平準化する環境を作る
　・効率化・平準化によって生まれた時間を別の業務に割り当てる
という環境を作っていきたい。


自身も営業部の仲間たちにも活用できるようなアプリを、**爆速で作成する事も目標にしてチャレンジ開始！**
2時間でつくるぞ！！

# アプリ作成内容のイメージ
各タスクごとに各店の完了状況を登録できるように作ろうと考えました。
さらに完了報告をアプリ内で集計し、完了率を表示。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/6441a47a-4585-15c3-47f1-d1368841651a.png)
これだけ？これだけです。なぜならGlide初挑戦の初心者が爆速で作成するから。


# 完成画像がコチラ！
使用する画面は２画面のみのシンプルな構造。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/8185342f-d6dc-b6f4-4c1a-880d1a145ed0.png)

:::note info
作成したアプリの便利なポイントは、
・〆切日順に表示される
・チーム内の完了率が一目でわかる
・作業ごとに完了店舗が一目でわかる
・完了報告がボタン１つでOK
・作業の追加・削除もスマホから可能 
:::

シンプルだからこそ、チーム内の複数人で簡単に使えるのではないかと考えます。

**本アプリ閲覧用のQRコード、URLを記載します。**
> ■QRコード
> ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/2408106d-f99c-6c1a-be49-ac92954985b7.png)
> ■URL 
> https://thundering-scene-1037.glideapp.io/


# アプリ作成の簡単な流れ
`Glide`の登録からアプリ完成までの簡単な流れを紹介します。
### 使用したツール
・[Glide](https://www.glideapps.com/)
・GoogleSpreadSheet

### ①Glideの登録
　無料で簡単に登録できます。
<details><summary><font color="Green"><b>＊＊＊＊詳細はここをクリック！！＊＊＊＊</font></b></summary><br>

Glideの登録にはGoogleアカウントが必要です。
[＞＞登録はこちらから＜＜](https://www.glideapps.com/)
私も以下「独学NoCode」ページを参考にさせていただきました。
https://hikari-sedori.com/glide-60/

</details>

### ②GoogleSpreadSheetのデータ作成
次にGoogleSpreadSheet（以下スプシ）で必要なデータを作成していきます。
<details><summary><font color="Green"><b>＊＊＊＊詳細はここをクリック！！＊＊＊＊</font></b></summary><br>

今回は以下項目で作成しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/afe14458-109e-e46c-db34-aa585f939a8e.png)
D列以降は店舗名を入力しています。

</details>

### ③Glideでアプリ作成
いよいよアプリ作成に入ります。
<details><summary><font color="Green"><b>＊＊＊＊詳細はここをクリック！！＊＊＊＊</font></b></summary><br>

以下画像のように進めます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/44350056-99a3-263a-fb70-2337b83d11eb.png)

ログイン後`Google Sheets`というボタンがあるのでクリックして、`Continue`ボタンを押します。
遷移後の画面でスプシ一覧が表示されます。作成したファイルを選択してください。
これだけでもう「アプリっぽい」表示になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/a595dc6e-dcb5-9870-00ab-3352c91c7569.png)

ここから各ページの表示方法などを設定すれば、完成！！

最初にご紹介した通り、ページは２ページのみ。
・スプシの設定や調整
・表示画面の各種設定
をしていきます。

</details>

### ④Glide内でスプシの調整
日付はyyyy年mm月dd日に揃えたい、とかありますよね。
そのあたりの設定をしていきます。
<details><summary><font color="Green"><b>＊＊＊＊詳細はここをクリック！！＊＊＊＊</font></b></summary><br>

画面上部の`Date Editorボタン`（表みたいなアイコン）を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/322e8994-9314-4f29-d857-afd3f8da5070.png)
スプシが自動で取り込まれていますが、その表に移動できました。
「締切日」列の表示形式を、テキスト情報から年月日に変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/7e772d63-a399-cb1c-b46a-f03d1045ea81.png)

</details>

### ⑤表示項目やボタンの設定
スマホで表示する項目やその順番、完了報告をボタンで出来るようにする設定です。
<details><summary><font color="Green"><b>＊＊＊＊詳細はここをクリック！！＊＊＊＊</font></b></summary><br>

画面上部の`Layoutボタン`（スマホ画面のようなアイコン）をクリックします。

スマホに表示される項目には「3行の情報」「image画像1枚」を割り当てる事ができますが、ここをカスタマイズします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/0a84ddb0-9c96-0c33-0400-5dda695620c8.png)

次に表示の順番を設定します。締切日順に並べたいため以下の様に設定。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/358b303d-9f2b-551b-bda5-350087140c84.png)


次に作業名をクリックすると、作業名ページへ遷移します。
ここで作業完了をタップするだけで出来るようにしたい。
結論からいうと、画面左の`Action Text A店`を削除し`switch A店`を追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/3a7c6390-a49a-5a1c-260c-e160df9fde8b.png)
B店以降も同様の操作を繰り返します。

</details>

ここまでで、最低限の内容は網羅できました。
ただ**実用化するには、完了率も表示して進捗を一目で把握**できるようにしたい。

### ⑥Glide内で計算をする
エクセルのようにCOUNTIF関数とか使えると簡単ですが、Glideには関数は使えません。
だからと言ってスプシに関数を入れても行を追加した際に「関数のない行」へデータが反映されてしまいます。
そこで、結論としては以下の様に設定しました。

<details><summary><font color="Green"><b>＊＊＊＊詳細はここをクリック！！＊＊＊＊</font></b></summary><br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/2c308447-65b2-01d6-734b-e198a9a5ae9f.png)
方法は以下の通り。
`Date Editor`へ移動し「完了数」「店舗数」「完了率」の列を追加。その後以下のようにそれぞれに設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/2457f00b-b68e-5e9c-3e1f-7aa9a17ca66c.png)
※完了率は設定画面下部に有る`Units`項目で、「%(完了率)」を入力しています。

これで完了率も表示されるようになりました。
Glide内で使える計算式は、おおざっぱに言うと、
・列（縦）方向だと`Rollup`
・行（横）方向の場合は`Math`
が基本となるようです。これを調べるのに時間がかかりました…。

</details>

### ⑦作成したアプリの公開
Glideで作成したアプリを、「Google Play ストア」などに掲載はできません。あくまでWEBブラウザ内で使用するイメージです。
アプリはひとまず完成した為、公開の準備にうつります。
<details><summary><font color="Green"><b>＊＊＊＊詳細はここをクリック！！＊＊＊＊</font></b></summary><br>

まず、画面上部の`Settingsボタン`（6角形のアイコン）をクリック。
Settingsの一覧が出てきたら、`Privacy`をクリック。
最後に右上の`Publish`をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/43a3cc9a-b7c5-2762-5ece-5eb1a42e71bf.png)
そうすると公開用のURLとQRコードが払い出されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/2fc2bfff-16b1-fb3b-2267-c6a70082da6b.png)
これでこのアプリのURLを知っている方は、このアプリにアクセスできます。

:::note info
※セキュリティ面等で不安がある場合は`Public with email`を選択してください。メール認証が必要になります。
:::

</details>

以上で完了！！
作業の追加・削除もスマホで可能です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2667370/4057238f-f9d0-e94a-8192-6a518a22f87c.png)



# 実際に使った同僚の反応
このアプリは「タスクの見える化」「完了報告」「進捗管理」での活用を想定し作成しました。
実用性はどうなのか？改善すべき点はなにか？を把握すべく営業部のメンバーに使用してもらいました。

使用前に「自身やチームのタスク管理はどうしているか？」「タスク管理でこまっている事はなにか？」を質問し、方法や課題に対してこのアプリで出来る事と出来ない事を伝えた上で使用していただきました。

❶営業部　エリアマネージャー
　以前同じチームで働いていてお互いに忌憚のない意見を言い合える関係です。
> :o:**・良い点**
> 　・スマホからタスクを追加・削除出来るのは楽。
> 　・分かりやすい、見やすい、漏れが無くなる、時間を節約できる。
> 　・これを完全に使い込めば、作業漏れが減りかつ効率的に管理できる。
> :x:**・改善要望**
> 　・良い点の裏返しだが、完全に使い込めるか疑問。ツールが増えただけでは意味がないため、ほかのツールを殺せるほどの機能がないと厳しい。このアプリはそこには至っていない。
> 　・カレンダー表示、曜日表示、アラート機能、期限が近付くと色が変わるなど視覚的な部分も必要。


❷営業部　エリアマネージャー補佐
　初めて話をする方ですが、自分の意見をはっきりと言える方です。
> :o:**・良い点**
> 　・う～ん、特にないけど強いて言えば1日でこれが作れるのはすごいですね。
> :x:**・改善点**
> 　・そもそもの課題は管理方法ではなくどう効率化するかのハズ。これは手段でしかなく問題解決になっていない。アラートがでるとか、作業軸だけではなく店舗軸での表示をするとか、もっと意見を募って改善しないと実用化にはほど遠い。


❸営業部　店長
　元々同じチームにいてそのチームのまとめ役だった方。社歴が長く経験豊富。
> :o:**・良い点**
> 　シンプルで誰にでも直感的につかえる。
> 　メールで報告する手間がなくなるため、時間の節約になる。
> 　エリアマネージャーも管理が楽になるのでは？
> :x: :**・改善要望**
> 　チームで管理する場合、間違えて別の店舗を完了にしたりその逆もあるのでは？
> 　個人情報や企業秘密を含む可能性を考えると、この会社の方針ではムリだと思う。メール認証もあるらしいが、異動があった場合などの変更が大変。

アプリが簡単に作れることは、誰もが驚いていました。が、実務に有用かという点でまったく基本設計が出来ていなかったですね…。


# あとがき
 爆速で（2時間で）作成を目指しましたが調べながら作成したこともあり5時間近くかかりました……。
でも**方法を知っていれば、この程度なら1時間程度で作れそう。** Glideはすごい！

皆さまに意見をいただいた事で、いつの間にか「作る事が目的になっていた」と気づきました。
カレンダー表示、アラート機能などはもちろんですが、そもそもこのアプリで何を成し遂げたかったのか、私の課題設定の弱さ・低さがわかり、周囲に試してもらう事で新たな気づきがあると改めて学びました。

もうひとつ感じたことは、自身のプレゼン能力の低さ。
今の課題はなにで、解決にはこのような方法があり、そのためにこれを開発した（開発したい）、と相手に納得していただく力もないと思い知らされるキッカケとなりました。

最後までお読みいただきありがとうございました！

【参考記事】

https://hikari-sedori.com/glide-10/

https://qiita.com/ishioka-nozomi/items/5dfd20937f64e65e8e8d