syncfusion-maui-smart-text-editor

Syncfusion .NET MAUI Smart Text Editor の実装

SfSmartTextEditor は、AI を活用した予測候補で入力を高速化する複数行テキスト入力コントロールです。IChatInferenceService を介して Azure OpenAI、OpenAI、Ollama、または任意のカスタム AI サービスと統合でき、AI を利用できない場合はカスタムの UserPhrases リストにフォールバックします。候補はキャレットの近くにインラインまたはポップアップで表示され、Tab キーまたは右矢印キーで確定できます。

このスキルの使用場面

• AI を活用したオートコンプリート機能を備えた複数行テキスト入力を .NET MAUI アプリに追加する
• 候補の表示方法を、インライン（デスクトップ）またはポップアップ（タッチデバイス）に設定する
• Azure OpenAI、OpenAI、Ollama、Claude、DeepSeek、Gemini、または Groq と統合する
• IChatInferenceService を介してカスタム AI サービスを実装する
• テキストスタイル、プレースホルダー、候補の色、ポップアップの背景、または文字数制限をカスタマイズする
• テキスト変更イベントまたは MVVM コマンドに応答する
• エディターにリキッドグラスの視覚効果を適用する

コンポーネントの概要

SfSmartTextEditor コントロールには、次の機能があります。

• AI による予測候補：Azure OpenAI、OpenAI、Ollama、またはカスタムの IChatInferenceService との統合による、コンテキストを考慮した補完
• 柔軟な候補表示：インラインモード（デスクトップ優先のシームレスな入力）またはポップアップモード（タッチ優先のオーバーレイ）を、プラットフォームごとの既定値で利用可能
• オフライン時のフォールバック：ネットワークまたは API を利用できない場合に、AI を使わずに候補を表示するカスタム UserPhrases ライブラリ
• スマートコンテキストエンジン：UserRole プロパティにより、入力状況に応じて候補のトーンと関連性を調整
• 複数の候補確定方法：Tab キー／右矢印キーのショートカット（デスクトップ）とタップ／クリック操作（すべてのプラットフォーム）
• 文字数制限の検証：MaxLength の適用により、指定した上限を超える入力を防止
• 豊富なカスタマイズ：TextStyle、プレースホルダーの色、候補プレビューの色、ポップアップの背景スタイル
• MVVM のサポート：双方向の Text バインディング、TextChanged イベント、リアクティブなデータフローを実現する TextChangedCommand
• 最新のエフェクト：半透明デザインに対応するリキッドグラスエフェクト（iOS/macOS 26+、.NET 10）

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

はじめに

📄 参照： references/getting-started.md

• NuGet パッケージのインストール（Syncfusion.Maui.SmartComponents）
• MauiProgram.cs での ConfigureSyncfusionCore() によるハンドラーの登録
• ConfigureSyncfusionAIServices() による AI サービスの登録
• XAML および C# での SfSmartTextEditor の追加
• コンテキストを考慮した候補表示のための UserRole と UserPhrases の設定
• AI を利用できない場合のオフライン時のフォールバック動作

候補表示モード

📄 参照： references/suggestion-display-modes.md

• インラインモード — キャレットの後に候補をその場で表示（デスクトップ優先）
• ポップアップモード — キャレットの近くにコンパクトなオーバーレイを表示（タッチ優先、Android/iOS）
• プラットフォームごとの既定値と、設定を変更する場合
• Tab キーまたは右矢印キーでの候補の確定
• プラットフォームの制限（Android/iOS では Tab キー非対応）

カスタマイズ

📄 参照： references/customization.md

• Text プロパティを使ったエディターのテキストの設定とデータバインディング
• TextStyle（SmartTextEditorStyle）によるフォントと色の設定
• プレースホルダーテキストと PlaceholderColor
• SuggestionTextColor — 候補のプレビューテキストのスタイル設定
• SuggestionPopupBackground — ポップアップ候補の背景色
• MaxLength — 文字数制限の適用

イベント

📄 参照： references/events.md

• OldTextValue と NewTextValue を含む TextChanged イベント
• XAML でのイベント登録と C# ハンドラーパターン
• MVVM／データバインディングのシナリオ向けの TextChangedCommand
• ViewModel のコマンド設定例

AI サービスの構成（Azure OpenAI／OpenAI／Ollama）

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

• Azure OpenAI — 必要な NuGet パッケージ、エンドポイント／キー／モデルの構成
• OpenAI — API キーとモデルの設定
• Ollama — セルフホスト可能なローカルモデルの構成
• MauiProgram.cs でのチャットクライアントと ConfigureSyncfusionAIServices() の登録
• シナリオに適したプロバイダーの選択

カスタム AI サービス（Claude／DeepSeek／Gemini／Groq）

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

• IChatInferenceService インターフェイスと使用するタイミング
• Claude AI — リクエスト／レスポンスモデル、サービスクラス、登録
• DeepSeek — チャット補完の統合と登録
• Gemini — Google AI Studio の設定、安全性設定、登録
• Groq — 低レイテンシの OpenAI 互換エンドポイント、登録
• カスタムサービスを使用する場合、ConfigureSyncfusionAIServices() を呼び出す必要はありません
• 候補が表示されない場合のトラブルシューティング

リキッドグラス効果

📄 参照： references/liquid-glass-effect.md

• 前提条件：.NET 10、macOS 26 以降または iOS 26 以降
• SfSmartTextEditor を SfGlassEffectView でラップ
• EnableLiquidGlassEffect="True" で有効化
• ガラスの色合いを正しく適用するために Background="Transparent" を設定
• XAML と C# の完全な例