glideappsを使ったUX/UIを改善する事例紹介：今日の炊飯当番は？

PWA Advent Calendar 2019 7日目の記事です。
初アドベントカレンダーを誕生日にチャレンジしてみました。
普段は、UXエンジニアとしてシステムでの課題解決、設計、ディレクションをしています。
アイデアさえあれば、簡単にできる[glideapps](https://www.glideapps.com/)でサクッとPWAアプリができるアプリ事例を紹介します。

## 背景
弊社の福利厚生でランチの時間に炊きたてのご飯がたべれます。
おかずだけ持ってくるといいのでとても助かっています！
お米を炊く当番を決めるのに、スプレットシートで管理していました。

スプレットシートの入力→slackへ結果を投稿→今日のお米炊き担当には当選メール送信！
![コメール図解.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73732/b396d6b6-8e9e-5afe-3709-baa57761deae.png)



### 悩み１
スプレットシートの入力って面倒です。PCで開いて、シートに入力する（スマホのアプリも結構面倒）
![kaisya_woman_bad.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73732/f9ee43dd-ad33-e0c2-7d1a-2fee0fbd1c25.png)


### 悩み２
slackに今日の炊飯当番とお米の量だけ通知のため
今日は誰がどれくらいエントリーしたのかスプレットシートみなくちゃわからず
誰がたべ終わったのかわかりずらい。。。
![woman_question.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73732/e800dae7-d5cc-3e68-0615-564e6047f814.png)

### 悩み３
いつでもどこでもエントリーしておきたい！
通勤中、寝る前、打ち合わせの直前など、サクッとスマホで！
![smartphone_nekorogaru_man.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73732/77505306-b4f7-6882-057a-769f6647ad96.png)

## 提案
エントリーが簡単にできて今日は何合炊いて何人がたべるのかわかるUIを提供する！！
![コメールHappy.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73732/1713f8c5-2c8d-fac3-d602-477f2b3a0879.png)


## アプリの事前準備
1. googleスプレットシートにデータを準備する(エントリーシート、お米の量シート、今日食べるメンバーシート)
2. glideappsにgoogleアカウントを連携する


## glideの設定方法
glideappsも半年ですごい進化していて、気の利く機能が追加されていて上記の簡単なデータ設計するだけでアプリ作れちゃいます！UIもわかりやすく、感覚で扱えます！
ドキュメントも動画もサンプルもあってわかりやすい！ 
[glideapps Document](https://docs.glideapps.com/all/)

<img width="125" alt="スクリーンショット 2019-12-06 23.32.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73732/bb4502b0-c7d1-e4ff-6b1f-a5c68791c4fd.png">
`+New app`スタート！
データにするスプレットシートを選んだら初期でシートごとに取り込みされます。

## エントリーする
comailシート
　当日日付、名前、メールアドレス、欲しいお米の量などをセットする
　当日になると、日付は色がつき、グレーの列にお米の量がセットされます。この合計が`G1`に表示されます。
　(シートのGASの仕様は長くなるので割愛します）

<img width="1247" alt="スクリーンショット 2019-12-07 1.59.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73732/08d3c624-1434-9b52-c058-1cb31dc8fa2f.png">

###アプリの設定【LAYOUT】エントリー一覧
<img width="917" alt="スクリーンショット 2019-12-06 23.31.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73732/76193154-310e-3079-484a-c195abf87105.png">

###アプリの設定【ADD】エントリー一覧に追加する
<img width="809" alt="ADD.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73732/bb728ebf-08cc-e285-a617-79846cd4b5c6.png">


## 【LAYOUT】comailシートを参照しエントリーの詳細を表示
スプレットシートの項目をセットする

<img width="806" alt="エントリー詳細.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73732/78de8241-4bd5-476c-1816-818dfdcc2a9b.png">


### 食べる量は盛りリストシートを選択リストにセットする
<img width="375" alt="スクリーンショット 2019-12-06 23.26.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73732/58da96b2-4fe8-94b4-36b9-c4436b55b849.png">

![詳細.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73732/ffff24ff-de2c-4bbb-1404-7d3dba3bd570.png)

（アイコンも`アイコンシート`を参照し設定しています）

## 今日炊くお米の量シートを参照しタイトルにセットする
comailシートから、`=comail!G1`を参照
画像は適当に取ってきてURLをセット
<img width="332" alt="スクリーンショット 2019-12-06 23.18.56.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73732/03bcaaae-3b50-cde1-ab9d-8356a44a9968.png">

###アプリの設定【LAYOUT】今日炊くお米の量
<img width="688" alt="スクリーンショット 2019-12-07 0.32.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73732/4a51366b-39cf-a194-918a-afa0545c9782.png">

## 今日は誰が食べるのか一覧
comailシートの`=comail!A２`を参照(A1:J20まで埋める)
<img width="931" alt="スクリーンショット 2019-12-07 2.23.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73732/f3a5f2a0-3735-8528-7f60-7f5dae7627b6.png">



### アプリの設定【LAYOUT】今日は食べる人だけの一覧`CheckList`
**（イケてる機能）チェック付きのリストが登場！**
チェックしてもらえばあと誰が食べてないかわかるようになります。

<img width="694" alt="スクリーンショット 2019-12-07 0.35.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73732/e6721bd9-4f84-34ea-8c10-99c1d1071a23.png">

### アプリの設定【FEATURES】今日エントリーした人だけ表示させる
**（イケてる機能）ソートとフィルター機能が登場！
スプレットシートのGASでやろうとしていました。めちゃ便利！**
`FILTER` と　`SORT`を設定する
<img width="700" alt="スクリーンショット 2019-12-07 0.46.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73732/0d47dbf0-e374-8587-e2ef-99601a498385.png">


# 今日の炊飯当番は？
iphoneには嬉しい、ホームボタン追加アシストも付いてます。
<img width="200" alt="IMG_0937.PNG" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73732/bc5dc9f0-2406-c435-f894-bd02d342838a.png">

<img width="50%" alt="ezgif-2-e4d0ff7e3d09.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/73732/2db5e913-4a9e-f1b8-60b0-896b177dd2be.gif">

# 感想
日付の選択やカレンダーから登録する機能も少し前はなかったのでGASで作ったりしていました。
データ入力の機能が強化されていてとても使いやすくなっています。
テンプレートも豊富にあり、タイムテーブルやアンケートフォーム、投票、機能もあります。
いろんな課題解決にめっちゃ使えそうです。