FlutterFlowのススメ
■更新履歴
2023/2/22：連携サービス周りの記述を更新しました。
こんにちは、菅原です。
私が運営している会社、GenAiではいくつかの会社に対して新規サービス構築の支援を行っています。中でも、エンジニアリソースの少ない会社に対しては、ローコードツールでの開発体制の構築をしています。
数あるローコードツールの中でも、素晴らしいなと思ったのが、FlutterFlowでした。めちゃくちゃ開発陣が気合い入ってて毎週のようにアップデートが入ります。 出たての時（2021年12月）から使ってきたのですが、当時と比べてかなり使えるアップデートも入り、最近はとてもおすすめできるツールだと思えるようになってきたので、入門記事として、特徴を書き連ねていきますね。
FlutterFlowとは？
FlutterFlowとは、Flutterベースのプロジェクトを作成できる、いわゆるノーコード（ローコード）ツールです。Flutterなので基本的にはiOSもAndroidも両対応ですし、それどころかWEBもMacアプリ、Windowsアプリ、Linuxアプリもいけます。Flutterを知らない人は以下を参考に読んでみてください。
最大の特徴
FlutterFlowは使い方も難しくなく、最高なのですが、特に素晴らしいな、と思う特徴を3点書きます。
①ローコードツールとして、GUI上で好きにアプリを作成できる
個人的に、Flutterをコードで開発するとき一番面倒なのが、ガワ（UI）を作ることだと思ってます。数々のWidgetという部品を組み合わせてレイアウトを組み立てていくのですが、正直グラフィックの調整をコードを書きながらやるのは直感的とは言いづらいですし、コーディング量も多いので面倒です。Widgetごとにとるプロパティも異なるので、それらを把握しつつレイアウトを組んでいくのは面倒です。
以下、図右のログイン画面を作るのに、ソースコードだと３８０行くらいで面倒です。
またゼロからレイアウトを組む際は、色のテーマやフォントを統一して管理したり、部品化・コンポーネント化するなどデザインシステムを考えなくてはなりません。（やらなくてもアプリはできるのですが、後で大変になるので必須と考えてます。）
それをFlutterFlowではGUIで直感的に組み立てることができます。きちんとテーマも扱うことができ、色に名前をつけフォントも定義できます。コンポーネント作成はもちろん、さらにはDarkMode、LightModeのテーマも扱うことができるので、思い立ったときにはもう、Dark/Lightモードの実装を終えている！みたいな感じで最強です。
②周辺サービスが簡単に組み込める
FlutterFlow公式で組み込める周辺サービスは非常によく使う物が揃っています。
現時点（2023/2/22）だと、以下のようなものがあります。
Firebase経由サービス
Firebaseというのは簡易的にアプリのバックエンドを作成できるGoogleのクラウドコンピューティングサービスです。
対応しているのは以下。
- Firebase Authentication（認証サービス）
- Firestore Database（NoSQLデータベース）
- Storage（ストレージサービス）
- Functions（サーバレスコンピューティング）
- Firebase Cloud Messaging（プッシュ通知）
- Algoria（全文検索エンジン）
- Admob（デジタル広告）
- Firebase Dynamic Links (クロスプラットフォームディープリンク)
- 【New!】Firebase Remote Config（設定値をアプリ外のクラウド上で管理できる）
- 【New!】Firebase Crashlytics （本番環境のユーザーが踏んだエラーの検知、分析）
- 【New!】Google Analytics （アクセス解析、コンバージョン追跡など）
- 【New!】Firebase App Check （バックエンドのセキュリティ強化）
マネタイズ系
アプリ作りに欠かせないのが、マネタイズ方法。買い切り型のアプリでもマネタイズはできますが、アプリ内課金を実装する場合、以下のようなサービスの組み込みが第１の候補にあがります。
- Stripe（決済サービス）
- Paypal（決済サービス）
- BrainTree（決済サービス）
- Revenue Cat（サブスクリプション購入）
- Admob(再掲・デジタル広告全般)
UI系
細かい動きや、アニメーションによってわかりやすいUIを実現することができます。凝ってる感の演出や、シームレスに動いているように見せられるのが良いですよね。
- Rive Animation（アニメーション）
- LottieAnimation（アニメーション）
- Coolers（色テーマ作成ツール）
UX系
便宜的にUX系としてますが、外部サービスの機能を使うことができ、アプリ内の利便性を向上できます。
- Algoria（再掲・全文検索エンジン）
- Google Maps（地図）
- Firebase Dynamic Links (再掲・クロスプラットフォームディープリンク)
- 【New!】Mux Live Stream（動画視聴状況の分析）
開発ツール系
- Github Integration（ソースコード管理）
- CodeMagic（アプリのデプロイ）
- OpenAI（ソースコード自動生成AI）
- 【New!】supabase （Backend as a Serviceの一つ。イケてるFirebaseの対抗馬）
以上、マネタイズ系も、検索エンジンもすごくよく使うのでめちゃくちゃ楽です。もちろん、これ以外にもAPI連携をしたりして他のサービスと連携することはできます。割と大方のアプリは使いたい物が揃ってるのではないでしょうか？
③ソースコードを落とせる
私的に最強だと思うのがこれです。アプリ開発用のローコードツールあるあるとして、チーム開発に移行したいときや、ツールでできないことを実現しようと思った時に大変苦労することがあると思います。
FlutterFlowはそもそもFlutterベースのプロジェクトを裏で生成してくれておりそのソースコードをダウンロードしてローカルでビルドして開発することも可能です。
この手のノーコードツールは主な使い道がMVP（実用最小限のプロダクト）を作ることだと思ってますが、そこから本格的に本番製品として回せるプロダクトにしていくときに、この特徴は非常に強力かつ有用なのです。
また、FlutterFlowは正直まだリリースから1年ということもあり、「あれ、この機能うまく動かないな・・・」となることもあるのですが、実際ソースコードを読んでみると解決できたりします。
最終手段として、ソースコードを落とせるってのは最強なのです。有料なのですが、30ドルですし最初からガッツリ集団で開発するって方も、UIだけFlutterFlowで作って移行するのもありなんじゃないでしょうか？
無料版と有料版の違い
FlutterFlowは上記のように良い特徴が揃ってます。しかも無料版でできることもとても多く、デプロイ手前までは無料版で十分です。ここで有料版との違いを書いていきますね。
無料版
まずは無料版の機能ですが、下記のようにかなりの機能を使うことができます。
- Firebase連携
- Screen Templates
- プリセットのサンプル画面を持ってきて、自分のプロジェクトに使えます。
- Sample Apps
- 公式の用意しているShowCase的なサンプルアプリを利用できます。
- RunMode
- 作ったアプリをWeb上で実行して動作確認できるし、そのURLを公開して共有することもできます。
- TestMode
- 作ったアプリをWeb上で実行して動作確認できます。Runmodeより迅速！
- Firestore Content Manager
- Firestoreの中身をいじれるエディタ。Firestore直接見れば良い気もする
- サードパーティ連携
- 上記の特徴のところで書いた周辺サービスが大体使えます！
- Custom Widget/Functions
- Flutterの外部ライブラリ（Pub）を使ったカスタム機能を作れます
- Custom APIs
- HTTP通信で任意の外部APIを叩く機能です。２APIまで無料です。
スタンダード版
スタンダード版は月30ドルです。円安がつらいですね。
- 無料版の機能全て
- ★ソースコードをダウンロードできる
- これはデプロイする前に細々としたカスタマイズするためには必須機能です。
- APKをダウンロードできる
プロ版
月70ドルです。1万円いかないくらい。自動デプロイのCodeMagic代を考えてもちょっとプロ版はコスパ悪い気がします。
- 無料版・スタンダード版の機能すべて
- Github連携
- ソースをGithubにコミットする機能。これなくても無料版でFlutterFlow内での履歴管理はできますが。
- AppStore/Google Play Storeに簡単デプロイ
- CodeMagic経由。最初の申請のめんどくささは変わらないけど、継続運用するなら便利かも。でもその時にはローカル開発に移行してたりする・・・。
- チャットでのFlutterFlow公式サポート
- 最近体制強化されたのか、回答早くなってきました。
- アプリを１クリックで翻訳する機能
- アプリ内のすべての文言を１クリックで翻訳可能です。多言語対応が圧倒的に楽になります。１週間くらいかかる工数が１時間もかからず終わります。
Team版
なんと1人につき70ドル/月です。ちょっと高く感じますね…。
- プロまでの全ての機能
- 請求管理
- デザインライブラリの共有
- 複数アプリを同一のデザインシステムでやる時に役に立つ。コンポーネントを共有したり、色やフォントを共有したりできます。
どんな人におすすめ？
エンジニア初心者
ローコードツールなので、基本的にはエンジニア経験がない人でもアプリを作ることができます。これからプログラミングを学んでエンジニアになるぞ！って人には、アプリ作りでどんなことを考えなきゃいけないのか、全体感を抑える上で役に立つと思います。慣れてきたら、Custom FunctionsでDartの関数を書いてみたり、落としてきたソースコードを使ってローカル環境でソースを書き換えたりして学んでいくこともできます。
新規サービス開発者
エンジニア経験者の中でも、自分のポートフォリオを作ってみたい方、普通に新規にアプリを作って起業しようと思っている方にはお勧めです。なんといってもゼロから自分で立ち上げるより、UI周りと拡張機能が爆速で組めてしまいます。面倒なことはFlutterFlowにやらせて、本質的に難しい機能だけ自分で書くような形の使い方が良いなと思います。
どんな人に向いてない？
既存サービスの開発者・運用者
すでにサービスが稼働中だったりする人です。既存プロジェクトへの組み込みはあまり向いてません。
部分的に生成して移植しようと思っても、FlutterFlow独自の色・Fontの変数があちこちに埋め込まれますし、拡張機能も独特のUtilityから呼んでます。依存関係が面倒なので移植手術はやらない方が良い気がします。デザインシステム抜きに、変数化もせず本当にガワだけを生成したら簡単に移植はできますが・・・。
Firebase以外のバックエンドを使いたい人
基本Firebaseに依存しまくってるので、素直にFirebaseを使いたくない人はメリットを享受しきれないのかなと思います。
部分的にサーバを他に立てて処理を移譲したりは良いと思いますが、データの管理は基本Firebaseでやるのが吉だと思います。
英語が読めない人
FlutterFlowは米国のサービスなので、基本サポートは英語となります。公式ドキュメントも日本語は一切ないので、英語が読めないとつらいかと思います。
最後に
私のリファラルリンクおいとくので以下から１ヶ月プロ版無料で登録できます。よければ使ってください。
上記は私の個人的な意見なので、ディスカッションは大いにウェルカムです！コメント欄でも、ご意見ください！
＊（以下番宣）
日本語でのFlutterFlowの技術サポート/設計/開発請負
上記、興味あればFlutterFlowを使ったアプリ開発の技術サポートや、設計・開発の請負も弊社では行っているので興味あればお声がけください！
弊社お問い合わせ先→ info@genai.co.jp
では！
Discussion