こんにちは！今回は、ローコードツール「FlutterFlow」を使用して、サインイン/サインアップを実装する方法をご紹介します。
FlutterFlowはBubbleやAdaloのようにノンコーディングでWebアプリやWebサイトを構築できるツールです。
使用するにあたりFirebaseとの連携が必須となりますが、今回はFirebaseとのセットアップから、アプリに必要不可欠なサインイン・サインアップ機能を実装するところまでを紹介していきます。
なお、FlutterFlowの概要や基本的な構築方法、Editorの使い方などは以下の記事でご紹介しています。
1. 今回作成するアプリについて
今回は以下の機能を実装したアプリを作成したいと思います。
- サインアップ/サインイン
- サインアップ情報をFirebaseに保存
- データベースに保存した情報の画面表示
- ログアウト
2. 実装手順
2.1. 準備
実装に入る前に、FlutterFlowとFirebaseでそれぞれアカウントを作成する必要があります。
2.2 FlutterFlow
FlutterFlowを初めて利用する場合、以下のリンクからサインアップしましょう。
まずは画面右上の「Start for free」をクリックしてアカウントを作成しましょう。
必要な項目を入力して「Create account」をクリックしましょう。 GoogleやMicrosoftなどのソーシャルログインを利用することもできます。
アカウントが作成できたら、エディター画面に遷移します。
「start tutorial」から簡単なチュートリアルを確認すれば、自由に触ることができるようになります。
これでFlutterFlowの準備は完了です。
2.3. Firebase
次にFirebaseのアカウントを作成していきます。
初めて利用する場合は以下のリンクからサインアップを進めていきましょう。
まずは画面中央の「使ってみる」をクリックしましょう。
なお、Googleアカウントでのログインが必要になりますので、任意のGoogleアカウントでログインしましょう！
ログインができたら、「プロジェクトを作成」をクリックします。
Firebaseではプロジェクトという単位でデータベースの作成や課金体系を設定することができます。
任意のプロジェクト名を付けたら、チェックボックスにチェックを入れて「続行」をクリックして進めましょう。
次にGoogle アナリティクスの設定画面に遷移しますが、今回は利用しませんのでチェックは無効にして「プロジェクトを作成」しましょう。
プロジェクトの構築が始まり、ローディングが終われば作成完了です。
以下のようなダッシュボードに遷移すれば、Firebaseの事前設定は完了です。
3. Firebaseの設定
では引き続きFirebaseの設定を行っていきます。
FlutterFlowに接続するためには、Firebaseでいくつかの設定が必要となります。
まずは、FlutterFlowがFirebaseにアクセスするためのユーザーを追加していきます。
サイドバーのプロジェクトの概要の横にある歯車マークより、「プロジェクトの設定」をクリックします。
プロジェクトの設定の画面に遷移したら「ユーザーと権限」のタブから、「メンバーの追加」をクリックしていきましょう。
次に、メールアドレスとロールを以下のように設定します。
メールアドレス：firebase@flutterflow.io
ロール：編集者
入力できれば、そのままメンバーを追加します。
続いて、作成したメンバーに権限を追加していきます。
画面右下の「権限に関する詳細設定」をクリック。
権限を設定する画面に遷移しますので、ここから先ほど作成した firebase@flutterflow.ioに権限を追加します。
では右側の鉛筆マークをクリックします。
「別のロールを追加」をクリックして以下の権限を追加していきましょう。
- cloud functions→cloud functions 管理者
- service accounts→サービスアカウントユーザー
追加できたら保存しましょう。
最後に、FlutterFlowとFirebaseで作成したプロジェクトを連携するための project-idを取得します。
Firebaseのプロジェクトの設定画面に戻り、全般タブをクリックしましょう。
すると、画面中央にプロジェクトIDと記載された箇所がありますのでこちらをコピーしておきましょう。
これでFIrebaseの設定は完了です！
4. FlutterFlowの設定
4.1. Firebase連携
ではFlutterFlowのページからFirebaseの連携を行っていきます。
もしFlutterFlowでプロジェクトを作成していない場合は、「＋Create New」ボタンから新しいプロジェクトを作成してください。
サイドバーより、一番下の歯車マークをクリック。 Prject Setup→Firebaseをクリックすると、先ほどコピーしたプロジェクトIDを入力する箇所が表示されますのでそちらにペーストしましょう。
プロジェクトIDを入力できたら、右の「connect」ボタンが有効になりますので、そちらをクリックします。
最後に「Auto Generate Config Files」 をクリックして、Firebaseに設定情報を作成していきましょう。 （ 2回目以降、「Auto Generate Config Files」 ボタンは「Regenerate Config Files」ボタンとなります。）
これで設定完了です！
4.2. サインアップページの構築
4.2.1. テンプレートの設定
ではFlutterFlowのエディターからサインアップのページを構築していきます。
プロジェクトを立ち上げた際には、「Homepage」という名前のページが1枚だけ自動で作成されております。
今回はこちらをログイン後のページとして使用します。
サインアップのページは新しいページをテンプレートから作成していきたいと思います。
まず、サイドバーの「widget tree」からオレンジ色のアイコンの「New Page」をクリックしていきます。
するとテンプレートを選択できる画面が表示されます。
無料プランからテンプレートを豊富に利用できるのはとても有難いですね！
ではこの中から、サインイン・サインアップができるような画面を使いたいので、 「Auth」のタブから「Authenticate solo Alt」を選択します。
上部に作成するページの名前を入力する必要がありますので、任意の名前を付けておきましょう。
選択時に「Use My Theme」か「Use template Theme」どちらで作成するかを選択する必要がありますが、 「Use My Theme」を選択しましょう。
なおこちらの違いについてですが、FlutterFlowでは自由にテーマを設定することができ、 「Use My Theme」を選択した場合は、現在設定しているテーマに応じた色やフォントが適用された状態で テンプレートを使用することができます。
「Use Tempate Theme」を選択した場合は、テンプレートのデフォルトの設定のまま利用することができます。
作成ができたら、エディターに先ほどのテンプレートが表示されます。
4.2.2. 認証設定
では次に、settingから認証設定を行っていきます。
Flutterflowでは外部にDBがあるため、サインインやサインアップもFirebaseを用いて認証を行うこととなります。
サイドバーの歯車のマークから、「App Setting」→「Authentication」をクリック。
Enable Authenticatonを有効化すると、Firebaseの認証が利用可能となります。
ここで設定しておく必要があるのが、ログインページとログイン後の遷移するページになります。
ここでは、先ほど作成したsingupページを「Entry page」に設定し、 HomePageを「Logged in Page」に設定しましょう。
4.2.3. データベース設定
この状態ではまだユーザー情報を保存するためのコレクションがありませんので、 つぎにユーザーのコレクションをデータベースに作成していきます。
サイドバーより「Firestore」をクリックします。
すると、コレクションを作成できる画面が表示されます。
FireStoreと連携しておくことで、この画面からコレクションを作成することができます。
では早速真ん中の 「create collection」から作成していきましょう。
今回はユーザーのコレクションを作成したいので、「users」と入力してCreateをクリックしましょう。
ここで、usersと命名したことにより、FlutterFlowが自動でuserコレクションに必要な情報を作成するか 確認のポップアップが表示されますので、Yesを押して自動でdataを作成しておきましょう。
usersのコレクションが以下のように作成されていればＯＫです。
ではここから一度Firestoreに戻って、FlutterFlowで設定した情報を受け取れるよう準備を行っておきます。
まずはサイドバーから「構築」→「Firestore Database」をクリックしましょう。
すると画面が変わりますので、真ん中に表示される「データベースの作成」をクリック。
ここで作成するデータベースを「本番」または「テスト」のどちらで開始するかを選択する必要があります。
本番モード：アクセス権限を自分で設定（デフォルトは全て拒否設定）
テストモード：開始30日間は自由にアクセス可能
違いとしては上記の通りとなります。
今回はテストでの作成となりますので、テストモードを選択して次へ進みましょう。
なお、Cloud Firestore のロケーションはお近くのものを選択してください。
日本では東京と大阪があります。今回は asia-northeast1 (Tokyo) を選択しました。関西以西にお住まいの方は asia-northeast2 (Osaka) の方がよいかと思います。
以下のような画面が表示されればOKです！
続いて、サインアップができるように準備を行います。
サイドバーの「構築」→「Authentication」をクリック。
すると画面表示が変わりますので、そのまま中央の「始める」ボタンをクリックしましょう。
どのようなログイン方法で利用するかを選択する必要がありますので、 「メール/パスワード」を選択しましょう。
次にメール/パスワードのトグルを有効にして保存しましょう。
以下のような画面が表示されれば設定完了です！
4.2.4. アクションの設定
ではFlutterFlowのページに戻って、サインアップの設定を行っていきましょう。
今のままではサインアップの機能が正常に動作しないので、一つ一つ設定を行っていきます。
まずは作成したsignupのページに戻って、画面から「sign Up」と表示された要素をクリックしましょう。
ちなみにSign In と Sign Up は要素の 「Tab bar」というものが利用されています。
こちらの要素を利用することで、画面内で要素を切り替えて表示することができます。
「sign Up」をクリックしたら、画面に表示された Create accountをクリックして「action」のアイコンをクリックしましょう。
このアイコンから、選んだ要素（今回であればCreate account）をクリックしたときのアクション（動作）を設定することができます。
Bubbleでいうところのワークフローの設定画面になります。
なお、今回はテンプレートを利用しておりますので、すでにアクションが設定されている状態となっておりますが、設定済みの場合は最初に設定しているアクションがエディター画面で見えるようになっています。
2つ目以降のアクションを設定したいので、Action Flow Editor の 「Open」をクリックしましょう。
すると別ウィンドウで以下のような画面が表示されます。
現在は一つ目のアクションが選択された状態となっており、アクションの詳細が右側に表示されている状態となっています。
現在の設定状態と内容は以下となっております。
| 項目名 | 入力値 | 説明 |
|---|---|---|
| Action1 | Auth Create Account | アカウント作成のアクションを設定 |
| Auth Provider | emailを利用したサインアップ認証を設定 | |
| Email field | email-Adress-Create | emailを入力した値を設定 |
| Password Field | password-Create | パスワードを入力した値を設定 |
| Create user Document | ON | ユーザー情報を作成する設定 |
| collections | users | どのテーブルに作成するかを設定 |
emailとpasswordのtextfield（入力値）はそれぞれ以下の赤枠の画像から取得している設定となっています。
設定はこのままで問題ありませんので、サインアップ後にページ遷移をさせるような設定を加えます。
Action1の下部にある+ボタンを押して、「Add Action」を押すことで、次のActionを設定することができます。
なお、今回は利用しませんが、Add Conditionalは設定したActionに条件を付けることが可能です。
Bubbleでいう「only when」のような役割ですね。
Actionを追加すると、Action1に紐づく形でAction2が追加されたかと思います。
ここでは、Homepageに遷移させたいので、右側の設定から「Navigate to」をクリック。
Homepageをクリック。
これでワークフローの設定は完了です。
上から順にアクションは実行されるので、まず「Action1」のサインアップが完了すると、「Action2」でhomepageに遷移する、というフローを組むことができました。
4.3. サインインページの構築
ではサインアップの設定は完了したので、同様の要領でサインイン後のアクションを設定します。
1.「Sign in」のタブを選択
2.「Sign in」のボタンを選択
3. 設定画面より「Action」のタブを選択
4. Action Flow Editorの「Open」をクリック
Action1にはサインイン（ログイン）するためのアクションがすでに設定されておりますので、
+ボタンから先ほどサインアップの時と同様にHome pageに遷移する設定を行いましょう。
これでワークフローの設定は完了です！
4.4. サインアップ・サインイン後の画面構築
次にHomepageの中身を作成していきましょう。
サイドバーのWidget treeより、Homepageを選択します。
Homepageの初期設定はこのような構成となっています。
| 番号 | 要素 | 説明 |
|---|---|---|
| ① | App bar | 画面上部に表示させるHeaderに値するもの |
| ② | Column | カラム（縦方向に並べる枠組み） |
App barについては、各画面に表示させることができ、そのページ関連する情報を表示させることができるので、ユーザーに今どのページを開いているかなどを表現させるのに適しています。
今回はサインアップ後のページとなるので、App barにあるTextをクリックして「マイページ」と変更していきましょう。
では次にユーザーがサインアップしたことがわかるように、メールアドレスを表示させるように作りたいと思います。
ではcolumnを選択した状態で、サイドバーよりUI builderを選択し、TextのElementを画面内にドラッグ＆ドロップしましょう。
次にドロップしたtextの値を変更していきます。 先ほどは直接値を変更していきましたが、ログインしたユーザーのメールアドレスを表示したいので、 値を動的に設定していきます。
ではまずtextを選択した状態で、設定画面より「Set from Valiable」を選択します。
するとどういう値を設定するかを選択できますので、「Authentication User」から「Email」を選択。
※現在ログイン（認証）しているユーザーのメールアドレスを選択。
オレンジ色でEmailと設定されていればOKです。
このままでは左上にぴったり表示されてしまっているので、少しpaddingを使って表示箇所を整えていきましょう。
textを選択している状態で、設定画面よりPaddingのTに20を入れておきましょう。
次にcolumnを選択した状態で、Horizonral alignmentに0を入力しましょう。
これは親要素に対して、どの箇所に配置するかを設定することができるもので、
0を中心に横にスライドすることで、親要素に対して左右に配置することができます。
これで画面中央に表示させることができました。
これだけだと少し質素ですので、columnにtext、buttonを追加して、 それぞれ以下のように設定しましょう。
| 要素 | 入力値 | padding_top |
|---|---|---|
| text | マイページへようこそ | 20 |
| button | ログアウト | 20 |
では最後にログアウトボタンにアクションを設定していきましょう！
Action1：「Firebase Authentication」→Log out
Action2：「Navigate to」→Sign up
上記のように設定ができれば、画面及びアクションの設定は完了です！
4.5. プロジェクトエラーの解消
しかしこのままではデプロイ（検証）ができません。
デプロイするためには、右上の虫マークにある現在の問題を解消する必要がありますので、こちらをクリックしてひとつずつ対応していきましょう。
上記を見てみると、全てサインアップ時に登録するための要素が不足しているエラーとなっております。
今回はメールアドレスとパスワードを使ったサインアップのみとなりますので、一旦それ以外の方法での登録設定は削除をしておきます。
Sign upのページに戻って、以下赤枠のアイコンを削除しておきましょう。（アクションの削除でも問題ありません）
Sign inのtabに切り替えた画面でも削除をしましょう。
削除が完了したら、エラーがなくなったことが確認できますね。
テンプレートを利用しているので、各アイコンにアクションが設定されていたことが原因ということがわかります。
まだ黄色のエラー（Warning）がでておりますので、こちらも対応しておきましょう。
エラー内容としては、Firebaseのルールが適用されていない状態であるということです。
FIrebaseにはセキュリティルールがあり、どのデータベースにだれがどうアクセスするか、という記述を設定する必要がありますが Flutterflowから簡単に設定することができます。
サイドバーより「Fire store」を選択し、タブよりsettinngをクリック。
表示された画面からFireRulesの画面にスクロールすると現在の設定をデプロイすることができます。
デフォルトの設定では認証したユーザーであれば、自身のユーザーコレクションの情報を書き加えることができるものとなっております。
今回はこのままデプロイしておきましょう。
もしデプロイ時にエラーが出る場合は、Firebaseのロケーション設定が未設定になっている場合がありますので確認してみてください。
これでエラーなく全ての設定が完了しました！
5. 動作確認
それでは早速デプロイして動作確認をしてみましょう！
デプロイ方法は簡単で、右上にある雷のようなマークをクリックすればOKです。
デプロイ時間に2.3分時間がかかりますが、完了したらサインアップ画面が表示されます。
では任意のメールアドレスとパスワードを入れて、アカウントを作成してみましょう！
画面が遷移して以下のように表示されればOKです！！
ログアウトをクリックすると、Sign upのページに戻ることも確認できるかと思います。
まとめ
今回はFlutterFlowを使って、サインアップ・サインインを実装する方法をご紹介させて頂きました。
Firebaseの設定の方法や、テキストやボタンの配置、アクションの設定方法など基本的な使い方のご紹介となりましたが、他にもAPIを利用したり、技術的な知見は必要ですが自分で作成した関数を用いてアクションを実行するようなこともできます。
プレミアム会員であれば、チャット画面のテンプレートもありますので、すぐにチャット機能をとりつけることも可能です。
しかしながら自由に扱うためには、関数を作成する知識が必須であること、またFirebaseのデータベースの構造を理解する必要がありますので、ノーコード初心者には少し難易度が高いツールかなと感じました。
とはいえ随時アップグレードはされておりますので、これからもかなり期待のできるローコードツールですね！
それでは最後までお読みいただきありがとうございました！
