こんにちは。私は現在マーケットプレイスを作っているのですが、課題があります。理想としては、アカウントごとの専用ページにインスタグラムのような写真を掲載することができ、それらの写真をクリックして詳細ページに行けるようにしたいです。
リピーティンググループを使ってこれらを作ろうとしたのですが、なぜか他のユーザーページと共通化してしまいました。その人専用のページでリピーティンググループのように投稿ごとに写真を表示するにはどうすればいいのでしょうか？
こんにちは。
「RG側での設定が間違ってないのに、その人専用の写真が表示されない」ということであれば、「ユーザーの切り替え」をしないで写真をアップロードしたことが、理由として考えられます。
Dataタブで個々の写真データを確認してみてください。Created by が空欄になってたりしませんか？ もしくは全ての写真が同じユーザー名であったりしても同様に希望通りに個別に表示ができません。
ご回答ありがとうございます。
Dataタブでは個々の写真データにはUser テーブルからユーザ情報をリレーションしています。また、ユーザーページの名前などのプロフィール情報はパラメータとユニークIDでそれぞれユーザーごとの表示ができましたが、これと同じ方法をRGでしようとしてもエラーが出てしまいます。現状では、現在ログインしているユーザーの写真が表示されます。例えば、Aという人がログインしてBさんの写真を見てもAの写真が表示されてしまいます。Groupでの個別表示は成功したのですが、RGでユーザーごとの表示ができません。返信していただけると幸いです。
それとPrivacyのセッティングはお済みですか？その写真データを「参照できる人、範囲」などを設定するタブがあります。
実現したいデータ構造がわからないので、推測で作ってるのですが、以下の例でエディターを確認してみてください。（ユーザーが切り替わっても、全てのユーザーの写真が表示されます。切り替えボタンをクリックしても全写真が表示されます）
Preview:
Editor:
簡単で結構ですので、エクセルか手書きのマンガで実現したいUIを教えていただければ早いです…
ご丁寧にありがとうございます。
軽くイラストを書きましたのでご参照ください。
まず、各ユーザーを一覧できるページを作りました。例えばその一覧ページのABCさんというユーザーをクリックすると、書いたイラストのページに行き上部にABCさんの名前、プロフィール写真、メモをユーザーごとに表示します。これはパラメーターを使い、一覧ページからこのページにユーザーごとの情報を飛ばすことができました。
そして問題となるのがこのページ下部のユーザーが写真を投稿するものです。現状は、一覧ページからABCさんを押すとABCさんのプロフィールが正常にユーザごと表示されるが、その下の写真が現在ログインしているユーザーが投稿した写真になってしまいます。
イラスト下部のPictureですが、ログインしていないその他のユーザーの写真も表示させたいのですね？
その場合、確認してほしい点は以下です。
- RGのDataSourceは確かに全ユーザーが表示されるようになっているか
- RGは別のグループ内に入っていないか（そのグループがログインユーザーのみの表示設定になっている）
- Privacy設定がされていて、当該写真はログインユーザーのみが閲覧できるようになっている（この場合は他のユーザー写真は表示されない）
あと、私が作ったサンプルは全ユーザーの写真が表示されます。設定の違いなどを確認してみてください。
イラスト下部のpictureには、インスタグラムのマイページのようにABCさんが投稿した写真のみ表示させたいです。その場合もやはり確認事項は同じですか？
ユーザーのプロフィールを表示させるとき、その前段で「ユーザーを選択」する動作があると思います。その際に、そのユーザーが選択されたことを情報として保持する必要があります。で、次にその選択されたユーザー情報をキーにして、RGの表示設定をする必要があります。この２ステップはよろしいでしょうか？
私の方では、この流れをCustomStateで実装しています。
エディター：
CustomStateを切り替えようのRGのインスペクターに設定：
このCustomStateをキーにして、RGのフィルター（抽出）を設定：
このRGをクリックしたときに、そのユーザー情報をワークフローで保存：
上記は「ページ遷移しない」パターンで実装しています。
すみません、ページ遷移しながら「選択したユーザーの情報を保持」する方法もあるかと思いますが、そちらについてはあまり詳しくありません。
SPA（シングルページアプリケーション）の方がこのようなケースも含めて実装が楽というのはBubbleを触り始めて最初の頃に気付き、その後はずっとSPAでアプリを作っております。私の場合は。。。
1 Like
すでにお試しかもしれませんが、「ページ間でデータを引き継ぐ」方法がBubbleのチュートリアルにありました。ご参考までに。
シングルページにまとめるより、個々のページに分散する方が読み込み速度が早いので、多くの人がこちらのアプローチを採用するみたいですね。
ご回答ありがとうございます。
こちらのチュートリアルの方法を試してみたのですが、やはりユーザーごとの表示ではなく、Twitterのタイムラインのように共通化されてしまいます。データのcreated byはしっかりそのユーザーになっています。何か根本的な部分で間違っているのでしょうか？
その「共通化されてしまう」RGのData sourceのスクショは出せませんか？
実際の設定を確認できれば解決につながるかもしれません。
あと不具合を切り分けてみてください。
- 正しいデータを参照しているか→RGのData source、RGの親グループまたはページのsource
- 正しく絞り込みができているか→filter、constraint
- ユーザー動作キッカケで表示する場合、ワークフローで絞り込みがかかっているか
どこからきてデータがきて、どのようなロジックを通って、表示まで至っているのかをノートなどに図示してみるとわかりやすくなります。共通化する理由が必ずどこかに潜んでいるので、それを探す目で眺めてみてください。bubbleのこの辺りの仕様は精度が高いので、バグ である可能性はかなり低いです。
あと、私がよくやるのが、別の仮ページを作って「シンプル化したUI」で試すことです。ユーザーデータが共通化されてしまうなら、例えば商品データでは共通化されないRGはできるか？などガチャガチャ動かしてみて「あー、なるほど」となることがあります…ご参考まで、失礼します。
こちらがスクショになります。Data Sourceには投稿した写真がある"Pictures"テーブルにしています。また、ページのType of Contentには同じ"Pictures"テーブルを指定しています。そして、２と３について分からない部分が多いので詳しく教えていただけませんか？
Data source をクリックした先のスクショが必要です。そこで2でいうところのConstraintsやFilterを設定します。そこはどうなっていますか？
ここで大丈夫ですか？ここはデータの検索先を設定したのみで他は何も設定していません。
拝見しました。見せていただいた箇所が上記の「2」を設定する箇所です。現状は何も絞り込みの条件がかかっていないので、Picturesの全てを表示する状態になっていますね。
＋Add a new constraintをクリックして、ユーザーに関連した写真のみを表示させる設定をしましょう。それをどうするか？については以前に私がアップした投稿が参考になると思います。
データを自由に操って、目的のUIを実現するためには絶対に欠かせない基礎的なポイントなので、YouTube（日本語もあります）などで解説されたサンプルを一緒に作ってみることをおすすめします！
とても参考になりました！本当にありがとうございます。
そこで一つ質問があるのですが、rioさんがサンプルで作成して下さったMymethodではユーザー切り替えをRGを使用してページ上でクリックするとユーザーが替わるようになっていて、そのRGのインスペクターにCustomStateを設定していますが、通常のサイトのようなログインしてユーザー名が表示されるだけのサイトではどこにCustomStateを設定すればいいでしょうか？
CustomStateはデータとして一番「関連するグループ」に設置した方がいいです。「関連するグループ」とは、CustomStateで引っ張りたいデータがあり、なおかつユーザーのクリック動作きっかけで使いそうなグループのことをいっています。例えば、Twitterのような「フォローしている人のタイムライン」があったとき、あるツイートのユーザーネームをクリックすると、その人の全ツイートが表示されます。そのような場合はフォローしている人のタイムライン」にCustomStateを設置するのが自然です。
でもそこまで厳密ではないのも事実です。というのもCustomStateを作ったグループ以外でも、そのCustomStateを利用することができるからです。
ためしに、私が用意したサンプルをチェックしてみてください。CustomStateは「ユーザー切り替えRG」に設置していますが、「全ユーザーの写真RG」をクリックしてもユーザーの切り替えができるようになっています。なぜならCustomStateを再利用しているからです。
教えていただいたことは大まかにできたのですが、 このCustom Stateを利用したページ遷移はSPAのみで、やはりページ間での遷移ではできないのでしょうか？
ページを介するとRG selectedのData sourceでRG Allが選択できませんでした。
すみません、、、CustomStateはページ遷移した場合は使えないかと思います。
どなたか、それができる方法を知っていれば教えてください。。。
（なかなか回答がど真ん中でなくて申し訳ないです）
ページを遷移するときに、Linkを使うと思いますが、その際に「関連データを一緒におくる」ことができます。
shotaさんの場合は、ユーザーデータをおくって、遷移先でそれを使うことができます。
少し、高度だけどエレガントな方法として、URLに情報をくっつけて、それを遷移先で利用する方法もあります。
bubbleは目的に対して、いくつも方法が用意されている、素晴らしいプラットフォームなので、ぜひめげずにがんばってください！
1 Like