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

Technology部の菊池です。

この記事ではGoogle社が提供するブラウザベースのノーコード開発ツール「FlutterFlow」について解説します。

• FlutterFlowの機能を知りたい
• どういったケースで採用すればいいのか知りたい

というみなさんは、ぜひご参考になさってください。

FlutterFlowとは

FlutterFlowとは、Google社が提供しているノーコード型モバイルアプリケーション開発サービスです。

特徴はGUI操作で直感的にハイブリッドアプリケーション開発をおこなえること。作成されたアプリはFlutterというプログラミング言語で構築され、コードのエクスポートも可能です。

Flutterについて

Flutterとは、Google社が作成したクロスプラットフォーム用のプログラミング言語です。開発者は単一のコードベースでiOS、Android、Web、およびデスクトップ向けアプリケーションを開発できます。

従来のアプリ開発では、iOSとAndroidの両プラットフォームで異なる言語を使用する必要がありましたので、Flutterを活用することで開発工数やコストの大幅な削減が見込めます。

料金

出典：Pricing 2023
FlutterFlowは無料から利用可能なプランがあり、プランによって利用できる機能や料金が変わります。詳しくは公式サイトにてご確認ください。

2023年9月現在においては、トライアルでモバイルアプリを構築する程度の利用であれば、Freeプランでも問題ないといえる状況です。

ただし、コードをエクスポートするにはStandardプラン以上での契約がマスト。Githubとのインテグレーションは、Proプラン以上の契約が必要となるため注意しましょう。

FlutterFlowによる作成実績

FlutterFlowで作成され、公開されているアプリケーションは以下のような例があります。

• Atlas
• Backr
• SparkCharge Mobile

また、FlutterFlowのYouTubeチャンネルではデザイン実績がショートムービーで共有されています。FlutterFlowで制作したアプリの雰囲気を掴みたい方は一度確認してみてください。

弊社LIGでもFlutterFlowを活用した開発実績がございます。料金の概算など知りたい方は、お気軽にお問い合わせください。

FlutterFlowの機能一覧

ここからはFlutterFlowの主要な機能の一部を抜粋して紹介します。詳しい解説は、公式ドキュメントにまとめられていますので、ご参照ください。

Widget機能

FlutterではWidgetによりUIが構築されており、FlutterFlowにおいてもさまざまなWidgetが標準搭載されています。

このようにWidgetをドラッグアンドドロップするだけで、画面レイアウトの作成とビルディングが簡単にできます。

デフォルトのWidgetはMaterial3に対応しています。また、FlutterFlow上においてコードを定義するか、インポートすることで独自カスタム用のWidgetも定義可能です。

Action機能

Action機能とは、ボタン押下などユーザーインタラクションやイベントにもとづき、アプリ内で特定のタスクを実行するための機能です。具体的には以下のような機能があります。

1. 画面遷移

ボタンクリックなどのアクションをトリガーにして、新しい画面に移動

2. API呼び出し

Webサービスやデータベースとの通信を行うためにAPIリクエストを送信

3. データの保存や取得

ローカルデータベースやFirestoreなどのリモートデータベースにデータを保存・取得

4. フォームの送信

入力フォームからデータを収集し、データベースやAPIに送信するアクションを実行

5. カスタム

プログラミングコードを定義し、アクション実行をさせることも可能

Action flow diagram

FlutterFlowではで各イベントに対するアクションをフロー図（（フローダイアグラム）でビジュアライズ的に定義することができ、条件に応じた分岐も実施可能です。

API呼び出し

API Callsという機能が標準搭載されており、呼び出したいAPIを定義することで、さまざまな外部サービスとAPI連携をおこなえます。

Firebase連携

FlutterFlowはGoogle社が提供しているBaaS「Firebase」と連携できます。アプリケーション開発において、バックエンドの構築やデータ管理などの機能を効率的に実装することが求められるため、Firebaseのようなクラウドベースの開発プラットフォームと連携できるのは大きなメリットといえるでしょう。

