fui-skill

FUI スキル

UI とロジックを JSON で定義する、FUI のメタデータ駆動型アプローチを使用して Web モジュールを開発します。

実行コンテキスト

環境に応じて、このスキルを使い分けてください。

• エディター／拡張機能／ワークスペースのコンテキスト：環境から実際にローカルのモジュールフォルダーやファイルにアクセスできる場合は、それらを読み取り、作成、変更します。標準のローカルモジュール構造を直接適用します。
• チャットアプリ／エージェントチャットのコンテキスト：ローカルファイルへのアクセス、既存のワークスペース、モジュールフォルダーの存在を前提としないでください。貼り付けられた JSON、スニペット、スクリーンショット、または明示的に添付されたファイルを使用します。それでも、想定されるファイルを仮想化し、回答を整理し、不足しているものを検討するため、標準のモジュール構造を適用します。
• コンテキストが不明確な場合：利用可能なツールと成果物から推測します。ワークスペースやローカルファイルが明示的に利用可能でない場合は、チャット向けの動作を既定とし、提供されていないファイルを読み取ったり更新したりしたかのように振る舞わないでください。

モジュール構造

ワークスペースは 2 つのレベルで構成されています。エディターまたは拡張機能のコンテキストでは、これらのファイルを直接作成または更新します。チャットのコンテキストでは、同じ構造を使ってモジュールを仮想化し、関連するファイルを説明して、ファイルの内容をインラインで提示します。

プロジェクトルート（{projectId}/）

{projectId}/
|-- .fuix/                        (System metadata — DO NOT hand-edit)
|   |-- project.json              (Project metadata)
|   |-- runtime.json              (Project-level runtime config: apiDomain/login/menu...)
|   |-- modules.json              (Module list)
|   |-- components/               (Shared component registry + tree)
|   |-- imports/                  (Shared import registry)
|   `-- modules/{moduleId}/       (Per-module metadata: info.json, components.json, tree.json)
|-- components/uc-*.vue           (Project-scope custom components)
|-- imports/                      (Project-scope JS/CSS asset files)
`-- modules/                      (All modules live here)
    `-- {moduleId}/               (One folder per module — see below)

モジュールフォルダー（modules/{moduleId}/）

{moduleId}/
|-- index.vue                     (Required: <fui-app lang="json"> config + <script> helper logic)
|-- body.html                     (HTMLOnly=false: supplementary; HTMLOnly=true: full page)
|-- style.css                     (Module CSS)
|-- header.html                   (Head inner content: <link>/<meta>/external <script> — NO <style>)
|-- imports/                      (Module-scope JS/CSS asset files)
`-- components/uc-*.vue           (Optional custom components, use `uc-` prefix)

モジュールのメタデータ（ProjectID、ModuleID、Framework、HTMLOnly など）は .fuix/modules/{moduleId}/info.json にあります。読み取るだけにして、手動で編集しないでください。

構造の詳細なルール、旧形式から新形式への対応表、チェックリストについては、module-structure.md を参照してください。このリファレンスは、ワークスペースを認識する環境とチャット環境の両方で適用してください。

index.vue の構成

index.vue は、設定とロジックを 1 つのファイルにまとめます。

• <fui-app lang="json"> ブロック — コア設定（旧 module.json に代わるもの）。4 つのセクションがあります。

• data：リアクティブな状態と名前付きアクション

• watch：変更時にアクションを実行する監視機能

• controls：UI レイアウト（コンテナ > 行 > 列 > 要素）

• set：モジュール設定（タイトル、メニュー）

<script> ブロック（旧 script.js に代わるもの）には、FUN／EXE アクション、チャートビルダー、変換処理のヘルパーロジックを記述します。

アクションプロトコル

data 内で、名前付きのアクションオブジェクトとしてロジックを定義します。CALL を使用して実行します。

キー	説明
API	呼び出すエンドポイント
IN	入力パラメーター（vueData. または item. 参照を使用）
OUT	応答の保存先（例："myList"）
CALLBACK	成功後に実行するアクション
CONFIRM	最初に確認を表示
MESS	トーストメッセージ
CALL	別の名前付きアクションを実行
IF/THEN/ELSE	条件ロジック
EXE	生の JS（使用は控えめに）

