ノーコード・ツール「Glide」のプレビュー画面は開発中から操作できる

新刊『基礎から学ぶノーコード開発』第２章を参考に、ノーコード・ツールGlideでアプリを作っています。その11回目の記事となります。前回記事は次の通りです。

今日は、「避難所を探す」というタブ内のコンポーネントの設定を更新していきます。作業しながら面白い発見がありました！では行きましょう！

避難所の情報を避難者に提供する

今回更新しようとしているのは、下図のとおり、５つのタブメニューのうち、「避難所を探す」です。避難所を検索して、その避難所の関連情報を表示させ、避難者や救援者が必要とする情報を提供するのが目的です。

その「避難所を探す」タブのスタイル設定をします。リスト形式にしたいので、Listを選びます。

すると、スマホプレビューは下図のとおり、表示されます。どのデータを表示するかを指定していないのに、です。Glideの「とりあえず適当に使われそうなデータと紐づけておく」という機能のおかげです。なるほど、イメージが湧きやすい。

開発中でもスマホ上の機能がすぐに試せる

一番上に親切にもすでに検索窓がありますね。これに検索キーワードを打ち込むと、きちんと機能します！「中央」と打ち込むと、「中央小学校」が絞り込まれました！少し感激です。

なお、下図のように画面右側メニューのOptionsのShow search barを指定することで、この検索窓を追加できるのですが、私がやる前にGlideが勝手に設定していましたｗ。

さて、しぼり込まれた避難所をタップすると、下図のとおり、その避難所の詳細が出てきます。これは、このタブのソースとして紐づけたGoogleスプレッドシート「高崎市の避難場所」の列項目のようですね。Glideがまずは「これらのデータを使うんでしょ？」というかの如く、これらの項目をとりあえず並べてくれています。

いや、しかし、避難所を検索して避難所の緯度や経度が分かってもしょうがないですねｗ。一体、避難所の何を表示するように設定されているのでしょうか。画面左側のコンポーネントを確認しましょう。

なるほど、さきほどスマホプレビューの項目のとおりですね。このままコンポーネントを変更しなければ、役に立たないアプリができあがります。この「避難所詳細のコンポーネント」を設定していく必要がありそうです。

はい、今日はここまで。本日の学びは、「スマホビューは、開発中でも、どんな風に表示され、何より、どんな風に動くのか検証できて便利」でした。つくづく開発者にやさしいノーコード・ツールだと思います。

では、ビーダゼーン！