まだまだ事例の少ないAppSheet。
逆引きリファレンス的にノウハウをメモ。
Web上に画像のURLを指定してサムネイル画像などを表示する方法。
AppSheetの Image Type を使えば画像ファイル自体を登録して表示することはできるのだが、すでに画像はWeb上に存在してる場合はURLで指定したいと思う。
しかもデフォルトの画像登録だと画像ファイルが Google Drive の AppSheet フォルダに保存されるが、後でメンテしたくなった時に「どこいった〜？？」となるのが目に見えているので、なるべく画像ファイルはサーバー上に置かれている物をマスタにしたいはず。
ということでWeb上に公開されている画像をURLで参照して AppSheet で画像表示させるとともに、メンテもURL形式でメンテできるようにするというお話。
テーブル構成
製品マスタをメンテするような超絶シンプルなアプリで考える。
| product_code | product_name | img_url | image |
|---|---|---|---|
| 1000 | AppSheet | https://wgslab.xyz/wp-content/uploads/2020/08/asp_top.png | =C2 |
| 2000 | G Suite | https://keywest-k.co.jp/wp-content/uploads/2020/01/gsuite.png | =C3 |
| 3000 | BigQuery | https://cdn-ak.f.st-hatena.com/images/fotolife/z/zeals-engineer/20190820/20190820120026.png | =C4 |
| ・・・ | ・・・ | ・・・ | ・・・ |
スプレッドシート側の設定
まぁテーブル構成の時点でネタバレしてると思いますが、要は img_url のカラムにURLを設定し、image カラムは img_url の値を参照する数式にします。
あとは AppSheet 上で img_url は Type を URL に、image は Type を Image にすればOK。
ということでまずはスプシ設定。
注意点としては、データを追加してもD列の数式が自動では増えてくれないので、想定される行数分ひたすらコピっとくぐらいですかね。
AppSheet で何百万、何千万とかのデータを取り扱う人は少ないと思うので、想定される件数分ぐらいずらーっと数式並べておけばOKでしょう。
AppSheet側の設定
続いて AppSheet 側の設定。
多分 Table を取り込んだ際にこんなWarningが出ると思います。
「image カラムは他のカラムの値参照しているから Read-Only にするで」的な内容。
おけおけありがと。
なので Columns みると、image は Editable? のチェックが外れてますね。
さらに img_url は URL Type, image は Image Type と意図した通りのデータ型になっています。
ほんとにかしこい。
つーことでこれをエミュレーターで確認すると。
できました。意図した通り画像の編集は直接はできず、img_url を変更することでしか変えられなくなっています。
そして Google Workspace のロゴに変えたかったのですがうまく表示されませんでした。
まぁ伝わったかと思うのでこれにて。
