新しいファブリックアイテムを作成する

この包括的なガイドでは、Extensibility Toolkit を使用して Microsoft Fabric でカスタム項目を作成する方法について説明します。好みとエクスペリエンスレベルに基づいて、2 つの方法から選択できます。

[前提条件]

カスタム項目を作成する前に、次の項目があることを確認します。

✅ セットアップガイドを完了し、動作する開発環境を用意する
✅ ワークロードがローカルで実行され、Fabric でアクセス可能である
✅ TypeScript と React に関する知識 (カスタマイズ用)

アプローチを選択する

🤖 AI支援アプローチ (新しい開発者に推奨)

GitHub Copilot を使用して、プロセス全体を対話形式でガイドします。次の用途に最適です。

Fabric Extensibility Toolkit を初めて使用する開発者
プラットフォームのパターンとベストプラクティスを学習する
作業時の説明とガイダンスの取得

🛠️ 手動スクリプト化アプローチ (経験豊富な開発者に推奨)

クイックセットアップには、自動化された PowerShell スクリプトを使用します。次の用途に最適です。

ツールキットの構造に慣れている開発者
複数の項目を効率的に作成する
運用ワークフローと自動化

🤖 AI支援アイテム作成

GitHub Copilot の使い始め

GitHub Copilot では、すべてのベストプラクティスに従って、完全なカスタム Fabric 項目を作成する手順を説明します。 AI は、Extensibility Toolkit パターンを理解し、それらを正しく実装するのに役立ちます。

動作するサンプルプロンプト

項目の作成を開始する実証済みのプロンプトを次に示します。

基本的な項目の作成:

@fabric create a new item called MyDataReport that shows data analysis reports

特定の要件:

@fabric create a custom item for managing data pipelines with these features:
- Pipeline configuration interface
- Status monitoring dashboard  
- Error handling and retry logic

OneLake 統合を使用した複合項目:

@fabric create an item called DataExplorer that:
- Browses OneLake files in the left panel
- Shows file preview in the center
- Saves user preferences and settings

一般的なAI支援プロセス

AI 支援アプローチは、次の反復パターンに従います。

1. 初期計画フェーズ

AI によって要件が分析される
項目の構造とコンポーネントを提案する
todos を使用して開発計画を作成します。

2. コンポーネントの生成

4 ファイルパターン (定義、エディター、空、リボン) を作成します。
適切な TypeScript インターフェイスを実装する
Fluent UI コンポーネントを設定する

3. 機能の実装

特定の機能を追加する
Fabric API との統合
適切なエラー処理を実装します

4. テストと絞り込み

開発環境で項目をテストする
見つかった問題を修正します
パフォーマンスとユーザーエクスペリエンスを最適化する

AI アシスタントの使用

明確な要件から始めます。

I want to create a [ItemType] item that [primary purpose]. 
The item should have [list key features].
Users should be able to [list main actions].

反復処理と絞り込み:

The item looks good, but I need to add [specific feature]

How can I integrate this with OneLake storage?

Can you add error handling for when the API is unavailable?

説明を求める:

Explain why you chose this pattern for the ribbon actions

What's the difference between ItemEditor and ItemEditorDefaultView?

AI コラボレーションのベストプラクティス

具体的: 明確な要件とコンテキストを提供する
各手順を確認する: 先に進む前に生成されたコードを理解する
質問する: 理解できないパターンの説明を要求する
頻繁にテストする: 主要な変更のたびに項目を実行してテストする
フォローアップ: 改良と改善を求める

AI 開発ツールと環境

このリポジトリは、AI ペアプログラミングツールと非常にうまく機能します。ローカルまたは GitHub Codespaces で開発する場合でも、GitHub Copilot やその他の AI アシスタントを使用して、React コンポーネントの編集、ルートの更新、テストスキャフォールディングの生成などのタスクを高速化できます。

ヒント

Starter-Kit リポジトリは AI 対応であり、必要に応じて Hello World 項目を適応させる GitHub Copilot の手順が含まれています。他の AI ツール (Anthropic Claude など) も同じガイダンスに従うことができますが、リポジトリのガイダンスファイルまたはドキュメントを読み取るために構成する必要があります。

特定の AI 支援領域:

AI を使用して項目エディター/ビューコンポーネントをドラフトし、Starter-Kit で使用されるホスト API パターンに適応する
ワークロードマニフェストを要約し、最小限のアクセス許可セットを提案するように AI に依頼する
Codespaces では、Copilot はブラウザーまたは VS Code デスクトップで使用できます。変更をすぐに確認するために開発サーバーを実行したままにする

ヒント