例：

"fetchUsers": {
  "API": "/api/users",
  "IN": { "GroupID": "vueData.selectedGroup" },
  "OUT": "userList",
  "CALLBACK": { "MESS": "Loaded!" }
}

文字列リテラルのルール（重要）

このルールは、アクションプロトコルの IN ブロック内で値を渡す場合に適用されます。 IN では、値にスペースがない場合、FUI コアが文字列値を式または変数として評価することがあります。

文字列リテラルとして値を渡すには、次のパターンのいずれかを使用します。

• バッククォートを前置します："id": "`winUser" または "id": "`winUser`"
• JSON 文字列の中でシングルクォートで囲みます："id": "'winUser'"

id、url、または単なるテキストとして保持する必要がある IN 内のキーなどのフィールドでは、次の方法を推奨します。

{
  "FUN": "openWindow",
  "IN": {
    "id": "`winUser",
    "url": "'/fp/module?mid=123'"
  }
}

Vue コンポーネントの props（f-*、t-*、v-*）では、attr に : がない場合、値は既定で文字列リテラルになります。 例："url": "/fp/module?mid=123" は、すでに文字列リテラルの prop です。

レイアウトシステム（グリッドとコントロール）

重要なルール：controls 配列は、トップレベルで必須のグリッドシステムの構造に従う必要があります。

1. 必須のグリッドラッパー

すべてのコントロールは、コンテナ > rows > cols の構造でラップする必要があります。

"controls": [
  {
    "prop": "fluid grid-list-md",
    "rows": [
      {
        "prop": "row",
        "cols": [
          // Control Objects go here
        ]
      }
    ]
  }
]

2. コントロールオブジェクトの構造

cols 配列内（またはネストされた innerHTML 内）の各項目は、コントロールオブジェクトです。

キー	型	説明
el	String	HTML タグ（div、span）、Vue コンポーネント、または FUI コンポーネント。
attr	Object	属性／ディレクティブ（class、style、v-model、v-on:click）。@ は不可。
w	Number/String	列幅。1-12（グリッド）または pixel value。cols 内の項目では必須です。
col	Object	ラッパー設定。グリッド列の属性（class、style）。
innerHTML	String/Array	コンテンツ。コントロールオブジェクトの再帰的な配列を指定できます。

例：

{
  "el": "v-btn",
  "w": 6,
  "col": { "class": "text-center" },
  "attr": {
    ":disabled": "true",
    "color": "primary",
    "v-on:click": "CALL(vueData.submit)"
  },
  "innerHTML": "Submit"
}

innerHTML は {{ }} に対応しています

innerHTML の文字列では、リアクティブなテキストバインディングに Vue のテンプレート補間を使用できます。

{
  "el": "div",
  "w": 12,
  "innerHTML": "Xin chao {{formData.fullName}}"
}

レイアウトルール

• ラッパー：必ずグリッドラッパーから始めます。
• children は使用しない：ネストには innerHTML（配列）を使用します。
• 属性：要素の属性には attr を使用します。グリッド列の属性には col を使用します。
• イベント：@click ではなく v-on:click（有効な JSON）を使用します。

Vuetify 2 のスタイルルール

優先順位：コンポーネントのプロパティ（color、outlined、dense、elevation）→ ユーティリティクラス（pa-*、ma-*、d-flex、text-*、primary--text）→ カスタムクラス → 最後にインライン style。コンポーネントの .vue ファイル内に <style> ブロックを書かないでください（公開時に削除されます）。モジュールの CSS は style.css に記述してください。<template> 内でバッククォート付きテンプレート文字列を使用しないでください。

手順

