# 自身の投稿にいいねをしたユーザーリストのアイコンを表示させる方法 **URL:** \ **Category:** flutterflow\ **Tags:** バックエンドデータベース\ **Created:** [2024 年 6 月 26 日午前 2:28 UTC](https://www.nocode-faq.com/t/topic/4306 "2024-06-26T02:28:30Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![yuchimusic1018](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yuchimusic1018/32/6466_2.png) [@yuchimusic1018](https://www.nocode-faq.com/u/yuchimusic1018)\ **Post date:** [2024 年 6 月 26 日午前 2:28 UTC](https://www.nocode-faq.com/t/topic/4306/1 "2024-06-26T02:28:30Z")
いつもお世話になっております。 大変素人質問で恐縮ですが、下記内容についてご確認いただき回答いただけますと幸いです。 #### 実現したい内容 1. 講師のマイプロフィールがあり、プロフィール内に投稿リストが格納されており、そこから投稿詳細に遷移することができます。 2. 投稿詳細内には「いいねトグル」、「いいね獲得数」、「いいねをした生徒のリストへの遷移する項目」を設置されています。 3. 「いいねをした生徒のリストへの遷移する項目」から「いいねをしたユーザーリスト」を表示させたい。 #### 課題 3.に記載した"投稿から「いいね」をしたユーザーリストを表示させる方法"がわからず困っています。 #### 現状 投稿詳細画面から「いいねユーザーリスト」画面に遷移する際、投稿のIDをパラメータとして渡そうとしていますが、その設定方法がわからず、実装が進んでいません。設定方法をご教示いただけますと幸いです。 #### 参照画像 投稿詳細 ![FireShot Capture 025 - CCPLA - FlutterFlow - app.flutterflow.io](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/b/b5ee8a48d78996fc18211fe210b212c30426b66b.jpeg) 遷移後のリスト ![FireShot Capture 024 - CCPLA - FlutterFlow - app.flutterflow.io](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/5/55d30b8522a7c9227edbb2b9677afb50866bb4c2.jpeg) ---
**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\ **Post date:** [2024 年 6 月 26 日午後 5:37 UTC](https://www.nocode-faq.com/t/topic/4306/2 "2024-06-26T17:37:34Z")
具体的な、クエリ作成の方法については、 - Postデータの取得: FlutterFlowのBackendクエリを使用して、現在の`postId`に基づいてPostドキュメントを取得します。 クエリ条件: `Post.id == postId` - いいねユーザーIDリストの取得: 取得したPostドキュメントから、Likeフィールド（ユーザーIDのリスト）を抽出します。 - ユーザーデータの取得と表示 取得したユーザーIDリストを使用して、対応するユーザードキュメントを取得します。 となります。 これが、FlutterFlowの挙動になると、 ①Postデータの取得とユーザーの絞り込み いいねを表示したいListViewに対して、 クエリの作成 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/1/14386b09627e54d45d48980f2ec5dd7c169d0595.png) LikesのDocumentでフィルターする ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/9/93bf199e4741b25329298f7447b14e23837b5513.png) これだけで、基本はＯＫです、ただ、このままだと表示テキストはDocumentid だけになるので、以下②を行います。 ②ユーザーデータの取得と表示 テキストウィジェットに対して、GetDocument Propertyで①のクエリをさらにUserDocumentを読み込み（例 Email）で表示する。 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/4/4bc421f9f9b4b296de7b97546218fb9b8eedb057.png) ---
**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\ **Post date:** [2024 年 6 月 26 日午後 6:07 UTC](https://www.nocode-faq.com/t/topic/4306/3 "2024-06-26T18:07:04Z")
内容ほぼ同じですが、良ければ、こちらも参考にどうぞ。 ![【ツバサテック ブログ記事 1200 900のコピー](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/8/85a4396a21f7289cd94a516073fbea153610b1ae.png) > **[投稿に対して、いいねされているユーザーの名前を表示する。](https://tsubasa.tech/archives/1452)** > > NoCodeFAQ のより頂きました回答です 今回やること FlutterFlowを使用して、特定の投稿に「い… ---
**Author:** ![yuchimusic1018](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yuchimusic1018/32/6466_2.png) [@yuchimusic1018](https://www.nocode-faq.com/u/yuchimusic1018)\ **Post date:** [2024 年 6 月 28 日午前 7:10 UTC](https://www.nocode-faq.com/t/topic/4306/4 "2024-06-28T07:10:00Z")
ご確認いただきありがとうございます。 また、丁寧なご回答大変感謝いたします。 ただすみません、SQLについての知識がないため内容に追いつけておりません、、。 頂いた内容でリストを作成するに当たり、下記内容が必要かご回答いただけますでしょうか。 **質問内容** １．UsersとPostのコレクションとは別にLikeのコレクションが必要ということでしょうか？ > Postデータの取得: > FlutterFlowのBackendクエリを使用して、現在の`postId`に基づいてPostドキュメントを取得します。 > クエリ条件: `Post.id == postId` ここのPost IDの生成方法もまだわからなかったため、 参考のURLなどご教示いただけると助かります。 ２．１の場合、Likeのコレクションの構成を教えていただきたいです。 ---
**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\ **Post date:** [2024 年 6 月 28 日午前 7:58 UTC](https://www.nocode-faq.com/t/topic/4306/5 "2024-06-28T07:58:49Z")
まず、Likeのコレクションまでは、必要ありません。 想定ですが、Postの中に”フィールド”としてLike が Refelenceとして存在しているのではないかと思います。 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/d/d1dc07b9138b74a5fb222a841332825a44e206a5.png) > クエリ条件: Post.id == postId は、忘れていいですよ。挙動の内容を伝えたかっただけなので、 以下のListViewからDynamic Childrenを選択し、Listになれば、基本動作はできているはずです。 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/1/14386b09627e54d45d48980f2ec5dd7c169d0595.png) ---
**Author:** ![yuchimusic1018](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yuchimusic1018/32/6466_2.png) [@yuchimusic1018](https://www.nocode-faq.com/u/yuchimusic1018)\ **Post date:** [2024 年 6 月 28 日午前 8:10 UTC](https://www.nocode-faq.com/t/topic/4306/6 "2024-06-28T08:10:09Z")
早々のご確認ありがとうございます! Postコレクションにlikeのreference（user）を作成しているので、現状頂いた画像の様になっております。良かったです。 dynamic childrenなのですが、現在添付画像の状況になっていますがどのように選択していけばよろしいでしょうか。 ![FireShot Capture 026 - Projects - FlutterFlow - app.flutterflow.io](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/4/4391b5282620eb8013d6251d41780cd50733d7c6.png) 大変お手数ですが、ご確認のほど何卒よろしくお願いいたします。 ---
**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\ **Post date:** [2024 年 6 月 28 日午前 8:31 UTC](https://www.nocode-faq.com/t/topic/4306/7 "2024-06-28T08:31:57Z")
いいかんじですね。 Dynamic children 動的なクエリのことなので、 今回は、いわゆる Curret Post (前のページで表示されたPost情報）を選択することができます。 具体的には、 Page Prameterから、前のデータを受け取る必要があります。 例えば、私の場合には、RefPostというパラメーターを定義しているので、こここから情報を取得してます。 ![b19c715e85cd8961fe3d7d1b5fa6ca1b (1)](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/f/fc6ad86b14a4f74aa4a001b4e03af92dbd27f9fc.gif) ---
**Author:** ![yuchimusic1018](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yuchimusic1018/32/6466_2.png) [@yuchimusic1018](https://www.nocode-faq.com/u/yuchimusic1018)\ **Post date:** [2024 年 6 月 29 日午前 6:56 UTC](https://www.nocode-faq.com/t/topic/4306/8 "2024-06-29T06:56:15Z")
動画めっちゃわかりやすいです！ ありがとうございます！ とてもイメージつかめました! ただparameterでpostRefを作成してそれを投稿詳細画面に渡していたのですが、 dynamic childrenで該当のものを選択した際に、available optionsが選択できない状態となっておりました、、。（※添付画像の状態） この状態というのはうまくparameterが渡せていない状態ということでしょうか。 何度もお手数をおかけし申し訳ございませんが、 ご確認のほど、何卒よろしくお願いいたします。 ![FireShot Capture 027 - CCPLA - FlutterFlow - app.flutterflow.io](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/5/52b504eea54a2e8dba3dfa6b91d92690874e2521.png) ---
**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\ **Post date:** [2024 年 6 月 30 日午前 4:42 UTC](https://www.nocode-faq.com/t/topic/4306/9 "2024-06-30T04:42:11Z")
そうですね。その手前ページからのPassが受け取れてないのだと思います。 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/4/425742a77459ce2b1241745a6c67e94b09af8a82.png) その手間のページのナビゲートから、Document Typeでのパラメーターの受け渡しが必要です。 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/9/98502b97a5c8fd194a7b2d0b4180d9cde3b6156d.png) ---
**Author:** ![yuchimusic1018](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yuchimusic1018/32/6466_2.png) [@yuchimusic1018](https://www.nocode-faq.com/u/yuchimusic1018)\ **Post date:** [2024 年 10 月 24 日午前 9:19 UTC](https://www.nocode-faq.com/t/topic/4306/10 "2024-10-24T09:19:06Z")
だいぶ返信が遅れてしまい、申し訳ございませんでした。 あれから現職が忙しくあまり時間が取れず、再開して再度同じところで二の足踏んでます、、、。 今dynamic childで自分の投稿から投稿にいいねをしたユーザーのリスト化させたいのですが、うまくいかず助けていただきたいです、、、。 翼さんにいただいたURLで試してるのですが、 Dynamic childでリスト化させるところまでできたのですが、 画像を引っ張ってくることができません。 ![スクリーンショット 2024-10-24 18.06.17](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/3/356a3bb139a3fd4c4bdde271a1ebd4f466f6bca2.jpeg) ![スクリーンショット 2024-10-24 18.07.06](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/c/c475d69740f24f645f8f3ff9c4cdf220fbf4f745.jpeg) 適切な動線を教えていただけますでしょうか。 ---
**Author:** ![yuchimusic1018](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yuchimusic1018/32/6466_2.png) [@yuchimusic1018](https://www.nocode-faq.com/u/yuchimusic1018)\ **Post date:** [2024 年 10 月 25 日午前 7:46 UTC](https://www.nocode-faq.com/t/topic/4306/11 "2024-10-25T07:46:28Z")
↑お忙しいところ恐れ入りますが、お手隙の際にご確認いただけると幸いです。 ---
**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\ **Post date:** [2024 年 10 月 25 日午前 8:05 UTC](https://www.nocode-faq.com/t/topic/4306/12 "2024-10-25T08:05:11Z")
今日、ちょっと見れないですが、、週末確認しておきますね。 ---
**Author:** ![yuchimusic1018](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yuchimusic1018/32/6466_2.png) [@yuchimusic1018](https://www.nocode-faq.com/u/yuchimusic1018)\ **Post date:** [2024 年 10 月 26 日午前 6:09 UTC](https://www.nocode-faq.com/t/topic/4306/14 "2024-10-26T06:09:21Z")
かしこまりました。お手数ですがよろしくお願い致します！ ---
**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\ **Post date:** [2024 年 10 月 27 日午後 1:35 UTC](https://www.nocode-faq.com/t/topic/4306/15 "2024-10-27T13:35:47Z")
前提として、PostデータをDynamic childでリスト化（UserRefを表示することはできる）ということですね。 で、やりたいことは、以下のようにPostにいいねした、Userデータのアイコン（Image）を表示したいということですね。 ![c029d4db52379dffc8d64b87fd45a5a3](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/5/5bf88dd62629e3f850cf3916e57defd1e8c54c16.gif) であれば、おそらくUserCollectionを呼ぶということを忘れているだけだと思います。 やり方 ①ListView以下のウィジェットでUserコレクションを呼ぶ ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/b/b873c1b3e5137d5c83319d58c52f3c76362cdb1b.jpeg) この時のポイントが、UserCollectionのVariavleにDynamicChidrenで指定した値を呼ぶ必要があります。 ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/6/677aa45415933deacd0027c5a8d39e9dd7e73605.jpeg) ②Imageウィジェットでは、UserCollectionのImageを呼び出すだけ ![image](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/f/f19e056555925016c7c03f55203ffd20a517314a.jpeg) もし、↑わかりにくければ、こちらが全体操作になります。 ### 説明のポイント **Childで呼び出したものは、単に"Reference"（ユーザーデータの場所）を指しているだけ** なので、その **参照先にある詳細な情報（例: ユーザーの写真、年齢、趣味など）は別途取得（クエリ）する必要がある** ということです。 例えば、`Post`データで`UserRef`を取得した場合、これはそのユーザーが格納されている場所を示すだけです。つまり、`UserRef`だけではユーザーの詳細な情報（写真やプロフィール）はわかりません。 ### 重要なステップ **そこで必要になるのが、`UserRef`を使って、該当するユーザーデータをクエリ（データベースから取得）して表示する** ことです。 具体的には: 1. `UserRef`を元に、ユーザーのドキュメント全体（写真、名前、その他のプロフィール情報）を読み込む。 2. その後、クエリして取得したデータを表示するために、各ウィジェットにそのデータ（写真など）をバインドします。 * * * このように、`Reference`（参照）だけではデータを表示できないので、クエリで必要な情報をページに取り込む必要があるということです。 ![f637a28d3b9e2849a7fc4037ddf23c5d](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/a/a6025483b027d9794037a005d25ca3810c422ab3.gif) ---
**Author:** ![yuchimusic1018](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/yuchimusic1018/32/6466_2.png) [@yuchimusic1018](https://www.nocode-faq.com/u/yuchimusic1018)\ **Post date:** [2024 年 10 月 28 日午前 5:16 UTC](https://www.nocode-faq.com/t/topic/4306/16 "2024-10-28T05:16:32Z")
お忙しいところ本当にありがとうございます！ 無事に解決させることができました、、！ 途中UserCollectionのVariavleにDynamicChidrenで指定した値を呼べていませんでした。 非常に助かりました。ありがとございました。 ---
**Author:** ![tsubasa](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/tsubasa/32/8670_2.png) [@tsubasa](https://www.nocode-faq.com/u/tsubasa)\ **Post date:** [2024 年 10 月 28 日午前 5:18 UTC](https://www.nocode-faq.com/t/topic/4306/17 "2024-10-28T05:18:37Z")
おー、良かったです^^ 頑張ってくださいね。