HapInS Developers Blog

HapInSが提供するエンジニアリングの情報サイト

ネイティブアプリ開発を可能にするノーコード コード×AI「FlutterFlow」とは

はじめに

今回はノーコード開発プラットフォーム「FlutterFlow」についてご紹介していきます。

flutterflow.io

FlutterFlowがどんなノーコード開発プラットフォームかと言うと、「AIとコーディングを組み合わせて開発ができるネイティブアプリ開発に特化したノーコード」です。

世界中で爆発的にユーザー数を増やしているこのノーコードですが、実際にどんな特徴があるのか、従来のノーコード開発プラットフォームと比較してどのような機能が備わっているのかをご紹介したいと思います。

実際にどんな開発ができるのか、事例はこちらをご覧ください

www.youtube.com

AIチャット機能を備えた多言語ドキュメント説明アプリ「Totoy」

Totoy - AI Document Explainer

多国籍ヘルスケアプラットフォーム「TrustEHR」

コミュニティ主導型目標管理プラットフォーム「BOSA」

Bosa | Get your goals out of your head and into action.

特徴

直感的なユーザーインターフェースと使いやすさ

FlutterFlowは、直感的なドラッグアンドドロップの操作により、初学者や非技術者にもアプローチしやすいノーコード開発プラットフォームです。

開発者は、複雑なコーディングを行うことなく、WEB上で直感的に要素を配置し、アプリのレイアウトを設計できます。

このようなユーザーインターフェースは開発者だけでなく、依頼者と画面を一緒に見ながら認識のすり合わせを行うことが可能です。

豊富なテンプレートとプリセットコンポーネント

FlutterFlowは、さまざまな業種やニーズに対応するための豊富なテンプレートとプリセットのコンポーネントを提供しております。

これらのテンプレートは、一般的なアプリのレイアウトやデザインパターンに基づいており、開発者はこれらを使用して開発工数を削減することが可能になります

プリセットのコンポーネントには、フォーム、ボタン、リストビューなど様々なものが含まれ、これらを部分的に組み合わせたり使いまわしをすることで、開発の手助けをしてくれます。

リアルタイムプレビューとテスト

FlutterFlowのリアルタイムプレビュー機能は、ノーコード開発プラットフォームでは定番のオススメ機能です。

ユーザーインターフェースの話でもお伝えしたことに加え、開発画面だけではなく、プレビュー機能によってアプリが実際にどのように動くのか・どう変更されたかをリアルタイムで確認することができます

さらにAPKファイルをその場でエクスポートしてくれるため、Android端末でインストールすることで実際にスマホで操作することが可能です。

また、組み込まれたテスト機能にはバグやエラーの報告を報告してくれるため、早期に修正することができます。

これらの機能は、アジャイル開発のようにテストとフィードバックを可能にしてくれるため、アプリの品質を保ちながら開発を行うことが可能です。

従来のノーコード開発プラットフォームとの比較

ネイティブアプリの開発が可能

FlutterFlowの大きな特徴はなんと言ってもネイティブアプリ開発ができることです。

従来のノーコード開発プラットフォームでは、WEBアプリ開発をすることはできてもネイティブアプリ化することができるものは多くありません。

FlutterFlowは、Flutterをベースとして開発しているためiOSAndroidの両方を同時に開発できる仕様になっており、また開発中にAPKファイルをダウンロードすることでスマホでアプリの操作テストすることも可能です。

部分的なコーディングによる拡張機能

FlutterFlowでは、CustomCodeという機能が備わっているため、関数やウィジェット・アクションをコードによって開発することが可能です。これも他のノーコード開発プラットフォームにはない機能になります。 ノーコードで一番ネックになってくる部分と言えば、実現できない技術が出てくることだと考えられます。

FlutterFlowは、Flutterでプログラミング開発する時と同様にpub.devのライブラリやパッケージを使用することができるため、プログラミング開発する場合とほぼ同じ技術を再現することができます。

pub.dev

困ったときにプログラミング開発できるとノーコードにとって便利な機能です。

生成AI機能

FlutterFlowでは、AIによる生成機能が備わっています。

生成AIでは、主にコード・ページ・DB設計などの生成を行うことが可能で開発工数を大幅に削減することが可能です。

コードの生成は先ほど述べた、関数とアクションのコード生成を実施します。

例)選択した2点の距離を算出して

ページの生成は、プロンプトのイメージに合ったページを作成します。

例)プロフィールの画像、タイトル、タグ、紹介を記載した記事詳細ページを作成して

DB設計では、プロンプトのイメージに合ったDBを作成します。

例)販売管理システムに使用する取引先情報と過去の案件情報のデータベースを作成して

コードの出力でプログラミング開発が可能

FlutterFlowでは、Flutterのコード出力が可能です。

出力したコードを利用してそのままプログラミング開発を行えます。

ノーコードによるMVP開発からのプログラミング開発でスケールアップを実施する際に強力な機能と考えられます。

価格

フリープラン・スタンダードプラン・プロプランがあり、ネイティブアプリ化をする際にはプロプランが必要になります。

しかし、従来のノーコード開発プラットフォームと異なるのは、1つのアプリに対するプランではなく、1つのアカウントに対するプランです。

いくつアプリを開発しても追加でプランの費用を払うことはありません。

つまり、ユーザー用のアプリと管理用のアプリを別々で開発することができ、追加費用は必要ないということです。

  • フリープラン:$0/月

    • 開発画面での開発
    • モバイル、WEB、デスクトップアプリ用の構築
    • APIとデータの統合
    • WEB公開
  • スタンダードプラン:$30/月

    • freeプランの内容を含む
    • コードのダウンロード
    • APKファイルのダウンロード
  • プロプラン:$70/月

    • スタンダードプランの内容を含む

バックエンド

FlutterFlowでは、主にFirebaseでの連携を推奨しており、Firebaseで連携した際の開発がスムーズになるように設計されています。

また、SupabaseというFirebaseの代替となるオープンソースPostgreSQLデータベースのBaaSサービスとの連携もリリースされています。

RDBで構築ができるため、開発したいアプリによってバックエンドを選択できるようになりました。

その他のデータと連携をする際はAPI連携の機能があり、他のサービスとのデータ連携が可能です。

信頼性

エンタープライズプランでは、金融、小売、製造、コンシューマー向けサービス開発をサポートし、大手企業からの信頼も寄せています

さいごに

いかがでしたでしょうか。 FlutterFlowは、ノーコード開発プラットフォームの中でもAIとコーディングの機能が備わっていることによって、開発の幅がグンッと上がっているにもかかわらず品質を保ちつつも開発工数を削減できるノーコードとなっております。

我々HapInSでは、スタートアップの開発支援の際は、ただ開発するだけではなく仮説検証の段階から伴走してお手伝いしておりますのでもし興味があれば一度ご連絡ください。

blog.hapins.net