【ノーコード入門】Flutterflowとは? スマホアプリApp StoreやGoogle Playも両対応できるアプリが作れるツールを解説

【ノーコード入門】Flutterflowとは? スマホアプリApp StoreやGoogle Playも両対応できるアプリが作れるツールを解説

こんにちは、日本初のノーコードオンラインサロン「NoCodeCamp」のツバサ(@tsubasatwi)です。今回はスマホアプリApp StoreやGoogle Playも簡単に公開できるアプリFlutterflowを解説します。

Flutteflow って? 

FlutterFlow の作成者である元 Google 社員の Abel と Alex が作ったノーコードツールです。
FlutterFlow は、GoogleCloud Partnerであり、現在262,000人以上のユーザーが使っています。(2022/10 時点)

他のノーコード ツールとは異なり、FlutterFlow では、カスタマイズ可能なFlutter コードをエクスポートできるのが特徴です。そのため、WEBもApp Store(iPhone)Google Play(Android)だけでなく、Windowsアプリにも対応できます。

FlutterFlow特徴

最大の特徴は、Flutterというプログラミングに変換することができるということです。万が一、Flutterflowが無くなった場合もFlutterでの開発は継続して進めることができます。またFirebaseでの運用が前提になるので、ユーザー数が大規模であっても自前でサーバーを持っている会社に比べて、レスポンスが遅くなりにくい特徴もあります。

直観的な操作が可能

Flutterflowのエディター画面です。①ウィジェットを②画面に追加して、③で編集します。
マウス操作だけで可能です。直感的なドラッグ&ドロップインターフェースを提供し、コーディングの知識が少ないか全くない人でも簡単にユーザーインターフェースをデザインできます。これにより、アプリのプロトタイピングと開発が迅速かつ効率的に行えます

データ連携API

APIで他のアプリの接続も可能です。例えば、Airtableなどに接続してデータベースを格納させるなども可能です。

デフォルトの接続先として

決済系では

  • Stripe
  • RevenueCat
  • Braintree

が用意されており、

外部の接続先として

  • Github
  • Algoria
  • GoogleAnalytics
  • GoogleMaps
  • AdMob
  • MuxLivestream

また中級者向けですが、直接コードを書いてウィジェットを追加することもできます。

【参考】Costom Code

ハイブリットアプリ

GoogleのFlutterフレームワークをベースにしています。Flutterはクロスプラットフォーム開発を可能にし、一つのコードベースからiOSとAndroidの両方のアプリを生成できます。これにより、開発時間とコストが削減され、アプリの一貫性が保たれます

Firebaseとの統合

Firebaseとの統合をサポートしており、認証、データベース、ストレージなどのバックエンド機能を簡単に追加できます。これにより、開発者はバックエンドの設定にかかる時間を大幅に削減し、より複雑なアプリケーションの開発に集中できます

どんな人が使っているのか?

Flutterflowのページには、日本企業の企業ロゴも掲載されてます

Flutterflow事体は、Golden Kitty 2021ノーコード部門で優勝している注目のツールです。

FlutterFlowで作られたもの

Flutterflowで作られたアプリを紹介していきます。

AB,マネー

 60,000 ユーザーを集めたロシアのアプリ、AppStore 教育部門トップ1にもなり、全てFlutterflowでの構築になります。

Kapsule

ビデオ メッセージを録画して共有する、タイムカプセルのようなサービス

The Alphabet

落ちてくる動物やフルーツを集める落ちものゲームです。

DOT 2 QUIZ

クイズアプリ

FlutterFlow料金プラン(2022/10 時点)

無料,Standard,Pro,Teams の4つが用意されてます。

コードをダウンロードできるのが、Standard 以上なので、最低$30は必要です。(少ないですが、課金しないと使えないテンプレートもあります。)
また、Flutterflowから直接Appstore,GooglePlayへデベロップするには、Proプラン以上が必要です。

サービスとして始めるのを検討しているとProプラン以上は必須なので$70から始める必要があり、海外のネイティブアプリ開発ツールとしては、やや高めな印象を受けます。

【引用】Flutterflow 価格

FlutterFlowどんな人におすすめ?

ノーコードと言われるツールの中では、FlutterFlowは、Firebaseを前提としているため、使うまでにまず
Firebaseとつなげる初期設定が必要になります。ログインしてすぐにアプリを公開できる訳ではないため
最初の部分でややハードルが高いかもしれません。また、日本語のドキュメントもほぼ無いため、英語のドキュメントを読むのが必須になります。

おすすめなのはこんな人
エンジニア
ネイティブアプリで安定したサービスを提供したい人
多機能なネイティブアプリの機能を求めている人

FlutterFlow学習コンテンツ

公式ドキュメント 

他は見なくても、ここだけは必ずチェックするべき!
Flutterflow Docs

Flutterflowは、公式学習教材があるのでそちらが勉強になります。
特に最初のFirebaseの接続方法は、初心者は必須になるはずです。

Firebase Setup In FlutterFlow

しゅんすけさんのYoutube

しゅんすけさんもYoutube始めたようです。

FlutterFlow Community

FlutterFlow Community

公式の質問をしたり、知識を共有したり、仲間のビルダーをサポートしたりするための場所です

https://community.flutterflow.io/c/community-guidelines/

Discord

Flutterflowの公式のDiscord、こちらもCommunityと同じく毎日更新されてます。Help情報がやや多めで、情報が整理されてないですが、こちらの方が情報は早いです。

https://discord.gg/znuMwrvPcP

日本語のFlutterFlow記事

yutaro blog  ノーコードカテゴリで、Flutterflowの対応について記事があります。

FlutterFlowのススメ Flutterメインの開発者ブログ

まとめると

FlutterFlowは、まだまだ日本では事例は無いですが、
Flutterを使っているエンジニア界隈でチラホラ気にしている人が出ているだけという感じのようです。
特徴としてはFlutterコードを使えるという点で、ノーコード会社潰れたらどうするの?問題を解決できているのは安心できる材料だと思います。

ただ、最終的な自由度は高いですが、アプリケーションの開発経験がないと、
初期準備など自由にある程度なれるまでに時間がかかりそうなツールでもあります。

まずは、軽く作ってみようという方はAdaloも検討してみると良いでしょう。

過去のノーコードツールの解説は、note にまとめてあります。

宮崎翼-プロフィール

日本最大級  ノーコードに特化したオンラインサロンNoCodeCampでは、NoCodeに関する勉強をするコミュニティを運営してます。

日本初のノーコードの全国出版でました!
基礎から学ぶ ノーコード開発 (日本語) 単行本(ソフトカバー) – 2021/3/17

ノーコードシフト プログラミングを使わない開発へ

ノーコードを扱える エンジニアに特化した人材紹介

NoCodeCampではエンジニアのスキルを可視化して 最適なマッチングを実現します。 BubbleやFlutterFlowなど、アプリ開発ができるエンジニアを紹介します。

NoCodeツールカテゴリの最新記事