こんにちは、皆さん。最近、ノーコード・ローコードツールが注目されていますね。
ノーコードとは、プログラミングの知識がなくても、簡単にアプリやウェブサイトを作成できるツールのことです。今回はその中でも、FlutterFlowを使ってグループチャットを作成する方法についてお伝えします。
FlutterFlowには、グループチャットのテンプレートがあるため、初心者でも簡単に作成できます。20分もあれば、あなたも自分だけのグループチャットを作成することができます。まずは、FlutterFlowとグループチャットの基礎知識について確認していきましょう。
FlutterFlowのチャットはサクサク動く！
ノーコードでチャット機能を作ると、ちょっともっさりした感じがしてサクサク動かない経験はないでしょうか？
そこはノーコードである以上しょうがないですよね。数十人で数ヶ月・数千万円かけたアプリと、一人で作るアプリが同じわけがない、と。
しかし、FlutterFlowのチャット機能は結構サクサク動きます！チャットすると相手側に即反映してくれます！
FlutterFlowのチャットは画像も送れる！
もちろん、テキストだけではなく画像も遅れます。
それも、特に作り込む必要がなくテンプレートをそのまま使うだけでできちゃいます。
これは驚きのありがたさですよね...！
まずはグループチャットの構成を把握する
ではいよいよ作り方の説明に入りたいと思います。まずはFlutterFlowのグループチャットのテンプレートの構成を見ていきましょう。
上記はFlutterFlow公式で書かれているグループチャットの構成です。
以下の四画面の構成になっています。
AllChats: チャットグループリスト
InviteUser: チャットグループ作成
ChatPage: チャットページ
AddUserToGroup: 新しいグループメンバーの追加
テンプレートから上記4画面を作成
4画面ともテンプレートを使うので0かから作る必要は全くありません。
上記のようにCreate Page のChatタグを開くと、目的の４画面が出てくるのでこれをそれぞれ選択して画面を作りましょう。
Chat用のデータベースコレクションが自動生成される。
上記4つのうち、Chat Pageテンプレートを使った際に、チャットデータベースを自動生成するかどうかが聞かれます。
すると、以下のように自動的にChatに必要なデータベースコレクションを生成してくれます。
非常に親切でありがたいですよね。
各画面間の遷移を修正
上記の構成に従い、All ChatsページからInvite Userページへ、チャットページからAddUserGroupページへ、などの遷移のリンクを貼ります。
各種エラーを修正
テンプレートそのままだと各textに値が設定されていなかったりして、エラーがたくさんでます。それを一つずつ解消していきます。
（それを説明するのはちょっと大変なので、以下動画で説明しているのでそちらもご確認ください。）
それが終わればもう完成です！
動かしてみましょう。
FlutterFlowのグループチャットの確認
動かしてみると、以下のようにチャット一覧が表示されます。右上のアイコンからグループ作成のページへ移動します。
以下のようにユーザー一覧が表示されるので、グループに追加するユーザーをチェックしましょう。
すると以下のようにチャットができます！サクサク動いて気持ちいいです。
実際のチャットのように複数端末・複数ブラウザで動かして試してみてくださいね。
FlutterFlowのグループチャット機能をYoutube動画で確認したい方はこちら
FlutterFlowは複雑なため、動画で見た方が早いことも多いため、動画にもまとめてみました。
この記事の内容は上記の動画で詳しく解説しています。興味のある方はどうぞ。
FlutterFlowのグループチャット機能：まとめ
今回はFlutterFlowでグループチャット機能を作成する方法について書いてきました。
テンプレートがあるので設定をいじるだけでグループチャットができてしまいます。
慣れると20分くらい、あるいはもっと早くグループチャットを作れちゃいます。
FlutterFlowはこうしたテンプレートの豊富さも魅力ですよね。
特にチャット機能というあらゆるアプリに搭載される可能性が高い機能を用意しておいてくれるのはありがたいです。
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、flutterflow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。