Chartビュー(折れ線グラフ)
折れ線グラフはこんな感じ。体温グラフです。
テストのためにランダムな数値を使用しています。ファイルを開く度に数字が変わりますので、本番環境では値を上書きするなり気をつけましょう。
■ つくる
グラフの種類を選択して使うカラムを追加して凡例の有無と並びを決めたら完成。
■ 入力範囲や入力フォームについて
スプレッドシートに体温を羅列したところ、Decimal形式が自動選択されました。デフォルトでは小数点以下第2位まで表示するようです。ここでは鈴木カラムだけ小数点以下第1位までに変えてみました。
体温管理ということで、最小32最大42、最小ステップ0.1、小数点以下第1位までにしました。Numeric digitsは整数部の桁です。とりあえず2を設定。全員分のカラムを設定します。とてもアプリっぽい。
Display modeを変えるとこんな感じ。鈴木Label、佐藤Standerd、田中Rangeです。
ダッシュボードでタブレット向け表示にまとめるとこんな感じ。とてもアプリぽい。
以上。
Chartビュー(棒グラフと円グラフ)
棒グラフ。histogramとrow seriesはこんな感じ。
円グラフはpie chartかdountを選ぶ。
こんな感じのデータでこれらのグラフが出来ました。合計は自動算出される模様。
棒を選択するとグループの中身もグラフ表示ということが可能！図では斉藤を選択して斉藤の各テストの点数グラフを表示。国語を選択するとデータ元が表示される。グラフは全部大体こんな感じの動作です。グラフは直感的にデータが見えるので良い！
凡例を選択すると表示するグラフを絞れる！円グラフでもできるけど、用途に合わせて実施しましょう。
■ つくる
View typeでグラフタイプと表示するデータのグループを選択。色はお好み。Show legendは凡例で、個人的に表示推奨。Trend lineは勉強中。出ない・・・
円グラフの設定項目も棒グラフと大体同じ。Lable typeでNone、Key、Value、Percentを選ぶくらいです。この場合Keyは鈴木や佐藤、Valueは合計点数、Percentで割合表示です。
ダッシュボードにまとめてタブレット向け表示するとこんな感じ。とてもアプリぽい。
ダッシュボードのインタラクティブモードはグラフのようなグラフィカル表示と連動しない模様。また、各グラフで棒や円の一部を選択するとダッシュボード内ではなく全画面で選択ビューの処理が行われる模様。
以上。
Dashboardビュー
Dashboardビューは複数のビューをひとつの画面にまとめて表示できるビューです。GalleryView、TableView、DeckView、CardViewを用意してみました。
Dashboardビューを作成すると空のビューができました。Addを押して追加していきます。
複数のビューが縦に並んで表示されました！順番はドラッグで変えられます。ビューの表示サイズを4種類（Large、Wide、Tall、Small）から選べますが、スマホとかモバイル向け表示の場合は意味がない模様。ビューは何個でも、同じものを何度も追加できる模様ですが見づらくなるのを覚悟。
タブレット向け表示？にするとサイズが反映される模様。Largeは大きく表示、Wideは横長、Tallは縦長、Smallは小さく表示だと思います。組み合わせ方にセンスが問われます。画面右上のヤツを押すと、別タブが開いて大画面で確認できます。タブレット画面？だとユーザが勝手に各画面のサイズを広げたり狭めたりできる模様。
Use tabs in mobile viewをONにするとタブ表示にできます。画面下の各ビュー選択部が意味なくなっちゃうので、併用するのであれば各ビューをMenuあたりに隠してしまいましょう。
Interactive modeをONにすると、ひとつのビューで選択したデータが各ビューで一気に選択状態になります。この状態ではデータ選択時にDetail画面に遷移しなくなりますが、アクションは機能します。どこかにForm表示用やDeleteのActionを用意しておくとよいかと。モバイル向け画面でも同じ動作です。
以上。
Cardビュー
CardViewは見せ方が色々できますが大まかなレイアウトは決まってまして、レイアウト上の画像と文字の順番は変えることはできません。制約の中、デザインセンスが問われます。
View typeでcardを選択。
View OptionのLayoutをいじる。CardViewで操作する画面はここだけ！
Layoutは4種類！操作方法は全部同じなのでlargeで説明。
中央に画面レイアウトがあります。選択した部分に対して何を設定するか、右側に出てきます。ここでは赤枠の画像を選択しました。右に出てきたColumn to showのドロップダウンリストから画像カラムの設定、Image Fitで画像の表示方法を3種類（cover、contain、fill）から選べます。横か縦に合わせる、このサイズに合わせる、よくあるやつです。ColumnでNoneを選ぶと非表示になり、上に詰められます。
この部分はImage Shapeでマル抜き表示？か四角表示？が選べます。
文字表示設定箇所。太字薄字サイズは選べません。カラムをそれぞれに設定するだけ。
アクション設定。ハートアイコン部分にDeleteを選ぶとゴミ箱アイコンになりました。
以上。
Galleryビュー
GalleryViewは画像とラベルだけ表示するビュー。画像の大きさは4種類（3種類）から選べる。MediumサイズとSmallサイズの違いは不明。
LargeサイズとTiryサイズ。
以上。
画像とDeckビューとREF_ROWS
こんな感じのがDeckビュー。
データシートはこんな感じ。ファイルはテーブル名+_Images/キー.image.連番のようにかぶらない名前を勝手に付けてくれる模様。保存フォルダもグーグルドライブ内に勝手に作ってくれました。
Image、Thumbnailで画像アップロードできる模様。画像の大小表示しか違いが分からん。Fileでも画像アップロードできるが中身は表示されない。さすがに自動判別はされない模様。Videoを選ぶと編集画面に表示されなかったのでアップロードはできないのか？試してないけどFileでアップロードしておいてVideoカラムにブチ込めばイケる気がする。
Signtureにするとサインが保存できた。店で電子サインするアレと同じ！PNG形式。鍵マークを選択するとサインが書ける。
アップロードしたファイルは全て保存場所に残っています。整理するためにも削除する仕組みを考えねばなりませんが、ここでは考えてません。
■ つくる。
表示する画像、表示する文字3か所を設定。画像の表示方法、表示するActionの設定をそれぞれ設定。Sort by、Group by、Group aggregateはご自由に。Nested table columnに関しては後述。
完成。
■ Nested table columnでリスト表示
使い方間違っているかもしれません。こんな感じでリスト表示が出来ました。
メインのデータに紐付けして、追加の画像データを無制限に登録してみたい。
こんな感じ。
まず赤丸部分のバーチャルカラムを作ります。後でListCount部分も作りますが、この順番じゃないとまずい模様。また作り直すことを覚悟しましょう。
赤丸部分を入力していきます。数式を間違えなければ他は自動入力されます。
=REF_ROWS("filelist", "data_id")
Show部分は後程やります。
追加したバーチャルカラムを設定します。
こんな感じになります。しかし追加画像データの無いデータに無駄な空白が！追加画像データがなくてもリスト表示の場所が確保されてしまう模様。
追加画像の無いデータはバーチャルカラムを表示しないようにします。上記で飛ばしていたところまで戻って、データの行を数えるだけのバーチャルカラムを作ります。数式はREF_ROWSで使ったヤツを流用します。実績重視。関数SELECTでもいけると思う。
=COUNT(REF_ROWS("filelist", "data_id"))
バーチャルカラム追加画像のShow表示条件に数式を追加します。
=if([ListCount]>0,true,true)
隙間なく表示されるようになりました。
■ 運用を考える
REF_ROWSで追加したリストはViewとAddがついてきました！UX作ってないのに！
実は1件目の追加画像データを入れることを考えてませんでした。良い方法が思いつかなかったので、無理矢理Actionで実装します。
dataテーブルとfilelistテーブルの紐付け用データを追加するアクションです。
少しスクロールしてアクションの表示条件を設定。追加画像データが0の時だけ表示。
=if(count(REF_ROWS("filelist", "data_id"))=0,true,false)
上記のアクションを実行すると空のデータが追加されました！しかし画像は空です。これを編集してデータを追加していくことになりますが・・・
説明画像が必要かもしれません。ImageカラムのINITIAL VALUEに「画像をアップロードして下さい」とか、Signtureカラムであれば「山田太郎」とか、文字だけの画像を作成して用意しておくと質問の発生しにくいアプリになると思います。
（そうすると、このINITIAL VALUEのデータのままであるデータをどこかで一括削除する処理が後程必要になって・・・作業が終わらない！！なんか良い方法を思いついたら後でまとめます。）
以上。
