ノーコード・ツールAdaloで、コンポーネントとデータの紐づけに試行錯誤する

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

本日は、Home画面のコンポーネントを、２つのテーブルに格納されているデータと紐づける作業を行います。

今日のポイントは、「各コンポーネントは、リストに紐づいているテーブルの列項目に対して紐づける。」です。

では、行きましょう！

５つのコンポーネントを紐づけ

では、Home画面の各コンポーネントを、データベースのデータと一つ一つ紐づける作業を行います。下図は、設定前のHome画面です。

１）プロフィール画像
２）ユーザーの表示名
３）投稿した画像
４）投稿した画像の説明
５）投稿した日時

の５つを紐づけします。

１）から２）は、ユーザーのテーブルと紐づける、３）から５）は投稿データのテーブルと紐づけることが予想されますね。

では、下図の「リスト化されたコンポーネント」（リスト化については、前回記事参照）を更新していきます。

各コンポーネントの紐づけ

まずは、１）プロフィール画像をダブルクリックします。（どうやら、コンポーネントの「リスト化」を行うと、シングルクリックでは選択できないようです）

投稿済みのデータを表示させるのですから、Databaseを選択するのはいいですね。次に、Current PostとLogged in Userがありますが、今回紐づける５つのコンポーネントは、すべて「Current Post」（現在の投稿）を選択します。

次は、Posting Userを選択（Imageを選ぶと何が選択されるのでしょう？）、そして最後にProfile Imageを選択します。

どうやら素直にデータベースの列名称を選択するわけではなさそうです（汗）。少し難しさを感じます。

どんどん行きます。下図は、２）ユーザーの表示名です。なるほど、Userのテーブルのデータに紐づけるにあたり、一度、Postsのテーブルを中継して紐づけるのですね。難しいです。これは、RDBの知識が必要なのでしょうか。

３）投稿された画像です。今度は、テーブルの指定なしで、Imageを選びます。

うーん、少し分かりました。前回記事のとおり、すでに、５つのコンポーネントの「リスト」は、Postsのテーブルに紐づけてあります。だから、テーブルの指定は、省略されているのですね。そして、２）ユーザーの表示名は、リストに紐づいているテーブル（Posts）を経由して、Userのテーブルに紐づけたわけですか。

４）投稿した画像の説明です。

最後に５）投稿した日時です。

紐づけ関係のまとめ

紐づけが複雑なので、下図のとおり整理しました。

下図は正確ではなく、実際のところ、１）プロフィール画像と２）ユーザーの表示名は、一度、表「Posts」の列「Posting User」を経由して、それぞれ「Profile Image」と「Full name」に紐づいている（はずです）。

本日は、ここまで！本日の学びは、「各コンポーネントは、リストに紐づいているテーブルの列項目に対して紐づける。」です。すみません、私の仮説ですので、間違っているかもしれません。詳しい方、そっと教えてくださると幸いですｗ。

いや、データベースの紐づけを理解するのは本当に難しいです。でも、ＧＵＩで設定できるのは、ノーコード・ツールの強味ですね。

では、ビーダゼーン！