😈

FlutterFlowのススメ

2022/05/27に公開約5,000字

こんにちは、菅原です。
私の会社ではいくつかの会社に対して新規サービス構築の支援を行っています。中でも、エンジニアリソースの少ない会社に対しては、ローコードツールでの開発体制の構築をしています。

数あるローコードツールの中でも、素晴らしいなと思ったのが、FlutterFlowでした。

https://flutterflow.io/
出たての時から使ってきたのですが、当時と比べてアップデートも入り、最近はとてもおすすめできるツールだと思えるようになってきたので、入門記事として、特徴を書き連ねていきますね。

FlutterFlowとは?

FlutterFlowとは、いわゆるFlutterベースのプロジェクトを作成できる、ノーコード(ローコード)ツールです。Flutterなので基本的にはiOSもAndroidも両対応ですし、それどころかWEBもMacアプリ、Windowsアプリ、Linuxアプリもいけます。Flutterを知らない人は以下を参考に読んでみてください。

https://codezine.jp/article/detail/12718
https://pentagon.tokyo/app/1948/

最大の特徴

FlutterFlowは使い方も難しくなく、最高なのですが、特に素晴らしいな、と思う特徴を3点書きます。

①ローコードツールとして、GUI上で好きにアプリを作成できる

個人的に、Flutterをコードで開発するとき一番面倒なのが、ガワ(UI)を作ることだと思ってます。数々の基本Widgetという部品を組み合わせてレイアウトを組み立てていくのですが、正直グラフィックの調整をコードを書きながらやるのは直感的とは言いづらいですし、コーディング量も多いので面倒です。部品(Widget)ごとにとるプロパティも異なるので、それらを把握しつつレイアウトを組んでいくのは面倒です。

以下、図右のログイン画面を作るのに、ソースコードだと380行くらいで面倒です。

またゼロからレイアウトを組む際は、色のテーマやフォントを統一して管理したり、部品化・コンポーネント化するなどデザインシステムを考えなくてはなりません。(やらなくてもアプリはできるのですが、後で大変になるので必須と考えてます。)

それをFlutterFlowではGUIで直感的に組み立てることができます。きちんとテーマも扱うことができ、色に名前をつけフォントも定義できます。コンポーネント作成はもちろん、さらにはDarkMode、LightModeのテーマも扱うことができるので、思い立ったときにはもう、Dark/Lightモードの実装を終えている!みたいな感じで最強です。

②周辺サービスが簡単に組み込める

FlutterFlow公式で組み込める周辺サービスは非常によく使う物が揃っています。
執筆時点(2022/5/27)だと、以下のようなものがあります。

Firebase経由サービス

Firebaseというのは簡易的にアプリのバックエンドを作成できるGoogleのクラウドコンピューティングサービスです。
対応しているのは以下。

  • Firebase Authentication(認証サービス)
  • Firestore Database(NoSQLデータベース)
  • Storage(ストレージサービス)
  • Functions(サーバレスコンピューティング)
  • Firebase Cloud Messaging(プッシュ通知)
  • Algoria(全文検索エンジン)
  • Admob(デジタル広告)
  • Firebase Dynamic Links (クロスプラットフォームディープリンク)

マネタイズ系

アプリ作りに欠かせないのが、マネタイズ方法。買い切り型のアプリでもマネタイズはできますが、アプリ内課金を実装する場合、以下のようなサービスの組み込みが第1の候補にあがります。

  • Stripe(決済サービス)
  • Paypal(決済サービス)
  • BrainTree(決済サービス)
  • Revenue Cat(サブスクリプション購入)
  • Admob(再掲・デジタル広告全般)

UI系

細かい動きや、アニメーションによってわかりやすいUIを実現することができます。凝ってる感の演出や、シームレスに動いているように見せられるのが良いですよね。

  • Rive Animation(アニメーション)
  • LottieAnimation(アニメーション)
  • Coolers(色テーマ作成ツール)

UX系

便宜的にUX系としてますが、外部サービスの機能を使うことができ、アプリ内の利便性を向上できます。

  • Algoria(再掲・全文検索エンジン)
  • Google Maps(地図)
  • Firebase Dynamic Links (再掲・クロスプラットフォームディープリンク)

開発ツール系

  • Github Integration(ソースコード管理)
  • CodeMagic(アプリのデプロイ)
  • OpenAI(ソースコード自動生成AI)

以上、マネタイズ系も、検索エンジンもすごくよく使うのでめちゃくちゃ楽です。もちろん、これ以外にもAPI連携をしたりして他のサービスと連携することはできます。割と大方のアプリは使いたい物が揃ってるのではないでしょうか?

③ソースコードを落とせる

私的に最強だと思うのがこれです。アプリ開発用のローコードツールあるあるとして、チーム開発に移行したいときや、ツールでできないことを実現しようと思った時に大変苦労することがあると思います。

FlutterFlowはそもそもFlutterベースのプロジェクトを裏で生成してくれておりそのソースコードをダウンロードしてローカルでビルドして開発することも可能です。

