AppSheetMemo

AppSheetを使ったスマホアプリ開発メモ。画像メインなのでPC閲覧推奨。

画像とDeckビューとREF_ROWS

こんな感じのがDeckビュー。

f:id:tanaka0:20210919095902p:plain     f:id:tanaka0:20210919103557p:plain

 

データシートはこんな感じ。ファイルはテーブル名+_Images/キー.image.連番のようにかぶらない名前を勝手に付けてくれる模様。保存フォルダもグーグルドライブ内に勝手に作ってくれました。

f:id:tanaka0:20210919100605p:plain

 

Image、Thumbnailで画像アップロードできる模様。画像の大小表示しか違いが分からん。Fileでも画像アップロードできるが中身は表示されない。さすがに自動判別はされない模様。Videoを選ぶと編集画面に表示されなかったのでアップロードはできないのか?試してないけどFileでアップロードしておいてVideoカラムにブチ込めばイケる気がする。

f:id:tanaka0:20210919104258p:plain

 

Signtureにするとサインが保存できた。店で電子サインするアレと同じ!PNG形式。鍵マークを選択するとサインが書ける。

f:id:tanaka0:20210919111845p:plain

アップロードしたファイルは全て保存場所に残っています。整理するためにも削除する仕組みを考えねばなりませんが、ここでは考えてません。

 


 

■ つくる。

f:id:tanaka0:20210919113942p:plain

 

表示する画像、表示する文字3か所を設定。画像の表示方法、表示するActionの設定をそれぞれ設定。Sort by、Group by、Group aggregateはご自由に。Nested table columnに関しては後述。

f:id:tanaka0:20210919121247p:plain


完成。

 


 

■ Nested table columnでリスト表示

使い方間違っているかもしれません。こんな感じでリスト表示が出来ました。

f:id:tanaka0:20210919101043p:plain

 

メインのデータに紐付けして、追加の画像データを無制限に登録してみたい。

f:id:tanaka0:20210919100614p:plain

 

こんな感じ。

f:id:tanaka0:20210919133320p:plain

 

まず赤丸部分のバーチャルカラムを作ります。後でListCount部分も作りますが、この順番じゃないとまずい模様。また作り直すことを覚悟しましょう。

f:id:tanaka0:20210919135057p:plain

 

赤丸部分を入力していきます。数式を間違えなければ他は自動入力されます。
=REF_ROWS("filelist", "data_id")

Show部分は後程やります。

f:id:tanaka0:20210919135250p:plain

 

追加したバーチャルカラムを設定します。

f:id:tanaka0:20210919142134p:plain

 

こんな感じになります。しかし追加画像データの無いデータに無駄な空白が!追加画像データがなくてもリスト表示の場所が確保されてしまう模様。

f:id:tanaka0:20210919143316p:plain     f:id:tanaka0:20210919142900p:plain

 

追加画像の無いデータはバーチャルカラムを表示しないようにします。上記で飛ばしていたところまで戻って、データの行を数えるだけのバーチャルカラムを作ります。数式はREF_ROWSで使ったヤツを流用します。実績重視。関数SELECTでもいけると思う。

=COUNT(REF_ROWS("filelist", "data_id"))

f:id:tanaka0:20210919143930p:plain

 

バーチャルカラム追加画像のShow表示条件に数式を追加します。

=if([ListCount]>0,true,true)

f:id:tanaka0:20210919144517p:plain

 

隙間なく表示されるようになりました。

f:id:tanaka0:20210919101043p:plain

 


 

■ 運用を考える

REF_ROWSで追加したリストはViewとAddがついてきました!UX作ってないのに!

f:id:tanaka0:20210919150605p:plain     f:id:tanaka0:20210919150631p:plain

f:id:tanaka0:20210919150758p:plain

 

実は1件目の追加画像データを入れることを考えてませんでした。良い方法が思いつかなかったので、無理矢理Actionで実装します。

dataテーブルとfilelistテーブルの紐付け用データを追加するアクションです。

f:id:tanaka0:20210919152751p:plain

 

少しスクロールしてアクションの表示条件を設定。追加画像データが0の時だけ表示。

=if(count(REF_ROWS("filelist", "data_id"))=0,true,false)

f:id:tanaka0:20210919153125p:plain

 

上記のアクションを実行すると空のデータが追加されました!しかし画像は空です。これを編集してデータを追加していくことになりますが・・・

f:id:tanaka0:20210919155451p:plain

説明画像が必要かもしれません。ImageカラムのINITIAL VALUEに「画像をアップロードして下さい」とか、Signtureカラムであれば「山田太郎」とか、文字だけの画像を作成して用意しておくと質問の発生しにくいアプリになると思います。

(そうすると、このINITIAL VALUEのデータのままであるデータをどこかで一括削除する処理が後程必要になって・・・作業が終わらない!!なんか良い方法を思いついたら後でまとめます。)

 

以上。