ノーコード・ツールBubbleで、画像アップロードの設定

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

今日のポイントは、

「一つ上の親階層のグループに紐づくデータの設定を、子のエレメントが引き継いで設定できる」です。

では、行きましょう！

作業目標の確認

まずは、目標を確認します。TwitterみたいなSNSアプリを作るのが最終目標です。完全な再現は難しいですが、似たようなページを作ります。目下、下図のようにツイッターのプロフィールぺージからプロフィール画面に移動してプロフィールを編集できるようにしています。

今日は、プロフィール編集ボタンをクリックすると立ち上がるポップアップ上で、プロフィール画像が編集できるよう設定します！

１．Picture Uploaderを設置する

では、プロフィール画像が更新できるようエレメントをポップアップ内に設置します。そのエレメントは、Picture Uploaderです。

画面左側のエレメント一覧には、一瞥して見つかりません。こんなときは、テキストで検索！はい、すぐに出てきました！これをポップアップ内へドラッグします。

Property Areaが立ち上がります。そして、読み込む画像データを指定するはずなのですが、指定したい「Parenet Group」が表示されません…。でも、心当たりはあるのです。

前回記事で、ポップアップの高さをデフォルトの「１」にしたままでした。やはり、ここは「１」のままではダメでしょう。しかし、教本に値の指定はありません。では、、、適当に「500」にしてみます！

気を取り直して、もう１回picture Uploaderをポップアップ内へ配置します。そして、Dynamic Imageをクリックします。

あ！出てきました。Parenet Group’ Userを指定します。

２．ImageUploaderの設定

無事、ImageUploaderは配置できましたので、設定を進めます。Dynamic Imageは、「Parent Group’s User's」の「profile_image」とします。

難しいですね…。分解して考えます。

まずは、Parent Group（親グループ）とは何を指すのでしょう？これは、直上のグループである「ポップアップエレメント」のようです。

続いて、その「User」とは何でしょう？。親グループPopupのワークフロー設定では、Data to display（表示されるデータ）を、「Current Page User」としました。そのことかと思われます。編集対象のユーザーのことですね！

最後に、Profile imageは何でしょう。Current Page Userのprofile_image列に格納されている画像データのことでしょう。

したがって、「親グループたるポップアップでデータの参照元として指定したCurrent Page Userのデータのうち、profile_image列に格納されている画像データを参照して表示せよ」ということですね！（多分）

以上で教本の設定指示は、終わりです。が、エレメントが、教本の仕上がりイメージ通りになっておりません。残りは、覚えてきた知識で少し更新します！

サイズは、150×150pxくらいでしょう（テキトーです）。

外観を変えるには、Remove styleしないといけません。これもこれまで教本から教わったことです。

丸みをつけます。Roundnessを100にしてみます。100がMAXかしら？確信はありません！

Placeholderも更新します。入力前に自動表示されるメッセージのことですね。

あとは、右クリックでCenter verticallyしました。すると、下図のとおりです。はい、それっぽくなりました！

本日は、ここまで！本日の学びは、「一つ上の親階層のグループに紐づくデータの設定を、子のエレメントが引き継いで設定できる」ということでしょう。設定が楽になる素晴らしい機能です。

では、ビーダゼーン！