syncfusion-maui-smart-datagrid

Syncfusion MAUI Smart DataGrid の実装

Syncfusion .NET MAUI Smart DataGrid（SfSmartDataGrid）コントロールを実装およびカスタマイズするための包括的なスキルです。Smart DataGrid は、従来の表形式でのデータ表示と、AI を活用した自然言語機能を組み合わせることで、ユーザーが簡単なテキストコマンドを使って、並べ替え、フィルター、グループ化、強調表示などの複雑な操作を実行できるようにします。データを表形式で表示および操作できるほか、インテリジェントなデータ操作、AI 支援機能、カスタマイズ可能なアシスタントビュー、イベント駆動型アーキテクチャを高度にサポートします。

このスキルを使用する場面

次のような場合に、このスキルを使用してください。

• AI 支援によるデータ操作が必要な .NET MAUI アプリケーションに Smart DataGrid を追加する
• コードを書かずに、ユーザーがデータの並べ替え、フィルター、グループ化、強調表示を行えるよう 自然言語コマンドを有効にする
• インテリジェントなグリッド操作を実現するために、Azure OpenAI などの AI プロバイダーを構成する
• 外観をカスタマイズするテンプレートとスタイルを使って AssistView の UI をカスタマイズする
• 複数列に対応したインテリジェントな並べ替えや高度なフィルターなど、AI を活用した機能を実装する
• GetResponseAsync() などのメソッドやイベントを使って グリッド操作をプログラムから管理する
• アプリケーションのデザイン要件に合わせて ツールバー、ボタン、アシスタントビューのスタイルを設定する

コンポーネントの概要

SfSmartDataGrid（Syncfusion .NET MAUI Smart DataGrid）は、従来のグリッド機能と、AI を活用した自然言語処理を組み合わせた高度なデータグリッドコントロールです。ユーザーは手動で UI を操作する代わりに、簡単なテキストコマンドを使ってデータを操作できます。

主な機能：

• AI 支援による操作： 自然言語のプロンプトを使ってデータの並べ替え、フィルター、グループ化、強調表示を行います
• 複数列の操作： 1 つのコマンドで複雑な操作を適用します（例：複数列による並べ替え）
• カスタマイズ可能な AssistView： 候補、プロンプト、初期コマンドを設定します
• 柔軟なスタイル設定： テンプレートを使ってツールバー、ボタン、アシスタントビューの外観をカスタマイズします
• イベント駆動型アーキテクチャ： AI 操作のリクエスト、開始、終了の各イベントを処理します
• AI サービスとの統合： Azure OpenAI、Gemini、DeepSeek、Groq の各サービスを設定します

ドキュメントとナビゲーションガイド

はじめに

📄 参照： references/getting-started.md

• Syncfusion.Maui.SmartDataGrid NuGet パッケージをインストールする
• MauiProgram.cs にハンドラーを登録する
• 認証情報を使って Azure AI サービスを設定する
• データバインディングを使って基本的な Smart DataGrid を作成する
• OrderInfo データモデルとリポジトリを追加する
• AI 支援による操作を有効にする
• アプリケーションを実行してテストする

AI を活用した機能

📄 参照： references/ai-powered-features.md

• 自然言語による並べ替え（単一列および複数列）
• 階層構造に対応したインテリジェントなグループ化
• 条件（AND／OR ロジック）を使った高度なフィルター
• カスタムカラーを使った行とセルの強調表示
• 操作（並べ替え、フィルター、グループ化、強調表示）の解除
• プロンプトの例と実用的なユースケース

カスタマイズと設定

📄 参照： references/customization.md

• 事前定義された候補を設定するために SuggestedPrompts を指定する
• 起動時に自動実行するプロンプトを設定する
• EnableSmartActions を使ってスマートアクションを有効または無効にする
• ShowAssistView() を使ってプログラムから AssistView を表示する
• GetResponseAsync() を使って AI 操作を動的に適用する
• AssistViewRequest イベントを処理する
• AssistViewOpening イベントと AssistViewClosing イベントを管理する

外観とスタイル設定

📄 参照： references/appearance-styling.md

• 背景、ストローク、太さを設定したスタイルツールバー
• ToolbarTemplate を使用したカスタムツールバーレイアウトの作成
• AssistButton の外観とアイコンの色の設定
• カスタム AssistButton とアイコンのテンプレートの定義
• AssistView のポップアップ、ヘッダー、色のカスタマイズ
• AssistView のヘッダー、バナー、エディターテンプレートの作成
• SmartAssistStyle のプロパティのスタイル設定

AI サービスの設定

📄 参照： references/ai-service-configuration.md

• Azure OpenAI サービスのセットアップ
• ConfigureSyncfusionAIServices() の登録
• API キー、エンドポイント、デプロイ名の設定
• AI サービスの要件と前提条件
• 代替 AI プロバイダーへの対応
• AI サービスの接続に関するトラブルシューティング

チャットクライアントの設定

📄 参照： references/configure-chat-client.md

• Microsoft.Extensions.AI 互換チャットクライアントの設定
• Azure OpenAI のセットアップと設定
• モデル選択による OpenAI API の統合
• セルフホスト可能な Ollama の設定とメリット
• appsettings.json を使用した環境別の設定
• 認証情報への環境変数の使用
• 認証と接続エラーに関するトラブルシューティング

カスタム AI サービスの統合

📄 参照： references/custom-ai-service.md

• IChatInferenceService インターフェイスを使用したカスタム AI サービスの実装
• AI サービスクラスと推論サービスラッパーの作成
• MauiProgram.cs へのカスタムサービスの登録
• カスタム実装の完全な例
• カスタム統合のテスト
• エラー処理とログ記録のベストプラクティス
• 応答の生成とパフォーマンスに関するトラブルシューティング

Claude AI の統合

📄 参照： references/claude-service.md

• Anthropic Claude アカウントの作成と API キーの取得
• ClaudeAIService と ClaudeInferenceService の実装
• MauiProgram.cs への Claude サービスの登録
• 利用可能な Claude モデルと機能

Google Gemini の統合

📄 参照： references/gemini-service.md

• Gemini 用 Google AI Studio API キーの取得
• GeminiService と GeminiInferenceService の実装
• Gemini モデルと生成設定の構成
• MauiProgram.cs への Gemini サービスの登録

Groq AI の統合

📄 参照： references/groq-service.md

• Groq コンソールと API キーのセットアップ
• GroqService と GroqInferenceService の実装
• OpenAI 互換エンドポイントによる Groq モデルの構成
• MauiProgram.cs への Groq サービスの登録

DeepSeek AI の統合

📄 参照： references/deepseek-service.md

• DeepSeek プラットフォームと API キーのセットアップ
• DeepSeekAIService と DeepSeekInferenceService の実装
• DeepSeek モデルと温度設定の構成
• MauiProgram.cs への DeepSeek サービスの登録