ノーコード ラボ

NoCode 関連のツールの紹介、使い方などをやさしく説明しています。

twitter のような簡単な SNS をBubble で作ってみる(入門者向け)3: プロフィール画面の作り方

f:id:yksmt:20200427111927p:plain

2020/9/2 追記

あぽとさんに協力していただき、このページの内容を動画にし、YouTube にアップしました。
動画の方が入門者の方にはわかりやすいと思いますので、是非見てみてください!


twitter のような簡単な SNS をBubble で作ってみる(入門者向け)3: プロフィール画面の作り方


1. プロフィール画面の作成

プロフィール画面はユーザーごとに違う情報が表示されます。

また、自分のプロフィールであれば、自分で編集することができます。

1.1 プロフィール画面の URL

Bubble でプロフィール画面のような一つの画面で複数のアイテムの情報を表示するページを作る場合、URL は3つのパターンが考えられます。いずれも該当のユーザーの情報を表示させるページです。

  1. https://(アプリの FQDN)/user/(user の unique id)
  2. https://(アプリの FQDN)/user/(user の 任意の一意な情報)
  3. https://(アプリの FQDN)/user?uid=(user の任意な一意な情報)

unique id は Bubble のデータベースの中で管理されていて、必ず一意になるように設定された値ですが、

1564469280769x419031279019215900

のようにわかりにくい値になっています。

そのため、他に一意になる情報があれば、そちらを使うことをオススメします。

例えばですが、ユーザーアカウントやメールアドレスなどは一意に設定していると思いますので、そちらを利用することの方がベターだと思います。

しかしながら、本記事では、一番簡単な方法である 1. の方法でご説明させていただきます。

1.2 プロフィール画面の新規追加

Bubble Editor の左上の Page: index と表示されている部分をクリックし、Add a new page をクリックします。

Create a new page が表示されるので、Page name に profile、Clone from に login を選択し、「CREATE」ボタンを押します。

スクリーンショット 2019-07-30 19.12.57.png (12.8 kB)

そうすると、login ページのコピーとして、profile 画面が作成されます。

1.3 プロフィール画面のデザイン

ここでは以下を変更します。 - テキスト:「ログイン」→「プロフィール」 - ボタン:「ログインする」→「保存する」 - インプット1:「email」→「名前」 - インプット2:「Password」→「自己紹介」, multiline input に変更

次の3つを追加します。 - Image:アイコン画像表示用 - Picture Uploader:アイコン画像のアップロード用 - 左向きアイコン:前の画面に戻る用(ボタン代わり)

スクリーンショット 2019-07-30 19.35.33.png (43.2 kB)

2. Userテーブルを拡張し、profile 画面と連携させる

2.1 プロフィール画面をデータベースと連携させる

profile のプロパティを表示させ、Type of content で「User」を選択します。

スクリーンショット 2019-07-31 16.35.13.png (3.5 kB)

2.2 User テーブルに列を追加する

Data タブをクリックし、データベースを変更します。

スクリーンショット 2019-08-02 13.45.56.png (69.6 kB)

User テーブルを見てみると、デフォルトで、email、Modified Date、Created Date の3つの列が作成されているのがわかります。

ここに Image、Name、Memo という列を追加します。

「Create a new field」をクリックして、次のように列を作成します。

  • 【Image】Field Name: Image、Field type: image

スクリーンショット 2019-08-02 13.48.48.png (15.9 kB)

  • 【Name】Field Name: Name、Field type: text

スクリーンショット 2019-08-02 13.50.30.png (15.8 kB)

  • 【Memo】Field Name: Memo、Field type: text

スクリーンショット 2019-08-02 13.49.18.png (15.8 kB)

2.3 既存のユーザーの Name を入力する

列を追加したので、ここで Name に値を入力します。

App data タブをクリックし、All Users を選択します。

スクリーンショット 2019-08-02 14.39.56.png (18.3 kB)

現在登録されているユーザーの一覧が表示されているので、「Run as →」の左側にある鉛筆マークをクリックします。

Name のところにユーザーの名前を入力して「SAVE」ボタンを押して保存してください。

2.4 User テーブルと profile 画面の要素を連携させる

Design タブに戻り、profile 画面の各要素と User テーブルの各列を連携させます。

2.1 で profile 画面の Content type を User に設定することで、「Current Page User」という選択肢が増えます。これを使って設定すると簡単です。「Current Page User」はこのページのユーザー(選択されているユーザー)という意味です。

似た選択肢で「Current User」というのがありますが、こちらは現在ログインしているユーザーを指します。

設定方法は各要素のプロパティを開いて以下のように設定します。

  • 【Image】Dynamic Image: Current Page User's Image

スクリーンショット 2019-08-02 13.59.32.png (23.0 kB)

  • 【Input】initial content: Current Page User's Name

スクリーンショット 2019-08-02 14.08.45.png (19.9 kB)

  • 【MultilineInput】initial content: Current Page User's Memo

スクリーンショット 2019-08-02 13.59.16.png (21.3 kB)

3. プロフィール画面のワークフローを作成する

3.1 index 画面から profile 画面に遷移できるように「プロフィール」ボタンのワークフローを設定する

index 画面に戻り、プロフィールボタンから Start/Edit workflow ボタンをクリックします。

ワークフローの画面が表示されるので、Navigation から Go to page を選びます。

Destination に profile を選択します。

今回は Data to send にも値を入れます。Current User を入力してください。

こうすることで、profile 画面に遷移した際に、Current User の情報を表示できるようになります。

スクリーンショット 2019-08-02 14.59.11.png (19.0 kB)

3.2 profile 画面で変更を保存できるようにワークフローを設定する

3.2.1 「保存する」ボタンのワークフロー

profile 画面に戻り、ワークフロー画面で「Button 保存する is clicked」を選択します。

スクリーンショット 2019-08-02 16.48.23.png (40.9 kB)

まず、Step1 の「Log the user in」の処理はいらないので、こちらは delete します。

続いて、「Reset relevant inputs」の左側をクリックして「Make changes to thing」をクリックします。

スクリーンショット 2019-08-02 16.54.12.png (51.8 kB)

  • Thing to change: Current Page User
  • Image = PictureUploader A's value
  • Name = Input's value
  • Memo = MultilineInput 自己紹介's value

を設定します。

スクリーンショット 2019-08-05 10.28.58.png (76.5 kB)

3.2.2 「<」アイコンの処理

デザインタブに戻り、「<」アイコンのプロパティを表示します。

スクリーンショット 2019-08-05 10.35.12.png (274.6 kB)

「Start/Edit workflow」をクリックします。

スクリーンショット 2019-08-05 10.37.01.png (130.8 kB)

ワークフロータブに戻るので、Navigation - Go to previous page を選択します。前のページに戻るという処理です。

4. プレビューで確認

ここまでできたらうまく動作するかどうか、プレビュー画面で確認してみましょう。

index 画面からプロフィール画面に遷移して、プロフィール画面の各項目を変更できれば OK です。

次回

次回は、ツイートのユーザーとの紐付けの方法と、本番環境へのデプロイ方法について解説します。

twitter のような簡単な SNS をBubble で作ってみる(入門者向け)