kの雑記ブログ本記事はノーコードアプリ開発について全く知らなかった管理人が独学で勉強し、ここ大事！と感じた部分を記事にまとめています。
本ブログでは新UI画面で内容をまとめています。
新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)
まずはじめに
- Desktop modeの基礎を学びたい人
今回はこちらの記事でも少し触ってみたDesktop modeについて記事をまとめています。
先に結論から(^^)
- Grouping機能のUIが大幅に向上
- Detail Viewの細分化によるUXの向上
旧UIの画面仕様では、データが画面中心に不自然に寄ってしまい違和感がありました・・
他の記事の画面ですが、Desktop modeに切り替えると下図のようにViewが変わります。
Desktop modeの基本画面
Desktop modeの名前にふさわしくブラウザでのUX向上がかなり期待できます(^^)
モバイル端末をメインで使用している読者の方は、本記事の内容は気にしなくて大丈夫です！
それでは勉強していきましょう(^^)
Desktop modeの特徴
まずはDesktop modeの切り替え方法について説明します。
Settings→General→Desktop mode(Preview)をOn
これで準備は完了です(^^)
次にDesktop modeのメリットを述べます。
- UXのGroup byのGrouping機能の仕様が大きく変わってスマートに
- データタイプShowを入れるとDetail Viewが任意の箇所で分割できる
この2点が触ってみて特に大きなメリットだと感じました。
appsheetでアプリを作るのは容易ですが、アプリのUIを高めようと思うとViewの設定や、最初からデータテーブルの構成をしっかりと考える必要がありました。
しかし、Desktop modeは思いつきや後付けの「こうしたい」を叶えやすい仕様だと感じます。
Grouping機能のスマート化
例えば、下テーブルのようなデータを用意します。
従来の仕様でこの従業員名簿を使いやすい形にするには、以下の設定が挙げられます。
上記設定でアプリの画面を確認すると・・
このようなUIになります。
ではDesktop modeだとどういった設定になるのか？
View typeをtable、Group byに所属部署を設定
設定はこれだけでいいです。
Desktop modeを使用するときは、Group byにセットするカラムのみ考えればOK
Desktop modeの非常にパワフルな仕様です。
この設定だけで高性能なViewが出来てしまいます(^^)
出来たViewがこちら
従来のViewよりもシンプルかつコンパクトにデータが表示されるようになります。
初心者向けで簡単設定！ なので万人におすすめできる設定ですね。
Detail Viewの細分化
もう一つ知っておいて欲しい機能としてDetail Viewの細分化です。
データテーブルにカラム数が多くなるとスクロールしないと全データを確認することが出来ません。
これを解消する方法として、データタイプShowを使います。
具体的な手順は以下を参考にしてください。
難しい設定は不要！！上図のとおりに設定すればOKです(^^)
次にView設定から表示させるDetail Viewを修正します。
UX→対象のViewを選択
Column orderの設定
やることとしては以上です(^^)
最後にこの設定でどういった挙動を示すか確認します。
実際のEdit画面
- 登録データのカテゴリー別にまとめる
- 編集させたいデータ群だけまとめる
こういった時に役立つ設定だと思います(^^)
Grouping機能強化とデータタイプShowによるDetail Viewの分割
この2つの仕様はぜひ知っておいたほうがいい機能だと言えるでしょう(^^)
2023年12月時点で、appsheetのOpen in tab（大画面）では、デフォルトでこのDesktop modeを使用することになっています。特に強いこだわりがないのであれば、旧画面は使用しないほうがいいかと思われます。
まとめ
個人的な評価としては、非常に良いと思います。Google社・AppSheet社の本気度が伝わってきました！
以下の2点が特にパワフルになったことです。
- Grouping機能のUIが大幅に向上
- Detail Viewの細分化によるUXの向上
機能が更新されたり、追加で伝えたいことが出てきたら記事を更新していきます。
記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。
わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！
勉強お疲れさまでした(^^)