Help us understand the problem. What is going on with this article?

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

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

背景

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

スプレットシートの入力→slackへ結果を投稿→今日のお米炊き担当には当選メール送信!
コメール図解.png

悩み1

スプレットシートの入力って面倒です。PCで開いて、シートに入力する(スマホのアプリも結構面倒)
kaisya_woman_bad.png

悩み2

slackに今日の炊飯当番とお米の量だけ通知のため
今日は誰がどれくらいエントリーしたのかスプレットシートみなくちゃわからず
誰がたべ終わったのかわかりずらい。。。
woman_question.png

悩み3

いつでもどこでもエントリーしておきたい!
通勤中、寝る前、打ち合わせの直前など、サクッとスマホで!
smartphone_nekorogaru_man.png

提案

エントリーが簡単にできて今日は何合炊いて何人がたべるのかわかるUIを提供する!!
コメールHappy.png

アプリの事前準備

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

glideの設定方法

glideappsも半年ですごい進化していて、気の利く機能が追加されていて上記の簡単なデータ設計するだけでアプリ作れちゃいます!UIもわかりやすく、感覚で扱えます!
ドキュメントも動画もサンプルもあってわかりやすい!
glideapps Document

スクリーンショット 2019-12-06 23.32.00.png
+New appスタート!
データにするスプレットシートを選んだら初期でシートごとに取り込みされます。

エントリーする

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

スクリーンショット 2019-12-07 1.59.28.png

アプリの設定【LAYOUT】エントリー一覧

スクリーンショット 2019-12-06 23.31.06.png

アプリの設定【ADD】エントリー一覧に追加する

ADD.png

【LAYOUT】comailシートを参照しエントリーの詳細を表示

スプレットシートの項目をセットする

エントリー詳細.png

食べる量は盛りリストシートを選択リストにセットする

スクリーンショット 2019-12-06 23.26.05.png

詳細.png

(アイコンもアイコンシートを参照し設定しています)

今日炊くお米の量シートを参照しタイトルにセットする

comailシートから、=comail!G1を参照
画像は適当に取ってきてURLをセット
スクリーンショット 2019-12-06 23.18.56.png

アプリの設定【LAYOUT】今日炊くお米の量

スクリーンショット 2019-12-07 0.32.46.png

今日は誰が食べるのか一覧

comailシートの=comail!A2を参照(A1:J20まで埋める)
スクリーンショット 2019-12-07 2.23.15.png

アプリの設定【LAYOUT】今日は食べる人だけの一覧CheckList

(イケてる機能)チェック付きのリストが登場!
チェックしてもらえばあと誰が食べてないかわかるようになります。

スクリーンショット 2019-12-07 0.35.43.png

アプリの設定【FEATURES】今日エントリーした人だけ表示させる

(イケてる機能)ソートとフィルター機能が登場!
スプレットシートのGASでやろうとしていました。めちゃ便利!

FILTER と SORTを設定する
スクリーンショット 2019-12-07 0.46.11.png

今日の炊飯当番は?

iphoneには嬉しい、ホームボタン追加アシストも付いてます。
IMG_0937.PNG

ezgif-2-e4d0ff7e3d09.gif

感想

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

tam-midori
システム開発(基幹系、制御系、windowsアプリ、Androidアプリ)など、一通りプログラマーとして経験。webが一番すきなのでシステムエンジニアとテクニカルディレクターを経てUXエンジニアしています。
tam-tam
TAM はパートナー型デジタルプロダクションです。
http://www.tam-tam.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away