今日はノーコードのFlutterFlow（フラッターフロー）で簡単なチャットアプリを作ってみたいと思います。
１：１でやりとりするシンプルなチャットアプリですね。DM（ダイレクトメッセージ）のイメージです。
FlutterFlow（フラッターフローとは？）
そもそも「FlutterFlow（フラッターフロー）」って何？という方も多いと思うので簡単に説明します。
FlutterFlowとは、スマホアプリを簡単に作るためのノーコード（ローコード）ツールです。
FlutterFlowを使用すると、プログラミングをしなくても（エンジニアじゃなくても）独自のアプリを簡単かつ迅速に作成できます。ノーコードの中でもかなり高機能なアプリを作れる優れものです。
FlutterFlowは、ユーザーがGUIツールを使用して、テキスト、画像、ボタン、フォームなどの機能を含むウェブアプリケーションを作成できるビジュアルエディタを提供します。
また、FlutterFlowはFlutterフレームワークをベースにしており、FlutterFlowが生成するコードは、Dartというプログラミング言語を使用しているので、ノーコードのFlutterFlowで開発した後、Flutterとしてプログラミングして開発することも可能な点も魅力の一つです。
↓FlutterFlowについて詳しく知りたい方はこちら
ネイティブアプリを10倍速で作れるノーコードツールFlutterFlowとは？Adaloとの違いも合わせて解説
FlutterFlowでのチャットアプリの作り方
ざっくり手順は以下のようになります。
FlutterFlow側でプロジェクト作成。
firebaseの設定。
チャット関連のページをテンプレートから作成。
リンクを貼ったりバグを取ったりして完成。
こんな感じです。
簡単に解説していきます。
FlutterFlowでプロジェクト作成〜firebaseの設定
まずはチャットアプリを作るための準備を行います。
以下の記事に従いまずは作ってみましょう。
【初心者向け】FlutterFlowで簡単なアプリを作ってみよう（ビルド〜SignUpまで編）
テンプレートからチャット画面を作成
まず、チャットアプリは以下のような構成になります。
AllChats画面：すべてのチャットグループが表示されているイメージです。
InviteUser画面：ユーザー一覧からユーザーを選択し新たにチャットグループを作成するイメージです。
ChatPage画面：メッセージのやり取りをする画面ですね。
テンプレートからAllChats画面を選択し作成
New Page からCreate Pageに遷移し、ChatタブからChatPage画面を選択します。
すると、自動的にChatsコレクションとChats Messagesコレクションを作るか？と言われるので素直に作ってもらいましょう。
Chatに必要なデータベースコレクションを自動的に作ってくれるのは非常にありがたいですね。
テンプレートからAllChats画面を選択し作成
同様に、テンプレートからAllChatsPageを選択し作成します。
ALlChats画面の上部にアイコンを設置し、inviteUser画面へのリンクを貼ります。
InviteUserページを作成する。
こちらはBlankPageを選択し、InviteUserという名前でページを作成します。
以下のような構成でListviewやRow、CircleImage、Textを配置します。
さらに、ListViewにBackendQueryを設定します。
Rowにアクションを設定し、ChatPageへ遷移できるようにします。
バグを取る
FlutterFlowのエディターの画面上部の虫のようなアイコンに赤い丸があった数字が書いてあると思います。
これがエラーです。これをすべて削除する必要があります。
ここではそれを細かく書くのは大変なので割愛しますが、動画の方で少し解説してるので参考にしてください。
ビルドして動作確認
これらが終わると、右上の雷マークのビルドボタンを押してビルドが完了すると動作確認できます。
これだけでチャットができるようになるのは素晴らしいですよね。
Youtube動画での解説はこちら
こちらの動画の方でより細かく解説してますので、興味のある方はこちらから
アプリ・Webサービスの開発の無料相談はこちら
Adalo、bubble、FlutterFlow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。