606 Views
August 23, 25
スライド概要
Build 2025でも発表されていた Telepathy App や Microsoft.Extensions.AI などを活用した実践デモをご紹介しつつ、音声認識・画像解析・AI 統合の最新手法を整理します。また Figma MCP による XAML 自動生成、Copilot Visionでのコード生成、.NET Aspire と AI デバッグ統合など、クロスプラットフォーム開発の生産性を劇的に向上させる技術について紹介していきます。
https://dotnetlab.connpass.com/event/361507/
FPT ジャパン エグゼクティブエバンジェリスト 独立行政法人 国立印刷局 デジタル統括アドバイザー兼最高情報セキュリティアドバイザー Microsoft で C#、.NET、Visual Studio、Windows、iOS、Android、Microsoft Azure 等の開発者向け技術啓発活動を担当後、Dell、Accenture、Elastic、VMware を経て現職まで一貫して同様の活動を継続。現職では NVIDIA AI GPU クラウドサービス、各パブリッククラウドとの AI 関連での協業、マーケティングを担当。政府の仕事は、内閣官房 政府 CIO 補佐官、 デジタル庁 PM を経て、現職を兼務。 AI 駆動開発勉強会主催。Locofy.ai の Regional Developer Advocate も兼務。
.NET MAUI での AI 開発と GitHub Copilot 活⽤の最新動向 鈴⽊章太郎 Executive Evangelist, FPT Japan Holdings
鈴⽊ 章太郎 X (Twitter) ︓ @shosuz https︓//www.docswell.com/user/shosuz FPT ジャパン FPT データ& AI インテグレーション エグゼクティブエバンジェリスト 独⽴⾏政法⼈ 国⽴印刷局 デジタル統括アドバイザー兼最⾼情報セキュリティアドバイザー 略歴︓ AI 駆動開発勉強会主催。Microsoft エバンジェリスト時代から現職 まで⼀貫して開発者向けに最新技術を啓発。GPU クラウド技術訴求、 AI 駆動開発推進。 政府の仕事は、内閣官房 政府 CIO 補佐官、 デジタル庁 PM を経て、 現職を兼務。
セッション概要‧アジェンダ このセッションで得られること • .NET MAUI+AI の最新動向 • Copilot 最新機能活⽤法 • 実践デモ アジェンダ 1.Copilot 新機能 2.MAUI AI 実例 3. 開発実践フロー 4. まとめ
なぜ今 MAUI × AI × Copilot なのか • AI / ⽣成 AI の急速な進化と主流化 企業アプリケーションへの AI 統合が競争優位性に直結 • クロスプラットフォーム開発の重要性 ⼀度の開発でモバイル‧デスクトップ全対応が⽣産性向上の鍵 • GitHub Copilot による開発⾰新 .NET MAUI チーム : #コントリビューター64位、82.4%マージ率達成 • これら3つの技術の融合が開発効率とユーザー体験を劇的に向上させる時代に
Copilot 最新機能
GitHub Copilot 無料化(2025) 個⼈開発者向け無料提供の影響 • 導⼊障壁の⼤幅な低減(ライセンスコスト削減) • 個⼈開発‧学習⽤途での新規参⼊増加 • プロフェッショナル層からホビイスト層まで普及拡⼤ Copilot Free • ⽉2,000件のコード補完 • ⽉50件のチャット対話 • 個⼈開発者向け Copilot Pro/Enterprise • ⾼度な機能‧無制限利⽤ • Copilot Workspace を含む • ビジネスユース向け
Figma MCP とは︖ Figma MCP とは︖ デザインから開発までの⾰新的連携 - Model Context Protocol(MCP)による Figma デザインアクセス - 現在︓HTML/CSS/React ⾃動⽣成が可能 - 将来展望︓XAML ⾃動⽣成への拡張可能性 - Figma から開発まで⼀気通貫のワークフロー実現 主な特⻑ - デザイン意図を正確にコードへ変換 - レスポンシブ設計の⾃動対応 - スタイル・変数の⼀貫性維持
Figma → XAML 変換 : Xamlify by Hector Perez •https://www.youtube.com/watch?v=999SyP5gKaQ https://www.figma.com/community/plugin/1428038235362396881/xamlify 1.Figma AI : "レストランアプリのダッシュ ボード" → ⾃動⽣成 2.Xamlify : デザイン URL 貼り付け → XAML ⽣成 3.Visual Studio : コードペースト → 即座に動作
Copilot Chat, Workspace の進化 Copilot Chat Workspace • 設計サポート(アーキテクチャ提案) • プロジェクト全体の設計サポート • 実装⽀援(コードサンプル、XAML ⽣成) • コードベース全体の把握と最適化 • 質問に対する詳細な回答 • コンテキスト認識による MAUI 特化提案 • リファクタリング提案 2025年の新進化 • コード⽣成から UX デザインまで⼀貫対応 • IDE 内での完全な開発⽀援エコシステム化
Multi-file editing で効率 UP • 複数ファイル横断で修正提案 (MAUI プロジェクトの複数ファイル間の依存性も把握) • XAML/C# コードの⼀括最適化 (デザインとロジックを同時に改善) • ⼤規模リファクタにも有効 (命名規則の統⼀やパターン適⽤も⼀括対応) GitHub Copilot 活⽤例 @copilot MainPage.xaml と ViewModel 全てのボタンスタイルを統⼀して @copilot 依存関係のあるファイルも含めてリファクタリング
Copilot Workspace Multi-file Editing •https://www.youtube.com/watch?v=FdqxwrVSb3w • .NET eShopアプリの リファクタリング • ⾃然⾔語指⽰: "product detail row をコンポーネント化して” • 多ファイル同時編集: Product.razor + ProductDetailRow. razor ⾃動⽣成 • 反復改善: "名前を 変更して" → 瞬時に 全ファイル更新 • エラー修正: 問題を 指摘すると⾃動で修正 提案: Issue → Plan → Implementation → PR の完全⾃動化
Code Review AI による品質強化 1.✅ ⾃動レビューコメント⽣成 1.GitHub Copilot Code Review(2025年4⽉ GA)で実装済み 2.Pull Request 作成時の⾃動レビュー機能 4. ✅ MAUI ベストプラクティスの適⽤ 1..NET MAUI チーム⾃⾝が Copilot を活⽤ (#コントリビューター64位) 2.copilot-instructions.md で MAUI 固有 ガイドライン設定可能 2.✅ XAML 構造最適化の提案 5.✅ パフォーマンス改善提案 1.Visual Studio 2022で XAML バインディング診断 1.GitHub Copilot Enterprise Plan Coding 機能あり Guidelines 機能 2.Copilot Chat 拡張(v0.22以降)で、XAML 2.カスタムレビュー指⽰による品質向上 レビュー対応 3.✅ バインディングエラー検出 1.Visual Studio XAML data binding diagnostics 機能 2..NET MAUI Compiled Bindings でコンパイル 時検証 6.✅ Pull Request ⾃動チェック 1.GitHub Copilot Code Review ⾃動実⾏ 設定 2.VS Code、Visual Studio、GitHub.com 全対応
.NET Aspire 統合と AI デバッグ .NET Aspire ダッシュボード AI による⾼度なデバッグ⽀援 • GitHub Copilot が .NET Aspire と 連携し、複雑なバグの原因特定と解決策 を提案 ダッシュボード統合と問題箇所可視化 • リアルタイムパフォーマンス監視と AI 分析に よる問題の事前検出 • OpenTelemetry 連携 2025年アップデートで導⼊された統合機能により、 開発‧テスト‧運⽤フェーズを通じた AI ⽀援が可能に https://learn.microsoft.com/ja-jp/dotnet/aspire/fundamentals/dashboard/explore
(参考) Google Cloud Next Tokyo 2025 でのハイブリッド EShop シナリオ Cloud Run 上のマイクロサービス+ハイブリッド GenAI 連携を実演 Catalog Service Basket Service Proprietary コンテナなのでAzure Container Apps にも.NET Aspire にもスイッチできる︕ Identity Service Search Service オンプレミス環境 API Gateway Vertex AI Google Cloud LLM Frontend Service Google Cloud Engine オンプレLLM Gemma, Nemotron FPT AI Factory PostgreSQL Cloud SQL Cloud Run + C#/.NET フルマネージドでスケーラブルな Google Cloud Next Tokyo C# / .NET マイクロサービス Redis Memorystore Pub/Sub イベント連携 Vector DB AlloyDB/PG Vector マネージドデータストア Cloud SQL + Memorystore + Pub/Sub で⾼性能バックエンド ハイブリッド AI 連携 オンプレ+クラウド AI を必要に応じて 即時切替 015
(参考) Google Cloud Next Tokyo Proprietary 016
(参考) Google Cloud Next Tokyo Proprietary 017
(参考)
(参考)
Copilot 活⽤で得られる⽣産性 .NET MAUI チーム実績 • Copilot は #64 位のコントリビューター(全期間) • マージ率︓82.4%(dotnet/android) • P50マージ時間︓10時間15分 • 短時間で⾼品質 PR を継続的に⽣産 成功のポイント • copilot-instructions.md によるコンテキスト提供 • ドキュメントリンクで明確なタスク説明 • Microsoft Learn MCP Server との連携
.NET MAUI AI 統合実践
Microsoft.Extensions.AI GA 版の概要 • 統⼀AI 抽象化︓単⼀インターフェースで複数AI サービスにアクセス • マルチプロバイダー対応︓Azure AI Foundry、OpenAI、ONNX、その他 • 強⼒な型安全︓C# の型システムを活かした構造化レスポンス • .NET MAUI 連携︓モバイル‧デスクトップアプリでのAI統合を簡素化 • クロスプラットフォーム︓すべての.NET ターゲットプラットフォームで動作 // シンプルな AI 抽象化の例 var client = new AzureOpenAIClient(new Uri(endpoint), new ApiKeyCredential(apiKey)); var chatClient = client.GetChatClient("gpt-4o") .AsIChatClient(); // 共通インターフェース GA 2025
Telepathy App 概要 AI 駆動型 To-Doアプリ • David Ortinau ⽒ (.NET MAUI Principal Product Manager) 作オープンソース MAUI アプリ • ⾳声⼊⼒+画像解析+ AI 統合 • Microsoft Build 2025 で発表 • Microsoft.Extensions.AI 活⽤ "未来型 AI To-Do コンパニオン"
Telepathy App - ⾳声認識の実装
Plugin.Maui.Audio 活⽤
実装コード例
• NuGet: Plugin.Maui.Audioで
クロスプラットフォーム⾳声処理
// MauiProgram.cs builder.UseMauiApp<App>()
.AddAudio(recordingOptions => {
// iOS/MacCatalyst 向け設定
recordingOptions.Category = AVAudioSessionCategory.Record;
• 全プラットフォームで統⼀API によるマイク
録⾳‧再⽣
});
// 録⾳処理
private async Task ToggleRecordingAsync() {
⾳声録⾳
_recorder = _audioManager.CreateRecorder();
await _recorder.StartAsync();
// 録⾳開始
_audioSource = await _recorder.StopAsync();
TranscribeAsync();
// 変換処理
Whisper-1 変換
}
テキスト⽣成
タスク抽出
// 録⾳停⽌
Telepathy App – OpenAI 連携アーキテクチャ MAUI UI Microsoft.Extensions.AI OpenAI/Azure AI • Microsoft.Extensions.AI による ChatClient 抽象化 • 環境変数によるセキュアな API 鍵管理 • IChatClient + 型付きレスポンスによる強⼒な構造化データ • 複数 AI サービス対応(OpenAI ‧ Azure AI ‧ AI Foundry) var chatClient = foundryClient.GetChatClient("gpt-4o").AsIChatClient(); var response = await chatClient.GetResponseAsync<RecommendationResponse>(prompt);
Telepathy App - コンテキスト理解と UX マルチモーダルコンテキスト統合 • 画像 ‧ テキスト ‧ カレンダー ‧ 通知の統合活⽤ • ユーザー状況を複数ソースから判断して最適化 • AI によるコンテキスト分析で先回り提案 カレンダー連携 位置情報活⽤ 会議前の準備タスク⾃動提案 場所に応じたタスクリマインダー 写真分析 習慣学習 画像内容からタスク抽出 ユーザーパターンに基づく提案
Multimodal Voice Intelligence 概要 ⾳声 AI とは モバイル / XR 時代の UX ⾰命 • ⾳声 → テキスト → AI 処理の統合パイプライン • キーボード⼊⼒からの解放 • プラグイン不要の統合モバイル体験 • ⾮構造化⾳声→構造化データへ • Microsoft.Extensions.AI + Whisper-1 モデル • 移動中 ‧ 運転中も⼊⼒可能に 実現される新体験 • ユーザーの⾃然⾔語から意図を抽出 • 雑談レベルの⾳声からタスク ‧ イベント ‧ 通知を⾃動⽣成
Multimodal Voice Intelligence - Whisper-1 モデル OpenAI Whisper モデル ⾼精度⾳声認識 ‧ 多⾔語対応(80⾔語以上) 堅牢なノイズ耐性 ‧ API シンプル化 Microsoft.Extensions.AI 連携 IChatClient 抽象化 実装例 var openAiApiKey = Preferences.Default.Get("openai_api_key", string.Empty); 複数 AI サービス対応 var client = new OpenAIClient(openAiApiKey); await using var stream = File.OpenRead(audioPath); クロスプラットフォーム⼀貫性 var result = await client .GetAudioClient("whisper-1") .TranscribeAudioAsync(stream, "file.wav"); • Plugin.Maui.Audio で録⾳ → Whisper-1で変換 • ⾼速‧正確な⾳声テキスト化
Multimodal Voice Intelligence - リアルタイム処理 ⾳声⼊⼒ テキスト変換 AI 解析 • Plugin.Maui.Audio で録⾳ → Whisper でリアルタイム AI 転写 • ⾮構造化⾳声データ → 構造化情報へ即時変換 • ユーザー承認フローで精度と信頼性を両⽴ 実装のポイント • バックグラウンド処理で UI レスポンス維持 • 処理中のフィードバックでユーザー体験向上 ユーザー承認
Multimodal Voice Intelligence - MAUI AI パイプライン構築 ⾳声録⾳ ⾳声 → テキスト AI による解析 構造化データ化 依存注⼊によるクリーンなアーキテクチャ builder.Services.AddSingleton<IAudioService, AudioService>(); builder.Services.AddSingleton<ITranscriptionService, WhisperTranscriptionService>(); builder.Services.AddSingleton<IChatClientService, OpenAIChatClientService>(); • プラットフォーム固有コードを抽象化 • Plugin.Maui.Audio によるクロスプラットフォーム対応 • Microsoft.Extensions.AI による柔軟な AI バックエンド切り替え UI 表⽰
AI infused mobile & desktop app development with .NET MAUI | BRK123 https://www.youtube.com/watch?v=tF OFU7LDQlA •重要なポイント 1.Telepathy App: AI がユーザーの 状況(位置、カレンダー、個⼈設定)を 理解してタスクを⾃動優先順位付け 2.⾳声認識: Microsoft.Extensions.AI と Whisper-1 モデルを使⽤して、⾃然⾔ 語の⾳声⼊⼒をタスクに変換 3.技術基盤: .NET MAUI、SQLite、 SyncFusion controls、Claude 3.7 による開発⽀援 Telepathy App デモ •.NET 9. テンプレートとサンプルコンテンツ紹介 •基本的な to-do アプリの機能説明(SQLite、 プロジェクト管理、ライト/ダークモード) •AI 機能の統合説明(テレパシー機能、位置 サービス、カレンダー連携) •AI によるタスクの優先順位付けデモ •個⼈情報(コーヒー好み、年齢など)を活⽤し たパーソナライゼーション Multimodal Voice Intelligence デモ •マルチモーダルインタラクション機能の紹介(カメラ、 マイク、キーボード) •⾳声認識デモ • "I'm in downtown Seattle, and after this session I really need a good cup of coffee or maybe a beer... I need to get a reservation at a local brewery" •Whisper transcription による⾳声からタスク への変換結果
AI Foundry 統合の全体像 Azure AI Foundry + .NET MAUI + Voice Live API • gpt-4o モデルをモバイル/デスクトップアプリから直接利⽤ • Microsoft.Extensions.AI による柔軟な抽象化レイヤー • Voice Live API によるリアルタイム⾳声対話 • 環境変数によるセキュアな API Key 管理 .NET MAUI アプリケーション Microsoft.Extensions. AI IChatClient 主な利点 • 同⼀コードでクラウド/ローカル両モデル切替可能 • 型安全なレスポンス処理(GetResponseAsync<T>) • 依存注⼊パターンとの親和性 Azure AI Foundry gpt-4o エンドポイント 最先端統合機能 • リアルタイム⾳声エージェント(WebSocket 通信) • カスタム AI エージェント(専⾨知識・性格設定) • クロスプラットフォーム⾳声インタラクション 将来展望︓XR アプリ開発との架橋 • 将来の Teams Immersive Events 連携可能性 • Microsoft Mesh 次世代プラットフォーム対応 • ⾳声ベース 3D インタラクション
AI Foundry - .NET MAUI 連携パターン セキュアな API 管理 • 環境変数を使⽤したシークレット管理 • デスクトップ/モバイルでの安全なキー保存 var endpoint = Environment.GetEnvironmentVariable("AI_Foundry_Endpoint"); var apiKey = Environment.GetEnvironmentVariable("AI_Foundry_ApiKey"); var client = new AzureOpenAIClient(newUri(endpoint), new ApiKeyCredential(apiKey)); MAUI アプリ Microsoft.Extensions.AI • ChatClient 抽象化による AI 切替柔軟性 • DI 統合による再利⽤性の向上 Azure AI Foundry
AI Foundry - 構造化レスポンス実装例
型安全な AI 応答の実装
実装コード例
• 特定の型で構造化された応答を取得
var prompt =
• GetResponseAsync<T> により
var response = await
_chatClient.GetResponseAsync<RecommendationResponse>(prompt);
オブジェクト型を指定
• DTO により AI 応答を強⼒に型付け
$"プロジェクト '{projectName}' のタスク推薦";
if (response?.Result
!= null)
{
var rec =
response.Result;
foreach (var t in
rec.Tasks)
{
recommendedTasks.Add(new
ProjectTask { Title = t,
IsRecommendation = true
});
}
}
• プロンプト結果が C# オブジェクトとして直接利⽤可能
• 型安全によるコード補完 ‧ エラー検出の恩恵
Voice Live API - 次世代⾳声インタラクション
リアルタイム⾳声対話の実現
• WebSocket + C# による低レイテンシ⾳声ストリーム
AI Agent モード︓カスタマイズ可能な専⾨エージェント
• ユーザー⾳声 → AI 応答の即時処理
Immersive アプリ開発との架橋
• Web ベース Immersive Experience 統合可能性
• 3D空間でのバーチャルアシスタント体験
• アバター連携による⾃然な対話インタフェース
実装例︓
var client = new AzureOpenAI(endpoint, credential);
using var realtimeClient = await OpenAIRealtimeWS.azure(client);
await realtimeClient.session.update(session: new { modalities = new[] {"text", "audio"} });
応⽤シナリオ
• デジタル体験でのバーチャル接客・教育⽀援
• ⾳声ベース案内・通訳システム
• エンタメ・ゲーミング分野での活⽤
開発フローと運⽤実践
Copilot 活⽤型プロジェクト作成 .NET MAUI × Copilot でプロジェクト⽴ち上げ • 新規プロジェクト作成時に⾃動セットアップ @copilot create .NET MAUI app with AI features • README、コードスケルトン、ディレクトリ構造を⼀括⽣成 • CI/CD パイプライン⾃動設定(GitHub Actions) プロンプト指⽰ Copilot ⽣成 copilot-instructions.md で設定 → 82.4%のマージ率達成(dotnet/android) リポジトリ作成 開発スタート
Figma MCP を活⽤したUI/UX 設計フロー最新動向 デザインからコードまでシームレスな連携 • Figma のデザインを XAML に⾃動変換したい(現在は Xamlify︓Figma → XAML 直接変換のみ) • Code Connect でコンポーネント整合性を確保 • デザイントークン(変数)を⾃動的マッピング Figma デザイン MCP Server 接続 • リアルタイムプレビューで変換結果を即座に確認 • 変更を即座にコードに反映し、開発サイクルを⼤幅短縮 Copilot 解析 XAML ⽣成
まとめ‧ Q & A
本⽇のまとめ‧重要ポイント Copilot AI で⼀気通貫 DX 化 MAUI 最新 AI 統合パターン Figma MCP 活⽤で世界⽔準の DX へ 実サービス導⼊と⽣産性指標
関連リンク‧リソース集1 [公式資料] Telepathyサンプル: github.com/davidortinau/telepathy Multimodal Voice Intelligence 記事 Copilot公式: github.com/features/copilot/whats-new [技術ドキュメント] Microsoft.Extensions.AI: docs.microsoft.com/dotnet/ai/ Azure AI Foundry: ai.azure.com Figma Dev Mode MCP Server: figma.com/dev-mode-mcp [コミュニティリソース] GitHub Copilot Community Forum AI infused mobile & desktop app development with .NET MAUI
関連リンク‧リソース集2 1. Telepathy App - メインデモアプリ リポジトリ: github.com/davidortinau/telepathy 内容: David Ortinau ⽒公式の AI 搭載 MAUI To-Do アプリ 機能: ⾳声⼊⼒、画像解析、AI 統合、Microsoft.Extensions.AI 活⽤ スライド付き: Build 2025 の PowerPoint スライドも同リポジトリに収録 AI infused mobile & desktop app development with .NET MAUI | BRK123 https://www.youtube.com/watch?v=tFOFU7LDQlA 2. Microsoft.Extensions.AI サンプル リポジトリ: github.com/dotnet/ai-samples パス: /src/microsoft-extensions-ai/ 内容: 公式 AI ライブラリの実装例とリファレンス 3. Plugin.Maui.Audio サンプル メインリポジトリ: github.com/jfversluis/Plugin.Maui.Audio サンプル1: github.com/jfversluis/MauiPluginAudioSample (⾳声再⽣) サンプル2: github.com/jfversluis/MauiAudioPluginRecordingSample (⾳声録⾳)
AI 駆動開発 Conference Autumn 準備中︕ 8⽉参加登録開始 予定︕
ご清聴ありがとうございました︕