こんにちは！ 先日（2024/6/29）、Create.xyz で次の２つの大きなアップデートがありました。
- ユーザーアカウント機能
- コードの直接編集
コードの直接編集も魅力的ではあるのですが、今回の記事では「ユーザーアカウント機能」についてご紹介します。
なお、次のページを参考にしています。
1. はじめに
1.1 Create.xyzとは？
Create.xyzは、ユーザーが簡単にウェブアプリケーションを作成できるプラットフォームです。コーディングの知識がなくても、直感的なインターフェースを使って多機能なアプリケーションを構築することができます。
過去にノーコードラボで紹介した記事は次のとおりです。
1.2 ユーザーアカウント機能の概要と利便性
ユーザーアカウント機能を有効にすることで、アプリケーションに以下のような利便性をもたらすことができます。
プライベートページの保護
特定のページやコンテンツに対してサインインを必須にすることができます。これにより、メンバー限定の情報や機能を提供することが可能になります。例えば、プロフィールページやユーザー専用のダッシュボードなど、特定のユーザーのみがアクセスできるプライベートページを作成することができます。アクションの保護
サインインしているユーザーのみが特定の操作を実行できるように制限することができます。例えば、メール送信機能やデータベースへの書き込み操作など、セキュリティを重視した操作を保護することが可能です。パーソナライズ
ユーザーごとの情報を保存し、表示することができます。これにより、個々のユーザーに対してパーソナライズされたコンテンツや体験を提供することができます。例えば、ユーザーの投稿履歴や好みに基づいたレコメンド機能などが考えられます。ユーザーの成長促進
アプリケーションに新しいユーザーを招待し、コミュニティやユーザーベースを拡大することができます。チームメンバーや顧客を招待し、サインアップしてもらうことで、アプリケーションの利用者を増やすことができます。
2. ユーザーアカウント機能の設定方法
Create.xyzでユーザーアカウント機能を設定する手順を以下に示します。このセクションでは、ユーザーアカウントを有効にし、特定のページや関数に対してサインインを必須にする方法を説明します。
2.1 ユーザーアカウントを有効にする方法
(1) プロジェクトメニューを開く
Create.xyzのダッシュボードにログインし、該当するプロジェクトを選択します。画面左側のプロジェクトメニューをクリックします。
(2) 「Enable User Accounts」を選択
プロジェクトメニュー内の設定項目から「Enable User Accounts」を見つけてクリックします。
(3) 「Add User Accounts」を押下
「Add User Accounts to your project」というメッセージが表示されるので、「Add User Accounts」ボタンをクリックします。
(4) 「Continue building」を押下
Sign Up / Sign in / Logout / Database の情報が表示されるので、内容を確認して「Add User Accounts」ボタンをクリックします。これにより、ユーザーアカウント機能が有効になります。
2.2 ページや関数にサインインを必須にする方法
ユーザーアカウント機能を有効にした後、特定のページや関数に対してサインインを必須にする設定を行います。
(1) 対象のページを選択
左側のナビゲーションメニューから「Pages」を選択し、サインインを必須にしたいページをクリックします。
(2) 「Require sign in to view」を設定
選択したページの設定画面で、「Users」タブを選択し、「Require sign in to view」オプションをオンにします。これにより、サインインしていないユーザーはこのページにアクセスできなくなります。
(3) 関数に対する設定
同様に、サインインを必須にしたい関数に対しても「Require sign in to view」オプションを設定します。関数は「Functions」メニューから選択できます。
2.3 ユーザーアカウント機能を有効にしたことにより作成されるページと DB
ユーザーアカウント機能を有効にすると次のページと DB が作成されます。
(1) Sign Up ページ
デフォルトのパスは /account/signup
カスタマイズ不可。
(2) Sign In ページ
デフォルトのパスは /account/signin
カスタマイズ不可。
(3) Log Out ページ
デフォルトのパスは /account/logout
カスタマイズ不可。
(4) User DB
デフォルトでは「プロジェクト名」+「Users」という名前の DB が作成されます。
この画像では、userManagement というプロジェクトで作った DB なので userManagement Users という名前の DB が作成されています。
DB の名称の変更は可能です。
また、デフォルトで id、name、email、image というフィールドがありますが、これに tel や bio などといった必要なフィールドを自由に追加することができます。
ユーザーがサインアップすると、Create.xyzは自動的にこの DB に新しいユーザーを追加します。
2.4 サインインしたユーザーの情報の活用する方法
「signed in user's email」や「current user's name」などという指定方法で現在サインインしているユーザーの情報をアプリケーション内で動的に表示することができます。
さんざん Bubble を使っていた身としては current user が使えるのは嬉しいところです！
3. まとめ
現時点での Create でのユーザーアカウント機能について記載いたしましたがいかがでしたでしょうか？ 便利にはなったと思いますが、現時点ではまだユーザーアカウント機能は最低限の機能でしかありません。いくつか注意点がありますのでまとめておきます。
▽注意点
(1) Sign Up / Sign In / Log Out の各ページのカスタマイズはできません。
(2) ソーシャルログイン（Google / Facebook / Twitter など）はできません。
(3) パスワードをハッシュ化する Fuction が公開されていないため、パスワードの変更はできません。パスワードリセットもできません。忘れてしまった場合はアカウントを作り直す必要があります。また、アカウントを Sign Up 以外から作成することもできません。
(4) Sign Up した時にメールは自動送信されません。（そもそもメール送信機能が標準搭載されていません。）
(5) DB の細かいアクセス制御がないため、ログイン後は他のユーザーの情報へのアクセス権もある状態になっています。DB から持ってくる情報は最小限にするなど設計側で配慮が必要かと思います。
総じてですが、モックアップを作るだけでしたら問題ないレベルかと思いますが、実運用で使うのはまだ難しいかと思います。
実運用で使う場合は、開発中の画面を見せないように認証をいれる程度に留めておくことをお勧めします。Bubble だと開発中の画面は Basic 認証で開発中の画面を見れないようにすることが多いのですが、それの代替として利用できると思います。
現時点で実運用でのユーザー管理を検討している場合は、supabase や Xano など外部の DB を使うことをお勧めします。
ただし、Create の進化は速いので、すぐに対応してくる可能性も十分考えられます。実際、そんなに時間はかからない気もするので楽しみに待ちましょう！