0. 作業前に必ずリファレンスを読み込んでください — この手順を省略しないでください：

   FUI に関する作業を始める前に、関連するリファレンスを読む必要があります。トレーニングデータだけを頼りにコード／JSON の作成を始めてはいけません。

   作業の種類	事前に読むもの
   FUI に関するすべての作業	Tier A：controls-patterns.md · ui-patterns.md · module-structure.md
   UI の設計、コンポーネントの選択	+ Tier B：component-quickref.md · component-table.md · components-input.md
   API の呼び出し、SP の作成	+ Tier C：tapi-reference.md

   理由：リファレンスのルールは時間とともに変更されます。トレーニングデータには現在のルールが反映されていません。最新の情報源はリファレンスのみです。誤った作業をしてから調べ直すと、修正コストが倍になります。

1. 作業前に環境を確認する：

   • ワークスペースにアクセスできるエディターまたは拡張機能の環境では、まず実際のモジュールルートディレクトリ（例：my-module/）を作成または更新し、すべてのモジュールファイルをその中に配置します。
   • チャットまたはエージェントチャットの環境では、実際に対応していない限り、フォルダーを作成した、またはファイルを編集したと主張しないでください。代わりに同じモジュール構造を仮想的に示し、必要に応じてフォルダーツリーを提示し、ユーザーが使用するファイルの内容を提供します。
   • チャットで既存のモジュールを確認する場合、ディスクから読み取れると決めつけず、必要なファイルまたはコードスニペットを具体的に依頼します。

2. 新しいモジュールの作成：

   最初の手順 — UI の設計方式を選択する：コードを書く前に、ユーザーに質問するか、次のいずれかの方式を自分から提案します。

   方式	使用する場面
   A — <fui-app> の純粋な設定	データ表示、1つのテーブルに対する CRUD、基本的な入力フォームなど、シンプルなページ。ファイル数が少なく、保守しやすい方式です。
   B — Vue コンポーネント（uc-*.vue）	複数の領域を持つダッシュボード、カスタムレイアウト、複数箇所で繰り返し使う UI ロジック、または <fui-app> 内の controls が約200行を超えるなど、複雑な UI。コンポーネントを使うと、AI と開発者がより適切に管理できます。

   ユーザーが指定していない場合：要件の説明に基づいて自分から提案してください — 知らせずに勝手に選んではいけません。提案理由を簡潔に説明し、確認を待ってください。

   • index.vue（必須）：UI とロジックの設定用 <fui-app lang="json"> ブロック、ヘルパー JS 用の <script> ブロック。
   • style.css（任意）：モジュール CSS。
   • header.html（任意）：<meta> や外部 CSS／JS リンクなど、<head> 内のコンテンツ。ここに何を含めるか判断するため、まず .fuix/modules/{moduleId}/info.json の HTMLOnly を確認してください。
   • body.html（HTMLOnly=false の場合は任意、HTMLOnly=true の場合はページ全体）。
   • components/（任意）：カスタム Vue コンポーネント。
   • 環境がチャットのみの場合は、これらを個別のファイルペイロード、または明確にラベル付けしたコードブロックとして返してください。
   • カスタム Vue コンポーネントを作成する場合、ユーザーが単一画面に限定した一度きりのコンポーネントを明確に必要としている場合を除き、再利用可能な prop／event／slot API をデフォルトにしてください。
   • コンポーネントファイル内に <style> や <style scoped> を追加しないでください（公開時に削除されます）。モジュール CSS は style.css に記述してください。
   • Vue の <template> マークアップ内でバッククォートのテンプレート文字列を使用しないでください。

3. リファレンスドキュメントとコンポーネントの選択：FUI の f-* コンポーネントを優先してください。FUI には多くの機能が標準で組み込まれているため、コード量を減らし、ランタイムをより有効に活用できます。適切な FUI 版がない場合に限り、v-* を使用してください。component-quickref.md と controls-patterns.md の優先順位表を参照してください。

   簡易選択ルール： v-btn の代わりに f-button · text-field と date parsing の代わりに f-date／f-time · v-autocomplete の代わりに f-search · v-data-table の代わりに f-table（CRUD）／f-table-view（読み取り専用） · すべてのグラフに f-echart（f-chart は廃止済み）。

   Tier A — コア（FUI のタスクでは最初に読み込みます）： controls-patterns.md · ui-patterns.md · module-structure.md

   Tier B — コンポーネント（UI の設計時）： component-quickref.md · component-table.md · components-input.md · components-dialog.md · components-display.md · component-design.md · project-config.md

   Tier C — ドメイン（必要に応じて）： tapi-reference.md · pdfmake.md · watcher-patterns.md · advanced-techniques.md · coding-standards.md · fastproject.md · default-function.md · script-map.md · ui-templates.md

   Tier D — 検証（引き渡し前）： verification.md

