個人ページでのrepeating group

shota · 2020-09-30T12:39:55.661Z

こんにちは。私は現在マーケットプレイスを作っているのですが、課題があります。理想としては、アカウントごとの専用ページにインスタグラムのような写真を掲載することができ、それらの写真をクリックして詳細ページに行けるようにしたいです。

リピーティンググループを使ってこれらを作ろうとしたのですが、なぜか他のユーザーページと共通化してしまいました。その人専用のページでリピーティンググループのように投稿ごとに写真を表示するにはどうすればいいのでしょうか？

rio · 2020-10-01T01:22:05.363Z

こんにちは。

「RG側での設定が間違ってないのに、その人専用の写真が表示されない」ということであれば、「ユーザーの切り替え」をしないで写真をアップロードしたことが、理由として考えられます。

Dataタブで個々の写真データを確認してみてください。Created by が空欄になってたりしませんか？もしくは全ての写真が同じユーザー名であったりしても同様に希望通りに個別に表示ができません。

shota · 2020-10-04T14:26:10.815Z

ご回答ありがとうございます。
Dataタブでは個々の写真データにはUser テーブルからユーザ情報をリレーションしています。また、ユーザーページの名前などのプロフィール情報はパラメータとユニークIDでそれぞれユーザーごとの表示ができましたが、これと同じ方法をRGでしようとしてもエラーが出てしまいます。現状では、現在ログインしているユーザーの写真が表示されます。例えば、Aという人がログインしてBさんの写真を見てもAの写真が表示されてしまいます。Groupでの個別表示は成功したのですが、RGでユーザーごとの表示ができません。返信していただけると幸いです。

rio · 2020-10-05T10:02:52.971Z

それとPrivacyのセッティングはお済みですか？その写真データを「参照できる人、範囲」などを設定するタブがあります。

rio · 2020-10-05T10:39:22.887Z

実現したいデータ構造がわからないので、推測で作ってるのですが、以下の例でエディターを確認してみてください。（ユーザーが切り替わっても、全てのユーザーの写真が表示されます。切り替えボタンをクリックしても全写真が表示されます）

Preview:

Bubble

Bubble - Visual Programming

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

Editor:

Bubble

Bubble Editor - Mymethod

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

簡単で結構ですので、エクセルか手書きのマンガで実現したいUIを教えていただければ早いです…

shota · 2020-10-05T11:36:36.303Z

IMG_4344750×1006 335 KB

ご丁寧にありがとうございます。
軽くイラストを書きましたのでご参照ください。
まず、各ユーザーを一覧できるページを作りました。例えばその一覧ページのABCさんというユーザーをクリックすると、書いたイラストのページに行き上部にABCさんの名前、プロフィール写真、メモをユーザーごとに表示します。これはパラメーターを使い、一覧ページからこのページにユーザーごとの情報を飛ばすことができました。
そして問題となるのがこのページ下部のユーザーが写真を投稿するものです。現状は、一覧ページからABCさんを押すとABCさんのプロフィールが正常にユーザごと表示されるが、その下の写真が現在ログインしているユーザーが投稿した写真になってしまいます。

rio · 2020-10-05T13:17:24.351Z

イラスト下部のPictureですが、ログインしていないその他のユーザーの写真も表示させたいのですね？

その場合、確認してほしい点は以下です。

RGのDataSourceは確かに全ユーザーが表示されるようになっているか
RGは別のグループ内に入っていないか（そのグループがログインユーザーのみの表示設定になっている）
Privacy設定がされていて、当該写真はログインユーザーのみが閲覧できるようになっている（この場合は他のユーザー写真は表示されない）

あと、私が作ったサンプルは全ユーザーの写真が表示されます。設定の違いなどを確認してみてください。

shota · 2020-10-05T16:05:08.475Z

イラスト下部のpictureには、インスタグラムのマイページのようにABCさんが投稿した写真のみ表示させたいです。その場合もやはり確認事項は同じですか？

rio · 2020-10-06T00:29:06.330Z