他のビルドを確認したい場合は、拡張機能のサンプルを開き、環境にデプロイします。ここでは、作業を開始するのに役立つ豊富なアイテムの種類を見つけることができます。

迅速な反復とデバッグ

拡張機能フレームワークは、AI 支援を使用する場合の迅速な開発のために設計されています。

開発サーバーと DevGateway を実行すると、Fabric 内で項目を開くと、アプリのコード変更がすぐに反映されます
Fabric iFrame でワークロードがホストされている間は、ブラウザーの開発ツールを使用してデバッグできます
UI、ルート、マニフェストの構成をすばやく反復処理し、Fabric ワークスペースでエンドツーエンドの動作を検証する
AI ツールは、開発時にリアルタイムで問題を特定して修正するのに役立ちます

予想されるタイムライン

シンプルな項目: AI ガイダンスを使用して 30 ~ 60 分
複合項目: 複数のイテレーションを含む 1 ~ 3 時間
高度な項目:広範囲のカスタマイズが付いている半日

🛠️ 手動スクリプトによるアプローチ

CreateNewItem.ps1 スクリプトの使用

手動の方法では、HelloWorld 項目テンプレートをコピーし、新しい項目用に構成する自動化された PowerShell スクリプトを使用します。

クイックスタート

スクリプトディレクトリに移動します。
```
cd scripts\Setup
```

作成スクリプトを実行します。

.\CreateNewItem.ps1 -ItemName "MyCustomItem"

スクリプトの動作

自動ファイル作成:

✅ HelloWorld テンプレートから 4 つのコアコンポーネントファイルをすべてコピーします
✅ アイテム名に合わせてファイルの名前を変更します
✅ すべての内部参照とインポートを更新します
✅ マニフェストファイル (XML および JSON 構成) を作成します
✅ アイコンアセットのコピーと名前の変更

生成されたファイル構造:

Workload/app/items/MyCustomItemItem/
├── MyCustomItemDefinition.ts         # Data model and interfaces
├── MyCustomItemEditor.tsx            # Main editor component
├── MyCustomItemEditorEmpty.tsx       # First-time user experience
├── MyCustomItemEditorRibbon.tsx      # Action buttons and toolbar
└── MyCustomItem.scss                 # Styling

Workload/Manifest/items/MyCustomItem/
├── MyCustomItemItem.xml              # Item type definition
└── MyCustomItemItem.json             # Item configuration

Workload/Manifest/assets/images/
└── MyCustomItemItem-icon.png         # Item icon

必要な手動手順

スクリプトを実行したら、次の手動構成手順を完了 する必要があります 。

1. 環境ファイルを更新する 🚨 CRITICAL

すべての環境ファイルの ITEM_NAMES 変数に新しい項目を追加します。

更新するファイル:

Workload\.env.dev
Workload\.env.test
Workload\.env.prod

次から変更します。

ITEM_NAMES=HelloWorld

に変更する:

ITEM_NAMES=HelloWorld,MyCustomItem

⚠ ️ この手順がないと、アイテムはワークロードに表示されません。

2. Product.json 構成の更新

項目の構成を Workload\Manifest\Product.jsonに追加します。

{
  "items": [
    {
      "name": "HelloWorldItem",
      // ... existing config
    },
    {
      "name": "MyCustomItemItem",
      "displayName": "My Custom Item",
      "description": "Description of what your item does",
      "contentType": "MyCustomItem",
      "configurationSections": []
    }
  ]
}

3. ローカライズ文字列を追加する

Workload\Manifest\assets\locales\の翻訳ファイルを更新します。

en-US.json（およびその他のロケールファイルにおいて）:

{
  "MyCustomItemItem": {
    "displayName": "My Custom Item",
    "description": "Description of your custom item"
  }
}

4. ルーティング構成を追加する

新しいアイテムのルーティングを含むように Workload\app\App.tsx を更新します。

// Add import
import { MyCustomItemEditor } from "./items/MyCustomItemItem/MyCustomItemEditor";

// Add route in the Routes section
<Route path="/MyCustomItemItem-editor" element={<MyCustomItemEditor {...props} />} />

確認手順

すべての手動手順を完了した後:

プロジェクトをビルドします。
```
npm run build
```
開発サーバーを再起動します。
```
.\scripts\Run\StartDevServer.ps1
```
Fabric でテストする:
- Fabric でワークロードに移動する
- 作成ダイアログに新しい項目の種類が表示されていることを確認する
- インスタンスを作成し、正しく読み込まれたかどうかを確認する

ベストプラクティスとガイドライン

HelloWorld の名前を変更しない理由

HelloWorld 項目は、Microsoft から定期的な更新プログラムを受け取る 参照テンプレート として機能します。変更せずに維持する主な理由:

