FlutterFlowのAI Genでチャットアプリを爆速開発してみた【動画解説付】

はじめまして、Technology部のNguyen（グエン）です。

近年、スマートフォンやタブレット端末の普及によりモバイルアプリの開発がますます重要になっています。しかし、プログラミングのスキルがない場合や時間が限られている場合には、アプリの開発が難しく感じることもあるかもしれません。

そこで登場するのが「FlutterFlow」です。FlutterFlowは、ノーコードでFlutterアプリを開発できるプラットフォームであり、プログラミングの知識がなくても簡単にアプリを作成できます。

今回はFlutterFlowに搭載されている生成AI機能「AI Gen」を活用して、モバイルチャットアプリを開発してみました。

今回は通常なら2人日はかかる見込みのCRUD開発を6時間で完了できました。その工程を動画付きで解説しますので、ご参考になれば幸いです。

※FlutterFlowの特徴や機能については以下の記事をご覧ください。

ノーコード開発ツール「FlutterFlow」とは？機能や特徴を解説

Hiroyuki Kikuchi

2023.09.27

FlutterFlowのAI Genとは？

FlutterFlowの「AI Gen」は、2023年7月に公開されたAIアシスタント機能群です。

テキストでプロンプトを入力すると、プロンプトに応じたページやコンポーネント、Firebaseスキーマの他、カラーテーマの配色パレットやCustom Fuction用のコードも生成できます。

画面だけでなくコンポーネントを単体で作る機能もあり、デザインからコーディングまで一気通貫でできるのがメリットです。

アプリの要件

前提

今回はFirebaseのサービスを利用している方を対象とし、制作フローを紹介しています。

機能

以下の機能を含めたチャットアプリを実装してみます。

• アカウント系の機能（アカウント登録、ログイン、ログアウト）
• ユーザー一覧を閲覧できる機能
• チャットルームを作成する機能
• チャットのメッセージを送信する機能

プロジェクトを初期化する

ここからは動画をまじえながら、実際の作業をステップごとに解説していきます。

1. Firebaseで新しいプロジェクトを作成。
2. Firebase コンソールでプロジェクトを追加。
3. 今回はプロジェクト名を”IChat”と付けて登録しました。
4. ログイン・ログアウト・アカウント登録などのためにAuthenticationサービスを有効にします。FiresbaseはGoogleやFacebookなど複数のプロバイダを提供していますが、この記事ではEmailプロバイダのみを設定します。
5. 各種データを保存するためにFirestore Databaseサービスを有効にします。
6. ユーザーのファイルを保存するには、Storageサービスを有効にしてください。

FlutterFlowのプロジェクトを作成

1. プロジェクト名とパッケージ名を設定します。今回は以下のようにしました。

プロジェクト名: IChat
パッケージ名：jp.co.liginc.ichat

2. プロジェクトを初期化するとともに、Firebaseを連携するために「Setup Firebase」をオンにします。
3. Next Stepボタンをクリック。
4. Firebase Project IDを指定し「Connect」ボタンをクリック。
   ※注意:Firebaseのプロジェクトと連携するには、プロジェクトのユーザーに“firebase@flutterflow.io”を編集者として追加することが必要です。
5. Enable Authenticationをオンにします。
6. Create User Collectionをオンにします。このユーザー情報を保存するためのコレクションです。
7. Start Buildingボタンをクリックします。

プロジェクトの初期化はこれで以上になります。次に各機能を実装しましょう。

各機能の実装

アカウント登録機能

1. FlutterFlowの機能「AI Gen」にUIを設計してもらい、ページ名をRegisterPageとしてページを作成します。AI Genを使うと、アカウント登録画面が1分で作成できました。非常に便利です。
2. Initial Pageを以下のように設定します。

   Entry Page：RegisterPage
   Logged In Page：HomePage

3. Firestoreのセキュリティルールを更新します。CreateをUsers Collectionに指定することで、登録済みのユーザーしかアカウント作成ができなくなります。

   また、ReadをAuthenticated Usersを指定することで、ログイン済みのユーザーしか他のユーザー情報を見えないように制御可能です。

