こんにちは。今日は、FlutterFlowとCloud Functionsを組み合わせたアプリ開発について書いてみます。簡単なサンプルとして、FlutterFlowからCloud Functionsを呼び出します。CloudFunction側ではAIのAPIを呼び出してロゴを生成する「AIロゴメーカー」を作ってみたいと思います。例えば、「コーヒーショップのロゴを作成して」というリクエストに対して、AIが適切なデザインを提案し、その結果をアプリ上で簡単に表示させることができます。こちらのFlutterFlow公式のドキュメントを見て作ってみました。https://docs.flutterflow.io/customizing-your-app/cloud-functions#3.-create-and-deploy-cloud-functionそれではみていきたいと思います。※最後の方にYoutube動画で解説もしているのでそちらも合わせてどうぞ。アプリ完成イメージ：AIロゴメーカー完成イメージはこんな感じです。めちゃくちゃシンプルですが、「create a simple restaurant logo（シンプルなレストランのロゴ作って）」とプロンプトを入れるとAIによってロゴが生成される、って感じですね。FirebaseのプロジェクトがBlazeプランであることを確認まず、Blazeプラン出ないとCloudFunctionが使えないのでこれを事前に確認しましょう。FlutterFlowのCloudFunctionsから追加次にFlutterFlowの左メニューのCloudFunctionsから入りAddボタンから新規ファンクションを追加しましょう。左メニューのCloud Function Settingsの設定をするメモリーAllocationやリージョン、Returnとパラメータを設定します。これらが適切でないとデプロイできないことがあります。特にリージョンは自分のfirebaseのリージョンと合わせる必要があります。また、リージョンは以下のAdvanced Settingsのリージョンも同じリージョンに合わせる必要があります。これ忘れがちなので要注意ですね。それができたら右上の緑のボタンからBoilerplate Cloud Function CodeをCopy to Editorします。コードを書くあとは「// write your code below」のところに自由にコードを書きます。今回は以下URLの下の方にあるサンプルコードを参考に作りました。https://docs.flutterflow.io/customizing-your-app/cloud-functions#3.-create-and-deploy-cloud-functionデプロイ最後にデプロイしたら完了です。デプロイエラーで困ったら？私は最初なんどもデプロイエラーになりかなりハマりました・・・こちらのコミュニティのエラー改善方法を書いてるサイトがあるのでこちらを参考に頑張ってみてください...！https://community.flutterflow.io/discussions/post/how-to-fix-cloud-function-deployment-errors-all-solutions-discussion-wgfMLgpLrBlmnUIUI作成あとはUI側ですね。シンプルに以下のようにUIを作り、local page stateにlogoImageという変数を用意しました。画像にはpage stateのlogoImageに入ってるimagePathを設定するようにします。CloudFunctionからちゃんと値が返ってくるとここに画像が表示される、という感じです。ボタンアクションからCloud Functionを呼び出し以下のようにCloud Functionを呼び出します。パラメータのpromptにはユーザーがテキストボックスに入力した値を入れます。あとは、CloudFunctionの返却値をpage stateにつっこんで完了です。簡単ですね！Youtube動画での解説はこちら動画でも解説しております。細かい解説に興味がある方はこちらもどうぞ。%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FILxtwVEe88U%3Fsi%3DV7Rgva0VnIgYt9-0%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3EFlutterFlowでCloudFunctionを使ってAIロゴメーカーアプリ：まとめFlutterFlowからCloudFunctionを呼ぶのは特に難しくなくすぐできることがわかりました。CloudFunction側のコードを書く必要はもちろんありますが、今はChatGPTなどのAIがあるのでプログラミングのハードルも下がってきています。ノーコードで一通り作って、一部をローコードでAIを使って書いて素早くコーディングし開発していく。という流れはこれからいよいよ加速していくイメージがありますね。