更新プログラムと機能強化: Microsoft は、新機能、バグ修正、ベストプラクティスを使用して HelloWorld を定期的に更新します
統合テスト: HelloWorld によって環境が正常に動作することが保証されます
リファレンスドキュメント: 実装パターンのライブドキュメントとして機能します
旧バージョンとの互換性: 更新プログラムは既存のカスタマイズとの互換性を維持します

推奨するワークフロー

HelloWorld を変更しない: 参照およびテスト項目として使用する
新しい項目の作成: スクリプトまたは AI アシスタンスを使用して個別の項目を作成する
定期的な更新: ベースリポジトリから定期的に更新をプルする
マージパターン: 更新された HelloWorld からカスタムアイテムに新しいパターンを適用する

アイテム開発のベストプラクティス

コンポーネントアーキテクチャ:

✅ 4 コンポーネントパターン (定義、エディター、空、リボン) に従う
✅ 一貫性のあるレイアウトと動作のために ItemEditor コンテナーを使用する
✅ 適切な読み込み状態とエラー処理を実装する
✅ Fluent UI の設計パターンに従う

データ管理:

✅ 複雑なデータを含むアイテムに saveWorkloadItem() を使用する
✅ フォールバックのデフォルト値での読み込みにgetWorkloadItem()を使用する
✅ 定義ファイルに適切な TypeScript インターフェイスを実装する
✅ 未定義/空の状態を適切に処理する

ユーザーエクスペリエンス:

✅ 初めてのユーザーのために明確な空のステートを提供する
✅ 適切な読み込みインジケーターを使用する
✅ 役に立つエラーメッセージを実装する
✅ Fabric の設計パターンとアクセシビリティガイドラインに従う

パフォーマンスに関する考慮事項

遅延読み込み: 必要な場合にのみデータを読み込む
効率的な更新: React パターンを使用して再レンダリングを最小限に抑える
OneLake 統合: createItemWrapper() を使用して適切なスコープを設定する
エラー境界: 全体にわたって適切なエラー処理を実装する

次のステップ

アイテムが作成されたら、次の手順を実行します。

データモデルのカスタマイズ: 特定のインターフェイスで定義ファイルを更新する
コア機能の実装: エディターコンポーネントの主な機能を構築する
空の状態を設計する: 魅力的な初めてのユーザーエクスペリエンスを作成する
アクションの構成: ワークフローに適したリボンアクションを設定する
徹底的なテスト: 開発環境のすべての機能を確認する
運用準備: 発行ガイドに従ってください

トラブルシューティング

ワークロードに項目が表示されない:

✅ すべての .env ファイルのITEM_NAMESを確認する
✅ Product.json 構成を確認する
✅ 開発サーバーを再起動する

ビルドエラー:

✅ 定義ファイルで TypeScript インターフェイスを確認する
✅ すべてのインポートが正しいことを確認する
✅ ルーティングが正しく構成されていることを確認する

ランタイムエラー:

✅ ブラウザーコンソールで詳細なエラーメッセージを確認する
✅ API の統合と認証を確認する
✅ 最初に簡略化されたデータを使用してテストする

その他のリソース

コーディングを楽しんでね! 🚀

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-12-15

次の方法で共有

新しいファブリック アイテムを作成する

[前提条件]

アプローチを選択する

🤖 AI支援アプローチ (新しい開発者に推奨)

🛠️ 手動スクリプト化アプローチ (経験豊富な開発者に推奨)

🤖 AI支援アイテム作成

GitHub Copilot の使い始め

動作するサンプル プロンプト

一般的なAI支援プロセス

AI アシスタントの使用

AI コラボレーションのベスト プラクティス

AI 開発ツールと環境

迅速な反復とデバッグ

予想されるタイムライン

🛠️ 手動スクリプトによるアプローチ

CreateNewItem.ps1 スクリプトの使用

クイック スタート

スクリプトの動作

必要な手動手順

1. 環境ファイルを更新する 🚨 CRITICAL

2. Product.json 構成の更新

3. ローカライズ文字列を追加する

4. ルーティング構成を追加する

確認手順

ベスト プラクティスとガイドライン

HelloWorld の名前を変更しない理由

推奨するワークフロー

アイテム開発のベスト プラクティス

パフォーマンスに関する考慮事項

次のステップ

トラブルシューティング

その他のリソース

フィードバック

その他のリソース

新しいファブリックアイテムを作成する

動作するサンプルプロンプト

AI コラボレーションのベストプラクティス

クイックスタート

ベストプラクティスとガイドライン

アイテム開発のベストプラクティス