MENU

ノーコード AppSheet Tips (3) - デザインについていくつかの話題

久しぶりにAppSheetで遊んでいます。
ノーコードであるAppSheetはいわゆる「お仕着せのひな形」を使って、アプリの原型はすぐにできあがるのですが、そこからカスタマイズしようとすると、AppSheetの表現力の貧しさや制約の大きさにじゃまされてなかなか思うようなアプリが作れません。動きのあるUI(ユーザーインタフェース)ともなると、そもそもAppSheetがそうしたUIを想定していないと思われるためかなり苦労します。マニュアルにはない裏技があるのではないかと検索したりChatGPTに質問したり、ノーコードと言えども慣れるのにはそれなりの時間は必要です。
今回はそんなAppSheetのデザイン回りについて知っておくと便利なものをいくつか紹介したいと思います。

1.テキストカラーにはColorNameが使えます

テキストカラーを変更する場合は新しく「Format Rules」を作って、「Text color」欄にある12色のColorPickerから目的の色を選択します。例えば赤をクリックすると丸印にチェックが入りテキストボックスに「red」と表示されます。

ここで作成中のアプリに必要な「white」を探したのですが、このColorPickerには「white」がありません。AppSheetのマニュアルには「16 進数ベースのカラーコードを手動入力することもできます」とありますが、16進数「#FFFFFF」と手入力するのはスマートじゃありません。そこで試しに「white」と入力したところなんと何事もなく入力できてしまいました。

サンプルにない他のColorNameも入力してみました。原色大辞典(https://www.colordic.org)にあるColorNameはほぼ問題なく使えるようです。

ちなみにChatGPTにも質問してみましたが、見事に否定されました(笑)。

'AppSheetで設定できるテキストカラーに"White"などのColorNameは使えますか?

結論
AppSheet では "White" などの ColorName(文字列で色名指定)は基本的に直接テキストカラー設定で使えません。

詳細
Format Rules の場合:
・色指定は Color Picker(カラーパレット)で選択する方式で、ColorName を文字列で直接入力できません。
・Expression の中で色名文字列 "White" を返す形で設定できる仕様はありません。

マニュアルに書いてないのでしかたがありませんが、個人的な実験の結果、これはウソっぽいです(ColorNameは安心して使えそうです)。

2.Viewのアイコンと表示名を変更する

デフォルトでは画面下に無味乾燥なアイコンとビュー名が表示されます。これを右側のような顔アイコンとスライスの件数表示に変更します。


ビューの設定画面の「Icon」と「Display name」で変更することができます。


「Icon」は種類が多いのですが、設定画面の表示行数が少ないため選択にスクロールを何回もしなければならず不便です(この記事の最後に敢えて一覧を載せました)。

「Display name」はスライスの件数をカウントしています。

text(count(Slice1[ID])) & 
"(" & 
text(count(select(Slice1[ID],[Check]=true))) & 
")"

Slice1 には "ID" と "Check" の2つの列があるものとします。 上の方の "text" は「Slice1の件数」を文字列に変換しています。下の方の "text" は「Slice1の中でCheck列の値が "true" のものの件数を文字列に変換しています。後の "text" を "(" と ")" で囲んでいるので、例えば Slice1 が 10件 でそのうち Check=true が 5件 だったときの表示は

10(5)

となります。この表示は動的に更新されます。データを変更するとすぐに反映されるのでなかなか便利ですが、時々アイコンが重複して(増えるように)表示されることがあります。この現象は再現性がないので原因が不明ですが、個人的にはAppSheet側の問題(バグ?)のような気がします。

3.アクションでディテールビューを表示させる

ビューを作成するときは「For this data」欄に使用するスライスを登録します。これでビューとスライスが関連づけられ、システムは "スライス名_Detail" と "スライス名_Form" の2つのビューを自動生成します。さらに 「Row Selected」 のアクションに「Auto assign (View details)」を選択すると、自動生成されたディテールビューにリンクさせることができます。この「Auto assign (View details)」の中身は見ることができません。

ディテールビューにリンクするアクションを自分で作るにはどうしたらいいのでしょうか。AppSheetのヘルプを調べると "LINKTOFILTEREDVIEW" と "LINKTOROW" の2つが使えそうなことが分かりました。使い方は次の通りです。

'LINKTOFILTEREDVIEW関数を使う(リンク後左右スワイプが使えない)
LINKTOFILTEREDVIEW("Slice1_Detail", [ID] = [_THISROW].[ID])

'LINKTOROW関数を使う(リンク後左右スワイプが使えるが、順序は物理行順)
LINKTOROW([_THISROW].[ID],"Slice1_Detail")

[_THISROW]とは選択した行のことです。キーとなる列(=[ID])で検索します。どちらも "Slice1_Detail" にリンクするのですが、表示後の左右スワイプに違いがあります。"LINKTOFILTEREDVIEW" はスワイプできません。"LINKTOROW" はスワイプできるのですが、順序がデータベースの物理的な登録順になります。スライスの順序にならないところがシャクにさわります。

4.付録(アイコン一覧)

View などで使用するアイコンの一覧を載せます。アイコンは Solid, Regular, Light の3セットあり、Regular だけで次に示す 1646個があるので、最適なアイコンを見つけるには結構時間がかかります。この一覧が役に立つといいのですが。








最後まで御覧いただきありがとうございます。