ノーコード・ツールAdaloで、コンポーネントを「リスト化」する

新刊『基礎から学ぶノーコード開発』第3章を参考に、ノーコード・ツールAdaloで写真投稿アプリを作ることにしました。本日は第7回の記事となります。前回記事は次のとおりです。

本日は、Home画面のコンポーネントをテーブルと紐づける前段階の作業を行います。

今日のポイントは、「データの紐づけ作業の前段階として、コンポーネントを束ねるリスト化作業が必要だ」です。

では、行きましょう！

コンポーネントをリスト化する

それでは、Home画面のコンポーネントを「リスト化」します。でも、リスト化ってどういうことなんでしょう。

まだ、詳しく分かっていませんが、「複数のコンポーネントを一つのまとまりにした上で、データベースと紐づけることができるようにすること」のようです。

下図は、Home画面です。これは画像投稿アプリですから、ここに投稿したコンテンツが表示されます。２つのImageコンポーネント、３つTextコンポーネント、１つのLineコンポーネントがあります。

コンポーネント一覧を表示させると次の通りです。これらの６つのコンポーネントをすべて選択する、と教本に指示があったらので、このメニューから選択しようとしたのですが、うまくできない。どうやるのでしょう？

実は、プレビューが画面から、「Shift＋クリック」や「ドラッグ」で選択します。開発ツールの基本操作は、慣れるしかないですね。すべてのコンポーネントを選択できました！

すると自動的に「６つのコンポーネントが選択されました」と表示され、「グループを作る」と「リストを作る」が選べるようになります。どちらも似たような語感ですが、「リストを作る」を選択します。

「リストを作る」を選択すると、Listの設定メニューが表示されます。「これは何のリストですか？」という項目は、「Posts」（投稿）を選択します。Postsは、ユーザーが投稿したデータが格納されるテーブルの名称です。UI作成前に作成しておきました。

並び変え（Sorting）の方は、「作成したデータ 最新から最古まで」を選択します。新しいものがトップに表示されるようにしたいですからね。

崩れた体裁を調整する

以上で、複数のコンポーネントを束ねて、特定のテーブルと紐づけることができました！これでよし、と思いきや、プレビューの体裁が崩れています。

会員登録の画面もコンポーネントの体裁が崩れる現象が起きました。うーん、これは何とかAdaloの開発者に何とかしてほしいですね。それとも、仕方がない現象、「仕様」なんでしょうか？？

嘆いても仕方ないので、体裁をもとに戻しました。これでよしとします。

ところで、設定していないコンポーネントが、下図のように、Home画面下部に表示されています。これは私の環境のせいなのか、Adaloの仕様なのか。Adaloは発展途上のツールなのかもしれません。

今日は、ここまで！本日の学びは、「データの紐づけ作業の前段階として、コンポーネントを束ねるリスト化作業が必要だ」です。

他のノーコード・ツールであるGlideとは、ちょっと設計思想がが違いますね。でも、アプリを作成していく過程はだいたい同じです。いろんなツールを使っていけば、アプリ開発の流れが体に染み込んでいく気がします。日々前進です！

では、ビーダゼーン！