出席確認アプリを作ろう その３
こんにちは。
AppSheetで出席確認アプリを作ろう ３回目です。
今回はUX画面で、アプリの表示を設定していきます。
UXでViewを設定する
UXでは、Viewが設定できます。
Viewには、大きく分けて
- Primary View・・・アプリトップ画面からすぐにアクセスできる画面
- Reference View・・・Primary Viewの遷移先となる画面
- Menu View・・・画面横のメニューバーからアクセスできる画面
の３つがあります。
まずは、出席表のViewを作ってみましょう。
Viewの名前を決めて、データソースとなるテーブルを指定します。
それから、View typeを選択します。いろいろありますね。
今は "card type"が選ばれています。
こちらを、左上の " calendar" カレンダータイプに変えてみましょう。
画面右に表示される、アプリの表示がカレンダー型に変わりました。
今出席表にはデータが入っていませんので、何もデータが表示されていません。
単なるカレンダー・・・！
イメージを掴むために、ダミーデータを入れてみました。
しかし、カレンダー表示ではとくに何も変わらなかったので、次のView type "deck"に変えてみました。
"deck"タイプはこのような表示になります。
データごとに日付とＩＤが表示され、削除と編集ができそうなアイコンがありますね。
上部には、左からメニューボタン、検索、チェックボックス、更新ボタンが並んでいます。
画面下部には、＋ボタンがオーバーレイしており、データの追加ができます。
他のView typeも少しご紹介。
まずは ”table”。
こちらはスプレッドシートそのもののような表示です。
"gallery"タイプ。
ボタンが小さくコンパクトになりますね。
受講者の情報を見るには、このタイプがいいかもしれません。
"detail"タイプの表示。
一つのデータを一ページで表示しています。
データの編集時などに使うとよさそうですね。
最後に、"card"タイプ。
"gallery"タイプよりも大きく、"detail"タイプよりも小さい感じでしょうか。
写真や絵で表示するときに使うのかな？
ちょっとはっきりわかりません。
どのView Typeを使うべきか
いろいろなView Typeをワンクリックで切り替えてくれるAppSheet。
見ているのも楽しいのですが、どのView Typeを使うか考えなければなりません。
今回の出席確認アプリのイメージは、以前の記事で書いたように、以下の通りです。
ぼんやりとアプリに必要な機能を考えてみます。
１．ワンタップで出席状況の記録ができる。
２．記録済の人とまだ記録されていない人が一目でわかる。
３．あとから出席状況を修正できる。
４．受講者の情報を参照できる。
５．授業の一言メモを書ける。
出席確認アプリを作ろう その１ - しろうとＮＯコード
２を考えると、"deck", "table", "gallery"あたりでしょうか。
これらには、上部にチェックボックスもついており、一括編集ができそうですし。
ただ、"gallery"はタップするかしないか、という使い方になりそうですね。
"table"は、Columnsの順番を変えないと見にくいかもしれません。
今回は、情報量そこそこで何種類かの処理ができそうな、"deck"タイプを選ぶことにします。
"deck"タイプのオプションを見てみましょう。
並び替えやグループ化、グループに含まれるデータのカウント、第１ヘッダー、第２ヘッダーの設定などができるようです。
Nested tableは入れ子という意味でしょうか。参照値のリストが使えるようですね。
表示内容の変更
見やすくなるように、第１ヘッダーを名前に、第２ヘッダーをＩＤに変えます。
いいですね！
"Summary Column"も 状況 に設定します。
右上に注目してください。
出席状況の〇、×が表示されていますね。
ひかえめな表示ではありますが、一応状況がわかります。
AppSheetさん、わからないなりに設定を触ってみるだけでも、それっぽい表示が出てきてくれる！！
ちなみに、アプリのプレビュー表示の下部には、View の名前とTable名が記載されています。（同じ名前でわかりにくくて、すみません。）
この名前をクリックすることにより、そのViewの設定、Tableの設定へジャンプすることができます。
アプリのプレビュー画面を見ながら直したいところがあったら、すぐに設定画面にとべるのは助かります。
AppSheet、本当に親切設計。
わかりやすくて、しろうとはとてもうれしいです。
今回は、Viewを設定し、データがどのように表示されるかを決めました。
次回は、Action機能を使って、データの追加などをしていこうと思います。
ご覧いただき、ありがとうございました。
