XI本部 プロダクトイノベーションセンター アジャイル開発グループの徳山です。
前回の記事「FlutterFlowでFirebaseと連携する方法」では、FlutterFlowとFirebaseを活用したバックエンドのセットアップ方法を詳しく解説しました。今回は、FlutterFlowを使って開発できる社内業務向けスマホアプリの作成方法を紹介します。これまで解説した内容を確認しながら、実際のアプリ開発の流れをご覧ください。
はじめに
本記事の目的は、FlutterFlowを利用して社内用の簡単な業務用アプリを短期間で開発する方法を紹介することです。FlutterFlowの利用を検討している方で業務アプリを素早く作りたいと考えている方に向けてステップバイステップの解説を提供します。
なお、細かいセットアップ方法についての解説は本記事では行いませんので前回の記事「FlutterFlowでFirebaseと連携する方法」を適宜ご参照ください。
また、本記事は2024年10月時点の情報に基づいたものとなります。
どのようなアプリを作るのか
アプリ概要
今回作成するアプリは、営業チーム向けの営業報告共有ツールです。営業チーム内で共有する業務情報を記録し、他のメンバーと共有することを目的としています。このアプリは単一部署の複数人が使用することを想定しています。
ミニアプリのため、実装する内容は下記の内容に絞りました。
機能概要
- 営業活動の報告入力： 営業が外出先から直接活動内容を入力。
- 報告の共有： 営業メンバー間で活動状況が即時に共有される。
- 進捗管理： アプリ内で営業進捗を可視化し、確認できるようにする。
アプリの作成
ここからは実際にアプリを作成します。バックエンドは前回解説したFirebaseを利用します。
大まかに下記の項目に分けて解説を行います。
- プロジェクトのセットアップ
- 画面作成および機能の実装
- テストとデプロイ
1. プロジェクトのセットアップ
FlutterFlowプロジェクトの作成
「Quick Report」というアプリ名で新規プロジェクトを作成します。
スマートでクールという印象を与えるため、Themeは「Sleek&Cool」を選択しました。
FlutterFlowからFirebaseのプロジェクトを新規作成し、Auth, Storageも利用できるように有効化しておきます。
Enable Authentication,Create User CollectionのトグルをONにしておくことで、ユーザーコレクションの作成とユーザーのログインを自動で設定できます。
また、ログイン状態によって初期表示するページも設定できるため、それぞれ下記を設定しました。
ログイン前：Signin ページ（FlutterFlowで用意されているテンプレートを利用）
ログイン後：ReportList ページ（空のページを利用）
データベースの設定
今回は以下の2つのコレクションを用意します。
users：営業担当者の情報を記録するためのコレクション
reports：レポートデータを記録するためのコレクション
それぞれのスキーマは下記となります。
usersコレクションのスキーマ
FlutterFlowで用意されているユーザー用の定義をそのまま利用しています。
reportsコレクションのスキーマ
企業名（company_name）、営業活動の詳細（activity_details）、備考（remarks）、ステータス（status）、作成者の情報（user_id）を管理できるように設計しています。
セキュリティルール
usersコレクションとreportsコレクションに読み書きのアクセス制限を設定します。
usersコレクションは、作成は誰でも可能で、それ以外の操作はログインユーザーである本人のみ可能となるように設定します。
reportsコレクションは、作成と読み取りはログインユーザーであれば可能で、上書きと削除は作成者のみ可能となるように設定します。
2. 画面作成および機能の実装
次に、アプリの画面を設計します。今回作成する画面設計は下記のとおりです。
| 画面名 | 機能 |
|---|---|
| ログイン/新規登録 | ユーザーのログインと新規登録を行う |
| 営業報告一覧 | 営業担当者が登録した営業報告の一覧を表示する |
| 営業報告作成 | 新しい営業報告を登録する |
| 営業報告詳細 | 営業報告の詳細を表示する |
| 営業報告編集/削除 | 既存の営業報告を編集または削除する |
ログイン/新規登録
FlutterFlowで用意されているテンプレートを活用して作成します。追加したユーザーの名前や電話番号は標準ではusersコレクションに保存されないため、保存する設定をアクションから追加します。
営業報告一覧
営業報告の一覧と報告の作成ができるボタンを配置しています。
一覧の表示は「ListView」ウィジェットが用意されており、このウィジェットにデータを渡すことで簡単に作成できます。
今回はreportsコレクションのデータを取得してListViewに渡しています。
また、ヘッダーナビゲーションにユーザーアイコンを設置し、ログアウトができるようにしています。FlutterFlowではログアウトや確認用のダイアログのアクションが用意されているので簡単にログアウトのワークフローを実装できます。
実際に作成した報告の一覧画面は以下のようになります。
営業報告作成
「作成する」ボタンをクリックすることで、営業報告の作成ページに遷移できます。
ステータスは「choice chips」ウィジェットを利用しています。単一選択と複数選択の両方に対応したオプション選択用のウィジェットで初期値の設定やEnum（列挙型）のデータ型を利用した選択肢の作成も可能です。
また、フォームの入力内容をチェックするバリデーションも「Form Validation」ウィジェットを利用することで簡単に設定ができます。文字の長さや入力形式など個別でエラーメッセージも設定が可能です。
「作成する」ボタンをクリックすると下図のようにバリデーションが効いていることを確認できます。
最後は、報告作成時のアクションワークフローを設定します。条件分岐や画面遷移、スナックバーによるメッセージの表示などFlutterFlowでは多くのアクションが標準で用意されているため複雑なワークフローも組むことが可能です。
<報告の作成フロー>
- フォームの入力内容のチェック
- Firestoreへのデータの保存
- 保存が成功したかをチェック
- 報告一覧ページへの遷移
- 保存が成功したメッセージの表示
営業報告詳細
営業報告一覧画面から任意の報告を選択したときに詳細画面に遷移するようにします。各報告を表示するContainerのウィジェットに遷移するためのアクションを設定し、その際に選択した報告のデータ（ドキュメント）を渡すように設定します。詳細画面側ではこの設定を受け取ることで報告の情報を表示できます。
報告詳細画面は下図のとおりです。
FlutterFlowでは「Page State」という機能があり、ページ内で共通の値をセットして利用できる仕組みがあります。担当者の名前はusersコレクションからデータを取得する必要があり、この情報は削除や編集ボタンの表示の判定にも使えるので、Page State機能を使って管理します。この機能は右のプロパティパネルから利用ができます。今回はuserのデータが欲しいのでsalesPersonという名前でuserドキュメント型の定義を行います。
あとは、画面ロード時にsalesPersonの値に報告書の作成者をセットするワークフローを組むことで、ページ内で利用することが可能になります。
1. 報告書のuser_idのフィールドと一致するusersのデータを取得
2. 取得したユーザーのデータをsalesPersonにセット
これで無事、報告の詳細に必要な情報を全て取得できました。実際の画面は下図となります。
ログインしているユーザーが報告の作成者ではない場合、ボタンの表示がされないように表示の制御をしています。
これはプロパティパネルのVisibilityでロジックを設定することで制御ができます。
削除の処理は、報告の作成の時と同様、「Create Document」というアクションの代わりに「Delete Document」を使うことで簡単に実装できます。
営業報告編集
最後に、報告の編集を行うページを作成します。といっても先ほど作成した作成画面とUIもロジックもほとんど同じです。編集画面に必要なデータは、詳細画面に遷移する際にデータを渡したように編集ページに遷移する時も詳細画面のデータを渡すことで取得ができます。ロジックも作成や削除の時とほぼ共通で、「Create Document」の代わりに「Update Document」を利用するだけです。
最後に、ここまで作成した画面一覧と遷移は下図に示します。
サイドメニューからStoryboardを開くことで、アプリの全体像を一目で把握できます。
3. テスト
ブラウザではヘッダーメニューから 「プレビューモード」 または 「Run モード」 を使い、アプリの挙動を確認できます。
プレビューモードはロジックが反映されず見た目だけの確認ができます。Runモードは、実データや遷移など本番と同等の挙動の確認ができるといった違いがあります。Runモードはビルドに時間がかかりますが、ロジックを含めた確認ができ、デバッグ機能も利用できます。
確認したい範囲に応じてそれぞれのモードを使い分けましょう。
4. ビルドおよびデプロイ
以下に、「4. ビルドおよびデプロイ」セクションの不足している内容を補完して書き上げました。
4. ビルドおよびデプロイ
FlutterFlowでは、アプリを開発した後に、さまざまな方法でビルドおよびデプロイが可能です。具体的には以下のデプロイ方法があります。手順はドキュメントに詳細が記載されていますので、必要に応じてFlutterFlow Publishingをご確認ください。
1. Webアプリとしてのデプロイ
FlutterFlowで作成したアプリをWebアプリとしてデプロイする方法です。これにより、アプリをURL経由でアクセスできるWebアプリとして公開でき、ブラウザから利用できます。
2. モバイルアプリ（iOS/Android）としてのデプロイ
開発したアプリをiOSおよびAndroid向けにビルドして、それぞれのアプリストア（App Store, Google Play）で公開できます。FlutterFlowはFlutterベースのため、1つのコードベースでクロスプラットフォームのアプリを作成でき、アプリストアでの配信に対応しています。
- iOSアプリ：Apple Developer Programへの登録や証明書の取得が必要です。
- Androidアプリ：Google Play Consoleを通じてAPKまたはAABファイルをアップロードして公開します。
まとめ
架空の営業報告共有アプリを題材にFlutterFlowで社内業務向けスマホアプリの作成手順を紹介しました。手順や設定が煩雑に感じる方もいらっしゃると思いますが、慣れれば2〜3時間程度でこのレベルのアプリを作成できます。
今回の記事がFlutterFlowでアプリを作成してみたい方やどのようなアプリを作ることができるのかを知りたい方のお役に立てば幸いです。FlutterFlowについてより知りたい方は、公式ドキュメントや私の過去の記事も参考にしていただけると嬉しいです。
参考資料
執筆：@tokuyama.raido、レビュー：@handa.kenta
（Shodoで執筆されました）
