はじめに
この記事では、FlutterFlowでCustom Functionsを作成する際に利用できるOpenAI Codex機能の使い方についてまとめています。
FlutterFlowでカスタムコードを記述するにはDartに関する知識が必要となってきますが、あまりプログラミング言語に馴染みがない方の場合は、このOpenAI Codex機能を使うことでカスタムコードの生成をサポートしてもらうことができるので、おススメです。
OpenAI CodexはOpenAIが開発した自然言語処理モデルのひとつで、ユーザーが自然言語で説明や要求をすると、Codexはその要求に基づいてプログラムのコードを生成してくれます。FlutterFlowではCustom CodeエディタにOpenAI Codexタブが用意されているので、そこから利用することができるようになっています。
今回は「FlutterFlow × ChatGPT：API Callの設定方法」で作成した「call openAI」というAPI Callの実行時に指定するJSONの作成を行うCustom FunctionsをOpenAI Codexを使って作成していきたいと思います。
作成するCustom Functionsについて
今回使用するAPI Callでは、OpenAIの仕様に合わせて、結果的に以下のようなメッセージオブジェクトの配列を持つJSONを作成する必要があります。
[
{"role": "user", "content": "こんにちは。"},
{"role": "assistant", "content": "こんにちは。私はAIのアシスタントです。何かお手伝いできることがありますか？"},
{"role": "user", "content": "おすすめの本を1冊教えてください。"}
]
上記のようなJSONを作成するのに、今回はオブジェクトの要素（ {"role": "user", "content": "○○○"}の部分）を作成する「generateMessage」と、これらの要素をリスト型にまとめた上記のJSONに変換する「listStringToJson」という名前の２種類のCustom Functionsを作成していきます。
FlutterFlowでOpenAI Codex機能を使う方法
Codexでコード生成を行うには、以下の手順で進めていきます。
ここでは「generateMessage」をサンプルに作成していきます。
Step1.関数名を定義
Function Nameに作成する関数の概要を表すgenerateMessage（任意の名前）を入力します。
関数名はコード生成にも影響を与えますので、できるだけ適切な名前をつけるようにします。
Step2.戻り値を定義
関数の戻り値を設定します。今回は文字列として受け取りたいので、TypeをStringとしておきます。また、戻り値は単一の値で、必ず値を返却しますので、ListとNullableのチェックボックスはオフにしました。
Step3.引数を定義
引数には「role」と「content」をそれぞれStringで定義しておきます。また、戻り値と同様にListとNullableのチェックボックスはオフとしておきます。
引数名に関しても、関数名と同様にコード生成の際に考慮される内容であるため、適切な名前をつけるようにします。
Step4.コードの概要入力と生成
コードの概要説明を入力します。日本語は正確に判断されないため英語で入力します。ここでは「generates a JSON string with a 'role' and 'content'」（'role'と'content'を持つJSON文字列を生成）と入力しました。概要を入力したら「→」の生成ボタンをクリックします。
Step5.生成コードの確認
生成されたコードを確認します。生成されたコードの意味が分かりにくい場合は、ChatGPTを利用して、コードについて解説してもらっても良いかもしれません。
import 'dart:convert';
import 'dart:math' as math;
String generateMessage(
String role,
String content,
) {
// generates a JSON string with a 'role' and 'content'
return jsonEncode({
'role': role,
'content': content,
});
}
Step6.生成コードの適用
コードを「Copy Function」ボタンで、Function Codeエディタに適用します。もし修正したいコードやコメントを追加したい場合があれば、Function Codeエディタ内のコードを修正します。今回は'（シングルクォーテーション）を"（ダブルクォーテーション）に更新しました。
String generateMessage(
String role,
String content,
) {
/// MODIFY CODE ONLY BELOW THIS LINE
// generates a JSON string with a 'role' and 'content'
return jsonEncode({
"role": role,
"content": content,
});
/// MODIFY CODE ONLY ABOVE THIS LINE
}
Step7.生成コードの保存
カスタムコードが完成したら「Check Errors」ボタンでコードをチェックを実行して「Save」しておきます。
以上の手順でカスタムコードの生成が完了です。
同じ要領で「listStringToJson」を作成しておきます。この関数は「generateMessage」で作成した要素をリストにしたJSON（要素を,区切りにして[]で括る）に変換します。
関数名を「listStringToJson」として、戻り値をJSON型、引数名を「listString」としたString型のリストで定義します。
関数の概要には「Decode a list of strings and convert to JSON」（文字列のリストをデコードしてJSONに変換）としてコードを生成しました。
生成されたコードを「Copy Function」で適用して保存します。
import 'dart:convert';
import 'dart:math' as math;
dynamic listStringToJson(List<String> listString) {
// Decode a list of strings and convert to JSON
List<dynamic> listJson = [];
for (String string in listString) {
listJson.add(jsonDecode(string));
}
return listJson;
}
Custom Functionのテスト実行
作成したカスタムコードはTest Function機能を使用して、ユニットテストを実行することができます。想定される引数を指定して「Run」ボタンをクリックし、問題なく結果を受け取ることができるか確認します。
「generateMessage」のテスト実行結果
「listStringToJson」のテスト実行結果
UI側からの呼び出し
UI側から作成したカスタムコードを呼び出して実行するには、Sourceを指定する「Custom Functions」のAvailable Optionsから呼び出します。引数はSet Function Argumentsで指定することができます。
まとめ
今回はFlutterFlowのOpenAI Codex機能の使い方についてまとめました。
OpenAI Codexを効果的に活用するには、関数の概要説明において、出来るだけ曖昧な表現を避けて、クリアで簡潔な言葉を使用することがポイントです。また、入力文字数は100文字以内であることや英語表現を使用する必要がありますので、翻訳ツールなどを活用しながら作成してみてください。
またOpenAI Codexで生成したコードを利用してエラーが発生する場合は、ChatGPTに聞いてみることで解決する場合があります。複雑な仕様のカスタムコードの場合は、ある程度の知識が必要になってくることもありますが、比較的簡単なカスタムコードの場合は、OpenAI Codexを利用することで、開発者はより迅速かつ効率的に作業を進めることができそうですね。
ここまでお読みいただき、ありがとうございました😌
参考ドキュメント
Discussion