- 1. プロフィール画面の作成
- 2. Userテーブルを拡張し、profile 画面と連携させる
- 3. プロフィール画面のワークフローを作成する
- 4. プレビューで確認
- 次回
- twitter のような簡単な SNS をBubble で作ってみる（入門者向け）
2020/9/2 追記
あぽとさんに協力していただき、このページの内容を動画にし、YouTube にアップしました。
動画の方が入門者の方にはわかりやすいと思いますので、是非見てみてください！
1. プロフィール画面の作成
プロフィール画面はユーザーごとに違う情報が表示されます。
また、自分のプロフィールであれば、自分で編集することができます。
1.1 プロフィール画面の URL
Bubble でプロフィール画面のような一つの画面で複数のアイテムの情報を表示するページを作る場合、URL は３つのパターンが考えられます。いずれも該当のユーザーの情報を表示させるページです。
- https://(アプリの FQDN)/user/(user の unique id)
- https://(アプリの FQDN)/user/(user の 任意の一意な情報)
- 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」ボタンを押します。
そうすると、login ページのコピーとして、profile 画面が作成されます。
1.3 プロフィール画面のデザイン
ここでは以下を変更します。 - テキスト：「ログイン」→「プロフィール」 - ボタン：「ログインする」→「保存する」 - インプット1：「email」→「名前」 - インプット2：「Password」→「自己紹介」, multiline input に変更
次の３つを追加します。 - Image：アイコン画像表示用 - Picture Uploader：アイコン画像のアップロード用 - 左向きアイコン：前の画面に戻る用（ボタン代わり）
2. Userテーブルを拡張し、profile 画面と連携させる
2.1 プロフィール画面をデータベースと連携させる
profile のプロパティを表示させ、Type of content で「User」を選択します。
2.2 User テーブルに列を追加する
Data タブをクリックし、データベースを変更します。
User テーブルを見てみると、デフォルトで、email、Modified Date、Created Date の３つの列が作成されているのがわかります。
ここに Image、Name、Memo という列を追加します。
「Create a new field」をクリックして、次のように列を作成します。
- 【Image】Field Name: Image、Field type: image
- 【Name】Field Name: Name、Field type: text
- 【Memo】Field Name: Memo、Field type: text
2.3 既存のユーザーの Name を入力する
列を追加したので、ここで Name に値を入力します。
App data タブをクリックし、All Users を選択します。
現在登録されているユーザーの一覧が表示されているので、「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
- 【Input】initial content: Current Page User's Name
- 【MultilineInput】initial content: Current Page User's Memo
3. プロフィール画面のワークフローを作成する
3.1 index 画面から profile 画面に遷移できるように「プロフィール」ボタンのワークフローを設定する
index 画面に戻り、プロフィールボタンから Start/Edit workflow ボタンをクリックします。
ワークフローの画面が表示されるので、Navigation から Go to page を選びます。
Destination に profile を選択します。
今回は Data to send にも値を入れます。Current User を入力してください。
こうすることで、profile 画面に遷移した際に、Current User の情報を表示できるようになります。
3.2 profile 画面で変更を保存できるようにワークフローを設定する
3.2.1 「保存する」ボタンのワークフロー
profile 画面に戻り、ワークフロー画面で「Button 保存する is clicked」を選択します。
まず、Step1 の「Log the user in」の処理はいらないので、こちらは delete します。
続いて、「Reset relevant inputs」の左側をクリックして「Make changes to thing」をクリックします。
- Thing to change: Current Page User
- Image = PictureUploader A's value
- Name = Input's value
- Memo = MultilineInput 自己紹介's value
を設定します。
3.2.2 「＜」アイコンの処理
デザインタブに戻り、「＜」アイコンのプロパティを表示します。
「Start/Edit workflow」をクリックします。
ワークフロータブに戻るので、Navigation - Go to previous page を選択します。前のページに戻るという処理です。
4. プレビューで確認
ここまでできたらうまく動作するかどうか、プレビュー画面で確認してみましょう。
index 画面からプロフィール画面に遷移して、プロフィール画面の各項目を変更できれば OK です。
次回
次回は、ツイートのユーザーとの紐付けの方法と、本番環境へのデプロイ方法について解説します。
