Chapter 02

AppSheetの設定

がおまる
がおまる
2021.01.26に更新

2-1. スプレッドシートの新規作成

AppSheetで使うスプレッドシートを新規作成しておきます。下記URLにアクセスしてください。

https://sheet.new

2-2. カラム設定

A1セルに ステータス、B2セルに 日時 とそれぞれ入力してください。スプレッドシートの名前はお好きな名前を設定してください。今回は「勤怠アプリ」としました。

2-3. プロジェクト作成

下記URLにアクセスして、[無料トライアル]ボタンをクリックします。

https://cloud.google.com/appsheet?hl=ja

一番左にある Start with your own data をクリックします。

お好きなプロジェクト名①とカテゴリ②を設定して、[Choose your data]ボタン③をクリックします。

2-2で作成したスプレッドシートを選択します。

2-4. データ項目編集

AppSheetのプロジェクト管理画面が表示されます。左側メニューのData①→Columns②→シート1③をクリックします。

ステータスデータを編集します。鉛筆ボタンをクリックします。

ステータスのボタンを設定します。出勤と退勤のボタンを設定しています。設定したら右上の[Done]ボタン⑤をクリックします。

項目
①Type Enum
②Add 2回クリック
③Values 出勤、退勤項目を追加
④Input mode Buttons

続いて出退勤の日時データを編集します。日時にある鉛筆ボタンをクリックします。

設定は下記の通りです。

項目
①Type DateTime
②Require? チェックを入れる
③Initial Value クリックする

初期値に現在時刻を取得する処理を追加します。Now()行にある[Insert]ボタンをクリックして[Save]ボタンをクリックします。

こちらの設定はお好みで構いません。日時を検索対象にするかのチェックです。設定が終われば右上の[Done]ボタンをクリックします。

_RowNumberにあるKEY?部分だけにチェックを入れてください。ステータス部分のチェックは外しておきます。
設定が終われば右上の[SAVE]ボタン②をクリックします。

2-5. 動作確認

ここまで設定したら一度シミュレーターで確認してみましょう。画面右側のシミュレーターから[+]ボタン①をクリックして、出退勤ステータスを設定②します。日時を選択したら右下の[Save]ボタン③をクリックします。すると設定した項目④が自動的に追加されます。

追加した情報はスプレッドシートにも自動的に反映されます。

2-6. カレンダーを追加する

出退勤情報を更に分かりやすく可視化するために、カレンダーを追加してみましょう。左側メニューにある「UX」①をクリックして、[+New View]ボタン②をクリックします。

各種項目を設定します。設定できたら右上の[Save]ボタン⑤をクリックします。これでカレンダーの表示をすることができました。

項目
①View Name カレンダー
②View Type calendar
③Position right ※お好きなものを選択してください
④Start date〜End time 日時
④Description ステータス