1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-09-13

本記事について

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

前回の記事

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レコード=1画面にまとめたもの。1つ1つのレコードを順番に表示していく。

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

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

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

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

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

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

実際にシート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

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

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

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

レコードを作成

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

レコード内を表示

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

レコードの削除

右上の点3個マーク

Appsheet点3個マーク.png

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

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

スプレッドシート確認.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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?