とあるエンジニアの作業ブログ

GCP クラウド ノーコード 作業効率化

AppSheet逆引きリファレンス ~URL指定で画像を表示させる~

投稿日:

まだまだ事例の少ない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。

ということでまずはスプシ設定。
Spread Sheet

注意点としては、データを追加してもD列の数式が自動では増えてくれないので、想定される行数分ひたすらコピっとくぐらいですかね。
AppSheet で何百万、何千万とかのデータを取り扱う人は少ないと思うので、想定される件数分ぐらいずらーっと数式並べておけばOKでしょう。

AppSheet側の設定

続いて AppSheet 側の設定。

多分 Table を取り込んだ際にこんなWarningが出ると思います。

Marking column ‘image’ of sheet ‘product’ read-only because it contains a formula that references another cell. The column formula will be re-computed only when the mobile app is synced.

「image カラムは他のカラムの値参照しているから Read-Only にするで」的な内容。
おけおけありがと。

なので Columns みると、image は Editable? のチェックが外れてますね。
Columns

さらに img_url は URL Type, image は Image Type と意図した通りのデータ型になっています。
ほんとにかしこい。

つーことでこれをエミュレーターで確認すると。
Image by url Demo

できました。意図した通り画像の編集は直接はできず、img_url を変更することでしか変えられなくなっています。
そして Google Workspace のロゴに変えたかったのですがうまく表示されませんでした。

まぁ伝わったかと思うのでこれにて。

-GCP, クラウド, ノーコード, 作業効率化
-,

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

【備忘】EC2に新規のキーペアで接続する

EC2に新規のキーペアで接続したとき時のメモ。 AWSコンソール:左側のナビゲーションペインの「ネットワーク & セキュリティ」の「キーペア」から新規キーペアを作成 クライアントPC:新規キ …

【備忘】ChromeのMarkdown Preview Plusプラグインでプレビューできなくなった時の対処法

ChromeでMarkdown Preview Plusというプラグインを使ってライトにマークダウンを読んでたんだが、急にマークダウンがPreviewできなくなった。 色々試した結果、なぜかファイルU …

kintoneで予算管理アプリを作るまで 〜ユーザー・権限管理編〜

仕事でkintoneを使って予算管理を行えないか!?的な話に巻き込まれた。 kintoneなんて使ったこともないし、今後も使うつもりはないが、一応フィジビリティしたのでメモ。 ユーザ・権限管理とアプリ …

kintoneで予算管理アプリを作るまで 〜アプリ実装編〜

仕事でkintoneを使って予算管理を行えないか!?的な話に巻き込まれた。 kintoneなんて使ったこともないし、今後も使うつもりはないが、一応フィジビリティしたのでメモ。 ユーザ・権限管理とアプリ …

【備忘】MacのExcelの自分的よく使うけど忘れがちなショートカット

MacのExcelのショートカット備忘録。個人的によく使うけど忘れがちなショートカットのみメモ。(感覚的にWindowsとほぼ同じやつは記載割愛) 作業内容 ショートカット セルの編集モードに入る c …