4. デザインシステム：UI のデザインを決定する必要がある場合は、次の優先順位に従ってください。

   優先順位 1 — プロジェクトローカルの DESIGN.md：プロジェクトのルートディレクトリ（ワークスペース内の {projectId}/DESIGN.md）に DESIGN.md があるか確認してください。存在する場合はそのファイルを使用し、以下の選択肢はすべて無視してください。

   優先順位 2 — ユーザーがスタイルを指定：ユーザーが特定のブランド／スタイル（例：「BMW のスタイルを使う」「Linear のスタイルにする」）を指定した場合は、design-md/<brand>/DESIGN.md を読み込み、該当するデザインシステムを適用してください。

   優先順位 3 — AI が独自に分析して選択：ローカルファイルがなく、ユーザーから指定もない場合は、design-md/ 内のサブディレクトリを確認して利用可能なブランドを把握し、コンテキスト（ページの種類、目的、ユーザー層）を独自に分析して最適なブランドを選択してください。

   • 管理モジュール、CRUD、データ管理 → design-md/fui/DESIGN.md を読み込みます
   • 一般公開用 HTML ページ、ランディングページ、紹介ページ → プロジェクトのトーン／業種に合ったブランドを選択します
   • 判断が難しい場合 → 選択する前にユーザーに確認します

5. モジュールの評価：モジュールのレビューや評価を依頼された場合は、FUI のコーディング規約に基づき、構造、JSON 標準、関心事の分離、エッジケース、ベストプラクティスを確認します。

6. <fui-app> 設定の編集：有効な JSON を使用します。状態は vueData. プレフィックスを付けて参照します。

   • ワークスペース対応環境では、index.vue 内の <fui-app lang="json"> ブロックを編集します。
   • チャット環境では、ファイルシステムにアクセスできるかのように示さず、更新後の JSON コンテンツまたは対象を絞ったパッチスニペットを返します。

7. UI テンプレート：examples/ のテンプレートを再利用し、API とフィールドを変更します。

   • ワークスペース対応環境では、テンプレートファイルを直接コピーまたは編集します。
   • チャット環境では、編集したテンプレートの内容を回答にインラインで記載します。

   利用可能な例：

   ファイル	用途
   component.vue	カスタム Vue コンポーネントのサンプル（uc-*）
   module-patterns.json	完全なモジュールの参照例 — data/watch/controls の組み合わせ：menuChucNang、TypeLoad、addNew フラグのダイアログ、ネストされた IF/THEN/ELSE、一括操作、openWindow+button+ctrlhotkey、_.find、pushRouter、インラインの f-menu、row-prop-object
   f-table-patterns.json	f-table の詳細な参照例 — すべての props、すべての種類のヘッダー（t-check/t-select/t-button/t-link/t-menu/v-chip-group/v-icon/divider）、完全な ctrl-update、ダイアログ内の f-table、default-item-only
   project-patterns.json	project のランタイム設定の参照例（.fuix/runtime.json） — 完全な構造：menuLeft/menu/menuStyle/menuComponent/domainSetting、SystemRight+FunctionRight による right、<fui-app> の set との関係（ページごとの title/menu/apiDomain の上書き）

継続的な改善

複雑なタスクの後に、「FUI スキルに追加すべき教訓やパターンはありますか？」 と尋ねます。ユーザーが誤りやより良い方法を指摘した場合は、references/ の情報をすぐに更新または削除します。スキル内に古い情報を残さないでください。