しろうとNOコード

AppSheetを勉強しています!

出席確認アプリを作ろう その2

こんにちは。

AppSheetで出席確認アプリを作ろう 2回目です。

 

前回は、出席確認アプリのイメージとUIの各部について説明しました。

今回は、テーブル(Tables)とカラム(Columns)について見ていきましょう。

 

テーブル

まずは、テーブルタブをクリックし、出席表テーブルを見てみましょう。

 

f:id:shiroutonocode:20220307214448p:plain

 

テーブル名やシート名が自動で入っていますね。

また、テーブルの種類を、Updates(更新可能)、Adds(追加可能)、 Deletes(削除可能)、 Read-Only(読み出しのみ)にするかどうかをボタンで選べます。

 

f:id:shiroutonocode:20220307214756p:plain

 

Localizationで、日本語(日本)を選んでおきました!

一通り確認して、上のほうにもどると、受講者リストテーブルも作るのはどう?と提案されておりました。

ぽちっと押してみます。

 

f:id:shiroutonocode:20220307214714p:plain

 

はい。受講者リストテーブルができました!

っと、infoとColumnsのところに、なにやらオレンジの●がついていますね。

 

f:id:shiroutonocode:20220307215227p:plain

 

Columnsを押してみましょう。

 

f:id:shiroutonocode:20220307215605p:plain

どうやら受講者リストテーブルに、何か問題があるようだ。なになに・・・

 

f:id:shiroutonocode:20220307215658p:plain

 

メールアドレスや電話番号って、プライバシーじゃない?個人情報じゃない?と注意してくれているようですね。

今回のデータはダミーデータですが、確かにそれはそうです。

 

f:id:shiroutonocode:20220308023008p:plain

 

ということで、セキュリティに移動し、一番下の「全てのデータカラムをSensitiveなものとして取り扱う」にチェックを入れます。

 

f:id:shiroutonocode:20220308023117p:plain

忘れずに保存して・・・

f:id:shiroutonocode:20220308023129p:plain

 

よかった!Warningが消えましたね。

 

f:id:shiroutonocode:20220308023155p:plain

 

Columns(カラム)

受講者リストに戻ります。

Columnsタブをクリックすると、このように項目ごとにデータタイプが設定されています。

 

f:id:shiroutonocode:20220310185112p:plain

 

NumberやらE-mailやら自動で選択してくれるようです。

わからないときは、とりあえず、Textだ!という雰囲気も感じますが。

ここでのポイントは、"KEY"と"LABEL"でしょう。

 

KEY  ・・・ そのデータを識別するために使われる項目。重複不可。 

LABEL ・・・ そのデータの表示名となる項目。

 

上の画面の場合は、IDでデータを識別し、受講者名がデータの表示名として使われるわけですね。

 

データタイプを見ていくと、"Phone"というタイプがあったので、電話番号は"Text"から"Phone"に変えてみました。

 

f:id:shiroutonocode:20220310185703p:plain

 

一方こちらは、出席表テーブルです。

同様に、Columnsを見ていきます。

 

f:id:shiroutonocode:20220310185741p:plain

 

まず、日付と状況(出席、欠席等)のデータタイプを変えました。

"Enum"は複数選択肢から1つを選ぶデータタイプですね。

今回は、出席、欠席、ちこく・・・などの決まった選択肢から1つをボタンでポチっと押す形にしたいので、こちらを選びました。

 

そして、KEYは日付とID、LABELは日付と名前。

それぞれ二つずつえらんでみます。

 

そして、右上の"Regenerate Structure"を押します。

何かテーブルやカラムに変更を加えたときに、再度データ構造を組み直してくれるようです。

 

f:id:shiroutonocode:20220310190945p:plain

 

お願いします!

 

f:id:shiroutonocode:20220310222045p:plain

一番下に”_ComputedKey”という項目が増えました。

青いえんぴつマークを押してみましょう。

 

f:id:shiroutonocode:20220310222148p:plain

 

”_ComputedKey”はVirtual Column(仮想列)です。

日付とIDをKEYに指定したので、二つを合わせた計算結果が自動で入るようですね。

”App Formula” に、”CONCATENATE()”という式が入っています。

 

f:id:shiroutonocode:20220310222412p:plain

 

式の意味を下にわかりやすく書いてくれるんですね。親切設計。

”:”の記号が気になってしまうので、&に変えてみました。

 

f:id:shiroutonocode:20220310222629p:plain

 

これで、日付とIDが連続したKEYができました!

 

データタイプ Enum

Columns 状況 も設定してみましょう。

データタイプを"Enum"にしたので、選択肢を入れていきます。

 

f:id:shiroutonocode:20220310190343p:plain

 

Addボタンを押すと、選択肢が追加できます。

また、”Allow other values”にチェックをいれておけば、他の値も入力できます。

が、今のところは決まったものから選択するつもりなので、チェックを外します。

 

f:id:shiroutonocode:20220310190606p:plain


このようにしてみました。

〇 が出席、 × が欠席、 無断 が無断欠席ですね。

 

f:id:shiroutonocode:20220310190659p:plain

 

ボタンで入力したいので、"Button"を選びます。

それから、必須項目として、"Require?"にチェックを入れます。

 

これで、一通りデータの設定が終わりました!

 

次回は、UX(表示のされ方、UI)を見ていきたいと思います。

 

今回もご覧いただき、ありがとうございました。