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

ノーコード開発(AppSheet)で毎日している検温をアプリで管理&可視化してみる

はじめに

新型コロナウイルス感染症(COVID-19)対策で、毎日検温をしている皆さんこんにちわ!
毎日検温手間ですよね、検温はいいんですけど、紙やスマホのメモアプリに記録するのが手間です。

なにか、簡単に記録出来て可視化もできるアプリないかなあ…
はい、Appsheetでアプリ化~(雑な導入)

体温を記録し可視化するアプリがAppsheetなら簡単に作れます!
体温記録表のカテゴリのみスプレッドシートで作れば、アプリ作成はほとんどAppsheetがやってくれるのでほんとに簡単です。

対象読者

第一回:AppSheetを使って爆速で在庫管理アプリをスマホで動かしてみる。
https://qiita.com/Gerbera/items/dc66e689306061191ebe
を見てからだと分かりやすいと思います。
アカウントの設定方法など基礎的なものも含まれているので。

ちなみに今までAppsheetで作ったもの

第三回:AppSheetで作った在庫管理アプリに、製品一覧へ新しい製品が追加されたらメールで通知する機能を追加してみる。
https://qiita.com/Gerbera/items/5fbc0361914bff682052

第二回:AppSheetのサンプルアプリから作った在庫管理アプリを日本語化してみる
https://qiita.com/Gerbera/items/09a889ffcb4ade005ee9

第一回:AppSheetを使って爆速で在庫管理アプリをスマホで動かしてみる。
https://qiita.com/Gerbera/items/dc66e689306061191ebe

どんなアプリを作るか

こんな機能があればいいんじゃないか?
1. 検温結果の入力、修正、削除、一覧表示
2. 検温した日にちをカレンダーで表示
3. 検温結果を棒グラフで可視化

出来上がりのイメージ

こんな感じに動く予定、ちょっと待つと動きます。
ezgif-7-6432d9e3824a.gif

検温結果一覧画面

コメント 2020-04-24 223532.png

検温結果入力画面

コメント 2020-04-24 223545.png

検温した日がチェックされたカレンダー画面

コメント 2020-04-24 223610.png

検温結果を棒グラフ表示

コメント 2020-04-24 223622.png

作ってみる

環境

  • Chrome 79
  • Windows 10 1909

必要な物

  • Googleアカウント(他のでもいいけどとりあえず)
  • 開発用にChromeがインストールされているパソコン
  • 動作確認用のiOSデバイスかAndroidデバイス

費用

無料

かかる時間

ゆっくり30分

おおまかな作成手順

  1. 体温記録表をスプレッドシートで作る
  2. スプレッドシートをベースにAppSheetでアプリを新規作成
  3. AppSheetの設定を変更してグラフ画面の作成
  4. 見栄えを調整

の4ステップで作成ができる。

手順

1.体温記録表をスプレッドシートで作る
Googleスプレッドシートで以下のような体温記録表を作る。
肝は1行目に「日時」と「体温」という行があること

コメント 2020-04-21 130730.png

この行名をベースにAppsheetがアプリを構築します。
日時と体温の中身のデータ(2020/04/14 7:10:00とか36.8とか)は適当でOK。
下のをコピペすると楽だと思う。

日時 体温
2020/04/14 7:10:00 36.8
2020/04/12 7:20:00 36.5
2020/04/11 7:14:00 36.7
2020/04/10 7:19:00 36.4
2020/04/09 7:25:00 36.3
2020/04/14 0:00:00 37.8
2020/04/14 23:39:04 36.8
2020/04/14 23:47:42 37.2
2020/04/14 23:48:57 36.5
2020/04/14 23:49:23 36.9
2020/04/15 0:00:00 36.9

2.スプレッドシートをベースにAppSheetでアプリを新規作成
さっき作った体温記録表を読み込んでアプリの原型(といいつつほぼ完成形)を作る
New app → Start with your own data
コメント 2020-04-24 221027.png

App nama に taionsokutei と入力(日本語NGです!)
Category に Other を選択(ちなみにここは後から変更できます)
Next step: choose your data をクリック
コメント 2020-04-24 221118.png

さきほどGoogleスプレッドシートで作った、体温記録表を選択
Select をクリック
コメント 2020-04-24 221245.png

なんかすでにそれっぽいアプリが自動で出来てない…?
すでにカレンダーもできてるし…
コメント 2020-04-24 221346.png

3.AppSheetの設定を変更してグラフ画面の作成
カレンダーは自動で出来たけど、グラフが出来てない!
可視化!可視化!!毎日の検温結果を折れ線グラフにしてみます。

UX → Views → Add New View
ここでアプリの下にあるタブにグラフを追加します。
コメント 2020-04-24 221606.png

View name に 体温グラフ を入力。ここがタブの名前になります。
For this data に 体温測定表 を選択。ここがグラフになる元ファイルです。
View type に chart を選択。ここでどんな画面を作るか決定する場所です。
Position に right を選択。ここはタブをどこに置くかです。rightなので右です。
Chart type に col series[line] を選択。ここでグラフの種類を選択します。
コメント 2020-04-24 221810.png

もう少しです。
Chart columns に 体温 を選択。棒グラフにする元データを指定します。
Chart colors に お好きな色を を選択。これはそのままグラフの色です。
コメント 2020-04-24 221955.png

右上の保存ボタンをクリックしたら、グラフが出来た!
コメント 2020-04-24 222032.png

4.見栄えを調整
アプリ自体はほぼできましたが、体温一覧ページをちょっと見やすくしましょう。

UX → Views → 体温測定表
View type を deck に変更
ここで体温測定表ページの表示方式を一覧形式にを変更します。
コメント 2020-04-24 222659.png

うん、こっちのほうが見やすいですね。
一旦完成ということで。
あとは、スマホで動作確認してみましょう。

USERS → Links → 
InstallLinkは端末インストールアプリ型
BrowserLinkはWebアプリ型
です。

コメント 2020-04-24 223248.png

終わりに

ぱっと思いついた事を、想像したイメージからすぐにアプリを作ることができるのはすごい。
今までのアプリ開発は、
①アイデアがあって、②プロジェクトを立ち上げて、③開発チームと開発環境を作って、④コードを書いて、⑤アプリが完成!
だったと思うけど、これが
①アイデアがあって、②ちょっとAppsheetで設定をして、③アプリが完成!
まで短縮できてる。これはほんとにアプリ開発の民主化やで…

だからこそ
公式ー日本語化してくれー!
Appsheet Please make it Japanese!!!

ノーコード開発もくもく会のおしらせ

毎月1回ぐらい、「Play (No) Codes!」というグループ名でノーコード開発もくもく会をしています。
基本オンライン+オフラインで実施しているので、よければ参加ください!
https://playnocodes.connpass.com/

Gerbera
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした