MENU

3.7 ユーザーの一覧ページの作成

目次-全章

目次

3.7.1 ユーザー一覧の作成

ページには、Groupと同様に何らかのデータを設定することができます。

ユーザー一覧のページでは、ユーザー情報をURLで受け取った場合そのユーザーのページを表示し、ユーザー情報が存在しない場合ユーザー検索画面を表示するように作成していきます。

図3.7.1.1 ユーザー一覧完成例
ページURL内容
usersユーザ一覧、検索画面
users?{パラメータ}ユーザー一覧、タブ切り替え
図3.7.1.1 各データ一覧

ページを作成する

ページをクローンして作成する

ユーザー一覧ページもマイページと構成が似ているため、マイページをクローンします。

なお、ページ名に「user」は指定できません。bubble内部で利用することができない名称がいくつか存在します(index、reset_pwなど)。ここではページ名をusersとします。

図3.7.1.2 新規ページ作成例

指定したユーザーのマイページを作成する

最初に、URLからユーザー情報を取得した場合のページを作っていきます。

ページを跨いでデータを引き渡す場合、パスとして付与する方法とクエリとして付与する方法があります。

パスとしてページにデータを付与する

ページのプロパティエディタのType of contentに値を設定すると、ページにデータを保持させることができます。

図3.7.1.3 Type of contentについて

この方法の場合、URLのパス内に https://(アプリ名).bubbleapps.io/users/(データ) としてページにデータを渡すことができます。例えば Type of contentをUsersにすると、https://(アプリ名).bubbleapps.io/users/(User’s unique id) とすることで、usersページにユーザー情報を渡すことができます。usersページ内では、Current Page Userという値で、URLに指定したユーザー情報を取得できるようになります。

ただし、この形にするとusersページはユーザー情報が必須になり、ユーザー情報を空にすることができません。今回作成するusersページは、ユーザー情報がある場合とない場合で表示を切り替えているため、もう一つの方法を使います。

クエリでページにデータを付与する

クエリ文字列(URLパラメータ)とは、サーバーに情報を送るためにURLの末尾につけ足す文字列(変数)のことです。「?」をURLの末尾につけ、その次に「パラメータ=値」をつけます。複数のパラメータをつけたい場合は「&」を使用します。この形式で、サーバーに送信したいデータをURLにつけ加えることが可能です。

bubbleでは、https://(アプリ名).bubbleapps.io/users?user=(Users unique id) などとしてページにデータを渡すことができます。

この形式を利用する場合、パスを利用する場合とは異なりページ自体に設定は不要です。

クエリから情報を取得する

usersページでは、クエリをuser=(Users unique id)として表示したいユーザー情報を受け取ることにします。

クエリに設定された値をページ内で利用するには、「Get data from page URL」というプロパティを利用します。

グループBodyの内容は「パラメータで指定されたユーザー」のマイページのような内容になるため、グループBodyのプロパティエディタで、

Type of content : User

Data source : Get data from page URL

Data sourceで「Get data from page URL」を選択します。

図3.7.1.4 「Body」の設定

もう一つプロパティエディタが表示されます。この中でパラメータがどういう値を持っているかを設定します。

Type : Patamater

Parameter name : user

Type : User

と設定します。Parameter nameは任意の値を利用でき、URLの一部になります。パラメータで受け取るTypeはテキストや数字だけでなく、データベースのタイプとしても設定できるので、ここではUserタイプを指定します。

図3.7.1.5 「Get user from page URL」の設定

これで、グループBodyではURLパラメータから受け取ったユーザー情報を取得できるようになりました。

Group Userを編集する

Group Userに「プロフィールを見る」リンクを追加します。Link Followをコピー&ペーストをし、名称と表示テキストを変更します。また、Group UserInfoのレイアウトを修正します。

編集する、ログアウトボタンをフォローする、フォロー解除に変更し、ボタン名称も変更しておきます。

※「container layoutをFixed・Row・Columnのどれに設定するか」など、elementのgroupへの入れ方によっては、完成レイアウトが変わってくることがあります

図3.7.1.6 「Group UserInfo」の配置修正

Group User内のエレメントのサイズはFigmaを参考に調整します。

ページの各エレメントの位置を調整して、ユーザー一覧の作成は完了です。

※「container layoutをFixed・Row・Columnのどれに設定するか」など、elementのgroupへの入れ方によっては、完成レイアウトが変わってくることがあります。現段階では画像とレイアウトが異なっていても問題ありません。

図3.7.1.7 ユーザー一覧完成例

ここでは Group UserをBodyの横位置中央にしています。

3.7.2 ユーザー検索の作成

第3章7の1で作成したページに、パラメータがない場合は検索画面を表示するようにしていきます。

図3.7.2.1 ユーザー検索完成例

ユーザー検索の作成

ユーザー検索のグループを作成する

パラメータが存在しないときに表示するグループを作成します。

今回は、グループBodyをコピー&ペーストして修正していきます。

図3.7.2.2 グループにをコピー&ペースト

コピーされたグループ「Body copy」を「Search Body」に変更し、縦横位置をBodyと同じ位置に修正します。(同じ位置に配置すると意図していないグループ内にエレメントが入ってしまうことがあるので、やりにくい方はページのHeightを調整し、Bodyの下部にSearch Bodyを配置してください。上下のずれは12章のレスポンシブで解消されます。)

編集しやすいようにグループ「Body」は非表示にしておきます。

Search Bodyはユーザー情報が不要なので、Type of contentとData sourceを空にしておきます。

図3.7.2.3 Bodyを非表示にする

検索ボックスを作る

Group User内のエレメントを全て削除し、Group Userの要素名をGroup Searchに変更します。Type of content、Data sourceを空にします。

図3.7.2.4 「Group Search」の設定

検索用のInputエレメントとButtonエレメントを設置します。

図3.7.2.5 各エレメントの配置

Inputエレメントの設定は以下のようにします。

図3.7.2.6 「Input Search」の設定
図3.7.2.7 「Search Input」の設定

Button Searchは以下のように設定します。

図3.7.2.8 「Button Search」の設定

不要なエレメントを削除する

Group Tab、TimeLineを削除します。

図3.7.2.9 不要エレメントの削除

検索結果の表示欄を調整する

グループ「Follow User」と内部のエレメント名称を調整します。

図3.7.2.10 各エレメントの名称変更

フォロー、フォロー解除ボタンの位置を調整します。

図3.7.2.11 各ボタンの配置調整

グループ「Userlist」の「This element is visible on page load」をオンにしておきます。

図3.7.2.12.1 「Userlist」のStyle設定
図3.7.2.12.2 「Userlist」のサイズ・位置設定

グループ「Search Body」内部のエレメントは、Figmaを参考に調整します。

図3.7.2.13 「Search Body」の配置

Conditionalを設定する

URLにパラメータが存在する場合グループ「Body」を表示し、URLにパラメータが存在しない場合「Search Body」を表示する設定を行います。

グループ「Body」は以下のようにします。

This element is visible on page load : オフ

図3.7.2.14 「Body」の設定

Conditionalタブで「Get data from page URL」を選択し、パラメータをuser、TypeをUserを選択します。続けて「is not empty」を選択します。

Select a property to change when true から「This element is visible」を選択し、チェックします。

図3.7.2.15 「Get data page from URL」の設定

グループ「Search Body」は以下のようにします。

This element is visible on page load : オフ

図3.7.2.16 「Search Box」の設定

Conditionalタブで「Get data from page URL」を選択し、パラメータをuser、TypeをUserを選択します。続けて「is empty」を選択します。

Select a property to change when true から「This element is visible」を選択し、チェックします。

図3.7.2.17 「Get data page from URL」の設定

以上で、ユーザー一覧、ユーザー検索のレイアウトが作成できました。

【未経験・経験者】システムエンジニア募集中!

当社では現在一緒に働くメンバー募集しています!
正社員でシステムエンジニアとして当社のシステム開発業務に携わってみませんか?
未経験者から経験者まで広く募集しているのでぜひエントリーをお待ちしています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

私たち株式会社ファンリピートは、ITを通じてお客様の課題解決を行うスタートアップベンチャーです。ノーコード・ローコードを用いたDX支援事業を主軸に、スピード感を持ってお客様のご要望にお応えしています。

2019年の創業から、出版業界・広告業界をはじめ、幅広い業界のデジタル施策を支援。財務管理・顧客管理などの基幹・業務システムから、新規Webサービスなど開発前検証フェーズのシステム導入支援まで、ワンストップでサポートを実施しています。この先も本質的なご提案を通じて、お客様の課題を解決し続けます。

コメント

コメントする

目次