この手のノーコードツールは主な使い道がMVP(実用最小限のプロダクト)を作ることだと思ってますが、そこから本格的に本番製品として回せるプロダクトにしていくときに、この特徴は非常に強力かつ有用なのです。

また、FlutterFlowは正直まだリリースから1年ということもあり、「あれ、この機能うまく動かないな・・・」となることもあるのですが、実際ソースコードを読んでみると解決できたりします。

最終手段として、ソースコードを落とせるってのは最強なのです。有料なのですが、30ドルですし最初からガッツリ集団で開発するって方も、UIだけFlutterFlowで作って移行するのもありなんじゃないでしょうか?

無料版と有料版の違い

FlutterFlowは上記のように良い特徴が揃ってます。しかも無料版でできることもとても多く、デプロイ手前までは無料版で十分です。ここで有料版との違いを書いていきますね。

無料版

まずは無料版の機能ですが、下記のようにかなりの機能を使うことができます。

  • Firebase連携
  • Screen Templates
    • プリセットのサンプル画面を持ってきて、自分のプロジェクトに使えます。
  • RunMode
    • 作ったアプリをWeb上で実行して動作確認できるし、そのURLを公開して共有することもできます。
  • サードパーティ連携
    • 上記の特徴のところで書いた周辺サービスがほとんど使えます!
  • Custom Widget/Functions
    • Flutterの外部ライブラリ(Pub)を使ったカスタム機能を作れます

スタンダード版

スタンダード版は月30ドルです。円安がつらいですね。

  • 無料版の機能全て
  • ソースコードをダウンロードできる

プロ

月70ドルです。1万円いかないくらい。自動デプロイのCodeMagic代を考えてもちょっとプロ版はコスパ悪い気がします。

  • 無料版・スタンダード版の機能すべて
  • Sample Apps
    • 公式の用意しているShowCase的なサンプルアプリを利用できます。
  • Custom APIs
    • HTTP通信で任意の外部APIを叩く機能です。
  • Github連携
    • ソースをGithubにコミットする機能。これなくても無料版でFlutterFlow内での履歴管理はできますが。
  • Firestore Content Manager
    • Firestoreの中身をいじれるエディタ。Firestore直接見れば良い気もする
  • AppStore/Google Play Storeに簡単デプロイ
    • CodeMagic経由。最初の申請のめんどくささは変わらないけど、継続運用するなら便利かも。でもその時にはローカル開発に移行してたりする・・・。

どんな人におすすめ?

エンジニア初心者

ローコードツールなので、基本的にはエンジニア経験がない人でもアプリを作ることができます。これからプログラミングを学んでエンジニアになるぞ!って人には、アプリ作りでどんなことを考えなきゃいけないのか、全体感を抑える上で役に立つと思います。慣れてきたら、Custom FunctionsでDartの関数を書いてみたり、落としてきたソースコードを使ってローカル環境でソースを書き換えたりして学んでいくこともできます。

新規サービス開発者

エンジニア経験者の中でも、自分のポートフォリオを作ってみたい方、普通に新規にアプリを作って起業しようと思っている方にはお勧めです。なんといってもゼロから自分で立ち上げるより、UI周りと拡張機能が爆速で組めてしまいます。面倒なことはFlutterFlowにやらせて、本質的に難しい機能だけ自分で書くような形の使い方が良いなと思います。

どんな人に向いてない?

既存サービスの開発者・運用者

すでにサービスが稼働中だったりする人です。既存プロジェクトへの組み込みはあまり向いてません。
部分的に生成して移植しようと思っても、FlutterFlow独自の色・Fontの変数があちこちに埋め込まれますし、拡張機能も独特のUtilityから呼んでます。依存関係が面倒なので移植手術はやらない方が良い気がします。デザインシステム抜きに、変数化もせず本当にガワだけを生成したら簡単に移植はできますが・・・。

Firebase以外のバックエンドを使いたい人

基本Firebaseに依存しまくってるので、素直にFirebaseを使いたくない人はメリットを享受しきれないのかなと思います。

部分的にサーバを他に立てて処理を移譲したりは良いと思いますが、データの管理は基本Firebaseでやるのが吉だと思います。

最後に

私のリファラルリンクおいとくので以下から1ヶ月プロ版無料で登録できます。よければ使ってください。

https://app.flutterflow.io/create-account?referral_id=MTtJ2GUscubL7ud9WeC5fJ9d0X23

上記は私の個人的な意見なので、ディスカッションは大いにウェルカムです!コメント欄でも、ご意見ください!

*(以下番宣)

上記、興味あればFlutterFlowを使ったアプリ開発の支援も行っているので興味あればお声がけしてください!

では!

https://zenn.dev/sugawara/articles/a8b00e3b021776
https://zenn.dev/sugawara/articles/0c28758d69b731
https://zenn.dev/sugawara/articles/ea605cf1bc1eeb

Discussion

ログインするとコメントできます