ノーコード開発（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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/b4573d73-2edc-6b73-cdc9-f4816cb7bf23.gif)

#検温結果一覧画面
![コメント 2020-04-24 223532.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/0d3d3461-4a72-2948-b916-889fbcaf10e6.png)


#検温結果入力画面
![コメント 2020-04-24 223545.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/0ac38055-e148-75ab-b197-05aa5c118167.png)


#検温した日がチェックされたカレンダー画面
![コメント 2020-04-24 223610.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/128e80c3-84bc-a3b9-5572-33fa12cd7f00.png)


#検温結果を棒グラフ表示
![コメント 2020-04-24 223622.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/ca068565-045f-df26-9281-cf9942f3c981.png)



# 作ってみる
## 環境
- Chrome 79
- Windows 10 1909

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

## 費用
無料

## かかる時間
ゆっくり30分

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

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

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

![コメント 2020-04-21 130730.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/70258485-5eb8-13f5-fcd6-bc5044cf3a1c.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




**２．スプレッドシートをベースにAppSheetでアプリを新規作成**
さっき作った体温記録表を読み込んでアプリの原型（といいつつほぼ完成形）を作る
New app →　Start with your own data 
![コメント 2020-04-24 221027.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/4229766e-6140-0575-9356-c6c14f812064.png)

App nama に taionsokutei と入力（日本語NGです！）
Category に Other を選択（ちなみにここは後から変更できます）
Next step: choose your data をクリック
![コメント 2020-04-24 221118.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/f22708b8-6565-9648-f596-d8c4a19133b1.png)


さきほどGoogleスプレッドシートで作った、体温記録表を選択
Select をクリック
![コメント 2020-04-24 221245.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/5e12b2ce-c1fc-9b9f-7d7b-e9e799a6adb3.png)


なんかすでにそれっぽいアプリが自動で出来てない…？
すでにカレンダーもできてるし…
![コメント 2020-04-24 221346.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/7101b6c2-90da-63d2-5b4e-130161ad29ad.png)



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

UX　→　Views　→　Add New View
ここでアプリの下にあるタブにグラフを追加します。
![コメント 2020-04-24 221606.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/7555891f-d5d8-b5eb-3e1d-3f2db3129370.png)


View name　に　体温グラフ　を入力。ここがタブの名前になります。
For this data　に　体温測定表　を選択。ここがグラフになる元ファイルです。
View type　に　chart　を選択。ここでどんな画面を作るか決定する場所です。
Position　に　right　を選択。ここはタブをどこに置くかです。rightなので右です。
Chart type　に　col series[line]　を選択。ここでグラフの種類を選択します。
![コメント 2020-04-24 221810.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/112d84a5-9252-5ff6-ab6f-746cae2730c2.png)


もう少しです。
Chart columns　に　体温　を選択。棒グラフにする元データを指定します。
Chart colors　に　お好きな色を　を選択。これはそのままグラフの色です。
![コメント 2020-04-24 221955.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/9687b727-171e-667b-746f-f4e8b1754ab7.png)


右上の保存ボタンをクリックしたら、グラフが出来た！
![コメント 2020-04-24 222032.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/cc924007-1846-9428-e156-c539fbcd4416.png)


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

UX　→　Views　→　体温測定表
View type　を　deck　に変更
ここで体温測定表ページの表示方式を一覧形式にを変更します。
![コメント 2020-04-24 222659.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/d6a05ff6-a2c6-222e-e804-6304991ab81f.png)

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

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

![コメント 2020-04-24 223248.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129423/7d8a2968-d98b-4815-62bc-2d77d7de7cd2.png)



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

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


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