皆さんこんにちは！
先日、ノーコードで簡単に Webアプリや Webサイト作れる Softr を紹介させていただきました。
この Softr ですが、先日、資金調達のニュースがありました。
2021年1月に 200万ドル（約2億3000万円）とのこと。このスケールアップのスピードは驚異的ですね。
さて、開発の方も順調に進んでいるようで、早くもメンバーシップ機能が追加されました。
この機能は Softr で作った Webアプリにユーザー管理機能をつけて、サインアップやログインなどをできるようにする機能です。
今回は、この Softr のメンバーシップの使い方についてご紹介したいと思います。
1. Softr のメンバーシップ機能を使うためのプラン
Softr はフリープランから用意されており、サインアップさえすれば誰でも利用できます。
メンバーシップ機能を利用する場合には、一番上位の Startup プランを選択するしかなかったのですが、先日、無料プランや中位の Maker プランでも利用できるようになりました。
🥁User accounts (memberships) are now available for all plans 🎉 would love to hear your feedback. https://t.co/dXZtbbMOeK
— Artur (softr.io) (@mkrtchyanartur) 2021年1月25日
とは言っても、無料プランや Maker プランでは Membership は5人までという制限がありますので、あくまでもお試し用ですね。
実運用する場合には、Startup プランを選択するようにしてください。
なお、2021年1月現在ディスカウントキャンペーン中。いつまでこのキャンペーンをやっているのかはわかりませんが、Softr をやってみたいと考えている方はお早めにどうぞ！
2. 事前準備
まずは Softr にサインアップし、ログインしてください。
Airtable は今回は使いません。
サインアップやログインについては、前回の記事を参考にしてください。
3. ウェブアプリの構築
では、今回の本題となるユーザー管理機能付きウェブアプリの構築です。
今回は、テンプレートを使わず、「BLANK」を使用します。
3.1 ページの作成
最初に今回必要となるページを全て作成しておきます。
Homeページ、サインインページ、サインアップページ、ログイン後のページの4枚を作成しましょう。
SoftrではHomeページはデフォルトで用意されています。
その他のページは「Page」→「Add Page」をクリックして、Page NameとUrlを入力して作成します。
ページ名をアルファベットで書くと、Url欄も自動的に入力されますが、ページ名を日本語で書くと、Urlは手入力となります。
ちなみに、ページの名前を変更したい時やページを削除したい時は、「Page」で、該当するページ上でホバーすると表示される「Settings」をクリックすることで、ページの詳細を設定できます。
3.2 Home ページの設定
Homeページを作成しましょう。
このページからサインインやサインアップができるよう、サインインボタンやサインアップボタンを配置したヘッダーを挿入します。
「Blocks」で「Header」をクリックし、そこから「Header with links and buttons」を選択します。
レスポンシブや配置場所を考える必要はなく、ワンクリックで全ての作業ができるので本当に簡単です。
ではボタンのワークフローを設定しましょう。
まず、配置したヘッダーをクリックします。すると詳細設定画面が表示されます。
ロゴの変更やリンク設定はこちらで行います。
スクロールダウンして、「Buttons」で、「Text」を「サインイン」とし、「Action」で「Open page > Sign In」を選択します。
これで、「サインインボタンがクリックされるとサインインページへ遷移する」という設定ができました。
同様に、もう一つのボタンを設定します。 「Text」を「サインアップ」とし、「Action」で「Open page > Sign Up」を選択します。
これで、「サインアップボタンがクリックされるとサインアップページへ遷移する」という設定ができました。
ボタンを追加したい場合は、「+Add button」をクリックします。
「Button label」を削除し、ボタンの名前とアクションを入力します。
アクションにはページの遷移だけではなく、セクション移動や外部URLへの遷移やサインアウトなどが用意されています。
また、ボタンのデザインを変更する場合は、横に配置されているパレットマークをクリックすることで、色や大きさなど好みのデザインに変更することができます。
3.3 サインアップページの作成
作成したサインアップページの設定をしていきましょう。
「Pages」をクリックしサインアップページを選択します。
「Blocks」を選択して、スクロールダウンして「User Accounts」を選択します。ユーザーアカウント作成の際に利用するフォームが全てここに入っています。「Sign Up form」を選択します。
追加したフォームの上でクリックすると、設定画面が表示されます。ロゴや画像をここでアップロードします。
ボタンも既に配置されており、ボタンをクリックした際のアクションも既に用意されています。
色やフォントなど詳細を設定し直したい場合はパレットマークをクリックします。
「Terms and Conditions Policy（利用規約）」とそのチェックボックスも用意されています。不要な場合は除外できます。「Action」で、リンクを貼ることができるので、別に利用規約を用意しているサイトとリンクさせます。
「On Click」の設定では、サインアップをした後に表示されるページを設定します。デフォルトではHomeページに遷移するようになっていますが、今回は「ログイン後のページ」へ遷移するよう設定します。外部のURLへ遷移する事も可能です。
3.4 サインインページの作成
サインインページも同様に作ります。
「Pages」をクリックしサインインページを選択します。
サインインページを表示したら、Blocksを選択して、スクロールダウンして「User Accounts」を選択します。「Sign In form」を選択します。
サインアップページと同様に、詳細設定をしていけば完成です。
ここでも、サインインをした後、どこのページへ遷移するのかや、パスワードを忘れていた場合どのようなアクションをとるのか（外部URLへ遷移するなど）、サインアップをしていなかった場合はどのようなアクションをとるのか（サインアップページへ遷移するなど）が用意されています。
3.5 ログインユーザーのみ閲覧可能なエリアの設定
閲覧可能エリアの設定をします。
サインインする前は、ヘッダーに「サインアップボタン」と「サインインボタン」が表示されるように設定します。そしてサインアップやサインインすればこのヘッダーを非表示とします。
サインインした後は、ヘッダーにアカウント情報が表示されるように設定します。このアカウント情報は、サインインしていないユーザーには見えないようにします。
このようにするため、ヘッダーを2種類用意します。
Homeページを開き、先程配置した「Header with links and buttons」の下に「Header with user profile」を追加します。
デザインエリアから「Add block」を使うか、Blocksから追加するかのどちらかで、「Header with user profile」を追加します。
このように、2つのヘッダーが並ぶことになります。
まず、「Header with links and buttons」を選択し、目の形のアイコンをクリックします。
すると、「Block visibility」の設定ができるようになります。つまり、「Header with links and buttons」というブロックを、誰が閲覧可能かをここで設定できます。
ログイン後は「サインアップボタン」や「サインインボタン」は非表示となるようにしたいので、このブロックを見ることができるのは「Non Logged in users」とします。
もう一つのヘッダー「Header with user profile」は、ログインしなければ見ることができないヘッダーとなるので、このブロックを見ることができるのは「Logged in users」とします。
その他のHomeページのボディ部などは全てのユーザーが閲覧可能（「Block visibility」はデフォルトの「All users」）とします。
3.6 ログインユーザーのみ閲覧可能なページの設定
ページごとでログインユーザーのみの閲覧を設定する場合は「Page Settings」から設定します。
Pageで、該当するページ（ここでは「ログイン後のページ」）でホバーすると表示される「Settings」をクリックし、「Page Settings」の「Visibility」で「Logged in users」を選択し、「Save」します。
「Pages」の「ログインユーザーのみが閲覧できるページ」を見ると、鍵マークがつきました。ログインユーザーのみ閲覧可能と設定された事を示しています。
これでユーザー管理に関する一連の設定は完了です。
コンテンツを充実させ、ウェブアプリやウェブサイト完成させましょう。最後に「Publish」をクリックし、公開しましょう！
4. データ管理
公開したあとのユーザー情報は「Data」に保存されます。
ここを「View Test Data」にすると、プレビューモードで入力された情報のみが表示されます。
5. まとめ
いかがでしたでしょうか？
Softr のメンバーシップ機能を使うと、ほんの数分でサインアップやログインの機能のついた Webアプリを作ることができるようになります。
Softr では、”支払いが完了したユーザーのみが閲覧可能となる設定”など、さらに機能を充実させていくようです。
その他、予約機能やNotionとの連携など、様々な機能充実をスケジュールしているようで、そのロードマップを公開し、一般投票できるようにしているところもおもしろいですね。
ここまで読んでいただきありがとうございました！
