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

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

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

まずはじめに

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

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?のチェックを外す

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

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

間取りカラムのタイプをrefにし、参照テーブルを登録図面シートにする

XYカラムのタイプをXYにし、Background image for the XY coordinatesに[間取り].[image]を入力する

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

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

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

図面の登録

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

新規Viewを作成

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

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

新規図面の登録方法

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

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

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

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

アプリの挙動確認

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

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

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

間取りを選択し、それに紐ついている図面情報を取得する

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

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

参考記事

ref機能の基本についてまとめています(^^)
【誰でも簡単】データタイプrefの機能について

XYカラムの図面をクリックし、マップアイコンを編集する

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

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

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

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