micomia株式会社の畑井です。
今回はFlutterFlowで作ることができるWebアプリについてできることできないことを解説していきます。
iOS/Androidアプリと同じコードでWebアプリも作れるので一見便利ですが、注意点も複数あるのでぜひご一読ください。
目次
1.FlutterFlowで作れるWebの正体
FlutterFlowで開発することができるWebアプリは、Googleが提供する「Flutter for Web」というフレームワークをベースに動作しています。
したがってFlutter for WebでできないことはFlutterFlowで作るWebアプリでもできないことになります。
以下では、代表的な制約を5つ紹介します。
2.できないこと① 「広告実装」
Admobを実装したアプリをそのままWebとしてPublishしても利用することができません。
Admob自体はiOS/Androidなどネイティブアプリ向けの広告配信サービスなので当然と言えば当然かもしれません。
Webは「Adsense」という同じGoogle社が出している異なるサービスを利用します。
◾️Admobについて
https://admob.google.com/intl/ja/home/
◾️Adsenseについて
https://adsense.google.com/intl/ja_jp/start/
3.できないこと② 「サブスクリプション」
RevenueCatを利用した課金機能機能をネイティブアプリで設けていた場合も、そのままWebアプリで利用できません。
Stripeなどと連携し、課金機能を設ける必要があります。
Stripeで課金機能を作った場合、単純に繋げるだけでは課金がキャンセルされたことを検知する機能がないので対策が必要です。
4.できないこと③ 「起動速度」
Flutter for WebはSPAという方式を採用しているためアプリ起動時の起動速度を高めるには限界があります。
2024年頃は5秒以上かかっていましたが現在は1〜2秒程度で起動できていますので、あまり気にならない方は問題ありません。
5.できないこと④ 「SEO対策」
アプリ内でユーザーによって投稿された内容が検索にかかるということはありません。
実際にFlutterFlowで作られたアプリを検索にかかるようにするにはHTMLなどで書かれたWebサイトを1つ作成し、こちらを検索にかかるようにしてそのサイトからアプリにアクセスできるようにするという方法を取ります。
6.できないこと⑤ 「Push通知」
これはどの言語を使っても基本的に現状は不可能なのですが、スマートフォンやタブレットにPush通知を出すことができません。
これは、ブラウザがPush通知機能を提供していないためです。
デスクトップへのPush通知自体は可能ですが、FlutterFlowで開発したWebアプリは対象外となっています。
7.さいごに
FlutterFlowでWebアプリを作ることはできますが、制約についてはしっかりと理解している必要があります。
本記事で紹介したようなできないことを把握した上でネイティブアプリと同時に利用することでより幅広いユーザー層の獲得が可能であると思います。



.webp%3Falt%3Dmedia%26token%3Da7c14698-1b08-4fea-89c6-f77a9121f4c5&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D899eeefd-f4c9-44a6-9ec2-3ced0b223ffd&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3Dca25fa6b-e233-43f7-90c3-e68e4c5b0bc5&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D7f18e5f1-cfda-4148-ab86-b3d2e6547262&w=3840&q=75)




.webp%3Falt%3Dmedia%26token%3D6ca2c2ef-9413-4453-b992-55b66b11ed54&w=3840&q=75)



.webp%3Falt%3Dmedia%26token%3D900f385d-12a2-449b-8d1e-83a57cef0088&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D0e802fb0-2dda-44a7-bf80-5d39019635ba&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D3fb3dc66-ecca-402e-8fb8-fbec9407f7f5&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3Ddb21d760-e1ed-4ec2-af28-3462041e31b5&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3Dcce7bd72-f11e-4292-86bf-e6ccf3e7bf32&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D457ff920-e0df-4ff5-95eb-e29f74b73823&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3Dc21fcc77-7404-458d-9eb5-85b8d84ae1bc&w=3840&q=75)
.webp%3Falt%3Dmedia%26token%3D92052f12-5280-49df-877a-b514582e95db&w=3840&q=75)