管理人がみんなに伝えたい!!と思った知識や学びを気ままに書いています(^^)

【面倒な設定は不要!】appsheetで写真を表示させる方法

【面倒な設定は不要!】appsheetで写真を表示させる方法

本記事はノーコードアプリ開発について全く知らなかった管理人が独学で勉強し、ここ大事!と感じた部分を記事にまとめています。

本ブログでは新UI画面で内容をまとめています。

新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

新UI画面の説明

まずはじめに

本記事はこんな人におすすめ!!
  • Form入力画面で写真挿入をしたい人
本記事を読んで出来るようになること
  • データタイプShowやXYのカラムに確実に写真を表示させる方法がわかる
  • any(select())の関数の使い方がわかる

今回の記事内容はアプリに表示させる写真の設定についてです。

当ブログでデータタイプShowの設定方法について記事にまとめましたが、Google Driveの閲覧設定やPCのキャッシュの影響で安定した挙動を示さないことがわかりました。

ということで考えた案が、

アプリのデータテーブルに写真を保存してそれをselect()関数で取り出せばいい

でした。

この方法は面倒な写真の共有設定なども不要で、汎用性の高い方法だと思います(^^)

これ1つ知っていれば大丈夫(^^)

そんな記事内容にしていますので、ぜひ最後まで御覧ください。

それでは勉強していきましょう!


検証用のデータ

検証データのイメージ

この方法は表示させたい写真を登録するための登録シートが必要です。

今回の検証に用いたデータは以下になります。

登録データシート
登録データシート

カラム1とカラム2の間に写真を挿入する方法を考えます(^^)

image master
image master

こちらのデータシートにアプリで表示させたい写真を登録します(^^)

データの準備が出来たらappsheetにデータを読み込みます。

新規でViewを作成する

データの読み込みが完了したらViewの作成をします。

新規Viewの作成

For this dataの参照テーブルは写真を登録するシートを選択します。

あとの設定は何を選んでいただいても構いません(^^)

このViewはアプリユーザーに見せる必要がないので、写真登録後はViewを隠すようにしてUIを高める設定をしておきましょう!


写真の登録と設定方法

やることのイメージ

続いて写真を登録したあと、それを表示させたい箇所に表示させる方法の説明をします。

やっていることは単純ですので、サクサクいきましょう!(^^)

image master Viewから写真を登録する
データ登録の手順

imageを選択したらSaveを押して保存をします。

保存した写真を確認する
登録した写真のview

このViewから表示させたい写真の情報が入手できます。

太字になっているIDカラムの情報をメモしておきます。(上図の場合は[ID]=”df7d3cea”)

写真を挿入したいViewのデータカラムにVirtual Columnを作成する
virtual column

App formulaには『” “』を送っておきましょう(^^)

この状態で一度Saveを押します。

もう一度作成したVirtual Columnの編集画面を開いて、下図のように設定を行います。

showの設定

Type:Show、Category:image、Content:以下の関数を入力します

any(select(image master[image],[ID]=”df7d3cea“))

青色下線の部分は適宜変更してください(^^)

登録した写真を表示させたい箇所にセットする

作成したVirtual Columnを表示させたい箇所にセットするにはViewの設定変更が必要

uxの設定変更

写真を挿入したいView nameのFormシートを選択し、その中のColumn orderでアプリで表示させるカラムの順番を決めます(^^)

Column orderの設定が問題ないか確認する
form viewの確認

写真を挿入したい箇所に表示されていることが確認できました(^^)


まとめ

以上、写真を挿入したい箇所に設定する方法についての記事でした。

この記事でまとめた方法なら面倒な設定(写真の閲覧権限)は不要で、全てappsheetの設定でコントロールすることが可能です。

この記事では、カラムとカラムの間に挿入する写真の例を挙げましたが、タイプXYの背景写真としても有効です。

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです!

勉強お疲れさまでした(^^)

この記事の内容を使った記事をご紹介します

参考記事

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA