はじめに
新型コロナウイルス感染症（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
どんなアプリを作るか
こんな機能があればいいんじゃないか？
- 検温結果の入力、修正、削除、一覧表示
- 検温した日にちをカレンダーで表示
- 検温結果を棒グラフで可視化
出来上がりのイメージ
こんな感じに動く予定、ちょっと待つと動きます。
検温結果一覧画面
検温結果入力画面
検温した日がチェックされたカレンダー画面
検温結果を棒グラフ表示
作ってみる
環境
- Chrome 79
- Windows 10 1909
必要な物
- Googleアカウント（他のでもいいけどとりあえず）
- 開発用にChromeがインストールされているパソコン
- 動作確認用のiOSデバイスかAndroidデバイス
費用
無料
かかる時間
ゆっくり30分
おおまかな作成手順
- 体温記録表をスプレッドシートで作る
- スプレッドシートをベースにAppSheetでアプリを新規作成
- AppSheetの設定を変更してグラフ画面の作成
- 見栄えを調整
の4ステップで作成ができる。
手順
１．体温記録表をスプレッドシートで作る
Googleスプレッドシートで以下のような体温記録表を作る。
肝は1行目に「日時」と「体温」という行があること
この行名をベースに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
App nama に taionsokutei と入力（日本語NGです！）
Category に Other を選択（ちなみにここは後から変更できます）
Next step: choose your data をクリック
さきほどGoogleスプレッドシートで作った、体温記録表を選択
Select をクリック
なんかすでにそれっぽいアプリが自動で出来てない…？
すでにカレンダーもできてるし…
３．AppSheetの設定を変更してグラフ画面の作成
カレンダーは自動で出来たけど、グラフが出来てない！
可視化！可視化！！毎日の検温結果を折れ線グラフにしてみます。
UX → Views → Add New View
ここでアプリの下にあるタブにグラフを追加します。
View name に 体温グラフ を入力。ここがタブの名前になります。
For this data に 体温測定表 を選択。ここがグラフになる元ファイルです。
View type に chart を選択。ここでどんな画面を作るか決定する場所です。
Position に right を選択。ここはタブをどこに置くかです。rightなので右です。
Chart type に col series[line] を選択。ここでグラフの種類を選択します。
もう少しです。
Chart columns に 体温 を選択。棒グラフにする元データを指定します。
Chart colors に お好きな色を を選択。これはそのままグラフの色です。
右上の保存ボタンをクリックしたら、グラフが出来た！
４．見栄えを調整
アプリ自体はほぼできましたが、体温一覧ページをちょっと見やすくしましょう。
UX → Views → 体温測定表
View type を deck に変更
ここで体温測定表ページの表示方式を一覧形式にを変更します。
うん、こっちのほうが見やすいですね。
一旦完成ということで。
あとは、スマホで動作確認してみましょう。
USERS → Links →
InstallLinkは端末インストールアプリ型
BrowserLinkはWebアプリ型
です。
終わりに
ぱっと思いついた事を、想像したイメージからすぐにアプリを作ることができるのはすごい。
今までのアプリ開発は、
①アイデアがあって、②プロジェクトを立ち上げて、③開発チームと開発環境を作って、④コードを書いて、⑤アプリが完成！
だったと思うけど、これが
①アイデアがあって、②ちょっとAppsheetで設定をして、③アプリが完成！
まで短縮できてる。これはほんとにアプリ開発の民主化やで…
だからこそ
公式ー日本語化してくれー！
Appsheet Please make it Japanese!!!
ノーコード開発もくもく会のおしらせ
毎月1回ぐらい、「Play (No) Codes!」というグループ名でノーコード開発もくもく会をしています。
基本オンライン＋オフラインで実施しているので、よければ参加ください！
https://playnocodes.connpass.com/