AIやChatGPTについて日々騒がれていますね。次々新しいAI情報が現れるのでキャッチアップが追いつかないという人も多いのでは無いでしょうか?

FlutterFlowにもOpenAIのAI機能が組み込まれていて、自動でコードを生成してくれる(プログラミングしてくれる)機能があります。

「AIがプログラミング・コードを生成してくれる」ってすごすぎないですか?
それがFlutterFlowではデフォルトの機能として搭載されているんです。

今日はFlutterFlowのAIコード生成機能Open AI Codexについて見ていきたいと思います。

FlutterFlowのCustom Function(カスタムファンクション)機能とは?

FlutterFlowはノーコード(プログラミングしないで作れる)のアプリ開発ツールですが、custom function(カスタムファンクション)という機能があります。

これは、ノーコードだけで(コーディングしないで)はできない機能も、「ローコード」として「部分的にコードを書く(プログラミングする)」ことで、拡張できる機能です。

これは便利です。しかし、「コードを書けないからノーコードを使ってるのに、プログラミングなんて無理!」と拒否反応を示す人ももちろんいますよね?

しかし、恐れること勿れ。

今はAIがコードを書いてくれるんです!

今日はその方法を解説したいと思います。

FlutterFlowはデフォルトでAI機能:Open AI Codexがある

これは素晴らしいです。AI機能が最初から組み込まれているのです。

custom functionのFunction Codeを作成するところの隣のタブに「Open AI Codex」というのがすでに組み込まれています。OpenAIとはChatGPTを作っている会社ですね。FlutterFlowでもOpenAIは大活躍ですね!

openai flutterflow open ai codex

AIが書いてくれるんです。これならプログラミングも怖く無いですよね?

上記のコードも、私は1行も書いていません。

すごい時代になりましたね...!

FlutterFlowでAIにプログラミングしてもらう方法

では具体的な方法を書いていきましょう。

FlutterFlowでAIに自然言語で指示してプログラミングしてもらえる

自然言語で依頼できるのがポイントです!これはすごいです。おかげでめちゃくちゃ簡単です!

今は英語でしか指示できないのですが、とはいえそのままGoogle翻訳にかければいいので何一つ問題ありません。英語がわからなくてもプログラミングがわからなくても大丈夫。

今回は、「誕生日から年齢を計算する関数」をAIにつくてもらう例で説明してみたいと思います。

まずは関数のReturn(戻り値)とArguments(引数)を定義する

これだけはする必要があります。

Arguments(引数)とは、その関数に渡してあげるインプット情報です。

Return(戻り値)とは、その関数が計算した結果を戻してくれるアウトプット情報です。

今回は「誕生日から年齢を計算する関数」ですから、
引数には「誕生日」をdatetime型で、戻り値には「年齢」をinteger型で返してもらうように設定します。

flutterflow カスタムファンクション return value & arguments AI codex

面倒なのはここまでです。あとはAIにやってもらいましょう。

依頼文を日本語で書き、翻訳する

まずは日本語でやりたいことを書きましょう。

「誕生日から年齢を算出してください」

などとかけばわかりやすいと思うので、それをGoogle翻訳にかけます。

結果をそのままコピーします。簡単ですね。

翻訳結果をFlutterFlowのOpenAI Codexに貼り付け

以下のようにコピーした内容を貼り付け、右の矢印ボタンを押します。

するとしばらくまつと上記のようなコードが生成されます。

コードが読める人は一応内容をチェックする方がいいでしょう。全く読めない人はテストして挙動が正しいか確認しましょう。

生成されたコードを保存し動作確認

コードを保存したら次はTest Functionタブで動作確認します。

問題がないか十分にテストを行なってください。

Funcition Code Flutterflow Open AI Codex テスト

上記の例だと2000年5月1日生まれの人の年齢を計算すると23と返却されました。

合ってますね!すごく便利です。

FlutterFlowのカスタムファンクションとAIによるコード自動生成:まとめ

今日はFlutterFlowのカスタムファンクションとAIについて書いてきました。

FlutterFlowはノーコードですが、ローコードとしてコードを書いてカスタマイズもできる点が強みです。

しかしローコードの強みはコードをかけない人にとっては弱みでもあります。しかしそれをAIが補ってくれる...これは無敵ですね。

もちろんAIが書いたコードを100%鵜呑みにするのは危険ですのでしっかりとコードの確認・テストは必要になります。それでも圧倒的に作業者の労力を減らしローコードへの障壁を下げていることは間違い無いです。

ぜひAIを活用してコーディングを恐れずFlutterFlowを使い倒してみてくださいね。

アプリ・Webサービスの開発の無料相談はこちら

Adalo、bubble、flutterflow、STUDIOなどのノーコードツールを使うことで、リスクを抑えて低コストでスピーディにビジネスアイデアを形にすることができます。

弊社はスタートアップ・新規事業向けにコストを抑えた最速のアプリ・Webサービスの開発、さらにはサービス立ち上げのコンサルティングから提案を行なっております。

また、法人向けにノーコードのスクール事業を通して内製化のサポートも行っています。

アプリ、Webサービス、LPなどの構築に興味のある方は、こちらからご気軽にご相談ください。