40代おっさんスプレッドシートからAppSheet(UX部分)でアプリを作る

## 本記事について

この記事はプログラミング初学者の私が学んでいく中でわからない単語や概要を分かりやすくまとめたものです。
もし不正などありましたらコメントにてお知らせいただければ幸いです。

## 前回の記事

<https://qiita.com/kou1121/items/4d10e94270ed1b43983f>

## ビューの設定

### UXのチェック

左のUXを開いてください
デフォルトでViewsが開いていると思います。

|Primary Views|テーブルを元に作成されるビュー。自分で作ったビューなどもここに配置されます。画面下部に表示されるアイコンなどを使って簡単に表示できます。|
|--------|---------|
|Menu Views|アプリのサイドバーに表示されるメニューから呼び出されるビュー|
|Ref Views|他のビュー(Primary Viewsなど)から必要に応じて呼び出されるビュー。テーブルの設定などを元に自動設定される。|

#### Primary Views

Primary Viewsにあるシート1をクリック

|View name|ビューの名前|
|---------|---------|
|For this data|どのデータ（テーブル）のビューかを指定|
|View type|データ表示の種類を選びます|
|Position|ビューを開くボタンをどの位置に用意するかを選ぶ|

これで重要なのがView typeです。
こちらを説明

##### View type

calendar:カレンダーを表示するビュー。テーブルの中に日時のデータがある場合、それを使ってカレンダーでデータを表示

deck:テーブルの各レコードの内容と操作（レコードの編集や削除）のアイコンをコンパクトにまとめたもの

table:テーブルをそのまま一覧表示するもの。スプレッドシートのデータをそのままの形で表示

gallery:イメージを扱うテーブルに用いられる。各レコードのラベルとイメージを整列して表示。イメージがないとただラベルが表示されたような状態になる。

detail:レコードの詳細を1レコード＝１画面にまとめたもの。１つ１つのレコードを順番に表示していく。

map:Googleマップを表示するビュー。テーブルに位置情報のデータが含まれている場合は、それをマップ上にマーカーとして表示させることができる。

chart:テーブルのレコードをグラフとして表示するためのもの。数値データを含むテーブルで利用

dashboard:複数の表示を1つにまとめて表示するビュー。必要に応じてビューやフォームなどを追加し並べていくことができる。

from:レコード作成のフォームを表示するビューテーブルのフォームは別途システムによって用意される

onboarding:レコードを1画面にまとめ、次々に表示していくもの。detailをより使いやすくしたもの

card:レコードを1枚のカードにまとめ、それをスクロール表示。主なデータがわかりやすく整理されて表示される。

#### 実際にシート１を設定

今回はcardを使用
その下のPositionはデフォルトのcenterで

##### ソートについて

Positionの下にView Optionsと言う項目があります。
ここでビューの表示に関するオプション設定を行う。

Sort by：ソート（並び替え）の設定
Addをクリックすると設定を追加できるので
1つ目：終了　Ascending(昇順)
2つ目：日時　Descending(降順)
を設定

##### listのレイアウト設定

下のほうにLayoutと言う項目があります。
Cardはより細かくレイアウト設定ができます。

|list|レコードをリスト表示|
|---------|--------|
|photo|写真をリスト表示|
|backdrop|イメージにレコードを重ねて表示|
|large|レコード全体を大きなカードにまとめる|

今回はlistを使用

・カード全体をクリックすると、右側にカードをクリックした際の動作を選ぶOn Clickメニューが現れる.
今回はGo to detailsにしておく。
・Title goes hereの部分をクリックするとそこに表示する列を指定できる。
今回はタイトルで
・Subtitle goes here をクリックするとそこに表示する列を指定できる。
今回は日時で

##### 表示名とアイコンを設定

Displayという部分をクリックすると、ビューを起動するボタンの表示に関する設定が現れる。

|Icon|使用するアイコンを選ぶ|
|--------|-----------|
|Display name|ボタンに表示するラベルを入力|
|Show if|このビューの表示に関する設定を行うもの|

ここでアイコンとラベルと入力して右上にあるSAVEを押すと反映される。

##### サイドバーについて

アプリの左上に見える

![AppSheet三本線.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641940/c0848d00-cb8c-a64c-fcb9-3d1a44b8344d.png)

赤枠を押すと
メニューが用意されている。

|Assistant|アシスタントのビューを表示|
|--------|-----------|
|About|アプリのアバウト表示|
|Feedback|フィードバックを送信するダイヤログを呼び出す|
|Share|共有のメールを送信|
|App Gallery|スマホのAppSheetアプリにあるApp Galleryへのリンク|
|アカウント表示|現在のアカウント。下にあるLog outをクリックするとログアウト|

AppSheetに自動生成されるもの
自分で作成して追加することも可能

#### レコードを作成

アプリの右下にあるプラスボタンをクリックすると入力ホームが現れますので適当に打ってみてください。
最後にSaveを押すとリストに新しいものが入れられると思います。

##### レコード内を表示

一覧で表示された項目をクリックすると表示画面を画面遷移します。
こちらで他の情報を見ることが出来ます。
また、右下のノートと鉛筆のアイコンをクリックすると編集できます。

##### レコードの削除

右上の点3個マーク

![Appsheet点3個マーク.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641940/3ae3d224-b637-f101-b545-30b3d6beb70d.png)

赤枠のところ
をクリックすると
Deleteとがあり、それで削除できる。
またEditで編集も可能

#### スプレッドシートを確認する

![スプレッドシート確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/641940/6fb2316d-4cb2-d926-d5c7-80dc1e530dd7.png)

上のように作成したレコードが追加されている
また、スプレッドシートを直接書き換えるとアプリにも表示される。

## 参考資料

<https://www.amazon.co.jp/Google-AppSheet-%E3%81%A7%E3%81%AF%E3%81%98%E3%82%81%E3%82%8B%E3%83%8E%E3%83%BC%E3%82%B3%E3%83%BC%E3%83%89%E9%96%8B%E7%99%BA%E5%85%A5%E9%96%80-%E6%8E%8C%E7%94%B0-%E6%B4%A5%E8%80%B6%E4%B9%83-ebook/dp/B098W4XDBB>