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で作成され、公開されているアプリケーションは以下のような例があります。
また、FlutterFlowのYouTubeチャンネルではデザイン実績がショートムービーで共有されています。FlutterFlowで制作したアプリの雰囲気を掴みたい方は一度確認してみてください。
FlutterFlowの機能一覧
ここからはFlutterFlowの主要な機能の一部を抜粋して紹介します。詳しい解説は、公式ドキュメントにまとめられていますので、ご参照ください。
Widget機能
FlutterではWidgetによりUIが構築されており、FlutterFlowにおいてもさまざまなWidgetが標準搭載されています。
このようにWidgetをドラッグアンドドロップするだけで、画面レイアウトの作成とビルディングが簡単にできます。
デフォルトのWidgetはMaterial3に対応しています。また、FlutterFlow上においてコードを定義するか、インポートすることで独自カスタム用のWidgetも定義可能です。
Action機能
Action機能とは、ボタン押下などユーザーインタラクションやイベントにもとづき、アプリ内で特定のタスクを実行するための機能です。具体的には以下のような機能があります。
- 画面遷移
- API呼び出し
- データの保存や取得
- フォームの送信
- カスタム
ボタンクリックなどのアクションをトリガーにして、新しい画面に移動
Webサービスやデータベースとの通信を行うためにAPIリクエストを送信
ローカルデータベースやFirestoreなどのリモートデータベースにデータを保存・取得
入力フォームからデータを収集し、データベースやAPIに送信するアクションを実行
プログラミングコードを定義し、アクション実行をさせることも可能
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」とは？機能比較やどちらを使うべきかの判断基準も紹介 アプリケーション開発でBaaSを使うメリット・デメリットを紹介します
Hiroyuki Kikuchi
のっぴー
複数人による共同作業
FlutterFlowではプロジェクトに対してコラボレーターを設定できるため、複数人による開発も可能です。
たとえばページごとに作成者を決めてプロジェクトを進行したり、アクション周りのみ別のメンバーに担当してもらうなど、役割を棲み分けることによって、高い生産性を担保できます。
豊富なテンプレート
さらにFlutterFlowは豊富なテンプレートデザインが多数用意されており、開発を効率的に進めることができます。
▼ページテンプレート
▼コンポーネントテンプレート
また、プロジェクト作成時にはサンプルのアプリデザインが選択できるようになっており、サンプルのデータをもとにアプリを構築することも可能です。
▼プロジェクトサンプル
Animation設定
FadeやSlideなどの実装も、ノーコードで簡単におこなえます。
Flutterコードの自動生成
FlutterFlow上で開発した内容は、Flutterコードへエクスポート可能です（※Standardプラン以上での契約が必要）。
つまり、画面（デザイン）だけFlutterFlowで作成し、細かいロジックはコードで構築していくという開発フローも可能となっています。
ノーコードでできないことは？
このようにGUI操作で直感的にレイアウト作成ができるFlutterFlowですが、以下のようなことはノーコードでは実施できません。
- Unitテストの実施
- Material3以外のカスタムWidgetを使う場合
※ただし、カスタム機能を用いてコーディングすることで、FlutterFlow上でも実行可能
※ノーコードで作られたロジック部分については、単体テストで組み込むことは難しい状況につき、修正によるデグレードリスクがあるため。
FlutterFlowの利用用途
向いているケース
- 爆速でハイブリッドアプリケーション開発をしたい場合
- Flutterについて学習したい場合
- 画面数が少なく、少人数によるアプリケーション開発
先に記載のとおり、Unitテストの実施ができないため少人数（1人or2人）で管理可能な小規模なアプリケーションであれば、FlutterFlowのみならず、ノーコードプラットフォームは大きな力を発揮してくれると思います。
プロトタイプによるモバイルアプリ構築など、素早く開発をおこないたいケースにおいて有用です。Firebaseと連携すれば、バックエンドとの連携（認証、データのCRUD）も容易になります。
プログラミング初心者がFlutterを学習したい場合、Flutterにどんな機能があるかを気軽に確認できるため、試しにさわってみるのもいいでしょう。
向いていないケース
- 構造的なフォルダ構成でコード品質を担保したい場合
- カスタムWidgetを多数使う場合
FlutterFlowを使った開発では、基本的にソースコードは自動生成されます。フォルダ構成等についてクリーンコードになるかどうかは担保されないため、利用を控えたほうがいいケースも考えられます。
この場合は直接コードでWidgetを作成し、はじめから全ての実装をコーディングした方が効率的な場合が考えられます。
ただし、事前に大量に作成しておいたカスタムWidgetを流用するような運用をおこなうのであれば、FlutterFlowを使うほうが便利といえそうです。
さいごに
FlutterFlorは他サービスとの連携操作がしやすく、直感的に操作できるため、初心者でもアプリケーション開発を可能とする優れたサービスです。
しかし、実用するかどうかはプロジェクトの要件、開発チームのスキルセットなどに依存します。たとえばモックアップレベルの開発のみに利用するなど、利便性だけにとらわれずプロジェクトに最適な選択肢を検討することが重要です。
また、LIGブログではAIやアプリ・システム開発など、テクノロジーに関するお役立ち記事をお届けするメルマガを配信しています。
- ＜お届けするテーマ＞
-
- 開発プロジェクトを円滑に進めるためのTIPS
- エンジニアの生産性が上がった取り組み事例
- 現場メンバーが生成AIを使ってみた
- 開発ツールの使い方や開発事例の解説
- AIをテーマにしたセミナーの案内
- 最新のAI関連ニュースまとめ など
「AIに関する最新情報を集めたい！」「開発ツールの解説や現場の取り組みを知りたい！」とお考えの方は、ぜひお気軽に無料のメルマガをご購読くださいませ。