▼連携できる機能の例

• Firebase Authentication
• Firestore Database
• Firebase Storage など

取得したデータやファイルはBindをおこない、画面表示させることも可能です。

なお、FirebaseやBaaSについては、以下の記事で詳しく紹介しています。

「Firebase」「Amplify」とは？機能比較やどちらを使うべきかの判断基準も紹介

Hiroyuki Kikuchi

2023.04.12

アプリケーション開発でBaaSを使うメリット・デメリットを紹介します

Noppy

2023.06.08

複数人による共同作業

FlutterFlowではプロジェクトに対してコラボレーターを設定できるため、複数人による開発も可能です。

たとえばページごとに作成者を決めてプロジェクトを進行したり、アクション周りのみ別のメンバーに担当してもらうなど、役割を棲み分けることによって、高い生産性を担保できます。

豊富なテンプレート

さらにFlutterFlowは豊富なテンプレートデザインが多数用意されており、開発を効率的に進めることができます。

▼ページテンプレート

▼コンポーネントテンプレート

また、プロジェクト作成時にはサンプルのアプリデザインが選択できるようになっており、サンプルのデータをもとにアプリを構築することも可能です。

▼プロジェクトサンプル

Animation設定

FadeやSlideなどの実装も、ノーコードで簡単におこなえます。

Flutterコードの自動生成

FlutterFlow上で開発した内容は、Flutterコードへエクスポート可能です（※Standardプラン以上での契約が必要）。

つまり、画面（デザイン）だけFlutterFlowで作成し、細かいロジックはコードで構築していくという開発フローも可能となっています。

ノーコードでできないことは？

このようにGUI操作で直感的にレイアウト作成ができるFlutterFlowですが、以下のようなことはノーコードでは実施できません。

• Unitテストの実施

※ノーコードで作られたロジック部分については、単体テストで組み込むことは難しい状況につき、修正によるデグレードリスクがあるため。

• Material3以外のカスタムWidgetを使う場合
  ※ただし、カスタム機能を用いてコーディングすることで、FlutterFlow上でも実行可能

FlutterFlowの利用用途

向いているケース

• 爆速でハイブリッドアプリケーション開発をしたい場合

プロトタイプによるモバイルアプリ構築など、素早く開発をおこないたいケースにおいて有用です。Firebaseと連携すれば、バックエンドとの連携（認証、データのCRUD）も容易になります。

• Flutterについて学習したい場合

プログラミング初心者がFlutterを学習したい場合、Flutterにどんな機能があるかを気軽に確認できるため、試しにさわってみるのもいいでしょう。

• 画面数が少なく、少人数によるアプリケーション開発
  先に記載のとおり、Unitテストの実施ができないため少人数（1人or2人）で管理可能な小規模なアプリケーションであれば、FlutterFlowのみならず、ノーコードプラットフォームは大きな力を発揮してくれると思います。

向いていないケース

• 構造的なフォルダ構成でコード品質を担保したい場合

FlutterFlowを使った開発では、基本的にソースコードは自動生成されます。フォルダ構成等についてクリーンコードになるかどうかは担保されないため、利用を控えたほうがいいケースも考えられます。

• カスタムWidgetを多数使う場合

この場合は直接コードでWidgetを作成し、はじめから全ての実装をコーディングした方が効率的な場合が考えられます。

ただし、事前に大量に作成しておいたカスタムWidgetを流用するような運用をおこなうのであれば、FlutterFlowを使うほうが便利といえそうです。

さいごに

FlutterFlorは他サービスとの連携操作がしやすく、直感的に操作できるため、初心者でもアプリケーション開発を可能とする優れたサービスです。

しかし、実用するかどうかはプロジェクトの要件、開発チームのスキルセットなどに依存します。たとえばモックアップレベルの開発のみに利用するなど、利便性だけにとらわれずプロジェクトに最適な選択肢を検討することが重要です。