fcode-json-schema について
fcode-json-schemaは、JSON SchemaでFactorial Codeのプロセス入力を定義するスキルです。検証やウィジェット、条件付き項目、OAuth入力を含むフォームを構成できます。
主な機能
- 01型付き項目と検証ルールの定義
- 02ウィジェットと機密項目の設定
- 03入れ子項目と条件付き項目の作成
- 04MarkdownコンテンツとOAuth入力の追加
- 05長いフォームのステップ分割
活用シーン
- 01Factorial Codeプロセスの入力定義
- 02スキーマから検証付きWebフォームを生成
- 03フォームでOAuth接続を収集
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ factorialco/ factorial-code-skills --skill fcode-json-schemaインストール後、Claude Code で/fcode-json-schemaを入力して読み込まれたか確認します。
同梱ファイルassets/parametersSchema.sample.json
詳細
Factorial Code — 入力パラメータのスキーマ
プロセスの入力パラメータは、JSON Schema で
parametersSchema.json に定義します。fcode-forms が Web フォームとして
レンダリングするのも同じスキーマなので、スキーマの設計がフォームの設計に
なります。値はコード内で fcode.context.parameters として受け取ります
(fcode-javascript/fcode-python を参照)。
スキーマは react-jsonschema-form でレンダリングされるため、
その ui: オプションを適用できます。
スキーマの作成方法
- 最上位を
"type": "object"とし、propertiesマップ(フィールドごとに 1 エントリ)と、省略可能なrequired配列を設定します。 - フィールドごとに
type(string、integer、number、boolean、array、object)を選び、バリデーション(minimum/maximum、format、enum/oneOf、uniqueItems、ネストしたproperties)を追加します。 - フィールドごとの
uiオブジェクトでレンダリングを制御します(例:"ui": { "ui:widget": "textarea" })。 assets/parametersSchema.sample.jsonを開くと、サポートされているすべての型を網羅した、コピーして使える完全なスキーマを確認できます。形を推測するのではなく、そこからフィールドを調整してください。
フィールドの型とウィジェット(サンプル内)
- テキスト —
"type": "string"、format: "email"、またはtextarea、color、hidden、fileのui:widget。 - シークレット —
"isSensitive": trueを設定すると入力がマスクされます(パスワードやトークンなど)。 - 数値 —
minimum/maximumを指定したinteger/number。 - ブール値 —
"type": "boolean"。 - 選択肢 —
enum(セレクト)、{ const, title }のoneOf(ui:widget: "radio"を指定したラベル付きラジオボタン)、またはui:widget: "checkboxes"とuniqueItemsを指定した配列。 - 構造化データ — 独自の
properties/requiredを持つネストしたobject、文字列またはオブジェクトの配列(type: "array"とitems)、"ui": { "ui:field": "json" }による生の JSON。 - 条件付きフィールド — 最上位の
dependenciesを使って、別のフィールドの値に応じてフィールドを表示/非表示にします(サンプルのanotherBooleanFieldを参照)。 - フィールドの前後に表示するコンテンツ — フィールドごとの
markdownオブジェクトにbefore/after文字列を設定すると、フィールドの上/下にブロック形式の Markdown(テーブルを含む完全な GFM)を表示できます。詳細と使用例はfcode-formsのreferences/advanced.mdを参照してください。 - 長いフォーム — フィールドがおよそ 10 個以上ある場合は、ルートレベルの
ui:stepsノードを使ってステップに分割します。fcode-formsの「§Multi-step forms」を参照してください。 - 外部アカウントの接続 —
"ui": { "ui:widget": "oauth", "ui:options": { "authorizationUrl": … } }を指定したstringまたはbooleanは、ポップアップで OAuth フローを完了するボタンとしてレンダリングされます(objectの場合は"ui:field": "oauth"を指定します。サンプルのoneOauthConnectFieldを参照)。仕様とコールバックについてはfcode-formsの「§Connect an external account」を参照してください。
注意事項
- ファイルフィールド(
"ui:widget": "file")では、プロセスの実行前にファイルが自動的に Storage にアップロードされます。パラメータとして届くのはファイルの内容ではなくfcode.storage://…参照です。fcode.storage.download(...)を呼び出す前にプレフィックスを取り除いてください。 isSensitive: trueは表示とマスキングにのみ影響します。値は引き続きシークレット変数から読み取り、ハードコードしないでください。- OAuth フィールドの
authorizationUrlには、preRenderProcess変数から{ "$ref": "#/variables/x" }を注入する必要があります。{{x}}は使わないでください。Mustache により URL が HTML エスケープされ、ウィジェットが拒否します(コンソールに警告が表示され、ボタンは無効になります)。 - スキーマはフォームのフィールドの唯一の情報源です。フィールドを変更するには、フォームの埋め込みコードではなくスキーマを編集してください。
- スキーマはコードではなくデータです。 実行可能な JavaScript は使用できず、フォームのすべてのテキストは Markdown です(生の HTML はレンダリングされません)。クライアント側の動作は埋め込みページに実装してください。
fcode-formsを参照してください。 - 表示テキストは翻訳できます。 スキーマ内の文字列(タイトル、説明、
ui:placeholder)にはfcode.i18n("key")トークンを指定できます。フォームが配信される前にサーバー側で置換されます。fcode-i18nを参照してください。
コメント
Markdown 対応