4. アカウント登録のアクションを作成します。
5. 動作を確認し、問題なければアカウント登録機能の作成は終了です。

ログイン機能

1. さきほどとおなじくAI GenにUIを設計してもらい、ページ名をLoginPageとしてページを作成します。
2. アプリを起動した時、ログイン画面を開くようにInitial Page設定を変更します。
3. ログイン画面からアカウント登録画面へ遷移するようにSign Upボタンに「Navigate To」アクションを作成します。
4. アカウント登録画面からログイン画面へ戻るようにSign Inボタンに「Navigate To」アクションを作成します。
5. Log Inボタンにログインアクションを登録します。
6. 動作を確認し、問題なければログイン機能の作成は終了です。

ユーザー一覧機能

1. AI GenにUIを設計してもらい、ページ名をUserListPageとしてページを作成します。
2. Firestore Databasesからユーザー情報を取得するBackend Queryを作成します。
3. ユーザー情報を表示させるために、Avatar画像、表示名とメールアドレスをラベルのテキストに指定します。
4. Nav Barに表示させるように「Show this page on the Nav Bar」を有効にします。

ここで動作確認をしてみたところ、現状ではユーザーのAvatar画像が未設定だったので、エラーが出てしまいました。解決するためにデフォルト画像を追加します。

1. デフォルト画像の用意（私の場合はこのURLで画像を用意しました）
2. Imageを選択。
3. Pathを編集。
4. Conditional Valueを選択。
5. IF条件に「image_url is not set」を指定。
6. THENのValueに用意しておいたデフォルト画像のURLを指定。
7. 最後にELSEのValueにimage_urを指定します。

再度動作確認してみましたが、検索機能がまだ上手く動かないようです。

原因としてはTextFieldの「Update Page On Change」属性がデフォルト設定では無効化されていたことのようでしたので、有効化します。

これでユーザー一覧機能も完成しました。

チャット機能

今回は上図のようなデータモデルを用意し、FlutterFlowにて実装します。

Connect > Firestore > Add new collectionメニューで、「ChatRoom」コレクションと「Messages」コレクションを作成します。

FlutterFlowで新コレクションのFirestore Rulesを生成します。

Firestoreにてソースコードでしか書けないRulesは、FlutterFlowにてGUIで生成できるので便利です。しかし、複雑なRulesは生成できていないため、自動的に生成したRulesをもとにして改善しましょう。

チャット画面を作成します。UserListPageをコピーして、ChatPageを作成します。

ChatPageに必須な情報を定義します。ChatPage > Add Page Parametersから、friendUserとchatRoomを定義してください。それぞれ以下のような役割があります。

• Userドキュメンテーション：友だちの情報を表示させる
• ChatRoomドキュメンテーション：チャット履歴などの情報を表示させる

友だちの情報とチャット履歴を表示させる設定を行います。

UserListPage画面からChatPageへ遷移するロジックを追加します。当該するChatコレクションが存在するかどうかをチェックし、存在しない場合に新コレクションを作成し、ChatPageへ遷移するようにしました。

メッセージを送る機能を実装します。

最新のチャットを一番下に配置させるようにBackend Queryの並び順を修正します。

メッセージを送信した後、入力フィールドをクリアします。

新メッセージを受信した時、自動的に表示させるように修正します。

その他、細かいエラーを修正しました。最後に動作を確認しましょう。

問題なくメッセージが送れていました。これで完成です。

まとめ

FlutterFlowのAI Gen機能を活用しながら、簡単なチャットアプリの開発を行いました。ここまでわずか6時間程度で完了し、通常の開発よりも大幅に工数を短縮できています。

FlutterFlowは、プログラミングのスキルがない人々や時間に制約のあるプロジェクトにとって、効率的で使いやすいアプリ開発プラットフォームです。ビジュアルなデザインツールとコードカスタマイズの両方を組み合わせることで、アプリ開発のハードルを下げつつ、幅広いニーズに対応したアプリを迅速に開発できるでしょう。

弊社LIGではFlutterFlowをはじめ、各種ノーコード／ローコードツールを活用した開発を承っています。ご興味のある方は下記ページよりお気軽にお問い合わせください。

ローコード・ノーコード開発サービスの詳細はこちら