ユーザーのプロフィールを表示させるとき、その前段で「ユーザーを選択」する動作があると思います。その際に、そのユーザーが選択されたことを情報として保持する必要があります。で、次にその選択されたユーザー情報をキーにして、RGの表示設定をする必要があります。この２ステップはよろしいでしょうか？

私の方では、この流れをCustomStateで実装しています。

エディター：

Bubble

Bubble Editor - Mymethod

Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications.

CustomStateを切り替えようのRGのインスペクターに設定：

スクリーンショット 2020-10-06 9.10.40903×265 28.9 KB

このCustomStateをキーにして、RGのフィルター（抽出）を設定：

スクリーンショット 2020-10-06 9.11.43710×321 30.7 KB

このRGをクリックしたときに、そのユーザー情報をワークフローで保存：

スクリーンショット 2020-10-06 9.11.07766×316 25.2 KB

上記は「ページ遷移しない」パターンで実装しています。
すみません、ページ遷移しながら「選択したユーザーの情報を保持」する方法もあるかと思いますが、そちらについてはあまり詳しくありません。

SPA（シングルページアプリケーション）の方がこのようなケースも含めて実装が楽というのはBubbleを触り始めて最初の頃に気付き、その後はずっとSPAでアプリを作っております。私の場合は。。。

rio · 2020-10-20T00:38:49.366Z

すでにお試しかもしれませんが、「ページ間でデータを引き継ぐ」方法がBubbleのチュートリアルにありました。ご参考までに。

Bubble

Build a web app click-by-click

See how Bubble works and build a functional app yourself, click by click. No email needed! Bubble is a no-code, visual programing language.

シングルページにまとめるより、個々のページに分散する方が読み込み速度が早いので、多くの人がこちらのアプローチを採用するみたいですね。

shota · 2020-10-21T05:59:06.973Z

ご回答ありがとうございます。
こちらのチュートリアルの方法を試してみたのですが、やはりユーザーごとの表示ではなく、Twitterのタイムラインのように共通化されてしまいます。データのcreated byはしっかりそのユーザーになっています。何か根本的な部分で間違っているのでしょうか？

rio · 2020-10-22T04:46:24.756Z

その「共通化されてしまう」RGのData sourceのスクショは出せませんか？
実際の設定を確認できれば解決につながるかもしれません。

あと不具合を切り分けてみてください。

正しいデータを参照しているか→RGのData source、RGの親グループまたはページのsource
正しく絞り込みができているか→filter、constraint
ユーザー動作キッカケで表示する場合、ワークフローで絞り込みがかかっているか

どこからきてデータがきて、どのようなロジックを通って、表示まで至っているのかをノートなどに図示してみるとわかりやすくなります。共通化する理由が必ずどこかに潜んでいるので、それを探す目で眺めてみてください。bubbleのこの辺りの仕様は精度が高いので、バグである可能性はかなり低いです。

あと、私がよくやるのが、別の仮ページを作って「シンプル化したUI」で試すことです。ユーザーデータが共通化されてしまうなら、例えば商品データでは共通化されないRGはできるか？などガチャガチャ動かしてみて「あー、なるほど」となることがあります…ご参考まで、失礼します。

shota · 2020-10-24T14:24:07.977Z

スクリーンショット 2020-10-24 23.02.10326×669 28.9 KB

こちらがスクショになります。Data Sourceには投稿した写真がある"Pictures"テーブルにしています。また、ページのType of Contentには同じ"Pictures"テーブルを指定しています。そして、２と３について分からない部分が多いので詳しく教えていただけませんか？

rio · 2020-10-25T06:08:20.401Z

Data source をクリックした先のスクショが必要です。そこで2でいうところのConstraintsやFilterを設定します。そこはどうなっていますか？

shota · 2020-10-25T06:23:56.486Z

スクリーンショット 2020-10-25 15.22.43
ここで大丈夫ですか？ここはデータの検索先を設定したのみで他は何も設定していません。

rio · 2020-10-25T09:32:47.143Z

