こんにちは。FlutterFlowはノーコードツールですが、ローコードツールでもあるのでなんでもカスタムコードを書けばだいたいできちゃうところが強力ですよね。なのでAIとの相性が抜群です。
今回はAIを使って、超シンプルなインベーダーゲームみたいなものを作ってみました。
こんな感じです。
楽しいですね。これはテキトーに作ってますが、もっとちゃんと作り込めばそれっぽいものになると思います。
カスタムウィジェットCustom Widgetの追加
まずはCustom Widgetを追加します。
ここにコードを書いていきますが、エンジニア以外の人にとってそれはしんどいですよね。ですのでAIを使って書いていきましょう。
AIエディタ：Cursor（カーソル）でコードを書いてもらう
ではとても便利なCursorにコーディングをお願いしましょう。
カーソルの使い方やカーソル自体の説明はこちら
ブログ記事：【FlutterFlow x Cursor】AIコードエディタ「Cursor（カーソル）」を使ってカスタムWidgetを作ってみた
Cursorでコーディングを依頼する
僕はこんな感じでCursorにお願いしてみました。
するとすぐそれっぽいものが出てきました。
これをさっきのFlutterFlow側のカスタムウィジェットに貼り付け保存します。すると、以下のようにCustom Code Widgetsにインベーダーゲームのウィジェットが出てきます。
これを置くだけです！
これでビルドして動かしてみてテストしましょう。適切に動かない部分もあると思います。
そこでCursorに戻ってバグ修正や機能追加をしていきましょう。
例えば以下のように敵の落ち方やGAME OVERの表示などを依頼してみます。
一回で思い通りにいかないことも多いので、以下のようにあらためて問題を指摘してあげて改善していきましょう。
AIを使うポイントは、一回で伝わらなくても挫けずなんども言うことです。諦めずに伝えましょう。
するとこんな感じになりました。
FlutterFlow x Cursor AIでインベーダーゲームを作ってみた：感想
感想は、「とにかく楽しい」ですね。コード書かずにこんなことができるのは楽しいです
そしてあらためてローコードとAIの相性の良さ、可能性を感じますね。
FlutterFlowはノーコードで色んな機能をパパッと作れますし、できない部分をローコードでコードを書けます。そのコードはAIが書いてくれるので、、、めちゃくちゃ早いですよね。楽しいです。
アプリ・Webサービスの開発の無料相談はこちら
FlutterFlow、Adalo、bubble、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。
この機会に、温めていたビジネスアイデアを今すぐ形にしてみませんか？
弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。
また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。
アプリ／Webサービスの開発、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。