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

【意外に簡単?】データタイプXYの使い方

【意外に簡単?】データタイプXYの使い方

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

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

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

新UI画面の説明

まずはじめに

本記事はこんな人におすすめ!!
  • Form Viewの画面で平面図を挿入し、その図に印をつけたい
本記事を読んで出来るようになること
  • データタイプXYを用いて平面図にマップアイコンをセット出来る

今回の記事内容は中級者以上の内容です。

appsheetでデータタイプの設定をしている皆さん

データタイプのXYって使ったことありますか?

このデータタイプはほとんどの人が触ったことがないと思います。

appsheetのHelpページを確認したら、このXYについては以下の記載がありました。

Returns an XY value based on the specified X and Y coordinates.

XY(50, 50) returns the XY value that is positioned at the center of an image.

  • x – Numeric value (between 0 and 100) specifying the X-axis coordinate.
  • y – Numeric value (between 0 and 100) specifying the Y-axis coordinate.
AppSheet Help

画像の中心座標をXY(50,50)とし、X,Y座標ともに0から100の値で位置を記録する

原理はわかりますが、これだけではどう使っていいのかわかりません笑

私が少し触ってみてわかったことを記事にまとめてみたので、まずはXYタイプの基礎知識として役立ててもらえたら嬉しいです。

それでは勉強していきましょう(^^)

データの準備

検証データの説明

今回の検証で用いるデータシートは2つです。

それぞれのデータシートの項目は以下のように設定しました。

アプリのイメージとしては、あらかじめ登録された間取りの図面に対して、気になるポイントをチェックしていくものです。

登録データ
登録データシートの説明

カラム値はID、間取り、XYの3つです。

ポイント!

XYのカラムについてですが、私がVirtual Columnを使って検証したところ動作エラーが発生しました。

本記事の内容を真似する場合は、Physical Columnカラムでの検証で行ってください。

登録図面
登録図面シートの説明

カラム値は間取り、imageの2つです。

データの準備は以上になります。

それではデータタイプXYについて解説していきます(^^)


データタイプの修正と図面の登録

appsheetにデータを送ったら、データタイプの修正をしていきます。

以下の手順を参考にしてください。

登録データシートのIDカラムのShow?のチェックを外す
IDカラムの設定

この情報は無意味なので表示させない方がベターです

ただし、Key値にユニーク値を登録するようなアプリの場合は、その限りではありません。

間取りカラムのタイプをrefにし、参照テーブルを登録図面シートにする
間取りカラムの設定
XYカラムのタイプをXYにし、Background image for the XY coordinatesに[間取り].[image]を入力する
XYカラムの設定

この設定が本記事で一番大事な設定です。お忘れなく(^^)

ここまで設定が出来たら一度アプリをSAVEしておきましょう。

図面登録シートについては初期値のままでもおそらく大丈夫ですが、imageカラムがデータタイプimageになっていない場合は、そこの編集だけ必要です。

図面の登録

次に、XYで表示させる図面の登録をしてみます。

新規Viewを作成
登録図面Viewの作成

For this dataを登録図面にすることだけ注意してください。

登録図面のViewを作成したらプレビュー画面からデータを追加していきます。

新規図面の登録方法
新規図面の登録方法

画面右下の+ボタンから新規登録をします。

図面の登録

間取りにテキスト、imageにXYカラムで表示させたい図面を指定し、Saveを押します。

複数図面を登録

表示させたい図面を同じようにいくつか登録していきます。(今回は2つ登録)

これで準備完了!続いてアプリの挙動確認をします。


アプリの挙動確認

アプリの挙動確認

データの登録手順としては、以下の流れを参考にしてください。

登録データViewから新規作成をクリック
データの新規登録画面

登録データViewのタブを選択した状態で右下のAddボタンをクリックします。

間取りを選択し、それに紐ついている図面情報を取得する
ref挙動の確認

間取りを選択すると、それに紐付いたXYカラムには[間取り].[image]で図面情報を遡れるようにしてあるので、自動で登録図面が表示されます。

データタイプrefについては、appsheetでは必修の項目です

参考記事
XYカラムの図面をクリックし、マップアイコンを編集する
XYカラムの説明

仮で上の写真の位置にアイコンをセットしてみます。

マップアイコンを複数登録する
マップアイコンの確認

登録図面にはSTEP.3でセットしたマップアイコンが表示されています。

さらに画面右端の赤枠のマップアイコンをクリックすると複数のマップアイコンをセットすることが可能です。

マップアイコン複数登録

図面で登録された地点は青いマップアイコンで表示されます。

このアイコンをクリックすると・・

detailの表示

そのアイコンのdetailが表示されます(^^)

XYタイプの設定が活かせるアプリとしては、

在庫管理アプリ:構内の図面を登録して製品の登録箇所と個数をインプット

安全指摘アプリ:不安全な箇所を写真に残してメモ

こんなアプリを作ってみたら面白いかもしれませんね(^^)


まとめ

以上、データタイプXYについての記事でした。

私もまだまだ勉強中の身であるため、本当にこれで使い方が合っているのか若干不安ではありますが・・

設定の方向性としては合っていると思います。

需要があると触るようになってより高度な設定とか分かるようになるんですけど、現状これが限界でした!

この記事をご覧になられた方の役に立てたら嬉しいです(^^)

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

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

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

コメントを残す

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

CAPTCHA