拝見しました。見せていただいた箇所が上記の「2」を設定する箇所です。現状は何も絞り込みの条件がかかっていないので、Picturesの全てを表示する状態になっていますね。

＋Add a new constraintをクリックして、ユーザーに関連した写真のみを表示させる設定をしましょう。それをどうするか？については以前に私がアップした投稿が参考になると思います。

個人ページでのrepeating group 日本語 (Japanese)

ユーザーのプロフィールを表示させるとき、その前段で「ユーザーを選択」する動作があると思います。その際に、そのユーザーが選択されたことを情報として保持する必要があります。で、次にその選択されたユーザー情報をキーにして、RGの表示設定をする必要があります。この２ステップはよろしいでしょうか？私の方では、この流れをCustomStateで実装しています。エディター： CustomStateを切り替えようのRGのインスペクターに設定： [スクリーンショット 2020-10-06 9.10.40] このCustomStateをキーにして、RGのフィルター（抽出）を設定： [スクリーンショット 2020-10-06 9.11.43] このRGをクリックしたときに、そのユーザー情報をワークフローで保存： [スクリーンショット 2020-10-06 9.11.07] 上記は「ページ遷移しない」パターンで実装しています。すみません、ページ遷移しながら「選択したユーザーの情報を保持」する方法もあるかと思いますが、そちらについてはあまり詳しくありません。 SPA（シングル…

データを自由に操って、目的のUIを実現するためには絶対に欠かせない基礎的なポイントなので、YouTube（日本語もあります）などで解説されたサンプルを一緒に作ってみることをおすすめします！

shota · 2020-10-28T17:27:44.521Z

とても参考になりました！本当にありがとうございます。
そこで一つ質問があるのですが、rioさんがサンプルで作成して下さったMymethodではユーザー切り替えをRGを使用してページ上でクリックするとユーザーが替わるようになっていて、そのRGのインスペクターにCustomStateを設定していますが、通常のサイトのようなログインしてユーザー名が表示されるだけのサイトではどこにCustomStateを設定すればいいでしょうか？

rio · 2020-10-29T01:14:31.865Z

CustomStateはデータとして一番「関連するグループ」に設置した方がいいです。「関連するグループ」とは、CustomStateで引っ張りたいデータがあり、なおかつユーザーのクリック動作きっかけで使いそうなグループのことをいっています。例えば、Twitterのような「フォローしている人のタイムライン」があったとき、あるツイートのユーザーネームをクリックすると、その人の全ツイートが表示されます。そのような場合はフォローしている人のタイムライン」にCustomStateを設置するのが自然です。

でもそこまで厳密ではないのも事実です。というのもCustomStateを作ったグループ以外でも、そのCustomStateを利用することができるからです。
ためしに、私が用意したサンプルをチェックしてみてください。CustomStateは「ユーザー切り替えRG」に設置していますが、「全ユーザーの写真RG」をクリックしてもユーザーの切り替えができるようになっています。なぜならCustomStateを再利用しているからです。

shota · 2020-10-30T04:00:50.877Z

教えていただいたことは大まかにできたのですが、このCustom Stateを利用したページ遷移はSPAのみで、やはりページ間での遷移ではできないのでしょうか？
ページを介するとRG selectedのData sourceでRG Allが選択できませんでした。

rio · 2020-10-30T07:07:03.760Z

すみません、、、CustomStateはページ遷移した場合は使えないかと思います。
どなたか、それができる方法を知っていれば教えてください。。。
（なかなか回答がど真ん中でなくて申し訳ないです）

ページを遷移するときに、Linkを使うと思いますが、その際に「関連データを一緒におくる」ことができます。
スクリーンショット 2020-10-30 15.58.00
shotaさんの場合は、ユーザーデータをおくって、遷移先でそれを使うことができます。

少し、高度だけどエレガントな方法として、URLに情報をくっつけて、それを遷移先で利用する方法もあります。
スクリーンショット 2020-10-30 15.48.38

bubbleは目的に対して、いくつも方法が用意されている、素晴らしいプラットフォームなので、ぜひめげずにがんばってください！