XI本部 プロダクトイノベーションセンター アジャイル開発グループの徳山です。
私たちのグループは現在ローコードツール、その中でもマルチプラットフォーム向けにアプリケーションを開発できるFlutterFlowの活用を行っており、業務アプリのMVP開発などに活用しています。
昨年「ノーコードツール「FlutterFlow」を利用すると5時間でどんなアプリを作ることができるのか」というタイトルで記事を書き多くの方に閲覧していただきました。
ノーコードやローコードに対する関心も高まってきているため、改めて「FlutterFlowのことを知りたい」、「FlutterFlowで開発を始めたい」という方向けにこれから数回に分けてFlutterFlowの情報を様々な側面から発信できればと思います。
はじめに
本記事の目的は、FlutterFlowの機能や特徴を紹介し、スマホアプリ開発を始めるための前提知識を提供することです。
対象読者としては、ビジネスパーソンや開発初心者で、ノーコードやローコードでのアプリ開発に興味がある方を想定しています。
FlutterFlowの概略
FlutterFlowとは、Google製のUIフレームワークであるFlutterをベースにしたローコードのアプリ開発プラットフォームとなります。
ドラッグ&ドロップでUIをデザインすることができ、ほとんどコードを書かずにアプリを構築可能です。FlutterFlowを用いればアイデア次第で誰でもアプリクリエイターになれます。
2024年9月に実施されたFlutterFlow Developer Conference 2024によればユーザー数はすでに160万人を超えており、人気のサービスとなっています。昨年実施された同イベントでは75万人との公表だったため1年間で85万人も利用者が増えたことになります。
なお、FlutterFlowは必要に応じてカスタムコードを書くことで柔軟に機能を追加できるためローコードに分類されます。
FlutterFlowの特徴
FlutterFlowは多機能ですが、主な機能としては下記のようなものが挙げられます。
わかりやすいビジュアルエディター
FlutterFlowでのアプリの作成は上図のような画面で行うことができます。最初は覚えることが大変ですが、各機能が非常に考えられて配置されておりすぐに操作できるようになります。画面の構築やロジック（イベント処理）の構築はもちろん、レスポンシブやダークモードでの表示、ブランチやバージョンの切り替え、エラーや警告の有無、他の機能へのナビゲーションが全てこの一画面で完結します。
豊富なウィジェット
アプリ開発では欠かせない80種類近い部品が用意されており、パズルのように組み合わせることで簡単にUIが作成できます。Flutterをベースとしているため、各ウィジェットの可能な配置もFlutterのルールに合わせたものとなります。例えばContainerと呼ばれるウィジェットの中に複数の別ウィジェットを配置することはできません。
上図のように配置できない場合はFlutterFlowが警告を表示し、正常な配置について教えてくれるのでFlutterについてわからない方でも安心して画面を作成できます。
自分でカスタムしてコンポーネントを作成することもできるため、何度も同じコンポーネントを作成するといった手間もかかりません。
バックエンドサービスとの統合
FlutterFlowはデータベースや認証、ストレージといった自前のバックエンド機能を持ち合わせていません。そのため、外部のサービスと連携する必要がありますがFirebaseやSupabaseといったBaaS(Backend as as Service)と簡単に連携できる機能があります。
FlutterFlowの開発者がGoogle出身者ということもあるためか、特にFirebaseとの連携はシームレスに行うことができます。Firebaseとの連携については別の記事で別途取り扱います。
その他のサードパーティサービスや独自サーバーへの接続についてもAPI Connetorという機能が用意されており、REST APIを通じて接続ができます。
カスタムコードによる自前の実装の組み込み
必要に応じてコードを書くことで独自の機能を追加できます。FlutterFlowでは多くのウィジェットやスマートフォンも考慮されたロジックが用意されていますが、開発でよく利用されるメソッドが用意されていないことがあります。
例えば簡単な例だと、取得した配列を特定の文字でsplitしたいというような機能は用意されていません。
この機能を実装したい場合は下記のようにCustom Code中のCustom Functionsという関数定義ができる場所で関数を作成することで実現できます。
開発の経験がない方だと実装ハードルは高いかと思いますが、開発経験がある方はCode CopilotというAIのコードアシスタント機能が用意されているのでそちらを利用することで実装を進めることができます。
対応プラットフォームが豊富
Flutterと同じく「iOS, Android, Web, Windows, macOS, Linux」といったプラットフォームのアプリケーションを作成できます。
Flutterをベースとしているため当然全てのプラットフォームに完璧に対応できているわけではありませんが、1つのコードベースで多くのプラットフォームに向けたアプリを作成できる点は他のノーコードやローコードサービスにない特徴の1つです。
スマホアプリ開発を始める手順
それでは、実際にFlutterFlowを使ってスマホアプリ開発を始める手順を簡潔にご紹介します。
細かい設定は省略しているので大まかな流れと捉えてください。
FlutterFlowにユーザー登録する（無料プランあり）
FlutterFlowの公式サイトにアクセスし、メールアドレスやGoogleアカウントで登録します。プロジェクトを作成する
ダッシュボードから「Create New Project」をクリックし、テンプレートを選ぶかブランクプロジェクトを作成します。バックエンド接続の設定を行う
FirebaseやSupabaseなどのBaaSやサードパーティサービスとの接続設定を行います。ロジックとデータ操作の実装
アクションやデータバインディングを設定して、ユーザーの操作に応じた動作を実装します。
独自の機能やロジックが必要な場合は、Custom FunctionsやCustom Widgetsでコードを追加します。アプリをテストする
プレビューやテスト機能を使ってアプリの見た目やロジック、動作が正常かを確認して必要に応じて修正します。アプリをリリースする
各プラットフォーム（iOS、Android、Web）に応じて、App StoreやGoogle Play、ウェブサーバーなどにアプリを公開します。
メリットとデメリット
ここまでFlutterFlowの概要や機能、スマホアプリ開発の流れを紹介してきましたが改めてメリットとデメリットをまとめてみたいと思います。
メリット
迅速な開発
豊富なウィジェットや柔軟なロジックを利用することで短期間で開発できます。特にプロトタイプやMVP開発といった大規模でなく要件も複雑化していないフェーズにおいてはFlutterFlowは採用しやすいと考えています。
マルチプラットフォーム対応
Flutterをベースとしているため、モダンで整ったUIを実現できます。1つのコードベースで複数のプラットフォーム向けにアプリを作成できるため開発の効率も良くなります。
柔軟な拡張性とバックエンドとの統合
カスタムコードを挿入することで、独自の機能やロジックを実装できます。AIの力を借りながら実装できるためFlutterをあまり触ったことのない開発者の方だと実装ハードルは低くなります。また、FirebaseやSupabaseなどのバックエンドサービスと簡単に連携でき、サードパーティ製のサービスとの連携も可能です。アプリケーションにおいて必須なデータベース操作やユーザー認証が手軽に行えます。
デメリット
学習のハードル
FlutterFlow独自の操作方法やFlutterのレイアウトルール、連携するBaaSサービスの特徴、その他多くの機能など本格的な開発を行うためのキャッチアップには時間を要します。また、FlutterFlowはコミュニティは活発でドキュメントもしっかりと用意されていますが基本的には英語です。そのため、開発経験者の方でも数日〜1週間程度はキャッチアップ期間として見ておくと良いかと思います。
プラットフォーム依存性
FlutterFlowはバックエンドサービスを持たないためサードパーティ製のサービスとの連携が基本となります。標準でサポートしているBaaSはFirebaseまたはSupabaseに限られます。そのため、FlutterFlowがサポートしていないサービスを使う場合は公式サポートやコミュニティに接続方法を相談する必要も出てきます。
まとめ
ここまで読んでくださりありがとうございます。まとめると、FlutterFlowとは下記の特徴を有したツールと言えます。
- ローコードで迅速なアプリ開発を可能にする強力なツール
- ただし、使いこなすには一定の習熟が必要
- 制約や依存性もあるが、BaaSやカスタムコードで拡張性や柔軟性がある
次回は、FlutterFlowについてより深く理解できるように同じく人気のあるローコードツールである「Adalo」との比較を行う記事も書きますので、合わせて読んでいただけると嬉しいです。
参考資料
FlutterFlow ドキュメント
FlutterFlow YouTube チャンネル
コミュニティフォーラム
FlutterFlow Developer Conference 2024
執筆：@tokuyama.raido、レビュー：@nakamura.toshihiro
（Shodoで執筆されました）
