PWA Advent Calendar 2019 7日目の記事です。
初アドベントカレンダーを誕生日にチャレンジしてみました。
普段は、UXエンジニアとしてシステムでの課題解決、設計、ディレクションをしています。
アイデアさえあれば、簡単にできるglideappsでサクッとPWAアプリができるアプリ事例を紹介します。
背景
弊社の福利厚生でランチの時間に炊きたてのご飯がたべれます。
おかずだけ持ってくるといいのでとても助かっています！
お米を炊く当番を決めるのに、スプレットシートで管理していました。
スプレットシートの入力→slackへ結果を投稿→今日のお米炊き担当には当選メール送信！
悩み１
スプレットシートの入力って面倒です。PCで開いて、シートに入力する（スマホのアプリも結構面倒）
悩み２
slackに今日の炊飯当番とお米の量だけ通知のため
今日は誰がどれくらいエントリーしたのかスプレットシートみなくちゃわからず
誰がたべ終わったのかわかりずらい。。。
悩み３
いつでもどこでもエントリーしておきたい！
通勤中、寝る前、打ち合わせの直前など、サクッとスマホで！
提案
エントリーが簡単にできて今日は何合炊いて何人がたべるのかわかるUIを提供する！！
アプリの事前準備
- googleスプレットシートにデータを準備する(エントリーシート、お米の量シート、今日食べるメンバーシート)
- glideappsにgoogleアカウントを連携する
glideの設定方法
glideappsも半年ですごい進化していて、気の利く機能が追加されていて上記の簡単なデータ設計するだけでアプリ作れちゃいます！UIもわかりやすく、感覚で扱えます！
ドキュメントも動画もサンプルもあってわかりやすい！
glideapps Document
`+New app`スタート！
データにするスプレットシートを選んだら初期でシートごとに取り込みされます。
エントリーする
comailシート
当日日付、名前、メールアドレス、欲しいお米の量などをセットする
当日になると、日付は色がつき、グレーの列にお米の量がセットされます。この合計がG1に表示されます。
(シートのGASの仕様は長くなるので割愛します）
###アプリの設定【LAYOUT】エントリー一覧
###アプリの設定【ADD】エントリー一覧に追加する
【LAYOUT】comailシートを参照しエントリーの詳細を表示
スプレットシートの項目をセットする
食べる量は盛りリストシートを選択リストにセットする
（アイコンもアイコンシートを参照し設定しています）
今日炊くお米の量シートを参照しタイトルにセットする
comailシートから、=comail!G1を参照
画像は適当に取ってきてURLをセット
###アプリの設定【LAYOUT】今日炊くお米の量
今日は誰が食べるのか一覧
comailシートの=comail!A２を参照(A1:J20まで埋める)
アプリの設定【LAYOUT】今日は食べる人だけの一覧CheckList
（イケてる機能）チェック付きのリストが登場！
チェックしてもらえばあと誰が食べてないかわかるようになります。
アプリの設定【FEATURES】今日エントリーした人だけ表示させる
（イケてる機能）ソートとフィルター機能が登場！
スプレットシートのGASでやろうとしていました。めちゃ便利！
FILTER と SORTを設定する
今日の炊飯当番は？
iphoneには嬉しい、ホームボタン追加アシストも付いてます。
感想
日付の選択やカレンダーから登録する機能も少し前はなかったのでGASで作ったりしていました。
データ入力の機能が強化されていてとても使いやすくなっています。
テンプレートも豊富にあり、タイムテーブルやアンケートフォーム、投票、機能もあります。
いろんな課題解決にめっちゃ使えそうです。